# Assembly.js Design System

This is the Assembly.js design system repository. In this repo we're using Tailwind CSS to create a set of reusable, open source components for making Assembly apps.

## Installation

```bash
npm install @assembly-js/design-system
# or
yarn add @assembly-js/design-system
```

## Migration from copilot-design-system

If you're migrating from `copilot-design-system`:

```bash
# Remove old package
npm uninstall copilot-design-system

# Install new package
npm install @assembly-js/design-system
```

Update your imports:

```typescript
// Before
import { Button } from 'copilot-design-system';
import 'copilot-design-system/dist/styles/main.css';

// After
import { Button } from '@assembly-js/design-system';
import '@assembly-js/design-system/dist/styles/main.css';
```

## How to develop

Prerequisites:

- Node ^20.12.0
- Yarn ^4.x.x

How to develop:

- `yarn install`
- `yarn fetch-env` (fetches environment variables from AWS Secrets Manager - see [ENV_SETUP.md](./docs/ENV_SETUP.md))
- `yarn storybook`

How to prepare new version:

- increment the patch version in package.json
- run `yarn build`. Note: the build script uses Dirent.parentPath which was only available in node 20.12.0. If you are using an older version of node .e.g 20.11.1, it will not work.
- add commit
- When ready to publish, click "Run Workflow" [here](https://github.com/copilot-platforms/design-system/actions/workflows/npm-publish.yml) with no params.

## Icon import

To import new icons run `yarn fetch-env && yarn export-icons`.

### Token expiration
If you get a `403 Token Expired` response from Figma, you will need to generate a new access token and add it to AWS Secrets Manager.