Esplanade UI

A modern React component library with Esplanade and ASM themes, built with TypeScript and SCSS.

Features

• 🎨 Dual Theme Support: Esplanade and ASM themes
• 🧩 Modular Components: Import only what you need
• 📱 Responsive Design: Mobile-first approach
• ♿ Accessible: Built with accessibility in mind
• 🎯 TypeScript: Full type safety
• 🎨 SCSS: Customizable styling with CSS variables
• 📚 Storybook: Interactive component documentation

Installation

npm install @vertis-components-library/esplanade-ui

Quick Start

1. Import Styles

// In your main SCSS file
@import '@vertis-components-library/esplanade-ui/dist/styles';

2. Setup Theme Provider

import { DesignSystemProvider } from '@vertis-components-library/esplanade-ui';

function App() {
  return (
    <DesignSystemProvider defaultTheme="esplanade-theme" defaultMode="system">
      {/* Your app content */}
    </DesignSystemProvider>
  );
}

3. Use Components

import { Button, Card, CardHeader, CardTitle, CardContent } from '@vertis-components-library/esplanade-ui';

function MyComponent() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="primary">Click me</Button>
      </CardContent>
    </Card>
  );
}

Individual Component Imports

For better tree-shaking, you can import components individually:

// Import specific components
import { Button } from '@vertis-components-library/esplanade-ui/components/Button';
import { Card } from '@vertis-components-library/esplanade-ui/components/Card';
import { ThemeToggle } from '@vertis-components-library/esplanade-ui/components/ThemeToggle';

Available Components

Button

import { Button } from '@vertis-components-library/esplanade-ui';

<Button variant="primary" size="lg">Primary Button</Button>
<Button variant="secondary" size="sm">Secondary Button</Button>
<Button variant="textlink">Text Link</Button>
<Button variant="hyperlink">Hyperlink</Button>
<Button variant="primary" iconOnly>🔍</Button>

Props:

• variant: 'primary' | 'secondary' | 'textlink' | 'hyperlink'
• size: 'sm' | 'lg'
• mode: 'default' | 'inverse'
• iconOnly: boolean
• disabled: boolean

Card

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardActions } from '@vertis-components-library/esplanade-ui';

<Card variant="elevated" size="md" interactive>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here</p>
  </CardContent>
  <CardFooter>
    <Button variant="secondary">Cancel</Button>
    <CardActions>
      <Button variant="primary">Save</Button>
    </CardActions>
  </CardFooter>
</Card>

Props:

• variant: 'default' | 'elevated' | 'outlined' | 'filled'
• size: 'sm' | 'md' | 'lg'
• interactive: boolean

ThemeToggle

import { ThemeToggle } from '@vertis-components-library/esplanade-ui';

<ThemeToggle />

Theme System

The library supports two themes:

Esplanade Theme (Default)

• Modern design with blue and orange accents
• Advanced button styles with circular indicators
• Comprehensive card variants

ASM Theme

• Professional design with blue and pink accents
• Standard button styles
• Basic card variants

Switching Themes

import { useDesignSystem } from '@vertis-components-library/esplanade-ui';

function MyComponent() {
  const { theme, setTheme } = useDesignSystem();
  
  return (
    <button onClick={() => setTheme('asm-theme')}>
      Switch to ASM Theme
    </button>
  );
}

Styling

The library uses CSS variables for theming. You can customize colors, spacing, and typography by overriding these variables:

:root {
  --color-primary: #your-color;
  --spacing-4: 16px;
  --font-family-english: 'Your Font', sans-serif;
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build library
npm run build:lib

# Run tests
npm test

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request