Icoms design ystem

Icoms Detection design system

Git

We work with two main branches.

main is the upper main which is the production one. dev-main is the main we are working with. Every checkout starts from this branch and are merged in this one as well.

Be careful where you want to merge your branches when making a new PR!

Husky

Husky is integrated in the repo. It is currently attached to 2 git hooks :

1. commit-msg : Checks for commit message structure using commmitlint. It won't let you commit if the commit doesn't follow conventional commits
2. pre-push : Runs tests & lints your code, and prevents from pushing if errors arise.

Commitizen

This repo is Commitizen friendly, meaning you can use it to craft your commit messages, following the convention, and ensure they pass through husky's filter.

If you don't have it installed on your computer, you can install this way :

$ npm install commitizen -g

And to use it to commit, you can run it this way

$ git cz

This launches a CLI Tool, which guides you throught the commit message. You usally only have to select a commit type and add a commit message, sometimes add a scope. You can skip through the rest with enter

Usage

Install packages the first time you open the project.

$ npm i

Run storybook and go navigate to localhost to see the storybook

$ npm run storybook

To publish on npm, clean your directory with $ git add && git commit -m "feat: cleaning"

Then make sure to bump your version. Enter the next two commands in your terminal to push the new package version.

$ npm version [<newversion> | major | minor | patch] -m "Upgrade to %s"
$ git push && git push --tags

FYI Unfortunately, the push command doesn’t send tags. To push the new tag you made, you’ll need to run the push command again with the --tags flag:

Let the pipeline do its job and publish for you.

What will my new version be and how does it work ?

For example, v1.3.0

• 1 is the major

• 3 is the minor

• 0 is the patch

Typescript

Please take time to type your functions.

If you're new to typescript, checkout this handy cheatsheet or this one

Styling

This Ui library uses Stitches to create its components.

If you touch the tree (how files are structured in the app), make sure to import the files at the top in .storybook/preview.js so the styles appear in storybook.

Installation

This is a short installation guid to make everything work on a project.

Fonts

ONLY FOR CREATE REACT APP PROJECTS

Fonts can only be desserved by the public folder.

The project using this library must run some commands to generate the css and fonts files included in this ui library

Add the following content to your Makefile and run make fonts. It will auto-generate the files needed.

# Install fonts into this project from ui project
fonts:
	rm -rf public/fonts public/fonts.css
	cp -r node_modules/icoms-ui/dist/fonts public/fonts
	cp -r node_modules/icoms-ui/dist/fonts.css public

You can also add this dependency to build-parts (still in Makefile) by changing build-parts: test to build-parts: fonts test

Don't forget to add the stylesheet in public/index.html.

<link rel="stylesheet" href="fonts.css" />

If you have tailwind, extend your theme in tailwind.config.js with :

theme: {
  extend: {
    fontFamily: {
      header: ["SF-New-Republic"],
      content: ["Frutiger"],
    },
  },
}

otherwhise, you cans juste apply the fonts in pure css like font-family: "Frutiger";

Good to know

• Might be a good idea to install np to handle package upload correclty

Useful links

To install headless/UI follow this https://frontend.blog/build-your-own-flexible-component-library-using-tsdx-typescript-tailwind-css-headless-ui/ To checkout the PR's modifications on style go to (Chromatic)[https://www.chromatic.com]