Phenom UI

Phenom UI library is based on Ant Design component library, on top of which we apply our custom styling defined in Hindawi Design System.

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';
`

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} 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