GetScale UI Component Library

A comprehensive React component library featuring advanced form components, interactive UI elements, and a powerful multi-step form system. Built with Vite, Storybook, and Tailwind CSS for modern web applications.

✨ Key Features

• 🎨 Modern UI Components - 50+ reusable React components
• 📝 Advanced StepForm System - Multi-step forms with 10+ question types
• 📚 Interactive Documentation - Comprehensive Storybook stories
• 🎯 TypeScript Support - Full type safety and IntelliSense
• 🎨 Tailwind CSS Integration - Utility-first styling with design tokens
• 🔧 Multi-Brand Theming - Support for multiple brand themes
• 📱 Responsive Design - Mobile-first, accessible components
• ♿ Accessibility Focused - WCAG compliant with keyboard navigation
• 🚀 Performance Optimized - Tree-shakeable, minimal bundle size

Installation

1. Create a .npmrc file in your project root:

@getsales-inc:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

2. Install the package:

npm i @getscale/getscale-ui

3. Import the styles in your main application file:

import '@getscale/getscale-ui/dist/styles.css';

🏗️ Project Structure

src/
├── components/           # React components
│   ├── StepForm/        # Multi-step form system
│   │   ├── components/  # Form sub-components
│   │   │   ├── questions/     # 10+ question types
│   │   │   ├── WelcomeScreen.tsx
│   │   │   ├── EndingScreen.tsx
│   │   │   └── Question.tsx
│   │   ├── utils/       # Form utilities
│   │   └── StepForm.stories.tsx
│   ├── Button/          # Button components
│   ├── Hero/            # Hero section components
│   ├── RatingCard/      # Rating and testimonial components
│   └── ...              # 40+ other components
├── theme/               # Design system
│   ├── tokens/          # Design tokens (colors, spacing, typography)
│   ├── brands/          # Brand theme configurations
│   └── ThemeProvider.tsx
├── stories/             # Storybook documentation
├── utils/               # Utility functions
├── assets/              # Static assets and icons
└── styles.css           # Global styles and CSS variables

🎯 Core Components

StepForm System

• Multi-step Forms - Complete form flow management
• 10+ Question Types - Text, email, rating, multiple choice, address, etc.
• Validation - Built-in form validation with error handling
• Progress Tracking - Visual progress indicators
• Customizable Headers - Logo and branding support
• Social Sharing - Built-in social media sharing
• Variable Replacement - Dynamic content using form answers

UI Components

• Button - Multiple variants and sizes
• Hero - Flexible hero sections with media support
• RatingCard - Testimonial and rating displays
• ProgressBar - Progress indicators
• FAQ - Frequently asked questions component
• Footer - Site footer with links and branding

🚀 Quick Start

StepForm Example

import { StepForm } from '@getscale/getscale-ui';
import '@getscale/getscale-ui/dist/styles.css';

function App() {
  return (
    <StepForm
      data={{
        welcome: {
          title: "Welcome to our survey!",
          subtitle: "Please take a few minutes to complete this form."
        },
        questions: [
          {
            type: "short-text",
            tag: "name",
            text: "What's your name?",
            required: true,
            placeholder: "Enter your full name"
          },
          {
            type: "email",
            tag: "email", 
            text: "What's your email?",
            required: true,
            placeholder: "Enter your email"
          },
          {
            type: "rating",
            tag: "satisfaction",
            text: "How satisfied are you?",
            required: true,
            steps: 5
          }
        ],
        ending: {
          title: "Thank you!",
          description: "Your responses have been recorded successfully."
        }
      }}
      onSubmit={(answers) => console.log('Form submitted:', answers)}
      onAnswer={(answer, questionTag) => console.log('Answer:', answer, 'Question:', questionTag)}
      theme="light"
      showProgress={true}
      brand="stepform"
    />
  );
}

🛠️ Development

1. Clone the repository

git clone https://github.com/GetSales-Inc/storybook.git
cd storybook

2. Install dependencies

npm install

3. Start Storybook (Interactive documentation)

npm run storybook

4. Build the library

npm run build

📜 Available Scripts

• npm run dev - Start Vite development server
• npm run build - Build the library for production
• npm run storybook - Start Storybook development server
• npm run build-storybook - Build static Storybook site
• npm run lint - Run ESLint for code quality
• npm run preview - Preview the production build
• npm run build:css - Build CSS only

Dependencies

Core Dependencies

• React (>=17.0.0)
• React DOM (>=17.0.0)
• Tailwind CSS
• TypeScript

Development Dependencies

• Vite
• Storybook
• ESLint
• PostCSS
• Various Storybook addons

Publishing

To publish a new version:

1. Update the version in package.json
2. Run the build:

npm run build

3. Publish to npm:

npm publish

4. In your project, update the package:

npm update @getscale/getscale-ui

Contributing

1. Create a new branch for your feature
2. Make your changes
3. Write or update stories for your components
4. Submit a pull request

License

MIT License - see LICENSE file for details