EWS Global Design System - Reusable components for EWS applications
npm install @ews-admin/global-design-systemA comprehensive design system for EWS (Erco Web Solutions) applications, providing reusable React components, icons, and utilities.
- šØ Consistent Design: Unified design language across all EWS applications
- š¦ NPM Package: Easy to install and use in any React project
- š Storybook: Interactive component documentation and testing
- šÆ TypeScript: Full TypeScript support with type definitions
- šØ Customizable: Flexible theming and styling options
- āæ Accessible: Built with accessibility best practices
``bash`
pnpm add @ews-admin/global-design-system
`tsx
import { Button, Input, ArrowRight } from "@ews-admin/global-design-system";
function App() {
return (
Components
$3
A versatile button component with multiple variants and sizes.
tsx
`Props:
-
: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline'
- size: 'sm' | 'md' | 'lg'
- loading: boolean
- fullWidth: boolean
- leftIcon: ReactNode
- rightIcon: ReactNode$3
A flexible input component with validation states and icons.
`tsx
placeholder="Enter your email"
variant="default"
helperText="We'll never share your email"
/>
`Props:
-
: 'default' | 'error' | 'success'
- size: 'sm' | 'md' | 'lg'
- label: string
- helperText: string
- error: string
- leftIcon: ReactNode
- rightIcon: ReactNodeIcons
The design system includes a set of commonly used icons:
`tsx
import { ArrowRight, Check, Search } from '@ews/global-design-system';
`Utilities
$3
tsx
import { cn } from "@ews-admin/global-design-system";const className = cn("px-4 py-2", "bg-blue-500", "text-white");
`$3
tsx
import { formatCurrency, formatDate } from "@ews-admin/global-design-system";formatCurrency(1234.56); // "$1,234.56"
formatDate(new Date()); // "December 7, 2023"
`$3
tsx
import { generateId } from "@ews/global-design-system";const id = generateId("prefix"); // "prefix-abc123def"
`Development
$3
- Node.js 16+
- pnpm (recommended) or npm
$3
bash
Install dependencies
pnpm installStart Storybook
pnpm storybookBuild the package
pnpm buildRun linting
pnpm lintRun type checking
pnpm type-check
`$3
The design system includes a comprehensive Storybook for component documentation and testing:
bash
pnpm storybook
`Visit
to view the Storybook.Publishing
$3
1. Login to npm:
`bash
npm login
`2. Create @ews-admin organization (if not already created):
- Go to: https://www.npmjs.com/org/create
- Organization name:
- Choose Free plan$3
1. Build the package:
bash
pnpm build
`2. Publish to npm:
bash
pnpm publish:public
`3. Verify publication:
bash
pnpm view
`$3
- Patch version (bug fixes):
- Minor version (new features):
- Major version (breaking changes): $3
- Clean build directory:
- Rebuild from scratch:
- Version only (without publishing):
-
-
- Project Structure
src/
āāā components/ # React components
ā āāā Button/
ā āāā Input/
āāā icons/ # Icon components
ā āāā Icon.tsx
ā āāā ArrowRight.tsx
ā āāā Check.tsx
ā āāā Search.tsx
āāā utils/ # Utility functions
ā āāā index.ts
āāā styles/ # Global styles
ā āāā index.css
āāā index.ts # Main export filestories/ # Storybook stories
āāā Components/
āāā Icons/
āāā Utils/
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add stories for new components
5. Run tests and linting
6. Submit a pull request
MIT License - see LICENSE file for details.
For questions and support, please contact the EWS development team.