quartz-design-system

Logical Clocks Design System Library

The current repo is the implementation of the library of the design system of Logical Clocks, so called Quartz.

• NPM package of React components TS
• use storybook as documentation
• use Rebass as a base CSS frame and Emotion for overwriting style

The DS is first experimented on Figma before being implemented: https://www.figma.com/file/mvY1f3xMXUEd6szvT82FxB/Feature-Store?node-id=327%3A0

Github Pages

An online version of the Storybook can be found here: Quartz Storybook.

The version deployed corresponds to the dev branch and is updated on every new commit.

How to use the package?

Installation

NPM

npm install --save @logicalclocks/quartz

Yarn

yarn add @logicalclocks/quartz

Usage

import React from 'react';

import { ThemeProvider, Button } from '@logicalclocks/quartz';

const App = () => (
  <ThemeProvider>
    <Button>My button</Button>
  </ThemeProvider>
);

Since components are built on rebass, those have extended props from Box or `Flex' components. It means that you can add some extra styles if they needed.

For example:

<Button p="30px 40px 10px 0px" m="10px" width="auto">
  Button
</Button>

Put ThemeProvider Context on the top of components tree to provide the default theme.

The library has peer dependencies which need to be installed in a main project:

{
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
}

How to develop components for the package?

Run yarn storybook

Put new component in

How to build?

Run yan build

License

AGPL-3.0 Licence © logicalclocks

Run locally

Run yarn storybook

Build locally

Run yarn build-dev

Troubleshooting

Delete node_modules and dist folders then follow Build locally or Run locally instruction

On repo update

Follow Build locally or Run locally instruction