@revathi_kanakapathy/storybook 0.3.3

package/README.md

@@ -0,0 +1,378 @@
+# @raise/components
+
+A comprehensive React component library built with **React**, **Tailwind CSS**, and **shadcn/ui**.
+
+## NPM Package Installation
+
+```bash
+npm install @raise/components
+```
+
+### Quick Start
+
+**IMPORTANT:** You **must** import the CSS file to ensure colors and styles work correctly. The CSS file contains all the CSS custom properties (variables) that define the color palette.
+
+```jsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from '@raise/components';
+// ⚠️ REQUIRED: Import the styles to get correct colors
+import '@raise/components/styles.css';
+
+function App() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button variant="default">Click Me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+#### CSS Import Options
+
+You can import the CSS in different ways depending on your setup:
+
+**Option 1 - In your main entry file (recommended):**
+```jsx
+// main.jsx or index.jsx or App.jsx
+import '@raise/components/styles.css';
+```
+
+**Option 2 - In your CSS file:**
+```css
+/* styles/global.css or index.css */
+@import 'raise-components/styles.css';
+```
+
+**Option 3 - In Vite config:**
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      css: {
+        additionalData: `@import 'raise-components/styles.css';`
+      }
+    }
+  }
+});
+```
+
+## About
+
+A comprehensive, living style guide built with **React**, **Tailwind CSS**, and **shadcn/ui** for the Data Matrix Platform.
+
+## Features
+
+- **Modern Tech Stack**: React 19, Tailwind CSS 4, Vite 7, Storybook 9
+- **Scalable Architecture**: Well-organized component structure
+- **Developer-Friendly**: Comprehensive documentation and examples
+- **Accessible**: WCAG 2.1 compliant components
+- **Dark Mode**: Full theme support with toggle
+- **Interactive**: Live component playground with Storybook
+
+## Tech Stack
+
+- **React 19+**: Modern React with hooks
+- **Tailwind CSS 4**: Utility-first CSS framework
+- **shadcn/ui**: High-quality component primitives
+- **Vite**: Lightning-fast build tool
+- **Storybook 9**: Component documentation and testing
+- **class-variance-authority**: Type-safe component variants
+- **lucide-react**: Beautiful icon library
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18 or higher
+- npm or yarn
+
+### Installation
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run Storybook (development):
+```bash
+npm run storybook
+```
+
+3. Build Storybook (production):
+```bash
+npm run build-storybook
+```
+
+4. Run the React app:
+```bash
+npm run dev
+```
+
+## Project Structure
+
+```
+storybook/
+├── .storybook/           # Storybook configuration
+│   ├── main.js          # Main config
+│   └── preview.js       # Preview config with theme
+├── src/
+│   ├── components/
+│   │   └── ui/          # UI component library
+│   │       ├── Button.jsx
+│   │       ├── Button.stories.jsx
+│   │       ├── Input.jsx
+│   │       ├── Input.stories.jsx
+│   │       ├── Card.jsx
+│   │       ├── Card.stories.jsx
+│   │       ├── Badge.jsx
+│   │       ├── Badge.stories.jsx
+│   │       ├── Label.jsx
+│   │       ├── Label.stories.jsx
+│   │       ├── Textarea.jsx
+│   │       ├── Textarea.stories.jsx
+│   │       └── index.js
+│   ├── lib/
+│   │   └── utils.js     # Utility functions (cn helper)
+│   ├── stories/
+│   │   └── docs/        # Documentation MDX files
+│   │       ├── Introduction.mdx
+│   │       ├── GettingStarted.mdx
+│   │       ├── DesignTokens.mdx
+│   │       └── ComponentGuidelines.mdx
+│   └── index.css        # Global styles and theme tokens
+├── tailwind.config.js   # Tailwind configuration
+├── postcss.config.js    # PostCSS configuration
+└── package.json
+```
+
+## Component Library
+
+### Core Components
+
+#### Button
+Multiple variants and sizes for different use cases:
+- Variants: default, destructive, outline, secondary, ghost, link
+- Sizes: sm, default, lg, icon
+
+```jsx
+import { Button } from '@/components/ui';
+
+<Button variant="default">Click me</Button>
+<Button variant="destructive">Delete</Button>
+<Button size="lg">Large Button</Button>
+```
+
+#### Input
+Text input with label support:
+
+```jsx
+import { Input, Label } from '@/components/ui';
+
+<div>
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" placeholder="Enter email" />
+</div>
+```
+
+#### Card
+Content container with header, body, and footer:
+
+```jsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui';
+
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+  </CardHeader>
+  <CardContent>Content goes here</CardContent>
+  <CardFooter>Footer content</CardFooter>
+</Card>
+```
+
+#### Badge
+Status indicators and labels:
+
+```jsx
+import { Badge } from '@/components/ui';
+
+<Badge variant="default">New</Badge>
+<Badge variant="destructive">Error</Badge>
+```
+
+#### Textarea
+Multi-line text input:
+
+```jsx
+import { Textarea, Label } from '@/components/ui';
+
+<div>
+  <Label htmlFor="message">Message</Label>
+  <Textarea id="message" placeholder="Enter message" />
+</div>
+```
+
+#### Label
+Form field labels:
+
+```jsx
+import { Label } from '@/components/ui';
+
+<Label htmlFor="username">Username</Label>
+```
+
+## Theming
+
+The design system uses CSS custom properties for theming, making it easy to customize colors and other design tokens.
+
+### Theme Variables
+
+Edit `src/index.css` to customize theme colors:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  /* ... more variables */
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  /* ... dark mode overrides */
+}
+```
+
+### Tailwind Configuration
+
+Customize Tailwind in `tailwind.config.js`:
+
+```js
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+      },
+    },
+  },
+}
+```
+
+## Storybook Features
+
+### Addons Included
+
+- **@storybook/addon-docs**: Auto-generated documentation
+- **@storybook/addon-a11y**: Accessibility testing
+- **@storybook/addon-vitest**: Component testing
+- **storybook-dark-mode**: Dark/light theme toggle
+- **@storybook/addon-onboarding**: Interactive tutorial
+
+### Documentation
+
+Comprehensive documentation is available in Storybook:
+
+1. **Introduction**: Overview of the design system
+2. **Getting Started**: Setup and usage guide
+3. **Design Tokens**: Color palette, typography, spacing
+4. **Component Guidelines**: Best practices and examples
+
+## Usage in Your Project
+
+### Import Components
+
+```jsx
+import { Button, Card, Input, Label, Badge, Textarea } from '@/components/ui';
+```
+
+### Using the cn Utility
+
+The `cn` utility combines class names efficiently:
+
+```jsx
+import { cn } from '@/lib/utils';
+
+<Button className={cn("w-full", isActive && "ring-2")}>
+  Button
+</Button>
+```
+
+## Accessibility
+
+All components are built with accessibility in mind:
+
+- Semantic HTML elements
+- ARIA attributes where needed
+- Keyboard navigation support
+- Focus management
+- Screen reader compatibility
+- Color contrast compliance
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Scripts
+
+```bash
+# Start Storybook
+npm run storybook
+
+# Build Storybook for deployment
+npm run build-storybook
+
+# Run React app
+npm run dev
+
+# Build React app
+npm run build
+
+# Preview production build
+npm run preview
+
+# Lint code
+npm run lint
+```
+
+## Contributing
+
+1. Create a new component in `src/components/ui/`
+2. Add corresponding `.stories.jsx` file
+3. Export component from `src/components/ui/index.js`
+4. Update documentation if needed
+5. Test in Storybook
+
+## Best Practices
+
+1. **Use Semantic HTML**: Choose appropriate HTML elements
+2. **Accessibility First**: Include ARIA labels and keyboard support
+3. **Consistent Styling**: Use design tokens and Tailwind utilities
+4. **Document Everything**: Add stories and documentation for new components
+5. **Test Thoroughly**: Test components in different states and themes
+
+## License
+
+[Your License Here]
+
+## Support
+
+For questions or issues, please [open an issue](https://github.com/your-repo/issues).
+
+---
+
+Built with ❤️ for the Data Matrix Platform

package/dist/components/charts/AreaChart/AreaChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * AreaChart component for displaying trends with filled areas
+ *
+ * @component
+ */
+export const AreaChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,19 @@
+/**
+ * BarChart component for displaying categorical data with bars
+ *
+ * @component
+ * @example
+ * const data = [
+ *   { category: 'A', value: 4000 },
+ *   { category: 'B', value: 3000 },
+ * ];
+ *
+ * <BarChart
+ *   data={data}
+ *   bars={[
+ *     { dataKey: 'value', fill: '#3b82f6', name: 'Sales' },
+ *   ]}
+ * />
+ */
+export const BarChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,20 @@
+/**
+ * LineChart component for displaying time-series or sequential data
+ *
+ * @component
+ * @example
+ * const data = [
+ *   { name: 'Jan', sales: 4000, revenue: 2400 },
+ *   { name: 'Feb', sales: 3000, revenue: 1398 },
+ * ];
+ *
+ * <LineChart
+ *   data={data}
+ *   lines={[
+ *     { dataKey: 'sales', stroke: '#3b82f6', name: 'Sales' },
+ *     { dataKey: 'revenue', stroke: '#10b981', name: 'Revenue' },
+ *   ]}
+ * />
+ */
+export const LineChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/charts/PieChart/PieChart.d.ts

@@ -0,0 +1,14 @@
+/**
+ * PieChart component for displaying proportional data
+ *
+ * @component
+ * @example
+ * const data = [
+ *   { name: 'Category A', value: 400 },
+ *   { name: 'Category B', value: 300 },
+ * ];
+ *
+ * <PieChart data={data} />
+ */
+export const PieChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/charts/RadarChart/RadarChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * RadarChart component for displaying multivariate data
+ *
+ * @component
+ */
+export const RadarChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/charts/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * ScatterChart component for displaying correlation and distribution data
+ *
+ * @component
+ */
+export const ScatterChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/charts/index.d.ts

@@ -0,0 +1,6 @@
+export { LineChart } from "./LineChart/LineChart";
+export { BarChart } from "./BarChart/BarChart";
+export { PieChart } from "./PieChart/PieChart";
+export { AreaChart } from "./AreaChart/AreaChart";
+export { ScatterChart } from "./ScatterChart/ScatterChart";
+export { RadarChart } from "./RadarChart/RadarChart";

package/dist/components/ui/Accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Accordion component for expandable/collapsible content sections
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Accordion>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Is it accessible?</AccordionTrigger>
+ *     <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+export const Accordion: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * AccordionItem component - represents a single accordion item
+ */
+export const AccordionItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * AccordionTrigger component - the clickable header of an accordion item
+ */
+export const AccordionTrigger: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * AccordionContent component - the expandable content of an accordion item
+ */
+export const AccordionContent: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Alert/Alert.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Alert component for displaying important messages and notifications
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Alert variant="info">
+ *   <AlertTitle>Heads up!</AlertTitle>
+ *   <AlertDescription>You can add components to your app.</AlertDescription>
+ * </Alert>
+ *
+ * @example
+ * // With custom icon
+ * <Alert variant="success">
+ *   <CheckCircle className="h-4 w-4" />
+ *   <AlertTitle>Success!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ */
+export const Alert: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * AlertTitle component - renders the title of an alert
+ */
+export const AlertTitle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * AlertDescription component - renders the description text of an alert
+ */
+export const AlertDescription: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Badge/Badge.d.ts

@@ -0,0 +1,5 @@
+export const Badge: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary";
+} & import("class-variance-authority/types").ClassProp) => string;
+import * as React from "react";

package/dist/components/ui/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Breadcrumb component for navigation hierarchy
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+export const Breadcrumb: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * BreadcrumbList component - container for breadcrumb items
+ */
+export const BreadcrumbList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * BreadcrumbItem component - individual breadcrumb item
+ */
+export const BreadcrumbItem: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * BreadcrumbLink component - clickable breadcrumb link
+ */
+export const BreadcrumbLink: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * BreadcrumbPage component - current page (non-clickable)
+ */
+export const BreadcrumbPage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * BreadcrumbSeparator component - separator between breadcrumb items
+ */
+export const BreadcrumbSeparator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * BreadcrumbEllipsis component - ellipsis for collapsed items
+ */
+export const BreadcrumbEllipsis: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Button/Button.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Primary UI component for user interaction
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Button>Click me</Button>
+ *
+ * @example
+ * // With icon
+ * <Button icon={<Icon />} iconAlign="left">Submit</Button>
+ *
+ * @example
+ * // Custom variant
+ * <Button variant="destructive" size="lg">Delete</Button>
+ */
+export const Button: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const buttonVariants: (props?: {
+    variant?: "inverted" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info";
+    size?: "icon" | "default" | "sm" | "lg" | "xl" | "icon-sm" | "icon-lg";
+    rounded?: boolean | "md" | "sm" | "lg" | "xl" | "full";
+} & import("class-variance-authority/types").ClassProp) => string;
+import * as React from "react";

package/dist/components/ui/Card/Card.d.ts

@@ -0,0 +1,7 @@
+export const Card: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const CardHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const CardFooter: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const CardTitle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const CardDescription: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const CardContent: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Checkbox/Checkbox.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Checkbox component for boolean input
+ *
+ * @component
+ * @example
+ * // Basic usage
+ * <Checkbox id="terms" />
+ *
+ * @example
+ * // With label
+ * <div className="flex items-center space-x-2">
+ *   <Checkbox id="terms" />
+ *   <label htmlFor="terms">Accept terms and conditions</label>
+ * </div>
+ *
+ * @example
+ * // Controlled
+ * const [checked, setChecked] = useState(false)
+ * <Checkbox checked={checked} onCheckedChange={setChecked} />
+ */
+export const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * CheckboxGroup component for managing multiple checkboxes
+ */
+export const CheckboxGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * CheckboxWithLabel component - Checkbox with integrated label
+ */
+export const CheckboxWithLabel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Input/Input.d.ts

@@ -0,0 +1,2 @@
+export const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Label/Label.d.ts

@@ -0,0 +1,2 @@
+export const Label: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";

package/dist/components/ui/Textarea/Textarea.d.ts

@@ -0,0 +1,2 @@
+export const Textarea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from "react";