@madecki_clearcode/design-system v1.0.0

UI Kit is a React UI component libraries using Styled Components.

Installation

UI Kit

UI Kit is not yet available as a npm package therefore to use this library in another project you need to build it. We also suggest you to use yarn instead of npm

Install Dependencies

After pulling project from repository you must install dependency.

yarn

Build library

The next step is to build project.

yarn build

Add to external project

by dependency

Add UI-Kit project to dependency. You don't know how to find path to UI-Kit? It's quite simple, you can use relative path or absolute path. If you would like to use relative path it will start with ../ and have directory name ui-kit for example. It means you go to the parent directory and ui-kit, full path looks like ../ui-kit, however UI-Kit and your project must be in the same directory. You can also move up two or more directory ../../ etc.

-- Project
  -- ui-kit
  -- your_project

Absolute path depends on your system. On Windows can looks like C:/ or %USERPROFILE%/ etc. On Unix it can be /Users/... or ~projects/... etc.

{
  "dependencies": {
    "@clearcode/design-system": "file:../ui-kit"
  }
}

or add dependencies by CLI. Remember the library path depend on your local directory structure.

yarn add file:../ui-kit

by link

In library

yarn link

In project

yarn link @clearcode/design-system

Remember link is just temporary linking ui kit to your project and when you update some dependency or add new (in external project), you will need to use yarn link @clearcode/design-system again.

Usage

ThemeProvider

First what you want to do is add ThemeProvider and GlobalCSS to your project. ThemeProvider propagate theme to all components and GlobalCSS reset margins, paddings etc. from all elements.

import ReactDOM from 'react-dom/client';
import { ThemeProvider, GlobalCSS } from "@clearcode/design-system"

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider>
    <GlobalCSS />
    <App />
  </ThemeProvider>
);

Use component

Here is an example of a basic app using UI Kit H1 component:

import { H1 } from "@clearcode/design-system"

const Header = ({...props}) => {
  return (
    <>
      ...
      <H1>Hello World</H1>
      ...
    </>
  )
}

Override Theme

Theme can be override by passing theme property in ThemeProvider. You can to pass whole theme object or use createTheme function to override only what you want. For example:

import ReactDOM from 'react-dom/client';
import {ThemeProvider, GlobalCSS, createTheme } from "@clearcode/design-system"

const root = ReactDOM.createRoot(document.getElementById('root'));

const theme = createTheme({
    colors: {
      primary: {
        600: "#0000FF"
      }
    }
  }
)

root.render(
  <ThemeProvider theme={theme}>
    <GlobalCSS />
  </ThemeProvider>
);

Other commands

Launch Storybook

yarn storybook

Runs storybook app in the development mode.\ Open http://localhost:6006/ to view it in your browser.\ Storybook allows you to see and test all of available components and prepared templates

Launch linters

yarn lint

Runs eslint and type checking in the app.

yarn lint:css

Runs stylelint in the app.

Git Flow

Commit changes

To keep semantic commits, each commit message it's validated by commitlint: Example commit message: feat(UKD-01): commit subject/description - where feat is a type, and UKD-01 is a scope.

Available types:

• build: changes affecting build systems or external dependencies
• chore: updating grunt tasks etc.; no production code change
• docs: documentation-only changes (including storybook)
• feat: a new feature
• fix: a bug fix
• hotfix: required fixes for urgent fixes
• refactor: a code change that neither fixes a bug nor adds a feature
• release: updating version, tags etc
• test: adding missing tests or correcting existing tests

Scope:

• must be a Jira ticket identifier (start with UKD-, ends with number)