icoms-ui v0.2.24

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!

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";

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