and-design-components-library

AND Digital design components

A library of React components of AND Digital design system.

[CAUTION!] This library is still WIP. We are actively working on it. Our goal is to have an easy to use UI system. This includes an documentation, improved DX, confidence in testing and a lot of refactoring to have consistency across our components.

Useage

To use the components in your React app install the package:

npm i and-design-components-library

1. Add Google fonts into head tag of index.html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
  rel="stylesheet"
/>

2. Wrap your app in a Theme Provider (WIP)

import { Button, ThemeProvider, theme } from 'and-design-components-library';

const App = () => (
  <ThemeProvider theme={theme}>
    <Button onClick={() => console.log('clicked')}>Click Me</Button>
  </ThemeProvider>
);

3. To use theme constants ... (WIP)

Development

Before any command, install dependencies running following command:

npm install

Storybook

You can easily start Storybook by running:

npm run storybook

Storybook documentation will then be available on http://localhost:6006

Lint

npm run lint
npm run lint:fix

Build

npm run build

To create a build we use Rollup bundler. You can change the build settings in rollup.config.js

Use locally built package

In order to test the built components from the local package you can install local module with Yalc.

1. Install the package globally:

npm i yalc -g

2. Publish the components library to the local storage:

yalc publish

3. In the consumer project install the components library from Yalk storage:

yalc add and-design-components-library

Publish to NPM

npm publish

Currently it publishes to Olly Holovchenko account and the process requires 2FA. Either speak to Olly or publish under different name to your own NPM account, as AND currently don't have a company account.

To Do

• [x] Finalise horizontal bio card (add tools)
• [ ] Add icon component
• [ ] Add dropdown component
• [ ] Add full bio component
• [ ] Add loader component
• [ ] Add fallback for avatar based on initials
• [ ] Add skeleton loading for the cards
• [ ] Clean-up theme provider
• [ ] Refactor the theme, add spaces, radii, shadows etc.
• [ ] Refactor stories to be consistent and more detailed
• [ ] Refactor types / interfaces
• [ ] Add unit tests
• [ ] Set-up visual testing with Chromatic
• [ ] Set up deployment pipeline with GitLab