Janus: Janus Design System v1.0.1

Components for Janus React apps

Table of Contents

• Storybook live
• Install & integration
• Run storybook in dev
• Methodologies
  • Atomic Design
  • Molecules definition
  • Organism definition
• Components Library Creation Guide

Storybook live

https://janus-ds-juandi.vercel.app/?path=/docs/intro--docs

Install and integration

1. Install: npm i janus-ds --save
2. Import styles in your index.js: import 'janus-ds/dist/index.css'
3. Add provider before router:

   import { DesignSystemProvider } from 'janus-ds'
   const App = () =>
   	<DesignSystemProvider>
       <Router>
       ...
       </Router>
     </DesignSystemProvider>
   export default App

4. Import components!

   import { Button } from 'janus-ds'
   const MyComp = () =>
   	<Button id="my_id">
       My button!
     </Button>
   export default MyComp

Run storybook in dev

Follow these steps to start the project in development

1. Clone repository. git clone [email protected]:juandinella/janus-ds.git
2. Install dependencies in the project folder. npm install.
3. If there's some problems with dependencis, run npx sb update
4. Run Storybook npm run start, this command run Storybook and build tokens. This comman run 2 task npm run tokens and npm run storybook

Check the package.json file, there you will find the commands necessary for the development

Run test

1. Run npm run test

Methodologies

Atomic Design

For this project will be using the methodology to create componentes called Atomic Design. The component library will be creating just Atoms and Molecules with the following definitions:

Atoms definition

For this project an atom will be a component that is composed by an unique Atom with or without HTML tags, or just HTML tags.

Molecules definition

For this project a molecule is a component that is composed by at least 2 different atoms or stateful componentes

Organism definition

For this project organisms are assemblies of molecules functioning together as a unit

Components Library Creation Guide

Styling

We use Styled Components

Creating a component

We have a CLI tool to create automatically a component. Run npm run cc (cc stands for create component)