# Phenom UI

Phenom UI library is based on [Ant Design](https://ant.design/components/overview/) component library, on top of which we apply our custom styling defined in [Hindawi Design System](https://www.figma.com/file/5yzg8JDKkFSiplTSktAqbh/HDS?node-id=157%3A1853).

A showcase of the components can be seen here: https://hindawi.gitlab.io/phenom-design-system

## How to use

Install the package: `npm install @hindawi/phenom-ui`

In your app you need to load the `.css` styles found in `node_modules/@hindawi/phenom-ui/dist/styles.css`.

```css
/* main.css - of your app */

@import '~@hindawi/phenom-ui/dist/styles.css';
```

<br />

Then you can use any component you need like this:

```javascript
// myComponent.tsx - any react file

import { Button } from '@hindawi/phenom-ui';
```

## Good to know

- Since ant.d authors used [{less}](http://lesscss.org/) as a solution for styling, this project uses the same technology in order to have access to the variables and overwrite them. Your project doesn't need to support {less} since we compile the code and bundle it in a css file.

- This project exposes everything ant.d has to offer along with some extra components that might be custom to our use cases.

- storybook is used to showcase the components, and we host a storybook build on gitlab pages using gitlab pipeline (check `gitlab-ci.yml`)

## Available Scripts

- `npm run start` - starts the storybook application
- `npm run build` - compiles antd styles with our custom styles and the source code and then puts it in a `dist` folder
- `npm run build-stories` - generate build for storybook
- `npm run lint`
- `npm run lint:fix`

## Todo list

- [ ] finish styling up components according to the design system
- [ ] complete storybook presentation of components
- [x] publish the package on npm
- [x] publish storybook app on gitlab pages