Standards and Conventions

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

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