@a11ypros/a11y-ui-components 1.0.1 → 1.0.2

package/apps/web/public/_redirects

@@ -1,31 +0,0 @@
-# Storybook redirects - must be in public/ to be included in build
-# IMPORTANT: Order matters! More specific rules must come first
-
-# Storybook JSON files (must come before catch-all)
-# Storybook may request these from root
-/index.json /storybook-static/index.json 200
-/project.json /storybook-static/project.json 200
-
-# Storybook iframe.html - must come before other Storybook rules
-# Storybook loads components in an iframe with query parameters
-/iframe.html /storybook-static/iframe.html 200
-/storybook/iframe.html /storybook-static/iframe.html 200
-
-# Storybook root path
-/storybook /storybook-static/index.html 200
-
-# Storybook sub-paths (JS files, assets, etc.)
-# This catches /storybook/sb-manager/runtime.js → /storybook-static/sb-manager/runtime.js
-/storybook/* /storybook-static/:splat 200
-
-# Netlify Function for audit API
-/api/audit /.netlify/functions/audit 200
-
-# Storybook static files (ensures they're served correctly)
-/storybook-static/* /storybook-static/:splat 200
-
-# Next.js SPA fallback (must be last)
-# Note: This will catch everything else, including Storybook query params
-# But Storybook iframe.html should be handled above
-/* /index.html 200
-

package/apps/web/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@a11ypros/a11y-ui-components": ["../../packages/design-system/src"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-

package/netlify/functions/audit.ts

@@ -1,163 +0,0 @@
-import { Handler } from '@netlify/functions'
-import Anthropic from '@anthropic-ai/sdk'
-
-const anthropic = new Anthropic({
-  apiKey: process.env.ANTHROPIC_API_KEY || '',
-})
-
-interface AuditIssue {
-  wcagSC: string // WCAG Success Criterion (e.g., "1.3.1", "2.4.7")
-  severity: 'error' | 'warning' | 'info'
-  message: string
-  suggestion: string
-  codeSuggestion?: string
-}
-
-interface AuditResponse {
-  issues: AuditIssue[]
-  summary: string
-}
-
-const WCAG_PROMPT = `You are an accessibility expert reviewing JSX/React code for WCAG 2.1 and 2.2 compliance.
-
-Analyze the provided JSX code snippet and identify accessibility issues. For each issue:
-1. Map it to the specific WCAG Success Criterion (SC) number (e.g., "1.3.1", "2.4.7", "4.1.2")
-2. Determine severity: "error" (violates WCAG), "warning" (may cause issues), or "info" (best practice)
-3. Provide a clear message explaining the issue
-4. Suggest how to fix it
-5. If applicable, provide corrected code
-
-Focus on:
-- Semantic HTML (1.3.1)
-- Keyboard accessibility (2.1.1, 2.1.2)
-- Focus management (2.4.7)
-- ARIA usage (4.1.2, 4.1.3)
-- Color contrast (1.4.3)
-- Form labels (2.5.3)
-- Status messages (4.1.3)
-
-Return your response as a JSON object with this structure:
-{
-  "issues": [
-    {
-      "wcagSC": "2.4.7",
-      "severity": "error",
-      "message": "Button lacks visible focus indicator",
-      "suggestion": "Add focus-visible styles with 2px outline",
-      "codeSuggestion": "button:focus-visible { outline: 2px solid #0ea5e9; }"
-    }
-  ],
-  "summary": "Found 3 issues: 2 errors, 1 warning"
-}
-
-Only return valid JSON, no markdown formatting.`
-
-export const handler: Handler = async (event, context) => {
-  // Handle CORS
-  const headers = {
-    'Content-Type': 'application/json',
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Headers': 'Content-Type',
-    'Access-Control-Allow-Methods': 'POST, OPTIONS',
-  }
-
-  // Handle preflight requests
-  if (event.httpMethod === 'OPTIONS') {
-    return {
-      statusCode: 200,
-      headers,
-      body: '',
-    }
-  }
-
-  // Only allow POST requests
-  if (event.httpMethod !== 'POST') {
-    return {
-      statusCode: 405,
-      headers,
-      body: JSON.stringify({ error: 'Method not allowed' }),
-    }
-  }
-
-  try {
-    const { code } = JSON.parse(event.body || '{}')
-
-    if (!code || typeof code !== 'string') {
-      return {
-        statusCode: 400,
-        headers,
-        body: JSON.stringify({ error: 'Code snippet is required' }),
-      }
-    }
-
-    if (!process.env.ANTHROPIC_API_KEY) {
-      return {
-        statusCode: 500,
-        headers,
-        body: JSON.stringify({
-          error: 'ANTHROPIC_API_KEY environment variable is not set',
-        }),
-      }
-    }
-
-    const message = await anthropic.messages.create({
-      model: 'claude-sonnet-4-20250514',
-      max_tokens: 4096,
-      messages: [
-        {
-          role: 'user',
-          content: `${WCAG_PROMPT}\n\nCode to review:\n\`\`\`jsx\n${code}\n\`\`\``,
-        },
-      ],
-    })
-
-    const content = message.content[0]
-    if (content.type !== 'text') {
-      throw new Error('Unexpected response type from Anthropic')
-    }
-
-    // Parse the JSON response
-    let auditResult: AuditResponse
-    try {
-      // Extract JSON from the response (handle markdown code blocks if present)
-      let jsonText = content.text.trim()
-      if (jsonText.startsWith('```')) {
-        jsonText = jsonText.replace(/^```(?:json)?\n/, '').replace(/\n```$/, '')
-      }
-      auditResult = JSON.parse(jsonText)
-    } catch (parseError) {
-      // If parsing fails, try to extract JSON from the text
-      const jsonMatch = content.text.match(/\{[\s\S]*\}/)
-      if (jsonMatch) {
-        auditResult = JSON.parse(jsonMatch[0])
-      } else {
-        throw new Error('Failed to parse audit response as JSON')
-      }
-    }
-
-    // Validate response structure
-    if (!auditResult.issues || !Array.isArray(auditResult.issues)) {
-      auditResult = {
-        issues: [],
-        summary: 'No issues found or invalid response format',
-      }
-    }
-
-    return {
-      statusCode: 200,
-      headers,
-      body: JSON.stringify(auditResult),
-    }
-  } catch (error) {
-    console.error('Audit API error:', error)
-    return {
-      statusCode: 500,
-      headers,
-      body: JSON.stringify({
-        error: 'Failed to perform accessibility audit',
-        message: error instanceof Error ? error.message : 'Unknown error',
-      }),
-    }
-  }
-}
-

package/netlify.toml

@@ -1,37 +0,0 @@
-# Netlify configuration for ui.a11ypros.com
-
-[build]
-  # Base directory for the build
-  base = "."
-  # Install dependencies, build Storybook, then build Next.js app
-  # Note: Move API route temporarily since static export can't handle it (we use Netlify Functions)
-  command = "mv apps/web/app/api apps/web/app/api.disabled 2>/dev/null || true && yarn install && yarn build-storybook && yarn workspace @apps/web build && test -d apps/web/out && echo 'Build successful' || (echo 'Build failed' && exit 1) && mv apps/web/app/api.disabled apps/web/app/api 2>/dev/null || true"
-  # Publish directory - Next.js static export (includes Storybook in public/)
-  publish = "apps/web/out"
-
-# Environment variables (set these in Netlify dashboard)
-# [build.environment]
-#   NODE_VERSION = "18"
-#   ANTHROPIC_API_KEY = "your_key_here"
-
-# Redirect rules are now in apps/web/public/_redirects
-# The _redirects file takes precedence and is included in the build output
-# This keeps redirects in sync with the built files
-
-# Headers for Storybook - VERY permissive CSP to allow eval
-# netlify.toml headers work with netlify serve, _headers file may not
-# Storybook requires 'unsafe-eval' in script-src - this is the most permissive CSP that works
-[[headers]]
-  for = "/storybook-static/*"
-  [headers.values]
-    Content-Security-Policy = "default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';"
-
-[[headers]]
-  for = "/storybook"
-  [headers.values]
-    Content-Security-Policy = "default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';"
-
-[[headers]]
-  for = "/storybook/*"
-  [headers.values]
-    Content-Security-Policy = "default-src 'self' 'unsafe-inline' data: blob: http: https: ws: wss:; script-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: http: https:; style-src 'self' 'unsafe-inline' data: http: https:; img-src 'self' data: blob: http: https:; font-src 'self' data: http: https:; connect-src 'self' ws: wss: blob: http: https:; worker-src 'self' blob: http: https:; frame-src 'self' http: https:; frame-ancestors 'self';"

package/packages/design-system/README.md

@@ -1,252 +0,0 @@
-# @a11ypros/a11y-ui-components
-
-An accessibility-first React UI component library built with WCAG 2.1/2.2 Level AA compliance. Every component has been carefully crafted by a certified WAS (Web Accessibility Specialist) to ensure your applications are usable by everyone, regardless of their abilities or the assistive technologies they use.
-
-## Features
-
-- ✅ **WCAG 2.1/2.2 Level AA Compliant** - Built with accessibility as a core requirement
-- ✅ **TypeScript** - Full TypeScript support with type definitions included
-- ✅ **Tree-shakeable** - ES modules with side-effect-free exports for optimal bundle sizes
-- ✅ **Keyboard Navigation** - Full keyboard support for all interactive components
-- ✅ **Screen Reader Friendly** - Proper ARIA labels and semantic HTML
-- ✅ **Focus Management** - Built-in focus trap and focus return utilities
-- ✅ **Modern React** - Built for React 18+ with hooks and modern patterns
-
-## Installation
-
-```bash
-npm install @a11ypros/a11y-ui-components
-```
-
-or
-
-```bash
-yarn add @a11ypros/a11y-ui-components
-```
-
-## Peer Dependencies
-
-This package requires React 18+ and React DOM 18+:
-
-```bash
-npm install react react-dom
-```
-
-## Quick Start
-
-### 1. Import CSS
-
-Import the global styles in your application entry point:
-
-```tsx
-// In your main CSS file or entry point
-import '@a11ypros/a11y-ui-components/styles';
-```
-
-Or import component-specific styles:
-
-```tsx
-import '@a11ypros/a11y-ui-components/styles/components';
-```
-
-### 2. Import and Use Components
-
-```tsx
-import { Button, Input, Modal } from '@a11ypros/a11y-ui-components';
-
-function App() {
-  return (
-    <div>
-      <Button>Click me</Button>
-      <Input label="Email" type="email" />
-      <Modal isOpen={true} onClose={() => {}}>
-        <p>Modal content</p>
-      </Modal>
-    </div>
-  );
-}
-```
-
-## Available Components
-
-### Form Components
-- **Input** - Accessible text input with label and error handling
-- **Textarea** - Multi-line text input
-- **Select** - Dropdown select with keyboard navigation
-- **Checkbox** - Accessible checkbox with proper labeling
-- **Radio** - Radio button group with fieldset support
-- **Label** - Accessible form label component
-- **Fieldset** - Form fieldset for grouping related inputs
-
-### UI Components
-- **Button** - Accessible button with multiple variants
-- **Link** - Accessible link component
-- **Modal** - Accessible modal dialog with focus trap
-- **Tabs** - Keyboard-navigable tab component
-- **DataTable** - Accessible data table with sorting
-- **Toast** - Accessible toast notification system
-- **ToastProvider** - Context provider for toast notifications
-
-### Hooks
-- **useFocusTrap** - Trap focus within a container
-- **useFocusReturn** - Return focus to previous element
-- **useAriaLive** - Manage ARIA live regions for announcements
-
-### Utilities
-- **aria** - ARIA attribute utilities
-- **keyboard** - Keyboard event utilities
-- **focus** - Focus management utilities
-
-### Design Tokens
-- **colors** - Color palette and theme tokens
-- **typography** - Typography scale and font tokens
-- **spacing** - Spacing scale tokens
-- **breakpoints** - Responsive breakpoint tokens
-- **motion** - Animation and transition tokens
-
-## Documentation
-
-📚 **[View Full Documentation & Storybook](https://ui.a11ypros.com/storybook)**
-
-Browse all components, see live examples, and explore accessibility features in our interactive Storybook documentation.
-
-## Usage Examples
-
-### Form with Validation
-
-```tsx
-import { Input, Button, Label } from '@a11ypros/a11y-ui-components';
-
-function LoginForm() {
-  const [email, setEmail] = useState('');
-  const [error, setError] = useState('');
-
-  return (
-    <form>
-      <Input
-        label="Email"
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        error={error}
-        required
-      />
-      <Button type="submit">Sign In</Button>
-    </form>
-  );
-}
-```
-
-### Modal Dialog
-
-```tsx
-import { Modal, Button } from '@a11ypros/a11y-ui-components';
-import { useState } from 'react';
-
-function App() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
-      <Modal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Confirm Action"
-      >
-        <p>Are you sure you want to proceed?</p>
-        <Button onClick={() => setIsOpen(false)}>Confirm</Button>
-      </Modal>
-    </>
-  );
-}
-```
-
-### Toast Notifications
-
-```tsx
-import { ToastProvider, useToast, Button } from '@a11ypros/a11y-ui-components';
-
-function App() {
-  return (
-    <ToastProvider>
-      <MyComponent />
-    </ToastProvider>
-  );
-}
-
-function MyComponent() {
-  const { addToast } = useToast();
-
-  return (
-    <Button
-      onClick={() =>
-        addToast({
-          message: 'Action completed successfully!',
-          type: 'success',
-        })
-      }
-    >
-      Show Toast
-    </Button>
-  );
-}
-```
-
-## Important Note on Accessibility
-
-> **Note**: While these components are built with accessibility in mind and meet WCAG 2.1/2.2 Level AA standards, **simply using these components does not guarantee an accessible application**. These components are foundational building blocks that must be used properly within the larger consuming application with accessibility in mind.
-
-To ensure your application is truly accessible, consider:
-
-- **Proper Implementation**: Use components according to their documented patterns and accessibility guidelines
-- **Application-Level Considerations**: Ensure proper page structure, heading hierarchy, and landmark regions
-- **Content Accessibility**: Write clear, descriptive text and provide alternative text for images
-- **Testing**: Regularly test your application with keyboard navigation and screen readers
-- **User Experience**: Consider the full user journey and how components work together
-
-## Internationalization (i18n)
-
-Currently, all screen reader text and ARIA labels are provided in English. Full i18n support is a high-priority feature coming soon to ensure global accessibility.
-
-## Tree Shaking
-
-This package is fully tree-shakeable. Import only what you need:
-
-```tsx
-// ✅ Good - tree-shakeable
-import { Button } from '@a11ypros/a11y-ui-components';
-
-// ✅ Also good - import specific utilities
-import { useFocusTrap } from '@a11ypros/a11y-ui-components';
-```
-
-## TypeScript Support
-
-Full TypeScript definitions are included. No need to install `@types` packages.
-
-```tsx
-import { Button, ButtonProps } from '@a11ypros/a11y-ui-components';
-
-const props: ButtonProps = {
-  variant: 'primary',
-  size: 'medium',
-  children: 'Click me',
-};
-```
-
-## Contributing
-
-Contributions are welcome! Please see our [GitHub repository](https://github.com/ryan0122/a11ypros-components) for contribution guidelines.
-
-## License
-
-MIT © [A11y Pros](https://a11ypros.com)
-
-## Links
-
-- 📦 [npm package](https://www.npmjs.com/package/@a11ypros/a11y-ui-components)
-- 📚 [Documentation & Storybook](https://ui.a11ypros.com/storybook)
-- 🐛 [Issue Tracker](https://github.com/ryan0122/a11ypros-components/issues)
-- 💻 [Source Code](https://github.com/ryan0122/a11ypros-components)
-

package/packages/design-system/package.json

@@ -1,68 +0,0 @@
-{
-  "name": "@a11ypros/a11y-ui-components",
-  "version": "1.0.0",
-  "description": "An accessibility-first React UI component library built with WCAG 2.1/2.2 compliance",
-  "keywords": [
-    "react",
-    "accessibility",
-    "a11y",
-    "wcag",
-    "design-system",
-    "components",
-    "typescript"
-  ],
-  "author": "Ryan Mack <ryan@a11ypros.com>",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/index.js",
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./styles": {
-      "import": "./dist/styles/global.css"
-    },
-    "./styles/components": {
-      "import": "./dist/styles/components.css"
-    },
-    "./package.json": "./package.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ryan0122/a11ypros-components.git",
-    "directory": "packages/design-system"
-  },
-  "scripts": {
-    "build": "tsc && node scripts/copy-css.js",
-    "prepublishOnly": "npm run build",
-    "storybook": "cd ../.. && npm run storybook",
-    "build-storybook": "cd ../.. && npm run build-storybook"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/test": "^7.6.17",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "typescript": "^5.3.3"
-  }
-}
-

package/packages/design-system/scripts/copy-css.js

@@ -1,63 +0,0 @@
-#!/usr/bin/env node
-
-import { cpSync, mkdirSync, existsSync } from 'fs'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-const srcDir = join(__dirname, '../src')
-const distDir = join(__dirname, '../dist')
-
-// Create dist/styles directory
-const stylesDistDir = join(distDir, 'styles')
-if (!existsSync(stylesDistDir)) {
-  mkdirSync(stylesDistDir, { recursive: true })
-}
-
-// Copy global.css and components.css to dist/styles/
-const stylesToCopy = ['global.css', 'components.css']
-stylesToCopy.forEach(file => {
-  const srcFile = join(srcDir, 'styles', file)
-  const destFile = join(stylesDistDir, file)
-  if (existsSync(srcFile)) {
-    cpSync(srcFile, destFile)
-    console.log(`Copied ${file} to dist/styles/`)
-  }
-})
-
-// Copy component CSS files maintaining directory structure
-// This is needed because components.css uses relative imports
-import { readdirSync } from 'fs'
-
-const componentsDir = join(srcDir, 'components')
-const componentsDistDir = join(distDir, 'components')
-
-function copyComponentCSS(dir, distBase) {
-  const entries = readdirSync(dir, { withFileTypes: true })
-  
-  entries.forEach(entry => {
-    const srcPath = join(dir, entry.name)
-    const distPath = join(distBase, entry.name)
-    
-    if (entry.isDirectory()) {
-      if (!existsSync(distPath)) {
-        mkdirSync(distPath, { recursive: true })
-      }
-      copyComponentCSS(srcPath, distPath)
-    } else if (entry.isFile() && entry.name.endsWith('.css')) {
-      cpSync(srcPath, distPath)
-      console.log(`Copied ${entry.name} to ${distPath.replace(process.cwd(), '.')}`)
-    }
-  })
-}
-
-if (existsSync(componentsDir)) {
-  if (!existsSync(componentsDistDir)) {
-    mkdirSync(componentsDistDir, { recursive: true })
-  }
-  copyComponentCSS(componentsDir, componentsDistDir)
-}
-
-console.log('CSS files copied successfully!')
-