@mjpvs/agentic-component-library-test 1.3.0

package/README.md

@@ -0,0 +1,92 @@
+# React Component Library
+
+[![Test Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)](https://github.com/your-org/your-repo/actions)
+
+A modern React component library built with TypeScript, Storybook, and Vitest. Generated entirely agentically as a learning experiment to explore automated component library creation.
+
+## Features
+
+- **Component Library** - Collection of reusable React components
+- **Design Tokens** - Centralized design system with colors, typography, spacing, and more
+- **Storybook** - Component documentation and visual testing
+- **Vitest** - Fast unit testing with React Testing Library
+- **Semantic Release** - Automated versioning and npm publishing
+- **Conventional Commits** - Enforced commit message format
+
+## Available Scripts
+
+```bash
+# Development
+npm run dev              # Start Vite dev server
+npm run storybook        # Start Storybook on port 6006
+
+# Building
+npm run build            # Build library (tokens + bundle + types)
+npm run build:tokens     # Generate design tokens only
+npm run build-storybook  # Build static Storybook
+
+# Testing
+npm test                # Run tests in watch mode
+npm test run            # Run tests once
+npm test run --coverage # Run tests with coverage report
+
+# Publishing
+npm run commit          # Interactive commit (commitizen)
+npm run release         # Run semantic-release (manual)
+```
+
+## Components
+
+### Layout
+- `Box` - Base container component
+- `Flex` - Flexible layout with direction, justify, align, gap
+- `Grid` - 12-column grid system with span and start props
+- `Container` - Responsive max-width container
+
+### UI
+- `Button` - Primary, secondary, outline variants; small, medium, large sizes
+- `Card` - Content container with optional title and padding
+- `Heading` - Levels 1-6
+
+### Media
+- `Video` - YouTube embed with aspect ratio options
+
+## Design Tokens
+
+Tokens are defined in `tokens/design-tokens.json` and generate CSS variables in `src/tokens/_variables.css`.
+
+Categories:
+- Colors (primary, gray, white, black)
+- Typography (family, size, weight, line-height)
+- Spacing
+- Border radius
+- Shadows
+- Transitions
+
+## Publishing
+
+The project uses semantic-release for automatic versioning:
+
+1. Create a commit with a conventional commit message:
+   ```bash
+   npm run commit
+   # Or: git commit -m "feat: add new component"
+   ```
+
+2. Push to main branch
+3. CI/CD runs tests and publishes to npm
+
+## Tech Stack
+
+- React 18+
+- TypeScript 5+
+- Vite
+- Storybook 8
+- Vitest
+- CSS Modules
+- Style Dictionary
+- Semantic Release
+
+## License
+
+MIT

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,7 @@
+export interface BoxProps {
+    children: React.ReactNode;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+    style?: React.CSSProperties;
+}
+export declare function Box({ children, className, as: Component, style }: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Box/Box.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Box } from './Box';
+declare const meta: Meta<typeof Box>;
+export default meta;
+type Story = StoryObj<typeof Box>;
+export declare const Default: Story;
+export declare const AsSection: Story;

package/dist/components/Box/index.d.ts

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+export interface ButtonProps {
+    variant?: 'primary' | 'secondary' | 'outline';
+    size?: 'small' | 'medium' | 'large';
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Button({ variant, size, children, onClick, disabled, className, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Outline: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;
+export declare const AllSizes: Story;

package/dist/components/Button/index.d.ts

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

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,7 @@
+export interface CardProps {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+    padding?: 'none' | 'small' | 'medium' | 'large';
+}
+export declare function Card({ children, title, className, padding, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const WithTitle: Story;
+export declare const SmallPadding: Story;
+export declare const LargePadding: Story;
+export declare const NoPadding: Story;
+export declare const WithButton: Story;
+export declare const ComplexCard: Story;

package/dist/components/Card/index.d.ts

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

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,6 @@
+export interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}
+export declare function Container({ children, className, size }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Container/Container.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;
+export declare const AllSizes: Story;

package/dist/components/Container/index.d.ts

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

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,11 @@
+export interface FlexProps {
+    children: React.ReactNode;
+    className?: string;
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    style?: React.CSSProperties;
+}
+export declare function Flex({ children, className, direction, justify, align, gap, wrap, style, }: FlexProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Flex/Flex.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Flex } from './Flex';
+declare const meta: Meta<typeof Flex>;
+export default meta;
+type Story = StoryObj<typeof Flex>;
+export declare const Row: Story;
+export declare const Column: Story;
+export declare const Centered: Story;
+export declare const SpaceBetween: Story;

package/dist/components/Flex/index.d.ts

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

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,14 @@
+export interface GridProps {
+    children: React.ReactNode;
+    className?: string;
+    columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export declare function Grid({ children, className, columns, gap }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface GridItemProps {
+    children: React.ReactNode;
+    className?: string;
+    span?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    start?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+}
+export declare function GridItem({ children, className, span, start }: GridItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Grid } from './Grid';
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export declare const TwelveColumns: Story;
+export declare const FourColumns: Story;
+export declare const SpanningColumns: Story;
+export declare const WithStartPosition: Story;

package/dist/components/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export { Grid, GridItem } from './Grid';
+export type { GridProps, GridItemProps } from './Grid';

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,6 @@
+export interface HeadingProps {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function Heading({ level, children, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Heading/Heading.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './Heading';
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Level1: Story;
+export declare const Level2: Story;
+export declare const Level3: Story;
+export declare const AllLevels: Story;

package/dist/components/Heading/index.d.ts

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

package/dist/components/Video/Video.d.ts

@@ -0,0 +1,12 @@
+export interface VideoProps {
+    videoId: string;
+    className?: string;
+    aspectRatio?: '16-9' | '4-3' | '1-1';
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    rel?: boolean;
+    title?: string;
+}
+export declare function Video({ videoId, className, aspectRatio, autoplay, controls, loop, muted, rel, title, }: VideoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Video/Video.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Video } from './Video';
+declare const meta: Meta<typeof Video>;
+export default meta;
+type Story = StoryObj<typeof Video>;
+export declare const Default: Story;
+export declare const AspectRatio_4_3: Story;
+export declare const AspectRatio_1_1: Story;
+export declare const Autoplay: Story;

package/dist/components/Video/index.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { Heading } from './components/Heading';
+export type { HeadingProps } from './components/Heading';
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Box } from './components/Box';
+export type { BoxProps } from './components/Box';
+export { Flex } from './components/Flex';
+export type { FlexProps } from './components/Flex';
+export { Grid, GridItem } from './components/Grid';
+export type { GridProps, GridItemProps } from './components/Grid';
+export { Container } from './components/Container';
+export type { ContainerProps } from './components/Container';
+export { Video } from './components/Video';
+export type { VideoProps } from './components/Video';