This is the official repository for Lyyti Design System.
This Design System is based on MUI (Material-UI).
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 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.
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
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.
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.
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
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