Giter Site home page Giter Site logo

quartz's Introduction

quartz-design-system

Logical Clocks Design System Library

header image

NPM JavaScript Style Guide

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

Using locally

You can use the library locally with the help of yalc. Just run yarn publish-local here and then do a yalc link @logicalclocks/quartz wherever you wanna use it.

To publish changes you can do yarn dlx yalc push. After that, the changes will be "published" to the local registry.

quartz's People

Contributors

deividcingolani avatar dependabot[bot] avatar ehsan-github avatar ermiasg avatar giardiv avatar guceda avatar javierdlrm avatar jmaylin avatar magiclex avatar mstrluke avatar mw-kupros avatar o-alex avatar semantic-release-bot avatar siroibaf avatar snqb avatar ssssarah avatar vatj avatar yevgenchop avatar zheyunwu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.