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.

/* main.css - of your app */

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

Then you can use any component you need like this:

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