@reshape-biotech/design-system

Local development flow with downstream consumer:

First run

``sh
bun link
`

To create a soft link you can install in your consuming project's node_modules.

Add this to your consumer's package.json:

`sh
"@reshape-biotech/design-system": "link:@reshape-biotech/design-system"
`

or run this:

`sh
bun link @reshape-biotech/design-system
`

Now, to have the package buidling watch for changes:

`sh
bun run package --watch
`

Publishing

Set the package version in the package.json file.
Publish and versioning is automatically handled through GitHub actions.

To build and publish manually:

`bash
bun run package
`

`bash
bun publish
`

bun publish requires a valid NPM publishing token to be set in your environment.

Notes about consuming

As this project heavily uses TailwindCSS you must have tailwind include the component files when compiling your bundle css

Specifically, your tailwind.config.js should have something like this:

`js
content: ['./src/*/.{html,js,svelte,ts}',
'./node_modules/@reshape-biotech/design-system/*/.{svelte,ts,js}',
],
`

About the Design System

This package contains the core design system for Reshape Biotech frontend projects, providing a consistent and reusable set of components and styles.

$3

1. Component Library

- A collection of shared, reusable Svelte components
- Standardized UI elements following Reshape Biotech's design guidelines
- Fully typed components with TypeScript support

2. Tailwind Configuration

- Pre-configured Tailwind CSS setup
- Custom theme extensions
- Shared utility classes

3. Design Tokens
- Color palette
- Typography
- Shadow definitions

$3

Import components and styles from the design system:

`typescript
import { Button, Card } from '@reshape/design-system';
import '@reshape/design-system/styles.css';
``