quidol-ui

quidol-ui is a framework css create for the project Quidol Live.

Jump to 'Example' section to see our component in storybook !

And click here to see our theme in zeroheight interface.

Build

  yarn build

Example

To illustrate our components, we use a storybook interface than you can use with the following commands lines:

To build:

  yarn build:storybook

To start:

  yarn storybook

Test

The framwork is covered by unit test:

To launch:

  yarn test

Deploy Storybook

yarn build:storybook
kubeploy -t v<version> gcr.io/quidol-dev storybook-dev .
helm upgrade --set version=<version> storybook quidol/storybook

Add components

All components under src/[Name]/index.tsx are automatically transpiled & compiled using rollup.js.

If you want to create a component that doesn't follow this rule, you'll need to add the entry file in rollup.config.js -> input (ln:16)

Imports

Use must import components using the following syntax in order to prevent the whole bundle to be built:

Components

import [COMPONENT_NAME] from '@redpill-paris/quidol-ui/build/[COMPONENT_NAME]'

// example:
import Typography from '@redpill-paris/quidol-ui/build/Typography'

Note: To this day import must be done from the build folder.

style

import { [WHATEVER] } from '@redpill-paris/quidol-ui/build/utils/defaultTheme';


// example:
import { FinalThemeProvider, colorsTheme as Theme } from '@redpill-paris/quidol-ui/build/utils/defaultTheme';

types

import { [TYPE_NAME] } from '@redpill-paris/quidol-ui/build/types';

// example:
import { TypographyVariant } from '@redpill-paris/quidol-ui/build/types';