@shohojdhara/atomix 0.3.14 → 0.3.15

package/src/components/Card/Card.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React from 'react';
 import { Card, ElevationCard } from './index';
 import { Grid, GridCol } from '../../layouts';
@@ -13,69 +14,276 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Card component provides a flexible container for displaying content with optional headers, images, and footers. Cards are ideal for grouping related information, showcasing products, or presenting content in a structured format. They support multiple variants, sizes, and can be interactive.',
+        component: `
+# Card
+
+## Overview
+
+Cards are flexible containers for displaying content with optional headers, images, and footers. They are ideal for grouping related information, showcasing products, or presenting content in a structured format. Cards support multiple variants, sizes, and can be interactive.
+
+## Features
+
+- Multiple appearance options (filled, outlined, ghost, elevated)
+- Various elevation levels
+- Support for headers, images, and footers
+- Different color variants and sizes
+- Interactive states (active, disabled, loading)
+- Responsive design
+
+## Accessibility
+
+- Keyboard support: Cards can be navigated using Tab key
+- Screen reader: Proper semantic markup ensures content is accessible
+- ARIA support: Appropriate roles and properties are automatically applied
+- Focus management: Maintains focus within the card when activated
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Card title="Card Title" text="This is a basic card" />
+\`\`\`
+
+### With Image
+
+\`\`\`tsx
+<Card 
+  title="Card with Image" 
+  text="This card includes an image" 
+  image="https://example.com/image.jpg"
+  imageAlt="Description of image"
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| header | string | - | Header content for the card |
+| title | string | - | Title of the card |
+| text | string | - | Main text content of the card |
+| image | string | - | Image URL for the card |
+| imageAlt | string | - | Alt text for the card image |
+| footer | string | - | Footer content for the card |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size of the card |
+| variant | string | 'secondary' | Color variant of the card |
+| appearance | 'filled' \\| 'outlined' \\| 'ghost' \\| 'elevated' | 'filled' | Visual style of the card |
+| elevation | 'none' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' | 'none' | Shadow depth of the card |
+| row | boolean | false | Whether to arrange content horizontally |
+| flat | boolean | false | Whether to remove border radius |
+| active | boolean | false | Whether the card is in active state |
+| disabled | boolean | false | Whether the card is disabled |
+| loading | boolean | false | Whether the card is in loading state |
+| selected | boolean | false | Whether the card is selected |
+| interactive | boolean | false | Whether the card responds to interactions |
+| className | string | - | Additional CSS class names |
+        `,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
-    header: { control: 'text', description: 'Header content for the card' },
     title: { control: 'text', description: 'Title of the card' },
     text: { control: 'text', description: 'Main text content of the card' },
     image: { control: 'text', description: 'Image URL for the card' },
     imageAlt: { control: 'text', description: 'Alt text for the card image' },
-    footer: { control: 'text', description: 'Footer content for the card' },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'Size of the card',
       defaultValue: 'md',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
+      },
     },
     variant: {
       control: { type: 'select' },
       options: THEME_COLORS,
       description: 'Color variant of the card',
       defaultValue: 'secondary',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'secondary' },
+      },
     },
     appearance: {
       control: { type: 'select' },
       options: ['filled', 'outlined', 'ghost', 'elevated'],
+      description: 'Visual style of the card',
       defaultValue: 'filled',
+      table: {
+        type: { summary: '"filled" | "outlined" | "ghost" | "elevated"' },
+        defaultValue: { summary: 'filled' },
+      },
     },
     elevation: {
       control: { type: 'select' },
       options: ['none', 'sm', 'md', 'lg', 'xl'],
+      description: 'Shadow depth of the card',
       defaultValue: 'none',
+      table: {
+        type: { summary: '"none" | "sm" | "md" | "lg" | "xl"' },
+        defaultValue: { summary: 'none' },
+      },
+    },
+    row: { 
+      control: 'boolean', 
+      description: 'Whether to arrange content horizontally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    flat: { 
+      control: 'boolean', 
+      description: 'Whether to remove border radius',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    active: { 
+      control: 'boolean', 
+      description: 'Whether the card is in active state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: { 
+      control: 'boolean', 
+      description: 'Whether the card is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    loading: { 
+      control: 'boolean', 
+      description: 'Whether the card is in loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    selected: { 
+      control: 'boolean', 
+      description: 'Whether the card is selected',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    interactive: { 
+      control: 'boolean', 
+      description: 'Whether the card responds to interactions',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    className: { 
+      control: 'text', 
+      description: 'Additional CSS class names',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Callback when card is clicked',
+    },
+    header: {
+      control: 'boolean',
+      description: 'Whether to show the header',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    footer: {
+      control: 'boolean',
+      description: 'Whether to show the footer',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    glass: {
+      control: 'boolean',
+      description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    rounded: {
+      control: 'boolean',
+      description: 'Whether the card has rounded corners',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    border: {
+      control: 'boolean',
+      description: 'Whether the card has a border',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    shadow: {
+      control: 'boolean',
+      description: 'Whether the card has a shadow',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    hoverable: {
+      control: 'boolean',
+      description: 'Whether the card has hover effects',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    mode: {
+      control: 'radio',
+      options: ['cartesian', 'polar', 'bipolar'],
+      description: 'The displacement mode for the glass effect',
+      table: {
+        type: { summary: '"cartesian" | "polar" | "bipolar"' },
+        defaultValue: { summary: 'polar' },
+      },
     },
-    row: { control: 'boolean' },
-    flat: { control: 'boolean' },
-    active: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    selected: { control: 'boolean' },
-    interactive: { control: 'boolean' },
-    className: { control: 'text', description: 'Additional CSS class names' },
   },
 } satisfies Meta<typeof Card>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Basic card with title and text content.
- */
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     title: 'Card Title',
     text: 'This is a basic card with title and text content.',
     className: 'custom-card',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic card with title and text content.',
+      },
+    },
+  },
 };
 
-/**
- * Card with an image displayed above the content.
- */
 export const WithImage: Story = {
   args: {
     title: 'Card with Image',
@@ -83,11 +291,15 @@ export const WithImage: Story = {
     image: 'https://placehold.co/600x400',
     imageAlt: 'Placeholder image',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card with an image displayed above the content.',
+      },
+    },
+  },
 };
 
-/**
- * Card with action buttons in the footer.
- */
 export const WithActions: Story = {
   args: {
     title: 'Card with Actions',
@@ -99,6 +311,13 @@ export const WithActions: Story = {
       </React.Fragment>
     ),
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Card with action buttons in the footer.',
+      },
+    },
+  },
 };
 
 /**
@@ -167,15 +386,9 @@ export const WithGlassEffect: Story = {
     },
   },
   render: args => (
-    <div
+    <div className="u-bg-cover u-h-80vh u-w-90vw u-grid u-rounded-xl u-overflow-hidden"
       style={{
         backgroundImage: `url(https://picsum.photos/id/128/1920/1024)`,
-        backgroundSize: 'cover',
-        height: '80vh',
-        width: '90vw',
-        display: 'grid',
-        borderRadius: '12px',
-        placeItems: 'center',
       }}
     >
       <Card {...args} style={{ ['--atomix-card-width' as string]: '300px' }} />
@@ -753,41 +966,20 @@ export const GlassCardGallery: Story = {
 // Glass Card Layouts
 export const GlassCardLayouts: Story = {
   render: () => (
-    <div
+    <div className="u-bg-cover u-bg-center u-p-12 u-rounded-xl u-min-h-95vh u-min-w-95vw u-overflow-auto"
       style={{
         backgroundImage: 'url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        padding: '3rem',
-        borderRadius: '12px',
-        minHeight: '95vh',
-        minWidth: '95vw',
-        overflow: 'auto',
       }}
     >
       <Container>
-        <h2
-          style={{
-            textAlign: 'center',
-            color: 'white',
-            marginBottom: '3rem',
-            fontSize: '2rem',
-            textShadow: '0 2px 8px rgba(0,0,0,0.5)',
-          }}
-        >
+        <h2 className="u-text-center u-text-white u-mb-12 u-text-2xl u-text-shadow">
           Glass Card Layouts
         </h2>
 
-        <div style={{ display: 'flex', gap: '2rem' }}>
+        <div className="u-flex u-gap-8">
           {/* Standard Layout */}
           <div className="u-w-50">
-            <h3
-              style={{
-                color: 'white',
-                marginBottom: '1rem',
-                textShadow: '0 2px 4px rgba(0,0,0,0.5)',
-              }}
-            >
+            <h3 className="u-text-white u-mb-4 u-text-shadow">
               Standard Layout
             </h3>
             <Card
@@ -807,13 +999,7 @@ export const GlassCardLayouts: Story = {
 
           {/* Row Layout */}
           <div className="u-w-50">
-            <h3
-              style={{
-                color: 'white',
-                marginBottom: '1rem',
-                textShadow: '0 2px 4px rgba(0,0,0,0.5)',
-              }}
-            >
+            <h3 className="u-text-white u-mb-4 u-text-shadow">
               Row Layout
             </h3>
             <Card
@@ -838,13 +1024,7 @@ export const GlassCardLayouts: Story = {
 
           {/* Flat Layout */}
           <div className="u-w-50">
-            <h3
-              style={{
-                color: 'white',
-                marginBottom: '1rem',
-                textShadow: '0 2px 4px rgba(0,0,0,0.5)',
-              }}
-            >
+            <h3 className="u-text-white u-mb-4 u-text-shadow">
               Flat Layout
             </h3>
             <Card

package/src/components/Chart/Chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React from 'react';
 import { useState } from 'react';
 import { Container, Grid, GridCol } from '../../layouts/Grid';
@@ -37,12 +38,140 @@ const meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component:
-          'The Chart component provides a comprehensive charting library with 20+ chart types including line, bar, pie, area, and more. Charts support real-time data updates, animations, interactive tooltips, and advanced customization options. Ideal for dashboards, analytics, data visualization, and any application requiring graphical data representation.',
+        component: `
+# Chart
+
+## Overview
+
+Charts provide a comprehensive charting library with 20+ chart types including line, bar, pie, area, and more. Charts support real-time data updates, animations, interactive tooltips, and advanced customization options. Ideal for dashboards, analytics, data visualization, and any application requiring graphical data representation.
+
+## Features
+
+- Multiple chart types (Line, Bar, Pie, Area, etc.)
+- Real-time data updates
+- Interactive tooltips and annotations
+- Animation capabilities
+- Glass morphism effects
+- Toolbar with export options
+- Multi-axis support
+- Advanced analytics integration
+
+## Accessibility
+
+- Keyboard support: Charts can be navigated using Tab key and arrow keys
+- Screen reader: Data points and chart information announced appropriately
+- ARIA support: Roles and properties ensure chart accessibility
+- Focus management: Maintains focus on interactive chart elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<LineChart 
+  title="Sales Performance" 
+  datasets={[{ label: 'Sales', data: data, color: 'var(--atomix-primary)' }]} 
+/>
+\`\`\`
+
+### With Glass Effect
+
+\`\`\`tsx
+<BarChart 
+  title="Revenue by Month" 
+  datasets={datasets}
+  glass={true}
+  showToolbar={true}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| title | string | - | Title of the chart |
+| subtitle | string | - | Subtitle of the chart |
+| datasets | Dataset[] | [] | Array of datasets to plot |
+| width | string \\| number | 100% | Width of the chart |
+| height | string \\| number | 400px | Height of the chart |
+| glass | boolean | false | Whether to apply glass effect |
+| showToolbar | boolean | false | Whether to show the toolbar |
+| config | ChartConfig | {} | Additional configuration options |
+| onPointClick | (point) => void | - | Callback when a data point is clicked |
+| onPointHover | (point) => void | - | Callback when hovering over a data point |
+        `,
       },
     },
   },
   tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title of the chart',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle of the chart',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    width: {
+      control: 'text',
+      description: 'Width of the chart',
+      table: {
+        type: { summary: 'string | number' },
+        defaultValue: { summary: '100%' },
+      },
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the chart',
+      table: {
+        type: { summary: 'string | number' },
+        defaultValue: { summary: '400px' },
+      },
+    },
+    glass: {
+      control: 'boolean',
+      description: 'Whether to apply glass effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    showToolbar: {
+      control: 'boolean',
+      description: 'Whether to show the toolbar',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    config: {
+      control: 'object',
+      description: 'Additional configuration options',
+      table: {
+        type: { summary: 'ChartConfig' },
+        defaultValue: { summary: '{}' },
+      },
+    },
+    onPointClick: {
+      action: 'point clicked',
+      description: 'Callback when a data point is clicked',
+    },
+    onPointHover: {
+      action: 'point hovered',
+      description: 'Callback when hovering over a data point',
+    },
+  },
 } satisfies Meta<typeof Chart>;
 
 export default meta;
@@ -50,7 +179,7 @@ type Story = StoryObj<typeof meta>;
 
 // Glass Variant Story
 export const GlassVariant: Story = {
-  render: () => {
+  render: (args) => {
     const sampleData = [
       { label: 'Jan', value: 65 },
       { label: 'Feb', value: 78 },
@@ -84,6 +213,7 @@ export const GlassVariant: Story = {
             </GridCol>
             <GridCol col={12} md={6}>
               <LineChart
+                {...args}
                 title="Sales Performance"
                 subtitle="Monthly revenue data"
                 datasets={datasets}
@@ -97,15 +227,16 @@ export const GlassVariant: Story = {
             </GridCol>
             <GridCol col={12} md={6}>
               <BarChart
+                {...args}
                 title="Revenue by Month"
                 subtitle="Q1-Q2 comparison"
                 datasets={datasets}
-                glass={{
-                  displacementScale: 30,
-                  saturation: 200,
-                  mode: 'polar',
-                }}
+                glass={true}
                 showToolbar={true}
+                config={{
+                  showTooltips: true,
+                  animate: true,
+                }}
               />
             </GridCol>
             <GridCol col={12} md={6}>
@@ -134,6 +265,17 @@ export const GlassVariant: Story = {
       </div>
     );
   },
+  args: {
+    onPointClick: fn(),
+    onPointHover: fn(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Chart with glass effect applied to demonstrate aesthetic enhancement.',
+      },
+    },
+  },
 };
 
 // Data generators