A comprehensive React component library featuring advanced form components, interactive UI elements, and a powerful multi-step form system.
npm install @getscale/getscale-uiA 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.
- šØ 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
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';
``
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
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 onlyDependencies
$3
- React (>=17.0.0)
- React DOM (>=17.0.0)
- Tailwind CSS
- TypeScript$3
- Vite
- Storybook
- ESLint
- PostCSS
- Various Storybook addonsPublishing
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
``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
MIT License - see LICENSE file for details