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

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)

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