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

$3

- 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

$3

- 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

$3

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

function App() {
return (
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

$3

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

$3

- 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