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

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:

# Remove old package
npm uninstall copilot-design-system

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

Update your imports:

// 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)
• 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 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.