Mia Platform Design System

React graphical components designed by Mia Platform

Explore our graphical components using Storybook.

Install

⚠️ At the moment, the package is published only internally in Mia-Platform. We will release it on public npm soon.

yarn add @mia-platform-internal/console-design-system-react

Usage

import React from 'react'
import {Button} from '@mia-platform-internal/console-design-system-react'

const Example = () => {
  return (
    <Button />
  )
}

Local Development

For local development, you can run:

yarn install # install all dependencies

Then, run Storybook:

yarn storybook

To run tests:

yarn test

Update the themes

The themes are generated from the theme-generator.json file exported from Figma and they are coupled in each of different folder in src/themes/files/.

If a theme-generator.json file is changed, it is required to regenerate the new theme lauching the command:

yarn update-themes

## Icons

Icons are shipped in the @mia-platform-internal/console-design-system-react/icons sub-package. The SVG components can be created and placed in the /icons directory running:

yarn build-icons

This command launches a script that copies a set of icon packs from the dist of the react-icons dependency and build the set of Mia-Platform icons from the files contained in /src/assets/icons. To add a new icon you just need to place a new .svg file here (and don't forget to update the /src/assets/icons/icons.stories.mdx story file).

Given the high number of files, the script is pretty slow: Therefore, in CI it is run only on tags.

License

All files under the src folder must have the license boilerplate attached to files. This is checked by CI. To automate it, you can install addlicense and run:

yarn addlicense