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
.
@import '~@hindawi/phenom-ui/dist/styles.css';
Then you can use any component you need like this:
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 applicationnpm run build
- compiles antd styles with our custom styles and the source code and then puts it in a dist
foldernpm run build-stories
- generate build for storybooknpm run lint
npm run lint:fix
Todo list