# GENESIS Design System
 
[Storybook hosted on Google Cloud](https://genesis-storybook-365607811897.us-central1.run.app/)
The GENESIS design system standardizes our colors, fonts, and sizing tokens across all our apps.
It unifies frontend app development around these core libraries:
- [Antd](https://ant.design/) v5
- [Styled Components](https://styled-components.com/) v5
- [Typescript](https://www.typescriptlang.org/) v5
- [React](https://react.dev/) v18
## ๐ฆ Development
```bash
npm install
npm start
```
To scaffold a new component, run `npm run generate` and add the component name in PascalCase
example:
```
npm run generate RadioGroup
```
## ๐จ Usage
Install the GENESIS library
```
npm install @gobolt/genesis
```
The `GenesisProvider` must included within the application as it supplies the Genesis Theme.
```jsx
import { Button, GenesisProvider } from '@gobolt/genesis;
const Demo = () = {
const onClick = (value) => {
console.log("Genesis button clicked with value: ", value);
}
return (
)
};
```
The library exports both the components and their types which are documented in our storybook.
## ๐งช Testing
```
npm test
```
[husky](https://typicode.github.io/husky/) has been configured to automatically run the tests on push to Github and will enforce that all tests pass.
## ๐ Publishing
This project uses [rollup](https://rollupjs.org/) to create the package and [changesets](https://github.com/changesets/changesets) to manage it's versions. We only need to run changesets when we're ready to release and publish the library.
```
npx changeset
npx changeset version
npm publish
```
## ๐ Storybook Deployment to Google Cloud
```
just deploy
```
See the .justfile which simplifies this [Storybook GCP script on Notion](https://www.notion.so/gobolt/Deploy-Genesis-Storybook-to-GCP-1759f4303960806e8d88cf1e751cb19d).
requires: [just](https://github.com/casey/just)
```
brew install just
```
## Test the build
If you want to test the build before deploying...
```
rm -rf storybook-static
npm build-storybook
python3 -m http.server 6006 -d storybook-static
```
