pattern-library-skeleton v1.0.0
:fire: Overview
We use of the best tools to improve the workflow to allow you to create an awesome library of components!
- ReactJs v16
- Type checking with PropTypes
- styled-components for styling components and application
- Compiled of modern JavaScript with Babel and bundle with Webpack
- Jest and Testing library for unit/ui testing
- Automate Git hooks with Husky
- Code linting using Eslint
- Code formatter using Prettier
- Developing isolated UI components with Storybook
:rocket: Getting Started
To get you started, you need to meet the prerequisites, and then follow the installation instructions.
Figma design tokens example
Figma file: https://www.figma.com/file/IGr2xoqcZX91CU7CDr4ZsI
For more info to config your design tokens file, visit "How to configure design tokens with Figma API"
Installing
You can clone our Git repository:
$ git clone git@github.com:klaufel/pattern-library-skeleton.git
Wiring up your development environment
Setting up, is as easy as running:
$ npm run install
This command will install all the required dependencies. Please note that npm install
is only required on your first start, or in case of updated dependencies.
Initializing Storybook
$ npm run storybook
Generate design tokens as variables
$ npm run tokens
:triangular_ruler: Architecture
Based on Atomic Design principles, methodology for creating design systems. There are five distinct levels of components:
- Atomic Design component structure:
- Atoms
- Molecules
- Organism
- Templates
- Pages
When we use the library, the maximum level of component that we are going to have would be an organism
, the rest of the templates
and pages
components are built in the application that imports the library.
Source project structure:
└── src
├── components
│ ├── atoms
│ ├── molecules
│ ├── organism
│ └── pages *
├── docs
├── figma-tokens
├── styles
└── index.js (entry point)
src
: The place where to put our application source code -components
Add your components here! This folder is divided from Atomic Design principles.docs
Add documentation as stories for design system.figma-tokens
Folder all functions to generate figma design tokens with API.styles
Folder to add global styles and theme to build components.index.js
Entry point, import all components and export to generate package to use in project as a dependency.
Example of component
structure
└── MyComponent
├── __stories__
│ └── MyComponent.stories.{js|mdx}
├── __tests__
│ ├── __snapshots__
│ │ └── MyComponent.test.js.snap
│ └── MyComponent.test.js
├── MyComponent.styles.js
└── index.js
- mycomponent: Folder which contains our component.
__stories__
: Folder to contains the stories for Storybook.MyComponent.stories.js
: Contains the stories of component for Storybook
__tests__
: Folder to contains the tests of component.__snapshots__
: Folder to contains the snapthots tests, autogenerated for jest.MyComponent.test.js.snap
: Snapshot file, autogenerated for jest.
MyComponent.test.js
: Contains the test of component.
MyComponent.styles.js
: Contain the styles of component (styled-components / CSS-in-JS).index.js
: Contains the React component, HTML or other imports from ui-library.
:nail_care: Guidelines
Linting
$ npm run lint
Find problems in your code (js)
Formatter
$ npm run prettier:check
Find format problems in your code.
$ npm run prettier:write
Fix format problems in your code.
:pray: Testing the application
Jest, a delightful javascript testing framework and Testing Library builds on top of DOM testing library by adding APIs for working with React components.
Running your tests
$ npm run test
Will perform your unit testing.
$ npm run test:update
Will perform your unit testing and update snapshots.
$ npm run test:watch
Will perform your unit testing and watchers tests.
$ npm run test:coverage
Will perform your unit testing and show coverage.
$ npm run test:coverage-web
Will perform your unit testing and show coverage and open report in your default browser.
4 years ago