@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,112 @@
+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;
+
+  /**
+   * Optional custom link component
+   */
+  LinkComponent?: React.ElementType;
+}
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  divider,
+  className = '',
+  ariaLabel = 'Breadcrumb',
+  LinkComponent,
+}) => {
+  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}
+            </>
+          );
+
+          const linkProps = {
+            href: item.href,
+            className: BREADCRUMB.CLASSES.LINK,
+            onClick: item.onClick,
+          };
+
+          return (
+            <li key={index} className={itemClasses}>
+              {item.href && !item.active ? (
+                LinkComponent ? (
+                  <LinkComponent {...linkProps}>{linkContent}</LinkComponent>
+                ) : (
+                  <a {...linkProps}>{linkContent}</a>
+                )
+              ) : (
+                <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+        'outline-primary',
+        'outline-secondary',
+        'outline-success',
+        'outline-info',
+        'outline-warning',
+        'outline-danger',
+        'outline-light',
+        'outline-dark',
+        'link',
+      ],
+      description: 'The visual style of the button',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    icon: {
+      control: 'text',
+      description: 'Optional icon element to display in the button',
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Whether the button should only display an icon',
+    },
+    rounded: {
+      control: 'boolean',
+      description: 'Whether the button should have a fully rounded (pill) shape',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock icon component for stories
+const Icon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+);
+
+// Primary Buttons
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    variant: 'primary',
+    size: 'md',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary Button',
+    variant: 'secondary',
+    size: 'md',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    label: 'Success Button',
+    variant: 'success',
+    size: 'md',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    label: 'Info Button',
+    variant: 'info',
+    size: 'md',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    label: 'Warning Button',
+    variant: 'warning',
+    size: 'md',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    label: 'Error Button',
+    variant: 'error',
+    size: 'md',
+  },
+};
+
+// Outline Buttons
+export const OutlinePrimary: Story = {
+  args: {
+    label: 'Outline Primary',
+    variant: 'outline-primary',
+    size: 'md',
+  },
+};
+
+export const OutlineSecondary: Story = {
+  args: {
+    label: 'Outline Secondary',
+    variant: 'outline-secondary',
+    size: 'md',
+  },
+};
+
+// Link Button
+export const LinkButton: Story = {
+  args: {
+    label: 'Link Button',
+    variant: 'link',
+    size: 'md',
+  },
+};
+
+// Button Sizes
+export const Small: Story = {
+  args: {
+    label: 'Small Button',
+    variant: 'primary',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    label: 'Medium Button',
+    variant: 'primary',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Large Button',
+    variant: 'primary',
+    size: 'lg',
+  },
+};
+
+// States
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: true,
+  },
+};
+
+// With Icon
+export const WithIcon: Story = {
+  args: {
+    label: 'Button with Icon',
+    variant: 'primary',
+    size: 'md',
+    icon: <Icon />,
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    label: 'Add',
+    variant: 'primary',
+    size: 'md',
+    icon: <Icon />,
+    iconOnly: true,
+  },
+};
+
+// Group of Button Variants
+export const AllVariants: Story = {
+  args: {
+    label: 'Button',
+    variant: 'success',
+  },
+  render: () => (
+    <div className="u-d-flex u-flex-wrap u-gap-2">
+      <Button label="Primary" variant="primary" />
+      <Button label="Secondary" variant="secondary" />
+      <Button label="Success" variant="success" />
+      <Button label="Info" variant="info" />
+      <Button label="Warning" variant="warning" />
+      <Button label="Error" variant="error" />
+      <Button label="Light" variant="light" />
+      <Button label="Dark" variant="dark" />
+    </div>
+  ),
+};
+
+// Group of Outline Button Variants
+export const AllOutlineVariants: Story = {
+  args: {
+    label: 'Button',
+    variant: 'outline-primary',
+  },
+  render: () => (
+    <div className="u-d-flex u-flex-wrap u-gap-2">
+      <Button label="Outline Primary" variant="outline-primary" />
+      <Button label="Outline Secondary" variant="outline-secondary" />
+      <Button label="Outline Success" variant="outline-success" />
+      <Button label="Outline Info" variant="outline-info" />
+      <Button label="Outline Warning" variant="outline-warning" />
+      <Button label="Outline Error" variant="outline-error" />
+      <Button label="Outline Light" variant="outline-light" />
+      <Button label="Outline Dark" variant="outline-dark" />
+    </div>
+  ),
+};
+
+// Group of Button Sizes
+export const AllSizes: Story = {
+  args: {
+    label: 'Button',
+    variant: 'primary',
+  },
+  render: () => (
+    <div className="u-d-flex u-align-items-center u-gap-2">
+      <Button label="Small" variant="primary" size="sm" />
+      <Button label="Medium" variant="primary" size="md" />
+      <Button label="Large" variant="primary" size="lg" />
+    </div>
+  ),
+};
+
+// Icon Buttons
+export const IconButtonVariants: Story = {
+  args: {
+    label: 'Button',
+    variant: 'primary',
+    icon: <Icon />,
+    iconOnly: true,
+  },
+  render: () => (
+    <div className="u-d-flex u-flex-wrap u-gap-2">
+      <Button label="Add" variant="primary" icon={<Icon />} />
+      <Button label="Add" variant="secondary" icon={<Icon />} />
+      <Button label="Add" variant="success" icon={<Icon />} />
+      <Button label="Add" variant="primary" icon={<Icon />} iconOnly />
+      <Button label="Add" variant="secondary" icon={<Icon />} iconOnly />
+      <Button label="Add" variant="success" icon={<Icon />} iconOnly />
+    </div>
+  ),
+};
+
+// Rounded Button
+export const Rounded: Story = {
+  args: {
+    label: 'Rounded Button',
+    variant: 'primary',
+    size: 'md',
+    rounded: true,
+  },
+};
+
+// Group of Rounded Buttons
+export const RoundedVariants: Story = {
+  args: {
+    label: 'Button',
+    variant: 'primary',
+    rounded: true,
+  },
+  render: () => (
+    <div className="u-d-flex u-flex-wrap u-gap-2">
+      <Button label="Primary" variant="primary" rounded />
+      <Button label="Secondary" variant="secondary" rounded />
+      <Button label="Success" variant="success" rounded />
+      <Button label="Info" variant="info" rounded />
+      <Button label="Warning" variant="warning" rounded />
+      <Button label="Error" variant="error" rounded />
+      <Button label="Light" variant="light" rounded />
+      <Button label="Dark" variant="dark" rounded />
+    </div>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,69 @@
+import { ElementType, forwardRef } from 'react';
+import { useButton } from '../../lib/composables/useButton';
+import { ButtonProps } from '../../lib/types/components';
+
+export type ButtonAsProp = {
+  as?: ElementType;
+  to?: string;
+  href?: string;
+  [key: string]: any;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps & ButtonAsProp>(
+  (
+    {
+      label,
+      children,
+      onClick,
+      variant = 'primary',
+      size = 'md',
+      disabled = false,
+      icon,
+      iconOnly = false,
+      rounded = false,
+      className = '',
+      as: Component = 'button',
+      ...props
+    },
+    ref
+  ) => {
+    const { generateButtonClass, handleClick } = useButton({
+      variant,
+      size,
+      disabled,
+      rounded,
+    });
+
+    const buttonClass = generateButtonClass({
+      variant,
+      size,
+      disabled,
+      rounded,
+      iconOnly,
+      className,
+    });
+
+    // Handle the case when the button is rendered as a link or another component
+    const buttonProps = {
+      ref,
+      className: buttonClass,
+      onClick: handleClick(onClick),
+      disabled,
+      'aria-disabled': disabled,
+      ...props,
+    };
+
+    return (
+      <Component {...buttonProps}>
+        {icon && <span className="c-btn__icon">{icon}</span>}
+        {!iconOnly && <span className="c-btn__label">{label || children}</span>}
+      </Component>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export type { ButtonProps };
+
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export { default } from './Button';
+export type { ButtonProps } from './Button';