and-design-components-library/README.md

Library of reusable React components based on AND Digital design system.

# 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`

```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)

```jsx
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](https://rollupjs.org/guide/en/) 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](https://www.npmjs.com/package/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