React UI Component Library for E-Commerce
npm install @3asoftwares/ui



React UI component library for E-Storefront platform with Storybook documentation.
| Technology | Purpose |
| --------------- | -------------------- |
| React 18.2 | UI framework |
| TypeScript 5.0+ | Type-safe components |
| Tailwind CSS | Styling |
| Storybook 8 | Component docs |
| Vite | Build tool |
| Vitest | Testing |
``bashnpm
npm install @3asoftwares/ui
$3
`tsx
import '@3asoftwares/ui/styles.css';
`š Project Structure
`
packages/ui-library/
āāā src/
ā āāā index.ts # Main exports
ā āāā components/
ā ā āāā Button/
ā ā āāā Card/
ā ā āāā Modal/
ā ā āāā Input/
ā ā āāā ...
ā āāā styles/
āāā .storybook/ # Storybook config
āāā dist/ # Build output
āāā package.json
`š Available Components
$3
`tsx
import { Button, IconButton } from '@3asoftwares/ui';;
`$3
`tsx
import { Input, Select, Checkbox, TextArea } from '@3asoftwares/ui';;
`$3
`tsx
import { Card, Modal, Container, Grid } from '@3asoftwares/ui';
Card content
;
`$3
`tsx
import { Alert, Toast, Spinner, Badge } from '@3asoftwares/ui';Operation successful! ;
`šØ Storybook
Interactive component documentation and visual testing.
$3
`bash
Start Storybook dev server
yarn storybookBuild static Storybook
yarn build-storybook
`View at:
http://localhost:6006$3
`tsx
// src/components/Button/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';const meta: Meta = {
title: 'Components/Button',
component: Button,
tags: ['autodocs'],
argTypes: {
variant: {
control: 'select',
options: ['primary', 'secondary', 'danger']
},
size: {
control: 'select',
options: ['sm', 'md', 'lg']
}
}
};
export default meta;
type Story = StoryObj;
export const Primary: Story = {
args: {
children: 'Primary Button',
variant: 'primary'
}
};
export const Secondary: Story = {
args: {
children: 'Secondary Button',
variant: 'secondary'
}
};
`$3
`
.storybook/
āāā main.ts # Storybook configuration
āāā preview.ts # Global decorators & parameters
āāā vitest.setup.ts # Test setup
`$3
`typescript
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';const config: StorybookConfig = {
stories: ['../src/*/.stories.@(ts|tsx)'],
addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
framework: '@storybook/react-vite',
docs: { autodocs: true }
};
export default config;
`$3
| Practice | Description |
| -------------- | ---------------------------------------- |
| Use
autodocs | Auto-generate documentation from props |
| Add controls | Enable interactive prop editing |
| Test states | Create stories for all component states |
| Accessibility | Use a11y addon for accessibility testing |
| Visual tests | Capture snapshots for regression testing |š» Scripts
| Command | Description |
| ---------------------- | --------------- |
|
yarn dev | Start Vite dev |
| yarn build | Build library |
| yarn build:lib | Build with tsup |
| yarn storybook | Start Storybook |
| yarn build-storybook | Build Storybook |
| yarn test | Run tests |
| yarn test:ui | Run with UI |š¤ Publishing
`bash
Bump version
npm version patch|minor|majorPublish to npm
npm publish --access public
`š PR Workflow
$3
`bash
1. Navigate to package
cd packages/ui-library2. Build library
yarn build3. Run tests
yarn test4. Check Storybook builds
yarn build-storybook
`$3
`bash
Build all packages
yarn build:packagesRun all tests
yarn test:allOne-liner validation
yarn build:packages && yarn test:all && echo "ā
Ready for PR!"
`$3
- [ ] Components render correctly
- [ ] Storybook stories added/updated
- [ ] All tests pass
- [ ] Styles exported properly
- [ ] Version bumped if needed
- [ ] CHANGELOG updated
š¤ Contributing
1. Fork the repository
2. Create feature branch:
git checkout -b feature/ui-new-component
3. Add component with tests and Storybook story
4. Run validation: yarn build && yarn test
5. Commit with conventional format: git commit -m "feat(ui): add Button component"`See CONTRIBUTING.md for full guidelines.
---
Part of the E-Storefront Monorepo