# Squid UI

React components library for Squid V2

## Package installation and usage

Install the package:

```bash
yarn add @0xsquid/ui
```

Import styles in your entry point:

```jsx
// src/main.tsx | src/pages/_app.tsx | etc...
import "@0xsquid/ui/dist/index.css";
```

Wrap your app with our theme provider `<ThemeProvider />` and specify your theme:

```jsx
import { ThemeProvider, Button } from "@0xsquid/ui";

function App() {
  return (
    <ThemeProvider theme={yourTheme}>
      <Button label="Hello world" variant="primary" size="md" />
    </ThemeProvider>
  );
}
```

## Development

### Install dependencies

```bash
yarn install
```

### Start Storybook dev server

```bash
yarn storybook
```

### Build package

To build the package using Rollup, run:

```bash
yarn build
```

This command will:

1. compile Tailwind CSS classes into `src/styles/compiled-tailwind.css`
2. bundle source code, along with its type declarations, into the `dist/` folder
3. copy `src/styles/compiled-tailwind.css` to `dist/index.css`

### Lint and format

To format and lint the code, run:

```bash
yarn format:fix
```

```bash
yarn lint:fix
```

### Folder structure

```
- src
  - index.ts <- barrel file
  - components
    - index.ts <- barrel file
    - buttons
      - index.ts <- barrel file
      - Button.tsx
    - lists
      - index.ts <- barrel file
      - HistoryItem.tsx
  - stories
    - buttons
      - Button.stories.tsx
    - lists
      - HistoryItem.stories.tsx
```

When creating a new component, don't forget to update the barrel file, exporting your component in the `index.ts` file in the corresponding component folder. You can also install the [AutoBarrel VSCode extension](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel).

### Images

In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.

Example:

```diff
.my-image {
-  background-image: url('my-image.png');
+  background-image: url('data:image/png;base64,iVBORw0....');
}
```

Or in a React component:

```diff
-  <img src="my-image.png" />
+  <img src="data:image/png;base64,iVBORw0..." />
```