SolidJS Component Library (Design System)

A modular and treeshakeable SolidJS component library built with TypeScript, Tailwind CSS, SCSS Modules, and Storybook.

Features

• ✅ SolidJS with TypeScript
• ✅ Modular Builds - Individual components can be built separately
• ✅ Treeshakeable - Side-effect free with proper exports
• ✅ Design System - Comprehensive design tokens and consistent styling
• ✅ Tailwind CSS + SCSS Modules with design tokens
• ✅ Storybook for component documentation and development
• ✅ Vite for fast building and development
• ✅ Unit Testing with Vitest and Solid Testing Library

Design System Approach

This component library follows a systematic design system approach with:

🎨 Design Tokens

All styling is based on design tokens defined in tailwind.config.js:

• Colors: Primary, secondary, success, warning, error, and neutral palettes
• Typography: Consistent font sizes, weights, and line heights
• Spacing: 4px base unit with consistent scale
• Shadows: Pre-defined shadow styles for different components
• Border Radius: Consistent border radius scale
• Animations: Standardized transitions and keyframes

📋 Available Design Tokens

// Colors
bg-primary, text-primary, border-primary
bg-secondary, text-secondary, border-secondary
bg-success, text-success, border-success
bg-warning, text-warning, border-warning
bg-error, text-error, border-error
bg-gray-100 through bg-gray-900

// Typography
text-xs, text-sm, text-base, text-lg, text-xl, text-2xl
font-normal, font-medium, font-semibold, font-bold

// Spacing
p-1 through p-64 (4px to 256px)
m-1 through m-64 (4px to 256px)

// Shadows
shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl
shadow-button, shadow-card, shadow-focus

// Border Radius
rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-full

Project Structure

src/
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.module.scss
│   │   ├── Button.stories.tsx
│   │   ├── Button.test.tsx
│   │   └── index.ts
│   └── Badge/
│       ├── Badge.tsx
│       ├── Badge.module.scss
│       ├── Badge.stories.tsx
│       ├── Badge.test.tsx
│       └── index.ts
├── styles/
│   └── globals.css
├── test/
│   └── setup.ts
└── index.ts

Available Scripts

# Development
npm run dev              # Start Vite dev server
npm run storybook        # Start Storybook on port 6006

# Building
npm run build            # Build all components (modular + monolithic)
npm run build:standalone # Build as single stand-alone library bundle
npm run build:individual # Build each component separately
npm run build:all        # Build everything together (default)
npm run build:clean      # Clean and build everything

# Testing
npm test                 # Run unit tests
npm run test:ui          # Run tests with UI
npm run test:coverage    # Run tests with coverage

# Storybook
npm run storybook        # Start Storybook development server
npm run build-storybook  # Build Storybook for production

Build Modes & Publishing

1. Stand-alone Bundle (Single Package)

Build and publish as a complete library:

# Build stand-alone bundle
npm run build:standalone

# Output files:
# - shared-solid-v2.js (ES Module)
# - shared-solid-v2.cjs (CommonJS)
# - shared-solid-v2.css (Styles)
# - index.d.ts (TypeScript declarations)

Usage:

npm publish

Installation & Usage:

npm install shared-solid-v2

import { Button, Badge } from 'shared-solid-v2'
import 'shared-solid-v2/styles'

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Badge color="success">Active</Badge>
    </div>
  )
}

2. Individual Components (Multiple Packages)

Build and publish each component separately for maximum treeshaking:

# Build individual components
npm run build:individual

# Output files for each component:
# - Button.js, Button.cjs, Button.d.ts
# - Badge.js, Badge.cjs, Badge.d.ts
# - shared-solid-v2.css (Shared styles)

Setup for Individual Publishing:

1. Create separate package.json for each component (example: components/Button/package.json):

{
  "name": "@your-org/button",
  "version": "1.0.0",
  "main": "./Button.cjs",
  "module": "./Button.js",
  "types": "./Button.d.ts",
  "files": ["Button.*", "../shared-solid-v2.css"],
  "peerDependencies": {
    "solid-js": "^1.8.0"
  }
}

2. Publish each component individually:

# From components/Button directory
npm publish

# From components/Badge directory
npm publish

Installation & Usage:

npm install @your-org/button @your-org/badge

import { Button } from '@your-org/button'
import { Badge } from '@your-org/badge'
import '@your-org/button/styles' // or @your-org/badge/styles

function App() {
  return (
    <div>
      <Button variant="primary">Only Button</Button>
      <Badge color="success">Only Badge</Badge>
    </div>
  )
}

3. Hybrid Approach (Recommended)

Build everything together for maximum flexibility:

# Build all modes together
npm run build:all

# This creates:
# - Complete library bundle (index.js, index.cjs)
# - Individual component bundles (Button.js, Badge.js)
# - Shared CSS file
# - TypeScript declarations for all

Package.json exports support both patterns:

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    },
    "./Button": {
      "types": "./dist/Button.d.ts",
      "import": "./dist/Button.js",
      "require": "./dist/Button.cjs"
    },
    "./Badge": {
      "types": "./dist/Badge.d.ts",
      "import": "./dist/Badge.js",
      "require": "./dist/Badge.cjs"
    },
    "./styles": "./dist/shared-solid-v2.css"
  }
}

Usage Examples:

// Import everything
import { Button, Badge } from 'shared-solid-v2'

// Import individual components (treeshaking)
import { Button } from 'shared-solid-v2/Button'
import { Badge } from 'shared-solid-v2/Badge'

// Import styles separately
import 'shared-solid-v2/styles'

Installation

npm install shared-solid-v2

Usage

Importing the Entire Library

import { Button, Badge } from 'shared-solid-v2'
import 'shared-solid-v2/styles'

function App() {
  return (
    <div>
      <Button variant="primary" size="md">Click me</Button>
      <Badge color="success" size="sm">Active</Badge>
    </div>
  )
}

Importing Individual Components (Treeshaking)

import { Button } from 'shared-solid-v2/Button'
import 'shared-solid-v2/styles'

function App() {
  return <Button variant="secondary">Only Button</Button>
}

Components

Button

A flexible button component with multiple variants and sizes.

Props:

• variant?: 'primary' | 'secondary' | 'ghost' - Visual style (default: 'primary')
• size?: 'sm' | 'md' | 'lg' - Button size (default: 'md')
• disabled?: boolean - Whether the button is disabled
• onClick?: () => void - Click handler
• children: JSX.Element - Button content

Examples:

<Button variant="primary" size="lg" onClick={() => alert('Clicked!')}>
  Large Primary Button
</Button>

<Button variant="ghost" disabled>
  Disabled Ghost Button
</Button>

Badge

A small status indicator component.

Props:

• color?: 'default' | 'success' | 'warning' | 'error' - Color scheme (default: 'default')
• size?: 'sm' | 'md' - Badge size (default: 'md')
• children: JSX.Element | string - Badge content

Examples:

<Badge color="success" size="sm">Active</Badge>
<Badge color="error">Error State</Badge>

Development

Storybook

Run Storybook to develop and document components:

npm run storybook

Building

The library supports two build modes:

1. Monolithic Build - Single library bundle
2. Modular Build - Individual component bundles

Both builds are optimized for treeshaking with proper sideEffects: false configuration.

Testing

Tests are written with Vitest and Solid Testing Library:

npm test              # Run all tests
npm run test:ui       # Run tests with interactive UI
npm run test:coverage # Run tests with coverage report

Build Output

The build process generates:

• ES Modules (.js) for modern bundlers
• CommonJS (.cjs) for Node.js compatibility
• TypeScript Declarations (.d.ts) for type safety
• CSS Bundle with Tailwind utilities
• Component-specific bundles for modular imports

Configuration

• Tailwind CSS v3 with custom theme
• SCSS Modules for component-specific styling
• PostCSS for CSS processing
• TypeScript with strict mode enabled
• Vite for fast builds and HMR
• Storybook with SolidJS integration

License

MIT

Built with ❤️ using SolidJS, TypeScript, and Tailwind CSS