Overview β’ Getting Started β’ Architecture β’ Guidelines β’ Theming β’ Testing β’ Distribution
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
- SASS 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
To get you started, you need to meet the prerequisites, and then follow the installation instructions.
You can clone our Git repository:
$ git clone git@github.com:klaufel/sui-components-datepicker.git
Setting up, is as easy as running:
$ npm 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.
Once all the dependencies are installed, you can run $ npm run storybook
to initialize your development server using webpack-dev-server middleware.
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.
βββ src
βββ components
β βββ atoms
β βββ molecules
β βββ organism
βββ docs
βββ styles
βββ index.js (entry point)
src
: The place where to put our application source codecomponents
Add your components here! This folder is divided from Atomic Design principles.docs
Add documentation as stories for design system.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.
βββ mycomponent
βββ __mocks__
β βββ mycomponent.mock.js
βββ __stories__
β βββ mycomponent.stories.{js|mdx}
βββ __tests__
β βββ __snapshots__
β β βββ mycomponent.test.js.snap
β βββ mycomponent.test.js
βββ index.scss
βββ index.js
- mycomponent: Folder which contains our component.
__mocks__
: Folder to contains the mocks logic.mycomponent.mock.js
: File for mock compononet to use in your stories or tests.
__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.
index.js
: Contains the React component, HTML or other imports from ui-library.index.scss
: Contain the styles of component.
Styles must follow the SUIT convention.
Use sui-lint, CLI to lint your code and make it compliant. It provides:
- Same js and sass style of code across all company.
- Linting rules a reference package, not duplicated linting config in every project.
- Implemented as a reusable CLI.
$ npm run lint
Find problems in your code (js and sass)
$ npm run lint:js
Find problems in your code (only js)
$ npm run lint:sass
Find problems in your code (only sass)
$ npm run prettier:check
Find format problems in your code.
$ npm run prettier:write
Fix format problems in your code.
There is a hook to pre-commit with Husky, will run $ npm run prettier:write
, so that all the code pushed is complies with the established rules!
βββ styles
βββ lib
βββ themes
βββ mytheme
β βββ _components.scss
β βββ _fonts.scss
β βββ _variables.scss
β βββ _index.scss
βββ _index.scss (import your actual theme)
- mytheme: Folder which the theme config.
_components.scss
: File to overwrites styles specifically at the component level._fonts.scss
: Import fonts to the theme._variables.scss
: Overwrites the global variables of the theme._index.scss
: Entry point file. Import all files in your theme (components, fonts, variables).
The global variables by default are obtained from library: @schibstedspain/sui-theme
In the file lib/_index.scss
, they are imported directly:
@import '~@schibstedspain/sui-theme/lib/settings-compat-v7/index';
@import '~@schibstedspain/sui-theme/lib/index';
To import a theme, it must currently be done manually (see TODO below)
. In the file lib/theme/_index.scss
, import the theme you need.
Example:
@import 'adevinta/index';
-
Default theme (SUI): https://sui-components-datepicker-sui.netlify.com/
-
Adevinta theme: https://sui-components-datepicker.netlify.com/
-
Milanuncios theme: https://sui-components-datepicker-milanuncios.netlify.com/
TODO: Make selector for dynamic theme change through Storybook using SASS theme. Currently, it is necessary to modify the import of the current theme. In the current system of @schibstedspain/sui-theme the themes of each marketplace are being imported, we would have to do it that way but with specificity to each component, using the design tokens for components.
Jest, a delightful javascript testing framework and Testing Library builds on top of DOM testing library by adding APIs for working with React components.
$ 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.
There is a hook to pre-push with Husky, will run $ npm run test
, so that all the code pushed works correctly!
TODO: Package the library so it can be used by other applications with the theme config