@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Chart/types.ts

@@ -0,0 +1,338 @@
+import { ReactNode } from 'react';
+import { BaseComponentProps, Size, Variant } from '../../lib/types/components';
+
+/**
+ * Chart types - comprehensive list
+ */
+export type ChartType =
+  | 'line'
+  | 'area'
+  | 'bar'
+  | 'horizontal-bar'
+  | 'pie'
+  | 'donut'
+  | 'doughnut'
+  | 'scatter'
+  | 'radar'
+  | 'bubble'
+  | 'candlestick'
+  | 'interactive'
+  | 'advanced'
+  | 'gauge'
+  | 'funnel'
+  | 'waterfall'
+  | 'heatmap'
+  | 'treemap'
+  | 'realtime';
+
+/**
+ * Chart data point interface
+ */
+export interface ChartDataPoint {
+  label: string;
+  value: number;
+  color?: string;
+  metadata?: Record<string, any>;
+}
+
+/**
+ * Chart dataset interface
+ */
+export interface ChartDataset {
+  label: string;
+  data: ChartDataPoint[];
+  color?: string;
+  visible?: boolean;
+}
+
+/**
+ * Chart axis configuration
+ */
+export interface ChartAxis {
+  label?: string;
+  showGrid?: boolean;
+  showLabels?: boolean;
+  min?: number;
+  max?: number;
+  formatter?: (value: number) => string;
+  ticks?: number;
+}
+
+/**
+ * Chart configuration
+ */
+export interface ChartConfig {
+  xAxis?: ChartAxis;
+  yAxis?: ChartAxis;
+  showLegend?: boolean;
+  showTooltips?: boolean;
+  animate?: boolean;
+  animationDuration?: number;
+}
+
+/**
+ * Extended chart size options
+ */
+export type ChartSize = Size | 'xl' | 'full';
+
+/**
+ * Comprehensive chart props interface
+ */
+export interface ChartProps extends BaseComponentProps {
+  /**
+   * Chart type
+   */
+  type?: ChartType;
+
+  /**
+   * Chart data (simplified)
+   */
+  data?: ChartDataPoint[];
+
+  /**
+   * Chart datasets (advanced)
+   */
+  datasets?: ChartDataset[];
+
+  /**
+   * Chart configuration
+   */
+  config?: ChartConfig;
+
+  /**
+   * Chart size
+   */
+  size?: ChartSize;
+
+  /**
+   * Chart variant
+   */
+  variant?: Variant;
+
+  /**
+   * Chart title
+   */
+  title?: string;
+
+  /**
+   * Chart subtitle
+   */
+  subtitle?: string;
+
+  /**
+   * Whether to show legend
+   */
+  showLegend?: boolean;
+
+  /**
+   * Whether chart is interactive
+   */
+  interactive?: boolean;
+
+  /**
+   * Loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Error message
+   */
+  error?: string;
+
+  /**
+   * Fullscreen mode
+   */
+  fullscreen?: boolean;
+
+  /**
+   * Show toolbar with actions
+   */
+  showToolbar?: boolean;
+
+  /**
+   * Enable fullscreen functionality
+   */
+  enableFullscreen?: boolean;
+
+  /**
+   * Enable export functionality
+   */
+  enableExport?: boolean;
+
+  /**
+   * Enable refresh functionality
+   */
+  enableRefresh?: boolean;
+
+  /**
+   * Available export formats
+   */
+  exportFormats?: ('png' | 'svg' | 'csv' | 'json')[];
+
+  /**
+   * Data point click handler
+   */
+  onDataPointClick?: (dataPoint: ChartDataPoint, datasetIndex: number, pointIndex: number) => void;
+
+  /**
+   * Legend item click handler
+   */
+  onLegendItemClick?: (datasetIndex: number, visible: boolean) => void;
+
+  /**
+   * Fullscreen state change handler
+   */
+  onFullscreen?: (isFullscreen: boolean) => void;
+
+  /**
+   * Export handler
+   */
+  onExport?: (format: string) => Promise<void> | void;
+
+  /**
+   * Refresh handler
+   */
+  onRefresh?: () => void;
+
+  /**
+   * Chart content for wrapper usage
+   */
+  children?: ReactNode;
+
+  /**
+   * Accessibility label
+   */
+  'aria-label'?: string;
+
+  /**
+   * Toolbar configuration
+   */
+  toolbarConfig?: {
+    enableDefaults?: boolean;
+    defaults?: {
+      refresh?: boolean;
+      export?: boolean;
+      fullscreen?: boolean;
+      settings?: boolean;
+      zoom?: boolean;
+      pan?: boolean;
+      reset?: boolean;
+      grid?: boolean;
+      legend?: boolean;
+      tooltips?: boolean;
+      animations?: boolean;
+    };
+    handlers?: {
+      onRefresh?: () => void;
+      onExport?: (format: string) => Promise<void> | void;
+      onFullscreen?: (isFullscreen: boolean) => void;
+      onZoomIn?: () => void;
+      onZoomOut?: () => void;
+      onZoomReset?: () => void;
+      onPanToggle?: (enabled: boolean) => void;
+      onReset?: () => void;
+      onGridToggle?: (show: boolean) => void;
+      onLegendToggle?: (show: boolean) => void;
+      onTooltipsToggle?: (show: boolean) => void;
+      onAnimationsToggle?: (enabled: boolean) => void;
+    };
+  };
+
+  /**
+   * Custom toolbar actions
+   */
+  customToolbarActions?: Array<{
+    id: string;
+    label: string;
+    icon: string;
+    onClick: () => void;
+    disabled?: boolean;
+    active?: boolean;
+    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+    tooltip?: string;
+  }>;
+
+  /**
+   * Custom toolbar groups
+   */
+  customToolbarGroups?: Array<{
+    id: string;
+    label?: string;
+    actions: Array<{
+      id: string;
+      label: string;
+      icon: string;
+      onClick: () => void;
+      disabled?: boolean;
+      active?: boolean;
+      variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+      tooltip?: string;
+    }>;
+    separator?: boolean;
+  }>;
+}
+
+/**
+ * Chart scales interface
+ */
+export interface ChartScales {
+  xScale: (index: number) => number;
+  yScale: (value: number) => number;
+  width: number;
+  height: number;
+  padding: { top: number; right: number; bottom: number; left: number };
+}
+
+/**
+ * Chart interaction state
+ */
+export interface ChartInteraction {
+  hoveredIndex: number | null;
+  selectedIndex: number | null;
+}
+
+/**
+ * Chart toolbar configuration interface
+ */
+export interface ChartToolbarConfig {
+  enableDefaults?: boolean;
+  defaults?: {
+    refresh?: boolean;
+    export?: boolean;
+    fullscreen?: boolean;
+    settings?: boolean;
+    zoom?: boolean;
+    pan?: boolean;
+    reset?: boolean;
+    grid?: boolean;
+    legend?: boolean;
+    tooltips?: boolean;
+    animations?: boolean;
+  };
+  exportFormats?: ('png' | 'svg' | 'csv' | 'json' | 'pdf')[];
+  customActions?: Array<{
+    id: string;
+    label: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    active?: boolean;
+    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+    tooltip?: string;
+  }>;
+  customGroups?: Array<{
+    id: string;
+    label?: string;
+    actions: Array<{
+      id: string;
+      label: string;
+      icon: React.ReactNode;
+      onClick: () => void;
+      disabled?: boolean;
+      active?: boolean;
+      variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+      tooltip?: string;
+    }>;
+    separator?: boolean;
+  }>;
+}

package/src/components/ColorModeToggle/ColorModeToggle.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorModeToggle } from './ColorModeToggle';
+
+const meta = {
+  title: 'Components/ColorModeToggle',
+  component: ColorModeToggle,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+  },
+} satisfies Meta<typeof ColorModeToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Color Mode Toggle
+export const Default: Story = {
+  args: {},
+};
+
+// With Custom Class
+export const WithCustomClass: Story = {
+  args: {
+    className: 'custom-class',
+  },
+};
+
+// Example Usage
+export const ExampleUsage: Story = {
+  render: () => (
+    <div
+      className="u-p-5 u-shadow u-d-flex u-justify-content-between u-align-items-center"
+      style={{ width: '300px', borderRadius: '8px' }}
+    >
+      <span>Toggle Theme</span>
+      <ColorModeToggle />
+    </div>
+  ),
+};

package/src/components/ColorModeToggle/ColorModeToggle.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+
+export interface ColorModeToggleProps {
+  className?: string;
+}
+
+export const ColorModeToggle: React.FC<ColorModeToggleProps> = ({ className = '' }) => {
+  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
+
+  // Initialize color mode from localStorage or system preference
+  useEffect(() => {
+    // Check if color mode is already set in localStorage
+    const storedColorMode = localStorage.getItem('atomix-color-mode');
+
+    if (storedColorMode === 'light' || storedColorMode === 'dark') {
+      setColorMode(storedColorMode);
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      // Use system preference if no stored preference
+      setColorMode('dark');
+    }
+  }, []);
+
+  // Update the document theme attribute when colorMode changes
+  useEffect(() => {
+    document.body.setAttribute('data-atomix-color-mode', colorMode);
+    localStorage.setItem('atomix-color-mode', colorMode);
+  }, [colorMode]);
+
+  // Listen for system color scheme changes
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleSystemThemeChange = (event: MediaQueryListEvent) => {
+      // Only update if user hasn't explicitly set a preference
+      if (!localStorage.getItem('atomix-color-mode')) {
+        setColorMode(event.matches ? 'dark' : 'light');
+      }
+    };
+
+    // Add event listener for system theme changes
+    if (darkModeMediaQuery.addEventListener) {
+      darkModeMediaQuery.addEventListener('change', handleSystemThemeChange);
+    } else {
+      // Fallback for older browsers
+      darkModeMediaQuery.addListener(handleSystemThemeChange);
+    }
+
+    // Clean up event listener
+    return () => {
+      if (darkModeMediaQuery.removeEventListener) {
+        darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange);
+      } else {
+        // Fallback for older browsers
+        darkModeMediaQuery.removeListener(handleSystemThemeChange);
+      }
+    };
+  }, []);
+
+  const toggleColorMode = () => {
+    setColorMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <button
+      className={`c-color-mode-toggle ${className}`}
+      onClick={toggleColorMode}
+      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      title={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {colorMode === 'light' ? (
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <path d="M9.37 5.51c-.18.64-.27 1.31-.27 1.99 0 4.08 3.32 7.4 7.4 7.4.68 0 1.35-.09 1.99-.27C17.45 17.19 14.93 19 12 19c-3.86 0-7-3.14-7-7 0-2.93 1.81-5.45 4.37-6.49zM12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41.39.39 1.03.39 1.41 0l1.06-1.06z" />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+ColorModeToggle.displayName = 'ColorModeToggle';
+
+export default ColorModeToggle;

package/src/components/ColorModeToggle/index.ts

@@ -0,0 +1,2 @@
+export { default as ColorModeToggle } from './ColorModeToggle';
+export type { ColorModeToggleProps } from './ColorModeToggle';

package/src/components/Countdown/Countdown.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Countdown } from './Countdown';
+
+const meta = {
+  title: 'Components/Countdown',
+  component: Countdown,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    target: { control: 'date', description: 'Target date/time' },
+    show: {
+      control: 'check',
+      options: ['days', 'hours', 'minutes', 'seconds'],
+      description: 'Fields to show',
+    },
+    separator: { control: 'text', description: 'Separator string' },
+    focused: { control: 'boolean', description: 'Focused style' },
+  },
+} satisfies Meta<typeof Countdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const futureDate = new Date(Date.now() + 1000 * 60 * 60 * 24 + 1000 * 60 * 45 + 1000 * 30); // 1d 45m 30s
+
+export const Default: Story = {
+  args: {
+    target: futureDate,
+  },
+};
+
+export const Focused: Story = {
+  args: {
+    target: futureDate,
+    focused: true,
+  },
+};
+
+export const CustomSeparator: Story = {
+  args: {
+    target: futureDate,
+    separator: ' | ',
+    show: ['hours', 'minutes', 'seconds'],
+  },
+};

package/src/components/Countdown/Countdown.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+
+export interface CountdownProps {
+  /** Target date/time as a Date or ISO string */
+  target: Date | string;
+  /** Show days, hours, minutes, seconds */
+  show?: Array<'days' | 'hours' | 'minutes' | 'seconds'>;
+  /** Separator string */
+  separator?: string;
+  /** Focused style */
+  focused?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Optional callback when countdown reaches zero */
+  onComplete?: () => void;
+}
+
+function getTimeParts(diff: number) {
+  const totalSeconds = Math.max(0, Math.floor(diff / 1000));
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return { days, hours, minutes, seconds };
+}
+
+export const Countdown: React.FC<CountdownProps> = forwardRef<HTMLDivElement, CountdownProps>(
+  (
+    {
+      target,
+      show = ['days', 'hours', 'minutes', 'seconds'],
+      separator = ':',
+      focused = false,
+      className = '',
+      onComplete,
+    },
+    ref
+  ) => {
+    const targetDate = typeof target === 'string' ? new Date(target) : target;
+    const [now, setNow] = useState(() => new Date());
+    const [completed, setCompleted] = useState(false);
+
+    useEffect(() => {
+      if (completed) return undefined;
+      const interval = setInterval(() => {
+        setNow(new Date());
+      }, 1000);
+      return () => clearInterval(interval);
+    }, [completed]);
+
+    const diff = targetDate.getTime() - now.getTime();
+    const { days, hours, minutes, seconds } = getTimeParts(diff);
+
+    useEffect(() => {
+      if (diff <= 0 && !completed) {
+        setCompleted(true);
+        if (onComplete) onComplete();
+      }
+    }, [diff, completed, onComplete]);
+
+    const timeParts = [];
+    if (show.includes('days')) timeParts.push({ label: 'Days', value: days });
+    if (show.includes('hours')) timeParts.push({ label: 'Hours', value: hours });
+    if (show.includes('minutes')) timeParts.push({ label: 'Minutes', value: minutes });
+    if (show.includes('seconds')) timeParts.push({ label: 'Seconds', value: seconds });
+
+    return (
+      <div
+        ref={ref}
+        className={`c-countdown${focused ? ' c-countdown--focused' : ''} ${className}`.trim()}
+      >
+        {timeParts.map((part, idx) => (
+          <React.Fragment key={part.label}>
+            <div className="c-countdown__time">
+              <span className="c-countdown__time-count">{String(part.value).padStart(2, '0')}</span>
+              <span className="c-countdown__time-label">{part.label}</span>
+            </div>
+            {idx < timeParts.length - 1 && (
+              <span className="c-countdown__separator">{separator}</span>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  }
+);
+
+Countdown.displayName = 'Countdown';
+
+export default Countdown;

package/src/components/Countdown/index.ts

@@ -0,0 +1,2 @@
+export { Countdown } from './Countdown';
+export type { CountdownProps } from './Countdown';