Enterprise Design System
React design system
React components, ThemeProvider, tokens, and tutorials for web products.
- Stack
- React, TypeScript, Vite, Storybook
Overview
The React catalog is the web product port of the Enterprise Design System. You install @poluru-labs/enterprise-design-system-react, import tokens.css once, wrap the tree in ThemeProvider (and ToastProvider if you need toasts), then use Button, Input, Modal, and the rest with ordinary React props and event handlers.
ThemeProvider / useTheme switch light and dark. Dark mode sets eds-theme-dark on html, body, and the story root so token aliases update in the canvas. ToastProvider, useToast, and showToast cover transient feedback without a one-off snackbar.
Storybook documents every component with Controls and autodocs. Tests in the package are Jest plus Testing Library. Accessibility is labelled controls, keyboard support, focus-visible styles from tokens, and the Storybook a11y addon on each story.
Features
- ThemeProvider and useTheme. Light default, dark theme, or an eds-theme-dark class if you want to toggle at the document.
- ToastProvider. showToast({ title, variant }) for success and warning feedback wired through context.
- tokens.css. One import for color, typography, spacing, radius, elevation, and motion variables.
- React-native APIs. Controlled props and standard event handlers — not a custom attribute dialect.
- Storybook plus tests. Controls, Docs, a11y, themes addon, and Jest / Testing Library in the package.
Technologies
Library
- React
- TypeScript
- Vite
- @poluru-labs/enterprise-design-system-react
- ThemeProvider / useTheme
- ToastProvider / showToast
Design
- tokens.css
- --eds-* CSS variables
- Light and dark themes
Quality
- Jest
- Testing Library
- Storybook a11y addon
- Focus-visible token styles
Storybook
- Controls
- Docs / autodocs
- Accessibility addon
- Themes addon (light / dark)
- Actions, viewport, measure, outline
Components
The React Storybook covers the inventory below. Open a component in the live demo for Controls, docs, and accessibility checks.
Actions
ButtonButtonGroupSplitButtonLink
Forms
InputTextareaNumberInputCheckboxRadioSwitchSelectComboboxAutocompleteSearchPinInputFileUploadDatePickerDateRangePickerTimePickerSliderRating
Feedback
AlertToastSpinnerProgressBarCircularProgressSkeletonEmptyStateStatusBadgeTag
Navigation
BreadcrumbTabsSideNavPaginationStepperToolbar
Overlays
ModalDrawerPopoverTooltipDropdownMenuMenuItem
Data display
CardDataTableListDescriptionListStatTimelineTreeViewAccordionAvatarIcon
Utilities
DividerKbdVisuallyHiddenMeterCodeSnippetSegmentedControl
Pages
These are the Storybook sidebar entries in the live catalog. Written install guides stay on theValorSoftSol docs.
| Storybook | Page | What it does | Type |
|---|---|---|---|
Introduction | Introduction | Quick start, what’s included, accessibility notes, and design principles. | Docs |
Foundations/Themes | Themes | Light default and dark theme, plus how to toggle eds-theme-dark in an app. | Docs |
Components/* | Component stories | Each component has autodocs plus interactive stories (Default, variants, invalid, loading). | Story |