@1money/component-ui 0.0.1

package/.claude/skills/component-pipeline/SKILL.md

@@ -0,0 +1,116 @@
+---
+name: component-pipeline
+description: Use when building a new component from a Figma design end-to-end in @1money/components-ui, from extraction through implementation, polish, and validation.
+metadata:
+  requires:
+    - 1money-component-dev
+---
+
+# component-pipeline
+
+## Activation
+
+**Act when**: User invokes `/component-pipeline` with a Figma URL to build a new component for `@1money/components-ui`.
+**Goal**: Orchestrate the full pipeline — confirm inputs, delegate implementation to `1money-component-dev`, polish output against repo conventions, register exports, and validate.
+
+## Resources
+
+- **Polish Checklist**: `checklist.md`
+- **Implementation Skill**: `1money-component-dev` (handles Figma extraction, scaffolding, and implementation)
+
+## Inputs
+
+- **Figma URL** (required): Design source URL for the component.
+- **Component Name** (optional): PascalCase name. If not provided, derive from Figma frame name.
+
+## Workflow
+
+```dot
+digraph pipeline {
+    "Phase 0:\nPrerequisites" -> "Phase 1:\nConfirm Inputs";
+    "Phase 1:\nConfirm Inputs" -> "Phase 2:\nScaffold & Implement";
+    "Phase 2:\nScaffold & Implement" -> "Phase 3:\nPolish";
+    "Phase 3:\nPolish" -> "All checks pass?" [label="walk checklist.md"];
+    "All checks pass?" -> "Phase 4:\nRegister Exports" [label="yes"];
+    "All checks pass?" -> "Fix violations" [label="no"];
+    "Fix violations" -> "Phase 3:\nPolish";
+    "Phase 4:\nRegister Exports" -> "Phase 5:\nValidate";
+    "Phase 5:\nValidate" -> "Lint/test pass?" [label="pnpm lint && pnpm test"];
+    "Lint/test pass?" -> "Present to user" [label="yes"];
+    "Lint/test pass?" -> "Fix errors" [label="no (max 3 retries)"];
+    "Fix errors" -> "Phase 5:\nValidate";
+}
+```
+
+### Phase 0 — Prerequisites
+
+Before starting, verify all three conditions. If any fails, stop and inform the user:
+
+1. Component does not already exist: check `src/components/{Name}/` does not exist.
+2. `@1money/hooks` is available: check `node_modules/@1money/hooks` exists.
+3. Figma MCP is accessible: attempt a simple `mcp__figma__get_metadata` call on the provided URL.
+
+### Phase 1 — Confirm Inputs *(gate — do not proceed until resolved)*
+
+1. **Figma URL**: If not provided as argument, ask the user now.
+2. **Component Name**: If not provided, derive from the Figma frame name. Validate it is PascalCase. If the name conflicts with an existing PrimeReact component already in the library, suggest appending `Beta`.
+3. **Output Mode**: Ask only if ambiguous. Default is `Code`.
+
+### Phase 2 — Scaffold & Implement
+
+Invoke the `1money-component-dev` skill with:
+- Figma URL from Phase 1
+- Component Name from Phase 1
+- Output Mode: `Code`
+
+This skill handles everything: Figma extraction via MCP, token mapping, file scaffolding (8 files), variant DSL, hooks, classnames, and its own internal checklist.
+
+Wait for `1money-component-dev` to complete before proceeding.
+
+### Phase 3 — Polish *(mandatory)*
+
+Walk through `checklist.md` item by item. For each item:
+1. Read the generated file
+2. Compare against the reference pattern (listed in the checklist)
+3. If violation found: fix it immediately
+4. Move to next item
+
+This phase catches what `1money-component-dev` may miss — the precise code style and conventions of this specific repo, verified against actual Button, Checkbox, and Tag source files.
+
+**Do not skip this phase.** Even if `1money-component-dev` ran its own checklist, the polish checklist verifies against the actual codebase patterns, not template expectations.
+
+### Phase 4 — Register Exports
+
+1. **Read `src/index.ts` first** — do not assume a barrel pattern. Match the existing style exactly.
+2. Add an import statement for the new component, matching the format of existing imports.
+3. If the file has export statements, add matching exports and a type export for the Props interface (e.g., `export type { {Name}Props } from './components/{Name}'`). If it only has imports (current state), add only an import.
+4. **Check `package.json` exports**: If the component is not already listed in the `"exports"` field, add a tree-shakeable entry:
+
+```json
+"./{Name}": {
+  "types": "./es/components/{Name}/index.d.ts",
+  "import": "./es/components/{Name}/index.js",
+  "require": "./lib/components/{Name}/index.js"
+}
+```
+
+### Phase 5 — Validate
+
+1. Run `pnpm lint`. If errors, fix and re-run (max 3 attempts).
+2. Run `pnpm test`. If snapshot failures are expected (new component), update with `pnpm test -- -u`. If real failures, fix.
+3. Run `pnpm dev` briefly to verify Storybook compiles without errors for the new component, then stop the server.
+4. Present the completed component to the user for review: list all created/modified files and summarize what was built.
+
+## Error Handling
+
+- **Phase 0 failure**: Stop and inform user which prerequisite failed.
+- **Phase 2 failure** (MCP errors, skill issues): Report details to user and ask how to proceed.
+- **Phase 3 violations**: Fix inline — do not ask user for each violation.
+- **Phase 5 lint/test failures**: Fix and retry up to 3 times, then surface to user.
+
+## Constraints
+
+- **Do NOT invoke** `figma-1money-codegen` — it targets consumer code (`@1money/components-ui` usage), not this library's internals.
+- **Do NOT invoke** `1money-front-code-review` — it targets consumer code patterns and would produce false positives.
+- **Do NOT duplicate** content from `1money-component-dev` — this skill orchestrates, it does not re-implement.
+- **Always read before writing** `src/index.ts` — match the actual barrel pattern, not template expectations.

package/.claude/skills/component-pipeline/checklist.md

@@ -0,0 +1,125 @@
+# Component Pipeline Polish Checklist
+
+Walk through each item after `1money-component-dev` completes. Read the generated file, compare against the reference, fix violations inline.
+
+## classnames Utility
+
+Reference: `src/components/Button/Button.tsx`
+
+- [ ] Imports `classnames` (default export) from `@/utils/classnames`
+- [ ] Imports `joinCls` (named export) from `@/utils/classnames`
+- [ ] Creates `classes` via `const classes = classnames(prefixCls)`
+- [ ] Root element className uses `classes(void 0, joinCls(classes(variant), classes(size), className))`
+- [ ] Variant modifier classes use `classes('variant-name')`
+- [ ] Sub-element classes use `classes('sub-element-name')`
+
+## Variant DSL (SCSS)
+
+Reference: `src/components/Button/style/Button.scss`
+
+- [ ] Schema generated via `om-variant-schema($component, $key1, $key2, ...)` — not hand-written
+- [ ] Schema variable named `${component}-variant-schema` (e.g., `$button-beta-variant-schema`)
+- [ ] Variants map variable named `${component}-variants` (e.g., `$button-beta-variants`)
+- [ ] All variant names are quoted strings (e.g., `'primary'`, `'white'`)
+- [ ] `om-variant-default` called on root selector with default variant name and schema
+- [ ] `om-variant-classes` called with `$default:` param to skip the default variant
+- [ ] Base styles consume variant values via `var(--om-{component}-{key})` — not direct token calls
+
+## Size Variants (SCSS)
+
+Reference: `src/components/Button/style/Button.scss`
+
+- [ ] Size variants use `&-{size}` nesting (e.g., `&-medium`, `&-small`)
+- [ ] Size variants are separate from color Variant DSL
+- [ ] Padding uses `om-component-padding()` token function
+- [ ] Border radius uses `om-radius()` token function
+- [ ] Typography uses `@include om-typography(label, {size})`
+
+## Disabled & Hover States (SCSS)
+
+Reference: `src/components/Checkbox/style/Checkbox.scss`, `src/components/Button/style/Button.scss`
+
+- [ ] Disabled state targets `.p-disabled` class (PrimeReact convention)
+- [ ] Disabled styles match Figma design exactly — no invented opacity or color dimming
+- [ ] Hover states use `&:hover:not(.p-disabled)` guard
+
+## Hooks
+
+Reference: `src/components/Checkbox/Checkbox.tsx`
+
+- [ ] Controlled/uncontrolled components use `useControlledState` from `@1money/hooks`
+- [ ] Event handlers use `useEventCallback` or `useMemoizedFn` from `@1money/hooks`
+- [ ] No `useCallback` with long dependency arrays
+- [ ] All hooks imported from `@1money/hooks` — not from `@1money/components-ui` or external packages
+
+## Component Structure
+
+Reference: All existing components
+
+- [ ] Default export wrapped in `memo()`: `export default memo({Name})`
+- [ ] Named export also available: `export const {Name}: FC<...> = ...`
+- [ ] `prefixCls` prop has default matching kebab-case component name
+- [ ] Remaining PrimeReact props spread via `{...rest}`
+- [ ] Constants extracted — no magic strings
+
+## Stories
+
+Reference: `src/components/Button/Button.stories.tsx`
+
+- [ ] Style imported via `import './style';` (not full path)
+- [ ] Variant constants defined as `as const` arrays outside the story (e.g., `const COLORS = [...] as const`)
+- [ ] `AllVariants` story has `tags: ['!autodocs', 'dev']`
+- [ ] `AllVariants` shows matrix of all size x variant combinations
+- [ ] Meta has `tags: ['autodocs']`
+- [ ] Mock handlers use `fn()` from `@storybook/test`
+
+## Tests
+
+Reference: `src/components/Spinner/__test__/index.test.tsx`
+
+- [ ] Imports `jsdom-global/register` as first import
+- [ ] Console error suppression for `Could not parse CSS stylesheet` and `findDOMNode is deprecated`
+- [ ] Mocks `lottie-web` if component dependency chain includes it
+- [ ] Has `describe('{Name}')` with at least `it('renders correctly')` + `toMatchSnapshot()`
+
+## SCSS Foundation
+
+Reference: All component SCSS files
+
+- [ ] First line: `@use '@/styles/api' as *;`
+- [ ] `$component: '{kebab-name}';` defined at top
+- [ ] Root selector: `.#{$prefix}-#{$component}`
+- [ ] Zero raw hex values
+- [ ] Zero raw pixel values for design tokens (spacing, radius, heights)
+- [ ] Zero raw font-family declarations
+- [ ] No `om-color()` usage (removed, compile-time error)
+- [ ] No `om-sx` usage (business code only, not component SCSS)
+
+## Icons
+
+Reference: `src/components/Tag/Tag.tsx`
+
+- [ ] All icons use `<Icons name="..." />` from `@/components/Icons`
+- [ ] Icon props typed as `IconName` from `@/components/Icons` — not `string` or `ReactNode`
+- [ ] No inline SVGs or external icon libraries (exception: custom icons specific to component like Checkbox check/minus)
+
+## Barrel Exports
+
+Reference: `src/index.ts` (read actual file first)
+
+- [ ] Import statement added matching existing format in `src/index.ts`
+- [ ] Export pattern matches actual file structure — only imports, no exports (exports defined in component index.ts)
+- [ ] `package.json` exports entry exists for tree-shakeable import
+
+## Anti-Pattern Scan
+
+Scan all generated files for these violations:
+
+- [ ] No `om-sx` in component SCSS
+- [ ] No `om-color()` anywhere
+- [ ] No raw `useState` where `useControlledState` or `useSafeState` should be used
+- [ ] No hooks imported from `@1money/components-ui` (use `@1money/hooks`)
+- [ ] No inline SVGs for icons that exist in `Icons` component (except custom component-specific icons)
+- [ ] No `enum` — only union types + `as const`
+- [ ] No `type` for object structures — only `interface`
+- [ ] No imports from `@1money/components-ui` inside the library

package/.hintrc

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": [
+      "default",
+      {
+        "aria-roles": "off"
+      }
+    ]
+  }
+}

package/@types/global.d.ts

@@ -0,0 +1,28 @@
+declare module '*.css';
+
+declare module '*.less';
+
+declare module '*.scss';
+
+declare module '*.sass';
+
+declare module '*.svg';
+
+declare module '*.png';
+
+declare module '*.jpg';
+
+declare module '*.jpeg';
+
+declare module '*.gif';
+
+declare module '*.md' {
+  const content: string;
+  export default content;
+}
+
+declare namespace JSX {
+  interface Element {
+    [elemName: string]: any;
+  }
+}