@shohojdhara/atomix 0.3.14 → 0.4.0

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.',
+      },
+    },
+  },
 };
 
 /**
@@ -162,20 +381,16 @@ export const WithGlassEffect: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
+        story:
+          'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
       },
     },
   },
   render: args => (
     <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' }} />
@@ -507,7 +722,8 @@ export const AllGlassModesComparison: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
+        story:
+          'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
       },
     },
   },
@@ -754,42 +970,20 @@ export const GlassCardGallery: Story = {
 export const GlassCardLayouts: Story = {
   render: () => (
     <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)',
-              }}
-            >
-              Standard Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Standard Layout</h3>
             <Card
               title="Standard Glass Card"
               text="This is a standard glass card with vertical layout."
@@ -807,15 +1001,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)',
-              }}
-            >
-              Row Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Row Layout</h3>
             <Card
               title="Row Glass Card"
               text="This is a row glass card with horizontal layout."
@@ -838,15 +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)',
-              }}
-            >
-              Flat Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Flat Layout</h3>
             <Card
               title="Flat Glass Card"
               text="This is a flat glass card with edge-to-edge image."
@@ -901,7 +1079,13 @@ export const SizeVariants: Story = {
 // Color Variants
 export const ColorVariants: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '1rem',
+      }}
+    >
       <Card variant="primary" title="Primary Card" text="Primary variant card." />
       <Card variant="secondary" title="Secondary Card" text="Secondary variant card." />
       <Card variant="success" title="Success Card" text="Success variant card." />
@@ -917,11 +1101,37 @@ export const ColorVariants: Story = {
 // Appearance Variants
 export const AppearanceVariants: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
-      <Card appearance="filled" variant="primary" title="Filled Card" text="Filled appearance with solid background." />
-      <Card appearance="outlined" variant="primary" title="Outlined Card" text="Outlined appearance with border only." />
-      <Card appearance="ghost" variant="primary" title="Ghost Card" text="Ghost appearance with minimal styling." />
-      <Card appearance="elevated" variant="primary" title="Elevated Card" text="Elevated appearance with shadow." />
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '1rem',
+      }}
+    >
+      <Card
+        appearance="filled"
+        variant="primary"
+        title="Filled Card"
+        text="Filled appearance with solid background."
+      />
+      <Card
+        appearance="outlined"
+        variant="primary"
+        title="Outlined Card"
+        text="Outlined appearance with border only."
+      />
+      <Card
+        appearance="ghost"
+        variant="primary"
+        title="Ghost Card"
+        text="Ghost appearance with minimal styling."
+      />
+      <Card
+        appearance="elevated"
+        variant="primary"
+        title="Elevated Card"
+        text="Elevated appearance with shadow."
+      />
     </div>
   ),
 };
@@ -1008,7 +1218,8 @@ export const Comprehensive: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
+        story:
+          'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
       },
     },
   },

package/src/components/Card/Card.tsx

@@ -96,7 +96,24 @@ export const Card = React.memo(
           ]
             .filter(Boolean)
             .join(' '),
-        [size, variant, appearance, elevation, hoverable, hoverElevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]
+        [
+          size,
+          variant,
+          appearance,
+          elevation,
+          hoverable,
+          hoverElevation,
+          row,
+          flat,
+          active,
+          disabled,
+          loading,
+          selected,
+          interactive,
+          isClickable,
+          glass,
+          className,
+        ]
       );
 
       // Determine ARIA role
@@ -239,11 +256,7 @@ export const Card = React.memo(
 
         if (glass) {
           const glassProps = glass === true ? {} : glass;
-          return (
-            <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-              {anchorElement}
-            </AtomixGlass>
-          );
+          return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{anchorElement}</AtomixGlass>;
         }
 
         return anchorElement;
@@ -258,11 +271,7 @@ export const Card = React.memo(
 
       if (glass) {
         const glassProps = glass === true ? {} : glass;
-        return (
-          <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-            {divElement}
-          </AtomixGlass>
-        );
+        return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{divElement}</AtomixGlass>;
       }
 
       return divElement;
@@ -327,10 +336,16 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
   ({ scrollable = false, maxHeight, children, className = '', style, ...props }, ref) => {
-    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
+    const bodyClasses =
+      `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
     const bodyStyle: React.CSSProperties = {
       ...style,
-      ...(scrollable && maxHeight ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, overflowY: 'auto' } : {}),
+      ...(scrollable && maxHeight
+        ? {
+            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            overflowY: 'auto',
+          }
+        : {}),
     };
 
     return (
@@ -352,7 +367,8 @@ export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
   ({ align, children, className = '', style, ...props }, ref) => {
-    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
+    const footerClasses =
+      `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
 
     return (
       <div ref={ref} className={footerClasses} style={style} {...props}>

package/src/components/Chart/AreaChart.tsx

@@ -49,7 +49,7 @@ const AreaChart = memo(
                 y: scales.yScale(point.value),
               }));
 
-              const areaPath = `M ${areaPoints.map((p) => `${p.x},${p.y}`).join(' L ')} L ${areaPoints[areaPoints.length - 1]?.x},${scales.height} L ${areaPoints[0]?.x},${scales.height} Z`;
+              const areaPath = `M ${areaPoints.map(p => `${p.x},${p.y}`).join(' L ')} L ${areaPoints[areaPoints.length - 1]?.x},${scales.height} L ${areaPoints[0]?.x},${scales.height} Z`;
 
               return (
                 <g key={`dataset-${datasetIndex}`}>

package/src/components/Chart/CandlestickChart.tsx

@@ -125,7 +125,10 @@ const CandlestickChart = memo(
         borderColor = 'var(--atomix-primary-border-subtle)',
         showMovingAverages = false,
         movingAveragePeriods = [7, 21],
-        movingAverageColors = ['var(--atomix-warning-bg-subtle)', 'var(--atomix-warning-border-subtle)'],
+        movingAverageColors = [
+          'var(--atomix-warning-bg-subtle)',
+          'var(--atomix-warning-border-subtle)',
+        ],
         dateFormat = 'short',
         dateFormatter,
         showGrid = true,
@@ -189,7 +192,11 @@ const CandlestickChart = memo(
       }: ChartRenderContentParams) => {
         if (!candlestickData.length) return null;
 
-        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? candlestickOptions.showTooltips ?? true;
+        const showTooltips =
+          toolbarState?.showTooltips ??
+          renderConfig?.showTooltips ??
+          candlestickOptions.showTooltips ??
+          true;
 
         const padding = 40;
         const chartWidth = scales.width - padding * 2;
@@ -298,7 +305,9 @@ const CandlestickChart = memo(
                   );
                 }}
                 onMouseLeave={handlers.onPointLeave}
-                onClick={() => handlers.onDataPointClick?.(candle as unknown as ChartDataPoint, 0, index)}
+                onClick={() =>
+                  handlers.onDataPointClick?.(candle as unknown as ChartDataPoint, 0, index)
+                }
               />
             </g>
           );
@@ -372,19 +381,17 @@ const CandlestickChart = memo(
             {candles}
             {volumeBars}
             {movingAverages}
-            {showTooltips &&
-              hoveredPoint &&
-              candlestickData[hoveredPoint.pointIndex] && (
-                <ChartTooltip
-                  dataPoint={candlestickData[hoveredPoint.pointIndex] as unknown as ChartDataPoint}
-                  datasetLabel="Candlestick"
-                  position={{
-                    x: hoveredPoint.clientX,
-                    y: hoveredPoint.clientY,
-                  }}
-                  visible={true}
-                />
-              )}
+            {showTooltips && hoveredPoint && candlestickData[hoveredPoint.pointIndex] && (
+              <ChartTooltip
+                dataPoint={candlestickData[hoveredPoint.pointIndex] as unknown as ChartDataPoint}
+                datasetLabel="Candlestick"
+                position={{
+                  x: hoveredPoint.clientX,
+                  y: hoveredPoint.clientY,
+                }}
+                visible={true}
+              />
+            )}
           </>
         );
       };