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

1. Run npm run build
2. Run cd dist
3. Run npm install
4. Run npm link
5. Go to your own project directory
6. Run npm link @lyyti/design-system

Now when you make changes to source code you only need to run npm run build again no need to re-run the link commands When you are done run npm unlink --no-save @lyyti/design-system && npm ci in your project's folder.

If you run into an Invalid hook error in the project or you are loading @emotion/react when it is already loaded, here's what to do. The error is about having two copies of the packages caused by the link. More info can be found in the React docs.

• Go to the design system directory
• Run npm link [..path/to/yourproject]/node_modules/react same for @emotion/react
• Repeat steps 5 and 6 of the linking process

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.

Version bumping

When you create a pull request with changes make sure to also bump the package.json version with one of the commands below. If you are unsure which one you should bump, ask in your PR.

npm run bump patch # Goes from 1.0.0 -> 1.0.1

Or replace patch with minor (1.0.0 -> 1.1.0) or major (1.0.0 -> 2.0.0).

Release

When your pull request is merged to next, you should make a release PR from next to main. Typically a release PR should have title of "Version 1.0.1" and the description list what changes are introduced.

Our release process from there on is completely automated. As soon as a PR 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. Before converting an SVG file to a React component, make sure the viewbox's dimensions are 24 24. To convert a .svg file to a React component please run the following command

npm run generate-icon --path=path/to/file.svg

After converting

• Add an export to src/icons/index.ts for the icon

• Add the icon to iconsList in stories/DataDisplay/Icons.stories.tsx

Prerequisites

• Node v18 (active LTS)
• npm v8

You can install them from https://nodejs.org