@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/components/Badge/Badge.stories.tsx

@@ -1,344 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Badge } from './Badge';
-import { BADGE } from '../../lib/constants/components';
-import { THEME_COLORS, SIZES } from '../../lib/constants/components';
-
-// Extract class names without the leading dots
-const BADGE_CLASS = BADGE.BASE_CLASS;
-
-const meta = {
-  title: 'Components/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: THEME_COLORS,
-      description: 'The visual style of the badge'
-    },
-    size: {
-      control: { type: 'select' },
-      options: SIZES,
-      description: 'The size of the badge'
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the badge is disabled'
-    },
-    icon: {
-      control: 'text',
-      description: 'Optional icon element to display in the badge'
-    },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Mock icon component for stories
-const Icon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path>
-    <path d="M12 8v8"></path>
-    <path d="M8 12h8"></path>
-  </svg>
-);
-
-// Basic Badges
-export const Primary: Story = {
-  args: {
-    label: 'Primary',
-    variant: 'primary',
-    size: 'md',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Secondary',
-    variant: 'secondary',
-    size: 'md',
-  },
-};
-
-export const Success: Story = {
-  args: {
-    label: 'Success',
-    variant: 'success',
-    size: 'md',
-  },
-};
-
-export const Info: Story = {
-  args: {
-    label: 'Info',
-    variant: 'info',
-    size: 'md',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    label: 'Warning',
-    variant: 'warning',
-    size: 'md',
-  },
-};
-
-export const error: Story = {
-  args: {
-    label: 'Error',
-    variant: 'error',
-    size: 'md',
-  },
-};
-
-export const Light: Story = {
-  args: {
-    label: 'Light',
-    variant: 'light',
-    size: 'md',
-  },
-};
-
-export const Dark: Story = {
-  args: {
-    label: 'Dark',
-    variant: 'dark',
-    size: 'md',
-  },
-};
-
-// Badge Sizes
-export const Small: Story = {
-  args: {
-    label: 'Small',
-    variant: 'primary',
-    size: 'sm',
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    label: 'Medium',
-    variant: 'primary',
-    size: 'md',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Large',
-    variant: 'primary',
-    size: 'lg',
-  },
-};
-
-// States
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled',
-    variant: 'primary',
-    size: 'md',
-    disabled: true,
-  },
-};
-
-// With Icon
-export const WithIcon: Story = {
-  args: {
-    label: 'With Icon',
-    variant: 'primary',
-    size: 'md',
-    icon: <Icon />,
-  },
-};
-
-// Group of Badge Variants
-export const AllVariants: Story = {
-  args: {
-    label: 'Badge',
-    variant: 'primary',
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-wrap u-gap-2">
-      {THEME_COLORS.map((color) => (
-        <Badge key={color} label={color} variant={color} />
-      ))}
-    </div>
-  ),
-};
-
-// Group of Badge Sizes
-export const AllSizes: Story = {
-  args: {
-    label: 'Badge',
-    variant: 'primary',
-  },
-  render: () => (
-    <div className="u-d-flex u-align-items-center u-gap-2">
-      <Badge label="Small" variant="primary" size="sm" />
-      <Badge label="Medium" variant="primary" size="md" />
-      <Badge label="Large" variant="primary" size="lg" />
-    </div>
-  ),
-};
-
-// With different content
-export const WithDifferentContent: Story = {
-  args: {
-    label: 'Badge with different content',
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-4">
-      <div>
-        <h3 className="u-mt-0 u-mb-2">Numeric Badges</h3>
-        <div className="u-d-flex u-gap-2">
-          <Badge label="1" variant="primary" />
-          <Badge label="2" variant="secondary" />
-          <Badge label="3" variant="success" />
-          <Badge label="4" variant="error" />
-          <Badge label="5" variant="warning" />
-          <Badge label="6" variant="info" />
-        </div>
-      </div>
-      <div>
-        <h3 className="u-mt-0 u-mb-2">Status Badges</h3>
-        <div className="u-d-flex u-gap-2">
-          <Badge label="New" variant="primary" />
-          <Badge label="Active" variant="success" />
-          <Badge label="Pending" variant="warning" />
-          <Badge label="Failed" variant="error" />
-          <Badge label="Blocked" variant="secondary" />
-        </div>
-      </div>
-      <div>
-        <h3 className="u-mt-0 u-mb-2">Badges with Icons</h3>
-        <div className="u-d-flex u-gap-2">
-          <Badge label="Info" variant="info" icon={<Icon />} />
-          <Badge label="Warning" variant="warning" icon={<Icon />} />
-          <Badge label="Success" variant="success" icon={<Icon />} />
-          <Badge label="Error" variant="error" icon={<Icon />} />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// Usage examples
-export const UsageExamples: Story = {
-  args: {
-    label: 'Usage examples',
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-6 u-max-width-80">
-      <div>
-        <h3 className="u-mt-0 u-mb-2">In navigation</h3>
-        <div className="u-d-flex u-gap-4">
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span>Inbox</span>
-            <Badge label="24" variant="error" size="sm" />
-          </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span>Notifications</span>
-            <Badge label="3" variant="primary" size="sm" />
-          </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span>Messages</span>
-            <Badge label="New" variant="success" size="sm" />
-          </div>
-        </div>
-      </div>
-      
-      <div>
-        <h3 className="u-mt-0 u-mb-2">In cards</h3>
-        <div className="u-p-4 u-shadow u-d-flex u-flex-column u-gap-2">
-          <div className="u-d-flex u-justify-content-between">
-            <h4 className="u-m-0">Product Title</h4>
-            <Badge label="Sale" variant="error" />
-          </div>
-          <p className="u-my-2">This is a sample product description.</p>
-          <div className="u-d-flex u-gap-2">
-            <Badge label="In Stock" variant="success" size="sm" />
-            <Badge label="Free Shipping" variant="info" size="sm" />
-          </div>
-        </div>
-      </div>
-      
-      <div>
-        <h3 className="u-mt-0 u-mb-2">In lists</h3>
-        <ul className="u-p-0 u-m-0" style={{ listStyle: 'none' }}>
-          <li className="u-py-2 u-d-flex u-justify-content-between" style={{ borderBottom: '1px solid #e0e0e0' }}>
-            <span>Task 1</span>
-            <Badge label="Completed" variant="success" size="sm" />
-          </li>
-          <li className="u-py-2 u-d-flex u-justify-content-between" style={{ borderBottom: '1px solid #e0e0e0' }}>
-            <span>Task 2</span>
-            <Badge label="In Progress" variant="warning" size="sm" />
-          </li>
-          <li className="u-py-2 u-d-flex u-justify-content-between">
-            <span>Task 3</span>
-            <Badge label="Not Started" variant="secondary" size="sm" />
-          </li>
-        </ul>
-      </div>
-    </div>
-  ),
-};
-
-// Theme-aware demo showing badges in both light and dark mode side by side
-export const ThemeAwareBadges: Story = {
-  args: {
-    label: 'Badge',
-    variant: 'primary',
-  },
-  render: () => (
-    <div className="u-d-flex u-flex-column u-gap-6">
-      <div>
-        <h3 className="u-mt-0 u-mb-2">Theme Aware Badges</h3>
-        <p className="u-mb-4">The badges below demonstrate how they adapt to different theme modes.</p>
-        <div className="u-d-flex u-gap-5 u-mt-4">
-          <div className="u-p-5 u-shadow u-flex-1">
-            <h4 className="u-mt-0">Current Theme</h4>
-            <div className="u-d-flex u-flex-wrap u-gap-2">
-              {THEME_COLORS.map((color) => (
-                <Badge key={color} label={color} variant={color} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div>
-        <h3 className="u-mt-2 u-mb-2">Accessibility Considerations</h3>
-        <p className="u-mb-2">Our badges are designed to maintain proper contrast in both light and dark modes.</p>
-        <div className="u-d-flex u-flex-column u-gap-2 u-mt-2">
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>Primary:</span>
-            <Badge label="New Feature" variant="primary" />
-          </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>Success:</span>
-            <Badge label="Completed" variant="success" />
-          </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>Warning:</span>
-            <Badge label="In Progress" variant="warning" />
-          </div>
-          <div className="u-d-flex u-align-items-center u-gap-2">
-            <span className="u-d-inline-block" style={{ width: '120px' }}>error:</span>
-            <Badge label="Failed" variant="error" />
-          </div>
-        </div>
-      </div>
-      
-      <div className="u-mt-4">
-        <p>Use the Color Mode toggle in the Storybook toolbar to switch between light and dark mode!</p>
-      </div>
-    </div>
-  ),
-}; 

package/src/components/Badge/Badge.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { BadgeProps } from '../../lib/types/components';
-import { useBadge } from '../../lib/composables/useBadge';
-import { BADGE } from '../../lib/constants/components';
-
-export const Badge: React.FC<BadgeProps> = ({
-  label,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  icon,
-  className = '',
-}) => {
-  const { generateBadgeClass } = useBadge({ 
-    variant, size, disabled 
-  });
-  
-  const badgeClass = generateBadgeClass({ 
-    variant, size, disabled, className 
-  });
-  
-  return (
-    <span
-      className={badgeClass}
-      aria-disabled={disabled}
-    >
-      {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
-      <span>{label}</span>
-    </span>
-  );
-}; 
-
-Badge.displayName = 'Badge';
-
-export type { BadgeProps };
-
-export default Badge;

package/src/components/Badge/index.ts

@@ -1,3 +0,0 @@
-export { Badge } from "./Badge";
-export { default } from "./Badge";
-export type { BadgeProps } from "./Badge";

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumb } from './Breadcrumb';
-import { Icon } from '../Icon';
-
-const meta = {
-  title: 'Components/Breadcrumb',
-  component: Breadcrumb,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    items: { control: 'object' },
-    divider: { control: 'text' },
-    className: { control: 'text' },
-    ariaLabel: { control: 'text' },
-  },
-} satisfies Meta<typeof Breadcrumb>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default Breadcrumb
-export const Default: Story = {
-  args: {
-    items: [
-      { label: 'Home', href: '/' },
-      { label: 'Products', href: '/products' },
-      { label: 'Category', href: '/products/category' },
-      { label: 'Product Name', active: true }
-    ]
-  },
-};
-
-// Breadcrumb with Icons
-export const WithIcons: Story = {
-  args: {
-    items: [
-      { 
-        label: 'Home', 
-        href: '/', 
-        icon: <Icon name="House" size="sm" /> 
-      },
-      { 
-        label: 'Products', 
-        href: '/products', 
-        icon: <Icon name="Package" size="sm" /> 
-      },
-      { 
-        label: 'Category', 
-        href: '/products/category', 
-        icon: <Icon name="Folder" size="sm" /> 
-      },
-      { 
-        label: 'Product Name', 
-        active: true, 
-        icon: <Icon name="Tag" size="sm" /> 
-      }
-    ]
-  },
-};
-
-// Breadcrumb with Custom Divider
-export const CustomDivider: Story = {
-  args: {
-    items: [
-      { label: 'Home', href: '/' },
-      { label: 'Products', href: '/products' },
-      { label: 'Category', href: '/products/category' },
-      { label: 'Product Name', active: true }
-    ],
-    divider: '/'
-  },
-};
-
-// Breadcrumb with Click Handlers
-export const WithClickHandlers: Story = {
-  args: {
-    items: [
-      { 
-        label: 'Home', 
-        href: '/', 
-        onClick: (e) => {
-          e.preventDefault();
-          alert('Home clicked');
-        }
-      },
-      { 
-        label: 'Products', 
-        href: '/products', 
-        onClick: (e) => {
-          e.preventDefault();
-          alert('Products clicked');
-        }
-      },
-      { 
-        label: 'Category', 
-        href: '/products/category', 
-        onClick: (e) => {
-          e.preventDefault();
-          alert('Category clicked');
-        }
-      },
-      { label: 'Product Name', active: true }
-    ]
-  },
-}; 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,105 +0,0 @@
-import React, { ReactNode } from 'react';
-import { BREADCRUMB } from '../../lib/constants/components';
-
-export interface BreadcrumbItem {
-  /**
-   * Text to display
-   */
-  label: string;
-  
-  /**
-   * URL for the breadcrumb item
-   */
-  href?: string;
-  
-  /**
-   * Whether this item is active (current page)
-   */
-  active?: boolean;
-  
-  /**
-   * Optional icon to display before the label
-   */
-  icon?: ReactNode;
-  
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-}
-
-export interface BreadcrumbProps {
-  /**
-   * Array of breadcrumb items
-   */
-  items: BreadcrumbItem[];
-  
-  /**
-   * Custom divider character or element
-   */
-  divider?: ReactNode;
-  
-  /**
-   * Additional className
-   */
-  className?: string;
-  
-  /**
-   * Aria label for the navigation
-   */
-  ariaLabel?: string;
-}
-export const Breadcrumb: React.FC<BreadcrumbProps> = ({
-  items,
-  divider,
-  className = '',
-  ariaLabel = 'Breadcrumb'
-}) => {
-  const breadcrumbClasses = [
-    BREADCRUMB.CLASSES.BASE,
-    className
-  ].filter(Boolean).join(' ');
-  
-  return (
-    <nav aria-label={ariaLabel}>
-      <ol className={breadcrumbClasses}>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const itemClasses = [
-            BREADCRUMB.CLASSES.ITEM,
-            item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : ''
-          ].filter(Boolean).join(' ');
-          
-          const linkContent = (
-            <>
-              {item.icon && <span className="c-breadcrumb__icon">{item.icon}</span>}
-              {item.label}
-            </>
-          );
-          
-          return (
-            <li key={index} className={itemClasses}>
-              {item.href && !item.active ? (
-                <a
-                  href={item.href}
-                  className={BREADCRUMB.CLASSES.LINK}
-                  onClick={item.onClick}
-                >
-                  {linkContent}
-                </a>
-              ) : (
-                <span className={BREADCRUMB.CLASSES.LINK}>
-                  {linkContent}
-                </span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-};
-
-Breadcrumb.displayName = 'Breadcrumb';
-
-export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

@@ -1,3 +0,0 @@
-export { Breadcrumb } from './Breadcrumb';
-export { default } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';