infinity-ui-elements 1.0.3 → 1.0.4

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "infinity-ui-elements",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React TypeScript component library with Tailwind CSS design system",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "style": "dist/index.css",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "yarn build:css && rollup -c",

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

@@ -1,458 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button";
-import {
-  Download,
-  Heart,
-  Star,
-  Plus,
-  ArrowRight,
-  Settings,
-} from "lucide-react";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-    a11y: {
-      // Component-specific accessibility configuration
-      config: {
-        rules: [
-          {
-            // Ensure buttons have accessible names
-            id: "button-name",
-            enabled: true,
-          },
-          {
-            // Check for proper ARIA attributes
-            id: "aria-allowed-attr",
-            enabled: true,
-          },
-        ],
-      },
-    },
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "tertiary"],
-    },
-    color: {
-      control: { type: "select" },
-      options: ["primary", "positive", "negative", "notice", "info", "neutral"],
-    },
-    size: {
-      control: { type: "select" },
-      options: ["xsmall", "small", "medium", "large"],
-    },
-    isIconOnly: {
-      control: { type: "boolean" },
-    },
-    isLoading: {
-      control: { type: "boolean" },
-    },
-    isFullWidth: {
-      control: { type: "boolean" },
-    },
-    disabled: {
-      control: { type: "boolean" },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default story
-export const Default: Story = {
-  args: {
-    children: "Button",
-  },
-};
-
-// Variant stories
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    children: "Primary Button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary Button",
-  },
-};
-
-export const Tertiary: Story = {
-  args: {
-    variant: "tertiary",
-    children: "Tertiary Button",
-  },
-};
-
-// Color stories
-export const Colors: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2 flex-wrap">
-        <Button variant="primary" color="primary">
-          Primary
-        </Button>
-        <Button variant="primary" color="positive">
-          Positive
-        </Button>
-        <Button variant="primary" color="negative">
-          Negative
-        </Button>
-        <Button variant="primary" color="notice">
-          Notice
-        </Button>
-        <Button variant="primary" color="info">
-          Info
-        </Button>
-        <Button variant="primary" color="neutral">
-          Neutral
-        </Button>
-      </div>
-      <div className="flex gap-2 flex-wrap">
-        <Button variant="secondary" color="primary">
-          Primary
-        </Button>
-        <Button variant="secondary" color="positive">
-          Positive
-        </Button>
-        <Button variant="secondary" color="negative">
-          Negative
-        </Button>
-        <Button variant="secondary" color="notice">
-          Notice
-        </Button>
-        <Button variant="secondary" color="info">
-          Info
-        </Button>
-        <Button variant="secondary" color="neutral">
-          Neutral
-        </Button>
-      </div>
-      <div className="flex gap-2 flex-wrap">
-        <Button variant="tertiary" color="primary">
-          Primary
-        </Button>
-        <Button variant="tertiary" color="positive">
-          Positive
-        </Button>
-        <Button variant="tertiary" color="negative">
-          Negative
-        </Button>
-        <Button variant="tertiary" color="notice">
-          Notice
-        </Button>
-        <Button variant="tertiary" color="info">
-          Info
-        </Button>
-        <Button variant="tertiary" color="neutral">
-          Neutral
-        </Button>
-      </div>
-    </div>
-  ),
-};
-
-// Size stories
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Button size="xsmall">XSmall</Button>
-      <Button size="small">Small</Button>
-      <Button size="medium">Medium</Button>
-      <Button size="large">Large</Button>
-    </div>
-  ),
-};
-
-// Icon stories
-export const WithIcons: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2 flex-wrap">
-        <Button leadingIcon={<Download className="h-4 w-4" />}>Download</Button>
-        <Button trailingIcon={<ArrowRight className="h-4 w-4" />}>
-          Continue
-        </Button>
-        <Button
-          leadingIcon={<Plus className="h-4 w-4" />}
-          trailingIcon={<ArrowRight className="h-4 w-4" />}
-        >
-          Add Item
-        </Button>
-      </div>
-    </div>
-  ),
-};
-
-// Icon only stories
-export const IconOnly: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Button isIconOnly size="xsmall">
-        <Settings className="h-3 w-3" />
-      </Button>
-      <Button isIconOnly size="small">
-        <Settings className="h-4 w-4" />
-      </Button>
-      <Button isIconOnly size="medium">
-        <Settings className="h-4 w-4" />
-      </Button>
-      <Button isIconOnly size="large">
-        <Settings className="h-5 w-5" />
-      </Button>
-    </div>
-  ),
-};
-
-// Loading states
-export const Loading: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2 flex-wrap">
-        <Button isLoading>Loading...</Button>
-        <Button isLoading leadingIcon={<Download className="h-4 w-4" />}>
-          Downloading...
-        </Button>
-        <Button isLoading isIconOnly>
-          <Settings className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  ),
-};
-
-// Disabled states
-export const Disabled: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-2 flex-wrap">
-        <Button disabled>Disabled</Button>
-        <Button disabled variant="secondary">
-          Disabled Secondary
-        </Button>
-        <Button disabled variant="tertiary">
-          Disabled Tertiary
-        </Button>
-      </div>
-      <div className="flex gap-2 flex-wrap">
-        <Button disabled leadingIcon={<Download className="h-4 w-4" />}>
-          Disabled with Icon
-        </Button>
-        <Button disabled isIconOnly>
-          <Settings className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  ),
-};
-
-// Full width
-export const FullWidth: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4 w-[500px]">
-      <Button isFullWidth>Full Width Button</Button>
-      <Button>Normal Width Button</Button>
-      <Button isFullWidth leadingIcon={<Plus className="h-4 w-4" />}>
-        Full Width with Icon
-      </Button>
-    </div>
-  ),
-};
-
-// Interactive playground
-export const Playground: Story = {
-  args: {
-    children: "Playground Button",
-    variant: "primary",
-    color: "primary",
-    size: "medium",
-    isIconOnly: false,
-    isLoading: false,
-    isFullWidth: false,
-    disabled: false,
-  },
-};
-
-// Real-world examples
-export const RealWorldExamples: Story = {
-  render: () => (
-    <div className="flex flex-col gap-6 p-6 bg-gray-50 rounded-lg">
-      <div>
-        <h3 className="text-lg font-semibold mb-3">E-commerce Actions</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button
-            variant="primary"
-            color="positive"
-            leadingIcon={<Plus className="h-4 w-4" />}
-          >
-            Add to Cart
-          </Button>
-          <Button
-            variant="secondary"
-            color="primary"
-            leadingIcon={<Heart className="h-4 w-4" />}
-          >
-            Add to Wishlist
-          </Button>
-          <Button variant="tertiary" color="primary">
-            View Details
-          </Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-3">Form Actions</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="primary" color="primary">
-            Save Changes
-          </Button>
-          <Button variant="secondary" color="neutral">
-            Cancel
-          </Button>
-          <Button variant="tertiary" color="negative">
-            Delete
-          </Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-3">Status Actions</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button variant="primary" color="positive" isLoading>
-            Processing...
-          </Button>
-          <Button
-            variant="secondary"
-            color="notice"
-            leadingIcon={<Star className="h-4 w-4" />}
-          >
-            Rate Product
-          </Button>
-          <Button variant="tertiary" color="info">
-            Learn More
-          </Button>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-3">Toolbar Actions</h3>
-        <div className="flex gap-2 flex-wrap">
-          <Button isIconOnly variant="secondary" color="primary">
-            <Settings className="h-4 w-4" />
-          </Button>
-          <Button isIconOnly variant="secondary" color="primary">
-            <Download className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// Accessibility-focused stories
-export const AccessibilityExamples: Story = {
-  render: () => (
-    <div className="flex flex-col gap-6 p-6">
-      <div>
-        <h3 className="text-lg font-semibold mb-3">
-          Accessible Button Examples
-        </h3>
-        <div className="flex flex-col gap-4">
-          {/* Button with proper accessible name */}
-          <Button>Save Changes</Button>
-
-          {/* Button with icon and accessible name */}
-          <Button leadingIcon={<Download className="h-4 w-4" />}>
-            Download File
-          </Button>
-
-          {/* Icon-only button with aria-label */}
-          <Button isIconOnly aria-label="Settings">
-            <Settings className="h-4 w-4" />
-          </Button>
-
-          {/* Loading button with proper state */}
-          <Button isLoading aria-label="Saving changes...">
-            Save Changes
-          </Button>
-
-          {/* Disabled button with proper state */}
-          <Button disabled aria-label="Save Changes (disabled)">
-            Save Changes
-          </Button>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    a11y: {
-      // Focus on accessibility rules for this story
-      config: {
-        rules: [
-          {
-            id: "button-name",
-            enabled: true,
-          },
-          {
-            id: "aria-allowed-attr",
-            enabled: true,
-          },
-          {
-            id: "aria-required-attr",
-            enabled: true,
-          },
-        ],
-      },
-    },
-  },
-};
-
-// Accessibility violations examples (for testing)
-export const AccessibilityViolations: Story = {
-  render: () => (
-    <div className="flex flex-col gap-6 p-6">
-      <div>
-        <h3 className="text-lg font-semibold mb-3">
-          Accessibility Violations (for testing)
-        </h3>
-        <div className="flex flex-col gap-4">
-          {/* Icon-only button without aria-label - should fail */}
-          <Button isIconOnly>
-            <Settings className="h-4 w-4" />
-          </Button>
-
-          {/* Button with insufficient contrast (if using custom colors) */}
-          <Button style={{ backgroundColor: "#ccc", color: "#ddd" }}>
-            Low Contrast Button
-          </Button>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    a11y: {
-      // Enable all accessibility checks for violation testing
-      config: {
-        rules: [
-          {
-            id: "button-name",
-            enabled: true,
-          },
-          {
-            id: "color-contrast",
-            enabled: true,
-          },
-        ],
-      },
-    },
-  },
-};