Spring Web Components

A reusable design system library for React applications built with TypeScript, Tailwind CSS, and modern development tools.

Features

• 🎨 Design System Components - Comprehensive set of UI components
• 🔧 TypeScript Support - Full type safety and IntelliSense
• 🎯 Three-Tier Architecture - Base, Functional, and Business Logic components
• 📚 Storybook Documentation - Interactive component playground
• 🧪 Comprehensive Testing - Unit and integration tests
• 📦 NPM Package Ready - Easy installation and updates

Installation

Install the package via npm:

npm install spring-web-components

Quick Start

1. Install the package

npm install spring-web-components

2. Setup Tailwind CSS

This library uses Tailwind CSS. Add the preset to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    require('spring-web-components/tailwind')
  ],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/spring-web-components/lib/**/*.{js,ts,jsx,tsx}'
  ],
  // your other config...
}

3. Import component styles

Import the component styles in your main CSS or app entry point:

@import 'spring-web-components/styles.css';

4. Use components

import { Button, TextInput, ProgressBar } from 'spring-web-components'

function App() {
  return (
    <div>
      <Button variant="primary" size="md" onClick={() => console.log('clicked')}>
        Click Me
      </Button>

      <TextInput
        placeholder="Enter your name"
        onChange={(e) => console.log(e.target.value)}
      />

      <ProgressBar value={75} variant="md" color="blue" />
    </div>
  )
}

Available Components

Level 1 - Base Components

• Bars - Progress bars and loading indicators
• BottomDrawer - Bottom sheet/drawer component
• Buttons - Button variants for different use cases
• Carousel - Image and content carousels
• Inputs - Text inputs and form elements
• Loader - Loading spinners and animations
• Modal - Dialog and modal windows
• Pills - Pill/badge components
• Sidepanel - Side panel/drawer component
• Table - Data table component
• Tooltip - Tooltip overlays

Level 2 - Functional Components

• InputOtp - OTP input component

More components coming soon!

Development Setup

For contributing to this library:

Prerequisites

• Node.js 20+
• npm

Installation

# Clone the repository
git clone https://github.com/Spring-money/spring-web-components.git
cd spring-web-components

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

Development

Available Scripts

Development

• npm run dev - Start development server (http://localhost:5173)
• npm run build - Build for production
• npm run preview - Preview production build

Testing

• npm test - Run tests in watch mode
• npm run test:run - Run tests once
• npm run test:coverage - Run tests with coverage report
• npm run test:ui - Open Vitest UI

Documentation

• npm run storybook - Start Storybook (http://localhost:6006)
• npm run build-storybook - Build Storybook for production

Code Quality

• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint with auto-fix
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting

Project Structure

src/
├── components/          # React components
│   ├── level1/         # Base components (Tier 1)
│   └── level2/         # Functional components (Tier 2)
├── types/              # TypeScript type definitions
├── utils/              # Utility functions
└── stories/            # Storybook stories

Component Architecture

Tier 1 - Base Components

Pure UI components with no business logic:

• Buttons, Inputs, Select Inputs, etc.

Tier 2 - Functional Components

Enhanced components with validation and data handling:

• EmailInput, CitySelect, etc.

Tier 3 - Business Logic Components

Complex components combining multiple tiers for specific use cases.

Contributing

1. Follow the existing code style
2. Write tests for new components
3. Update Storybook stories
4. Update documentation

License

MIT