Design Library

The goal of this library is to provide a solid set of UI-Components that allow us to have a consistent and easily changeable UI.

Integration

cd yourpath/luca-web/services/<service>
yarn add @lucaapp/design-library

import { Colors, Icons, Illustration } from '@lucaapp/design-library';

<Icons.YellowStar width={16} height={16} /> // default width 16, default height 16
<Illustration.Check width={256} height={256} /> // default width 256, default height 256
<Icons.YellowStar width={85} height={44} /> // default width 85, default height 44

Local Development

Add a new icon / illustration / logo SVG file

1. add the raw SVG file into the corresponding folder, for example: add a icon SVG file to src/raw-assets/raw-icons, add a illustration SVG file to src/raw-assets/raw-illustrations, add a logo SVG file to src/raw-assets/raw-logos

2. run yarn icons:create or yarn illustrations:create or yarn logos:create to update the SVG files

3. run yarn build

Test the package in a service

cd packages/design-library
yarn link

cd packages/design-library/node_modules/react
yarn link

Within the folder you are developing in, run:

cd packages/<other_package>
yarn link luca-design-library

cd packages/<other_package>
yarn link react

If you are running the service in the docker, you can copy the folder design-library/dist to your service directory and then copy it to your docker container, for example:

mv packages/design-library/dist <yourPath>/<yourserviceDir>
docker cp <yourPath>/<yourserviceDir>/dist <container name>:/containerDir/node_modules/@lucaapp/design-library

Afterwards, you can run yarn watch in the UI-Library directory to automatically rebuild the library on changes. These changes will also cause an automatic reload of the service using it, e.g. locations.