ssssarah/quartz

Logical Clocks Design System — NPM Package

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 'quartz-design-system'

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:

{
    "rebass": "^4.0.7",
    "react": "^16.13.1",
    "emotion-theming": "^10.0.27"
}

How to develop components for the package?

Run npm run storybook

Put new component in

How to build?

Run npm run build

License

AGPL-3.0 Licence © logicalclocks

Run locally

Run npm install and then npm run storybook

Build locally

Run npm install and then npm run 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