Local development flow with downstream consumer:

First run

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:

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

or run this:

bun link @reshape-biotech/design-system

Now, to have the package buidling watch for changes:

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:

bun run package

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:

  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.

Contents

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

Usage

Import components and styles from the design system:

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