@cere/cere-design-system 0.0.2

package/README.md

@@ -0,0 +1,264 @@
+# Cere Design System
+
+Cere Network Design System built with Material UI and React.
+
+## Installation
+
+```bash
+npm install @cere-network/cere-design-system
+```
+
+## Usage
+
+### Basic Setup
+
+Wrap your application with the ThemeProvider:
+
+```tsx
+import { ThemeProvider } from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
+import { theme } from '@cere-network/cere-design-system';
+import { Button, TextField } from '@cere-network/cere-design-system';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Button variant="primary">Click me</Button>
+      <TextField label="Enter text" />
+    </ThemeProvider>
+  );
+}
+```
+
+### Using Components
+
+```tsx
+import { 
+  // Buttons
+  Button,
+  IconButton,
+  // Inputs
+  TextField,
+  SearchField,
+  Dropdown,
+  Switch,
+  Checkbox,
+  Radio,
+  ToggleButton,
+  ToggleButtonGroup,
+  // Navigation
+  Sidebar,
+  SidebarItem,
+  Tab,
+  Menu,
+  MenuItem,
+  Pagination,
+  Selector,
+  // Layout
+  Dialog,
+  Card,
+  CardContent,
+  List,
+  ListItem,
+  Avatar,
+  Table,
+  TableHeader,
+  AppBar,
+  Toolbar,
+  Breadcrumbs,
+  Accordion,
+  Paper,
+  Divider,
+  Stack,
+  Box,
+  Typography,
+  Link,
+  Container,
+  // Feedback
+  Badge,
+  Chip,
+  Tooltip,
+  Progress,
+  Alert,
+  Snackbar,
+  EmptyState,
+  Loading
+} from '@cere-network/cere-design-system';
+
+// Buttons
+<Button variant="primary">Save</Button>
+<IconButton variant="primary"><SettingsIcon /></IconButton>
+
+// Inputs
+<TextField label="Name" />
+<SearchField placeholder="Search..." onSearch={(v) => console.log(v)} />
+<Dropdown label="Select" options={[{ value: '1', label: 'Option 1' }]} />
+
+// Navigation
+<Sidebar items={[
+  { label: 'Dashboard', icon: <DashboardIcon />, selected: true }
+]} />
+<Selector
+  options={[{ id: '1', name: 'Service 1' }]}
+  selectedId="1"
+  onSelect={(id) => console.log(id)}
+/>
+
+// Layout
+<Dialog open={true} title="Dialog" onClose={() => {}}>
+  Content
+</Dialog>
+<Card hoverable clickable>
+  <CardContent>Card content</CardContent>
+</Card>
+<AppBar>
+  <Toolbar>Navigation</Toolbar>
+</AppBar>
+
+// Feedback
+<Badge variant="primary" badgeContent={5}>Notifications</Badge>
+<Alert severity="success">Success message</Alert>
+<EmptyState title="No items" description="Create your first item" />
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook
+npm run storybook
+
+# Build package
+npm run build
+
+# Type checking
+npm run type-check
+
+# Linting
+npm run lint
+```
+
+## Components
+
+### Buttons (2)
+- **Button** - Primary, Secondary, Tertiary variants
+  - Sizes: small, medium, large
+  - Support for icons (start/end)
+- **IconButton** - Icon-only button with variants (default, primary, secondary)
+
+### Inputs (9)
+- **TextField** - Text input with validation states
+- **SearchField** - Search input with search icon
+- **Dropdown** - Select dropdown with options
+- **Switch** - Toggle switch with label positioning
+- **Checkbox** - Checkbox with label positioning and indeterminate state
+- **Radio** - Radio button with RadioGroup support
+- **ToggleButton/ToggleButtonGroup** - Toggle buttons for view modes
+- **FormControl/FormLabel/FormHelperText** - Form field wrappers
+
+### Navigation (6)
+- **Sidebar/SidebarItem** - Navigation sidebar with items (different sizes)
+- **Tab** - Tab component with badge support
+- **Menu/MenuItem** - Dropdown menu with icons and dividers
+- **Pagination** - Pagination controls
+- **Selector** - Universal selector with search, compact mode, and custom rendering
+
+### Layout (16)
+- **Dialog** - Modal dialog with actions and loading states
+- **Card/CardContent/CardHeader/CardActions** - Card container (hoverable, clickable)
+- **List/ListItem** - List with icons and actions
+- **Avatar** - Avatar with sizes (small, medium, large, custom)
+- **Table/TableHeader** - Table with sorting support
+- **Grid** - Grid layout system
+- **AppBar/Toolbar** - Top navigation bar
+- **Breadcrumbs** - Navigation breadcrumbs
+- **Accordion** - Expandable sections
+- **Paper** - Container with elevation or outline
+- **Divider** - Section divider
+- **Stack** - Flexbox layout component
+- **Box** - Universal container component
+- **Typography** - Text component
+- **Link** - Styled link component
+- **Container** - Centered container
+
+### Feedback (8)
+- **Badge** - Badge indicators (default, primary, success, error)
+- **Chip** - Chip component (default, active) with icons
+- **Tooltip** - Tooltip component
+- **Progress** - Linear and circular progress indicators
+- **Alert/Snackbar** - Alert messages and notifications
+- **EmptyState** - Empty state with icon and action
+- **Loading** - Loading spinner (fullScreen or inline)
+
+## Color Scheme
+
+- **Primary**: Purple (#7B2CBF)
+- **Success**: Green (#10B981)
+- **Error**: Red (#EF4444)
+- **Warning**: Orange/Yellow (#F59E0B)
+- **Tertiary**: Orange/Yellow (#F59E0B)
+
+## Documentation
+
+- [Full Components Reference](./COMPONENTS.md) - Complete API documentation
+- [Integration Guide](./INTEGRATION.md) - Step-by-step integration instructions
+
+## Integration with Existing Projects
+
+To use this package in `dynamic-indexer-client` or other projects:
+
+1. Build the package:
+   ```bash
+   cd cere-design-system
+   npm run build
+   ```
+
+2. Install locally (or publish to npm):
+   ```bash
+   # From the project root
+   npm install ../cere-design-system
+   ```
+
+3. Use in your app:
+   ```tsx
+   import { theme } from '@cere-network/cere-design-system';
+   import { Button, Dialog, Sidebar } from '@cere-network/cere-design-system';
+   ```
+
+See [INTEGRATION.md](./INTEGRATION.md) for detailed migration guide.
+
+## Testing
+
+This design system includes comprehensive testing:
+
+- **Jest + React Testing Library**: Unit tests for component logic
+- **Storybook Interaction Tests**: Browser-based interaction tests
+- **Accessibility Tests**: Automated a11y checks with Storybook Test Runner
+
+```bash
+# Run Jest unit tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Generate coverage report
+npm run test:coverage
+
+# Run Storybook interaction tests
+npm run test:storybook
+```
+
+See [TESTING.md](./TESTING.md) for detailed testing guide.
+
+## Component Count
+
+- **40+** components
+- **30** Storybook stories
+- **Full TypeScript** support
+- **Material UI** based
+- **Comprehensive testing** with Jest and Storybook
+