Page Comparison

Coding standards

Tech stack

• react

• typescript

Tools

• AWS Code Artifact - host and distribute Component Library

• Storybook - to present Components developed along with documentation in it

• Jenkins for CI/CD - to be defined and clarified by Reckitt team during Promo Hero MVP

• SonarJS - for code analysis

• Changeset - for versioning

Code quality & unit tests

To ensure the cleanliness and quality of the code we use the following tools:

• stylelint – A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

• eslint – Find and fix problems in your JavaScript code

• prettier – An opinionated code formatter

• jest – delightful JavaScript Testing Framework with a focus on simplicity.

Configuration located in path packages/configs.

lint-staged is used for pre-commits hook to prettify & fix staged files. Configuration located in package.json file.

Every PR must pass validations:

• yarn lint

• yarn lint

• yarn stylelint

• yarn typecheck

• yarn test

Accessibility standards

Accessibility guidelines & recommendations.

Naming conventions

Packages

Each component must be created as a separate package and contain package.json file with its name, version and other information.

• the package must be in one of the folders: components, blocks, foundations and have the same name as the package name.

• package name should contain scope (design-system) and name in the kebab-case format. e.q.: @design-system/my-awesome-component.

• component name should be in the PascalCase format. e.q.: MyAwesomeComponent.

• story title should be in the human-readable case format. e.q.: My Awesome Component.

• story id should be in the camelCase format. e.q.: myAwesomeComponent.

Classes methods

Component css class should have prefix cds- (Chameleon Design System).

Variables

Should be in the camelCase.

Tokens

There are 2 layers of tokens:

• Global tokens. Located in design-tokens/src folder. That define the standards for the entire site.

• Component tokens. Located in component package src/*.tokens.scss. Which can override the values of global tokens for a component.

Tokens should have prefix cds- (Chameleon Design System).

Token naming rules are yet TBD.

File and folder naming and organization

This section explains how your file and folder should be named and structured.Component package should be placed in to packages/design-system/(components|blocks|foundations)/<component-name> folder. Structure of the package is following:

• docs

  • overview.stories.mdx – explanation of what is this component for

  • tokens.stories.mdx – component specific tokens

• stories

  • properties.stories.tsx – playground for developers to play with props options

  • variations.stories.tsx – display all possible configuration options

• src

  • component-name.scss – component styles entry point

  • component-name.tokens.scss – component specific tokens

  • component-name.test.tsx – unit tests

  • component-name.tsx – component code

  • models.ts – component interface

  • index.tsx – entry point

• package.json – package configuration

• tsconfig.json – ts configuration