ghr20-component-library v1.0.0

Component Library

Commands

storybook: Run's Storybook Application at port 6006
build: Run's Rollup to compile module folders Shop and ACP into bundles for CommonJS and ES5
watch: Run's Rollup in watch mode to compile all changed files
test: Run's test:unit and test:visual
test:unit: Run's Jest test suites
test:visual: Run's Loki visual regression tests (You have to run Storybook and Docker to use Loki)
coverage: Run's Jest coverage collector and display report to STDOUT
lint: Run ESLint to analyze code

First start

Lerna
If you want to use Lerna to manage all dependencies of al project folders (especially if you develop at the shop or acp) perform the following First Steps in Frontend Readme

-- or --

npm

• npm i
• npm run storybook

Docker Container's

We currently have two different Docker container's in this component library.

• File -> Dockerfile: This will build an Storybook in static mode and will use nginx to serve this
• File -> Dockerfile.dev: This will create a Container which map the component-library folder into itself. Here you have to run npm i and npm run storybook to work with it

Best practices for Components

React Component:

• Use filename index.tsx for Typescript
• Use FunctionComponents as much as possible
• Write small and maintainable Components and split bigger ones into separate components

• While using TailwindCSS's inline classes use the complete name of the class

Bad:

<div className={`text-${ error ? 'red' : 'green' }-600`} />

Good:

<div className={error ? 'text-red-600' : 'text-green-600'} />

Stylesheet:

• Use scss/css (modules) whenever possible
• Format class names after BEM
• Use TailwindCSS @apply for all theme related styles, e.g. colors, spacings, ...
• (Use scss nesting)

Stories (Storybook)

• Use tsx or mdx Story format
• Write stories for all possible use cases of the component
• If using mdx: Add an small description on your component
• Structure your stories by using a path to 'Path/To/MyComponent' as title prop (Clean Storybook viewing experience)

Testing

• Write at least an snapshot test for each possible use case of the component
• Whenever possible use Enzyme to write interaction tests

Include components into bundle

To include an component into the final bundle (and to use it in other projects) add it to the corresponding index.ts file in Module Folder Shop.

Push rules

Pre-Commit:

• Run Lint command and fix all issues
• Run Storybook and run Test command
• Run Build command
• Add all Loki Reference and Jest Snapshots to the commit

Tests

The component library supports four kinds of test:

• Snapshot tests using React-Test-Renderer with Jest Snapshots
• Interaction tests using Enzyme
• Visual Regression tests using Loki (Loki needs a running Storybook to snapshot all Stories automatically)
• Anything else you like to test using Jest.

Run tests:

• Add an ComponentName.test.tsx file with your tests to the component folder.
• Start Storybook by using "npm run storybook"
• Run all test by using "npm test"
• Fix all failed test.

Fix Jest Snapshot Tests:

• Run "npx jest -u" to update all snapshots

Fix Loki Snapshot Tests

• Run "npx loki approve" to update all snapshots

You have to explicit call loki or jest to fix snapshots.