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)
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
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';
`
- 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 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`
-
- [ ] 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