Lyyti Design System

This is the official repository for Lyyti Design System.

This Design System is based on MUI (Material-UI).

Using Lyyti Design System

First add it to your project

npm install @lyyti/design-system --save

Add this to your index.tsx

import '@lyyti/design-system/styles/objektiv.css';

This will import all the needed fonts you will need for the components. After that you can just add any of our components to any file, and they should look the same as they do in Storybook.

Storybook

Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use.

See live here

Testing in your project

It's usually quite hard to test your changes of the UI library in your own project, but we have a solution for you.

Make sure to clone the repository and do the following

Run npm run build
Run cd dist
Run npm ci
Run npm link
Go to your own project directory
Run npm link @lyyti/design-system

Contribute

We welcome contributors. In order to do so you need fork this repository and only make changes from there. Once you have made your changes please create a cross fork pull request. One of our developers will get to it as soon as possible.

Please make sure that you use our ESLint and Prettier rules and always use Typescript.

When you create a pull request with changes make sure to also bump the package.json version. Depending on what you have done run one of the following commands

Bump patch version.

npm --no-git-tag-version version patch # Goes from 1.0.0 -> 1.0.1

Bump minor version.

npm --no-git-tag-version version minor # Goes from 1.0.0 -> 1.1.0

Bump major version.

npm --no-git-tag-version version major # Goes from 1.0.0 -> 2.0.0

If you are un sure which one you should bump ask in your PR.

Our publishing is completely automated. As soon as something is merged to main a tag and release are created then that is published to the NPM registry.

Get started

Like all node project you start by installing all the needed dependencies.

npm ci

Once you have done that you can just run

npm run dev

That will start Storybook on http://localhost:6006 and you can start working on what ever your heart desires.

Building

We have two separate builds. One is for building Storybooks as a static page and the other is for creating our production npm package.

To build Storybook as a static page simply run

npm run build-storybook

To build the production page simply run

npm run build

Icons

We convert our SVG files to React components using a custom written template and a tool called SVGR. To convert a .svg file to a React component please run the following command

npx @svgr/cli --template templateSvgIcon.js -d src/icons --ext tsx path/to/file.svg

dusan-turajlic / lyyti-design-system