@exyconn/egds

Enterprise Grade Design System - A complete design system with design tokens and React components. Built with pure React, no third-party UI libraries.

Features

• 🎨 Design Tokens - Complete token system with CSS variables
• 🌗 Light/Dark Mode - Built-in theme support using CSS variables
• 📱 Responsive - All components support responsive props
• ♿ Accessible - WCAG compliant components
• 🧪 Tested - Cypress component tests for all components
• 📦 Tree-shakable - Import only what you need
• 🚀 Pure React - No MUI or other third-party UI dependencies

Installation

npm install @exyconn/egds react react-dom
# or
pnpm add @exyconn/egds react react-dom
# or
yarn add @exyconn/egds react react-dom

Quick Start

import { EGDSThemeProvider, Button, Card, Input } from "@exyconn/egds";
import "@exyconn/egds/tokens/css";

function App() {
  return (
    <EGDSThemeProvider theme="light">
      <Card title="Welcome">
        <Input label="Username" placeholder="Enter username" />
        <Button variant="primary">Submit</Button>
      </Card>
    </EGDSThemeProvider>
  );
}

Components

Core Components

| Component | Description | |-----------|-------------| | Button | Primary action button with variants (primary, secondary, outline, ghost, danger) | | AIButton | AI-styled button with gradient and pulse effects | | Input | Text input with support for text, email, password, number, multiline | | Card | Container with elevation, outlined, and filled variants | | Badge | Status indicators and notification badges |

Navigation

| Component | Description | |-----------|-------------| | Breadcrumb | Navigation breadcrumb trail | | Menu | Vertical/horizontal navigation menu |

Data Display

| Component | Description | |-----------|-------------| | Table | Full-featured data table with sorting, filtering, pagination, search, selection | | Avatar | User avatar with image, initials, or icon fallback | | Image | Enhanced image with lazy loading, skeleton, and error handling | | Video | Video player with controls and responsive sizing | | Slider | Image/content carousel with navigation | | Tooltip | Hover tooltips with placement options |

Feedback

| Component | Description | |-----------|-------------| | Spinner | Loading spinner indicator | | Progress | Progress bar with variants | | Skeleton | Loading placeholder skeleton | | Warning | Alert/warning message display | | Drawer | Slide-out panel from any edge |

Layout

| Component | Description | |-----------|-------------| | FlexLayout | Flexbox layout wrapper | | GridLayout | CSS Grid layout wrapper | | Spacing | Margin and padding utility component | | Divider | Horizontal/vertical divider |

Typography

| Component | Description | |-----------|-------------| | Heading | h1-h6 heading elements | | Text | Paragraph and inline text |

Form

| Component | Description | |-----------|-------------| | Search | Search input with icon and clear button | | Chip | Tag/chip component with delete option |

Icons

| Component | Description | |-----------|-------------| | Icon | SVG icon component with built-in icons |

Theme Provider

Wrap your app with EGDSThemeProvider for theme support:

import { EGDSThemeProvider, useEGDSTheme } from "@exyconn/egds";

function App() {
  return (
    <EGDSThemeProvider theme="dark">
      <MyApp />
    </EGDSThemeProvider>
  );
}

// Use the hook to access and toggle theme
function ThemeToggle() {
  const { theme, toggleTheme } = useEGDSTheme();
  return (
    <button onClick={toggleTheme}>
      Current: {theme}
    </button>
  );
}

Dynamic Theme Switching

For dynamic theme switching to work, you must import the CSS variables:

import "@exyconn/egds/tokens/css"; // Required for theme switching

function App() {
  return (
    <EGDSThemeProvider theme="light">
      {/* Your app content */}
    </EGDSThemeProvider>
  );
}

The EGDSThemeSelector component automatically handles theme switching by setting the data-theme attribute on the document root and updating CSS variables.

Design Tokens

Using CSS Variables

import "@exyconn/egds/tokens/css";

const styles = {
  color: "var(--egds-color-text-primary)",
  backgroundColor: "var(--egds-color-background-primary)",
  padding: "var(--egds-spacing-4)",
  borderRadius: "var(--egds-radius-md)",
};

Token Categories

• Colors - Brand, semantic, background, text, border colors
• Typography - Font families, sizes, weights, line heights
• Spacing - 8px-based spacing scale (1-12)
• Radius - Border radius tokens (sm, md, lg, full)
• Shadows - Elevation shadows (sm, md, lg, xl)
• Z-Index - Layering scale (dropdown, sticky, modal, etc.)
• Motion - Animation durations and easings

Mock Data

Each component includes mock data for prototyping:

import { EGDSTable, EGDSImage, EGDSAvatar } from "@exyconn/egds";

// Use withDummy prop for instant demo data
<EGDSTable withDummy />
<EGDSImage withDummy />
<EGDSAvatar withDummy />

Testing

Run Cypress component tests:

# Run tests in headless mode
pnpm test:cy

# Open Cypress test runner
pnpm test:cy:open

Subpath Exports

// Main entry - exports everything
import { Button, Card, color } from "@exyconn/egds";

// Tokens only
import { color, typography, spacing } from "@exyconn/egds/tokens";

// CSS variables
import "@exyconn/egds/tokens/css";

// Components only
import { Button, Card } from "@exyconn/egds/components";

// Individual components
import { Button } from "@exyconn/egds/components/Button";

Component Examples

Button

<Button variant="primary" size="md" loading={false}>
  Click Me
</Button>

<Button variant="outline" fullWidth>
  Full Width
</Button>

<Button variant="danger" startIcon={<TrashIcon />}>
  Delete
</Button>

Table

const columns = [
  { key: "name", header: "Name", sortable: true },
  { key: "email", header: "Email" },
  { key: "role", header: "Role", filterable: true },
];

<EGDSTable
  data={users}
  columns={columns}
  searchable
  pagination
  pageSize={10}
  selectable
  onSelectionChange={(selected) => console.log(selected)}
/>

Drawer

<EGDSDrawer
  open={isOpen}
  onClose={() => setIsOpen(false)}
  anchor="right"
  title="Settings"
  size="md"
>
  <p>Drawer content here</p>
</EGDSDrawer>

Image

<EGDSImage
  src="/photo.jpg"
  alt="Description"
  borderRadius="md"
  objectFit="cover"
  showSkeleton
  lazy
/>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © EGDS Team