EWS Global Design System

A comprehensive design system for EWS (Erco Web Solutions) applications, providing reusable React components, icons, and utilities.

Features

• 🎨 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

Installation

pnpm add @ews-admin/global-design-system

Quick Start

import { Button, Input, ArrowRight } from "@ews-admin/global-design-system";

function App() {
  return (
    <div>
      <Button variant="ews-primary" rightIcon={<ArrowRight />}>
        Click me
      </Button>
      <Input label="Email" placeholder="Enter your email" type="email" />
    </div>
  );
}

Components

Button

A versatile button component with multiple variants and sizes.

<Button variant="ews-primary" size="md" loading={false}>
  Button Text
</Button>

Props:

• variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'outline'
• size: 'sm' | 'md' | 'lg'
• loading: boolean
• fullWidth: boolean
• leftIcon: ReactNode
• rightIcon: ReactNode

Input

A flexible input component with validation states and icons.

<Input
  label="Email"
  placeholder="Enter your email"
  variant="default"
  helperText="We'll never share your email"
/>

Props:

• variant: 'default' | 'error' | 'success'
• size: 'sm' | 'md' | 'lg'
• label: string
• helperText: string
• error: string
• leftIcon: ReactNode
• rightIcon: ReactNode

Icons

The design system includes a set of commonly used icons:

import { ArrowRight, Check, Search } from '@ews/global-design-system';

<ArrowRight size="md" color="#2563eb" />
<Check size="lg" />
<Search size="sm" />

Utilities

Class Name Utility

import { cn } from "@ews-admin/global-design-system";

const className = cn("px-4 py-2", "bg-blue-500", "text-white");

Formatting Utilities

import { formatCurrency, formatDate } from "@ews-admin/global-design-system";

formatCurrency(1234.56); // "$1,234.56"
formatDate(new Date()); // "December 7, 2023"

ID Generation

import { generateId } from "@ews/global-design-system";

const id = generateId("prefix"); // "prefix-abc123def"

Development

Prerequisites

• Node.js 16+
• pnpm (recommended) or npm

Setup

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build the package
pnpm build

# Run linting
pnpm lint

# Run type checking
pnpm type-check

Storybook

The design system includes a comprehensive Storybook for component documentation and testing:

pnpm storybook

Visit http://localhost:6006 to view the Storybook.

Publishing

Prerequisites for Publishing

1. Login to npm:

   npm login

2. Create @ews-admin organization (if not already created):

   • Go to: https://www.npmjs.com/org/create
   • Organization name: ews-admin
   • Choose Free plan

Publishing Steps

1. Build the package:

   pnpm build

2. Publish to npm:

   pnpm publish:public

3. Verify publication:

   pnpm view

Version Management

• Patch version (bug fixes): pnpm publish:patch
• Minor version (new features): pnpm publish:minor
• Major version (breaking changes): pnpm publish:major

Additional Scripts

• Clean build directory: pnpm clean
• Rebuild from scratch: pnpm rebuild
• Version only (without publishing):
  • pnpm version:patch
  • pnpm version:minor
  • pnpm version:major

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 file

stories/               # Storybook stories
├── Components/
├── Icons/
└── Utils/

Hosted here

See our hosted site here

Contributing

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

License

MIT License - see LICENSE file for details.

Support

For questions and support, please contact the EWS development team.