gd-design-library 0.7.3 → 0.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gd-design-library",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",

package/ai/README.md

@@ -1,137 +0,0 @@
-# AI prompt and codegen usage for gd-design-library (GridKit)
-
-This README explains how to use the AI helpers in `/ai` to reliably generate React/TSX that only uses `gd-design-library`. It consolidates the hard rules, guardrails, and helper APIs exposed by this folder.
-
-Why these rules exist:
-
-- Consistency: a single design system source makes UI consistent and themable.
-- Accessibility: components provide sensible defaults and ARIA support.
-- Maintainability: no ad‑hoc CSS/HTML or third‑party UI imports.
-
-Core rule (must follow):
-
-- Use ONLY components exported by `gd-design-library` for layout, forms, feedback, display, and navigation. Do not invent components. Do not import from other UI libraries.
-
-Single-source import (enforced):
-
-- Correct: `import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';`
-- Incorrect: `import Button from 'some-ui-lib';`, `import { Box } from '@mui/material';`, or using `./styles.css` for layout spacing.
-
-How to use the AI helpers
-
-1. Programmatic prompt builder (recommended)
-
-- Import from the AI helpers barrel:
-  - `import { buildClaudeSystemPrompt } from 'gd-design-library/ai';`
-- Build your system+task prompt:
-  - `const prompt = buildClaudeSystemPrompt('Create a sign-in form with email and password');`
-    What this does:
-- Includes a live list of available components and composition tips from `./ai/schemas/components.ts` and `./ai/schemas/components/*`.
-- Enforces single-source imports from `gd-design-library` and accessibility/theming guardrails.
-
-2. Legacy/basic builder
-
-- `buildGDLibraryPrompt(request: string)` is kept for compatibility. It defers to `buildClaudeSystemPrompt`.
-
-3. Direct constant (advanced)
-
-- `CLAUDE_GRIDKIT_SYSTEM_PROMPT` contains the full system instructions. You can append your task to it manually if needed.
-
-Practical generation tips (what the model should output)
-
-- Output ONLY valid React TSX. No markdown fences or commentary.
-- Prefer composition using the provided layout primitives (FlexContainer, Column, Row, Card.\* subcomponents, etc.).
-- Keep custom styles minimal; use component props for spacing, alignment, sizing.
-- Always ensure accessibility: label all form controls (Label or Input label prop), use appropriate aria-\* attributes, and keep keyboard navigation sensible.
-- Do not inline the ThemeProvider inside leaf components; provide it at the app root. See Theme provider/hook entries in the schema.
-- Keep imports consolidated to one source: `gd-design-library`.
-
-API guardrails from the schema/prompt (must-follow)
-
-- Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`.
-- Image and Card.Image: `width` and `height` props are numbers only (e.g., `width={96}`), not strings like `"96px"`.
-- Card.Title and other Card subcomponents: `sizeVariant` only accepts `CardSizeVariant.Default` or `CardSizeVariant.Sm`.
-- Counter and Card.Counter: use `initial` (not `value`) for the starting quantity; use `onCounterChange` as the change handler.
-- Button `variant` must be one of `ButtonVariant.Contained | ButtonVariant.Outlined | ButtonVariant.Text | ButtonVariant.Inherit`.
-- Button `color` must be one of `ButtonColorVariant.Primary | ButtonColorVariant.Secondary`.
-
-Component catalog
-
-- The authoritative, up-to-date list of supported components, their props, examples, and composition tips is generated from:
-  - `./schemas/components.ts` (registry)
-  - `./schemas/components/*` (per-component schemas)
-- The list includes layout, forms, feedback, display, navigation, and theme provider/hook entries. Always consult these when unsure.
-- Quick categories (from schema v1.0.0):
-  - Theme: useTheme.provider (ThemeProvider), useTheme.hook (useTheme)
-  - Layout: FlexContainer, Column, Row, Wrapper, Scroll, Separator
-  - Forms: Form, Input, Select, Search, Label, Textarea, Switch, Toggle, RadioGroup, Slider, InputFile, DragAndDropFiles
-  - Feedback & overlays: InlineNotification, Loader, Skeleton, Snackbar, SnackbarManager, Tooltip, Modal, Portal
-  - Navigation & structure: Breadcrumbs, Tabs, Stepper, List, Accordion, Link
-  - Display & content: Typography, Button, Icon, Image, Card, Avatar, Carousel, ContentCarousel, Counter, Price, ProgressBar, Rating, ChatContainer, ChatBubble
-- Not part of gd-design-library (do not request/use): Grid, Stack, Alert, Toast, Table, Badge, ButtonGroup, Dropdown, Drawer, Popover, Pagination, Heading, Spinner.
-
-Patterns from stories (grounded tips)
-
-- Textarea:
-  - Control resizing with the `resize` prop using the `TextareaResize` enum (e.g., None, Horizontal, Vertical, Both). Prefer `dynamicHeightAdjustment` for auto-growing content.
-  - Use `rows` for fixed height or `minHeight`/`maxHeight` for constraints.
-  - Controlled vs uncontrolled: use `value` with `onChange` for controlled; use `defaultValue` for uncontrolled.
-  - Accessibility: use `ariaDescribedBy` to connect helper/error text; set `readOnly`/`disabled` as needed; `autoFocus` is available.
-  - Limits and events: `maxLength` to constrain length; `onCustomResize` receives `{ height, width }` when user resizes.
-- Buttons:
-  - Variants: `ButtonVariant.Contained | Outlined | Text | Inherit`; Colors: `ButtonColorVariant.Primary | Secondary`. For icon-only buttons, set `isIcon`.
-- Forms and labels:
-  - Always provide a visible label via the `label` prop or a separate `<Label htmlFor>` paired with the input `name/id`. Wrap controls with `<Form>` and handle submit via `onSubmit`.
-- Layout composition:
-  - Use `FlexContainer` with `Column`/`Row` and `gap` to manage spacing. Avoid raw CSS margins except where necessary.
-- Cards and images:
-  - `Card.Title` uses `sizeVariant={CardSizeVariant.Default | CardSizeVariant.Sm}` only. `Card.Image` and `Image` require numeric `width`/`height` props.
-
-Example: Correct usage
-
-```
-import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';
-
-export function LoginCard() {
-  return (
-    <FlexContainer alignItems="center" justifyContent="center" minHeight="100vh" padding="24px">
-      <Card width={360} padding="24px">
-        <Column gap="12px">
-          <Typography as="h1" variant="h2">Sign in</Typography>
-          <Form onSubmit={(e) => { e.preventDefault(); /* TODO: submit */ }}>
-            <Column gap="12px">
-              <Input variant="email" label="Email" name="email" />
-              <Input variant="password" label="Password" name="password" />
-              <Button type="submit" fullWidth>Sign in</Button>
-            </Column>
-          </Form>
-          <Typography variant="small">
-            Don’t have an account? <Link href="#">Sign up</Link>
-          </Typography>
-        </Column>
-      </Card>
-    </FlexContainer>
-  );
-}
-```
-
-Incorrect usage (anti-patterns)
-
-```
-import Button from 'some-ui-lib';
-import { Box } from '@mui/material';
-
-export function Login() {
-  return (
-    <div className="container"> {/* Do not build layout with raw divs/CSS */}
-      <button>Sign in</button>   {/* Do not use native elements for styled UI */}
-    </div>
-  );
-}
-```
-
-Troubleshooting and notes
-
-- If a component/prop isn’t recognized, verify it exists in `gd-design-library` exports and the AI schemas under `./ai/schemas/components/*`.
-- When new components are added to the design system, update their schema and the central registry in `./ai/schemas/components.ts` so prompts stay accurate.
-- The default intro string in code (`defaultAIPromptIntro`) is aligned with the schema. Prefer the schema-driven builders (e.g., `buildClaudeSystemPrompt`) for the most accurate, current catalog.