Design System

Setup

bun install
bun run build

Development

This design system is built with:

• Tailwind CSS
• Shadcn UI
• Shadcn UI community- JunwenK UI-X
• Iconify
• clsx
• react-dropzone
• pretty-bytes
• react-resizable-panels

How to link dependencies locally

bun run scripts/link-packages.ts #link
bun run scripts/link-packages.ts unlink #unlink

bun run scripts/link-packages.ts link --dir ../investtal #link with specific directory

How to bump version

bun changeset # --> Pick version
bun changeset version # --> Bump version
bun changeset tag # --> Build new git tags
git push --follow-tags

moon :publish # --> Publish all packages

How to deploy Storybook with Docker

Prerequisites

1. Create or update your .env file with the following variables from .env.example (or use the defaults from the Docker image):

# Port to expose Storybook on
STORYBOOK_PORT=6006

# GZIP compression level (1-9, where 9 is best compression but slowest)
GZIP_COMPRESSION_LEVEL=6

# Cache control for HTML files
HTML_CACHE_CONTROL="public, no-transform, max-age=604800"

# Cache control for CSS and JS files
ASSETS_CACHE_CONTROL="public, no-transform, max-age=604800"

# Cache control for media files
MEDIA_CACHE_CONTROL="public, no-transform, max-age=2592000"

Deployment Commands

To build and start the Docker container:

# Build the Docker image
bun run storybook:docker:build

# Build and start the Docker container in detached mode
bun run storybook:docker:up

# Stop and remove the Docker container
bun run storybook:docker:down

Once deployed, your Storybook will be available at http://localhost:6006 (or the port you specified in the .env file).