## @zeniai/web-components

These are reusable UI components along with their storybook stories.

Refer to this [Notion doc](https://www.notion.so/zeniai/Building-React-Components-1d20260e7c4c47ecaa3085ed3f339e79) for development guidelines

## Storybooks:

- During development lets utilize storybooks to run and interactively build the component under development.
- And once the development is complete for component lets not forget to update its storybook snapshots.

### Steps to run storybooks.

1. Install dependencies `pnpm install` if needed.
2. Run the storybooks `pnpm storybook`.

### Run snapshot tests.

1. Install dependencies `pnpm install` if needed.
2. Run the tests `pnpm test`.

### Publish storybook.

1. Install dependencies `pnpm install` if needed.
2. Run `pnpm chromatic` to publish storybook.

## Publishing to NPM:

This module is utilized in Zeni Web Apps (both in v1 & in v2) via NPM. Use the following command to publish the NPM package. </br>
Command: `pnpm publish`. </br>

## Notes when consuming this Module:

### Peer Dependencies:

Following dependencies are peer dependencies and `not` included in the `@zeniai/web-components` NPM package. The consumer of this module `should` have this peer dependencies installed.

```
"@babel/runtime": "^7.13.17",
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.11.3",
"@material-ui/styles": "^4.11.3",
"@zeniai/client-epic-state": "^4.0.14",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-select": "^4.3.0"
```

### Emotion & Material UI:

The UI components in this module are styled using emotionjs. And few UI components are extended from material-ui. So it is crucial that the consuming web app passes the emotion & material ui contexts along with Zeni Themes.

```
import { ThemeProvider, Theme } from "@emotion/react";
import { ThemeProvider as MUIThemeProvider } from "@material-ui/styles";

<ThemeProvider theme={getTheme(prefersDarkMode)}>
  <MUIThemeProvider theme={getTheme(prefersDarkMode)}>
    ...
  </MUIThemeProvider>
</ThemeProvider>
```

Refer to https://github.com/zeni-ai/zeni-web-app-ui/blob/master/src/App.tsx

#### VSCode plugin for Styled Components:

To enable `Syntax highlighting for styled components` created with emptionjs, please install this VS Code extension (https://github.com/styled-components/vscode-styled-components).

## How to analyze web-components bundle

In the vite.config.js, uncomment `analyze()` plugin and `analyze` import

- `pnpm build` : Creates a **build** and **Analyzes** bundle and dependencies

## How to visualize web-components bundle

In the vite.config.js, uncomment `visualizer()` plugin and `visualizer` import

- `pnpm build` : Creates a **build** and **stats.html** inside build folder which can be used to visualize bundle.