magiclex / 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

How to use the package?

Installation

npm install --save quartz-design-system

Usage

import React, { Component } from 'react'

import MyComponent from 'quartz-design-system'
import 'quartz-design-system/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}

How to develop components for the package?

Run npm start from the root to compile files automatically.

Simultaneously, run npm startfrom example folder in order to preview component in the browser.

License

AGPL-3.0 Licence © logicalclocks