npm package: @getscale/getscale-ui
Description: A comprehensive React component library featuring advanced form components, interactive UI elements, and a powerful multi-step form system.
Latest version: 0.2.75

# 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:
```bash
@getsales-inc:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN
```

2. Install the package:
```bash
npm i @getscale/getscale-ui
```

3. Import the styles in your main application file:
```javascript
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
```tsx
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**
```bash
git clone https://github.com/GetSales-Inc/storybook.git
cd storybook
```

2. **Install dependencies**
```bash
npm install
```

3. **Start Storybook** (Interactive documentation)
```bash
npm run storybook
```

4. **Build the library**
```bash
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:
```bash
npm run build
```

3. Publish to npm:
```bash
npm publish
```

4. In your project, update the package:
```bash
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