etherisc · christoph2806 · May 20, 2025 · May 20, 2025 · May 20, 2025 · May 20, 2025
diff --git a/.cursor/rules/coding.mdc b/.cursor/rules/coding.mdc
@@ -12,12 +12,38 @@ alwaysApply: true
 - Before starting coding, always present a plan for approval.
 - Tasks are in docs/project_plan.md
 - Each task will be implemented via a feature branch and a PR to the develop branch.
-- Always follow the following recipe for implementing tasks: 
-  1. Start implementing after the user has explicitly told so.
-  2. After finishing implementing, perform all necessary tests and check if the DoD for this task is met.
-  3. Report on test results and DoD criteria and ask user if a PR should be submitted.
-  4. If the user approves submitting a PR, and before PR is submitted, the task is marked with "PR" in docs/project_plan.md. 
-  5. After PR ist submitted, report to the user and wait for manual instructions.
-  6. The user will then review and merge the PR or ask for updates.
-  7. Pull the repo again to check if the PR has been merged. 
-  8. After task is completed (PR merged), the task is marked with a checkmark in docs/project_plan.md
+
+# Recipe for implementing tasks
+Always follow the following recipe for implementing tasks: 
+1. Only start implementing a task after the user has explicitly told so.
+2. Before starting coding, create a task planning document (.md) in the docs/task-planning folder.
+3. The task planning document contains a table with three columns: tasks description, DoD (Definition of Done) and Status. Status is open, working, checking, review, complete. Initially all tasks are "open".
+   1. Open = the task hasn't been worked on.
+   2. Working = the task is currently being implemented.
+   3. Checking = the DoD of the tasks are being checked.
+   4. Review = the user is reviewing the result.
+   5. complete = the user has approved the result and the task is complete.
+4. After creating the task planning document, let the user review the doc.
+5. After the user has approved the task planning document, implement each task one after the other.
+6. After implementing a task, check the criteria for DoD and report the result to the user.
+7. If DoD is not met, fix the problem until DoD is met.
+8. Before and after each task, update each task in the table with the right status.
+9.  After finishing implementing, perform all necessary tests and check if the DoD for this task is met.
+10. Report on test results and DoD criteria and ask user if a PR should be submitted.
+11. If the user approves submitting a PR, and before PR is submitted, the task is marked with "PR" in docs/project_plan.md. 
+12. After PR ist submitted, report to the user and wait for manual instructions.
+13. The user will then review and merge the PR or ask for updates.
+14. Pull the repo again to check if the PR has been merged. 
+15. After task is completed (PR merged), the task is marked with a checkmark in docs/project_plan.md. This change does not warrant a separate PR, it will be included in the next PR. Just do git add for the file.
+
+# Instructions to handle error situations:
+- CI Pipeline fails:
+  1. List the last github actions and find out which actions failed.
+  2. Fetch the git actions log with `gh run view --log | cat`
+  3. Analyze the log and make a proposal how to fix it.
+  4. Let the user review / update the proposal, then execute the reviewed/updated proposal.
+- Linter errors:
+  1. Run `pnpm run lint`
+  2. Find the linter errors
+  3. Fix
+
diff --git a/.cursor/rules/styling_rules.mdc b/.cursor/rules/styling_rules.mdc
@@ -1,6 +1,13 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
 # Cursor Rule File – Tailwind, Shadcn, DaisyUI
 
 - Tailwind classes **only inside ui-kit**; no classes in consuming apps.
+- Always use shadcn ui components with the shadcn CLI (npx shadcn@latest <command>)
+- Initialitze 
 - Never override Shadcn component CSS directly; extend via wrapper props.
 - Colours/spacings via CSS vars mapped to DaisyUI tokens.
 - Use `@apply` sparingly inside `theme.css`, never in JSX.

diff --git a/components.json b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/docs/project_plan.md b/docs/project_plan.md
@@ -34,15 +34,15 @@ A pragmatic breakdown into **four one‑week sprints** plus a preparatory **Spri
 | 1.2c | Configure and verify Storybook addon‑a11y.                                                            | axe‑a11y addon shows zero violations.                                    | ✓      |
 | 1.3  | Add global theme bridging (`theme.css` ↔ DaisyUI).                                                   | Cypress visual diff (light/dark) matches golden images.                  | ✓      |
 | 1.4  | Create first **AuthShell** layout with logo slot.                                                     | Rendered via Storybook; Playwright snapshot approved.                    | ✓      |
-| 1.5  | Document design tokens (`DESIGN_TOKENS.md`).                                                          | File exists; CI step `tokens-check` verifies presence of each CSS var.   | PR     |
+| 1.5  | Document design tokens (`DESIGN_TOKENS.md`).                                                          | File exists; CI step `tokens-check` verifies presence of each CSS var.   | ✓      |
 
 ---
 
 ## Sprint 2 — Form primitives & State tooling
 
 | #   | Task                                                                  | DoD                                                                                     | Status |
 | --- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------ |
-| 2.1 | Add NumberInput, Select, Checkbox, RadioGroup components.             | Unit & a11y tests pass; form story displays all.                                        |        |
+| 2.1 | Add NumberInput, Select, Checkbox, RadioGroup components.             | Unit & a11y tests pass; form story displays all.                                        | PR     |
 | 2.2 | Integrate **React Hook Form + Zod**; create `FormGrid` + `FormGroup`. | Story "Form Example" submits & reports validation errors in Storybook interaction test. |        |
 | 2.3 | Implement Zustand session store skeleton with dark‑mode flag.         | Vitest verifies default state + setter actions.                                         |        |
 | 2.4 | ESLint rule enforcing named `useEffect` & cleanup.                    | Failing example in test repo triggers lint error; real code passes.                     |        |

diff --git a/docs/task-planning/task-2.1-form-components.md b/docs/task-planning/task-2.1-form-components.md
@@ -0,0 +1,47 @@
+# Task 2.1 Planning: Form Components
+
+## Overview
+
+This task involves implementing four form-related components:
+
+- NumberInput
+- Select
+- Checkbox
+- RadioGroup
+
+These components will follow the established design patterns in the existing codebase, utilizing Shadcn UI as the foundation and conforming to the accessibility requirements.
+
+## Task Breakdown
+
+| Task Description                              | Definition of Done (DoD)                                                                                            | Status   |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- |
+| Set up directory structure for each component | All four component directories created with appropriate files (component, types, tests, stories)                    | complete |
+| Implement NumberInput component               | Component renders correctly and accepts all required props; Unit tests pass; a11y tests pass                        | working  |
+| Implement Select component                    | Component renders correctly and accepts all required props; Unit tests pass; a11y tests pass                        | open     |
+| Implement Checkbox component                  | Component renders correctly and accepts all required props; Unit tests pass; a11y tests pass                        | open     |
+| Implement RadioGroup component                | Component renders correctly and accepts all required props; Unit tests pass; a11y tests pass                        | open     |
+| Update barrel exports in index.ts             | All components are properly exported and accessible from the package's public API                                   | open     |
+| Create consolidated form story                | Story shows all components working together in a cohesive form; All components render correctly with proper styling | open     |
+| Final review and documentation                | All components are properly documented; Code adheres to project standards; No lint errors; All tests pass           | open     |
+
+## Implementation Strategy
+
+### Component Architecture
+
+- Each component will be implemented following the same pattern as existing components (Button, TextInput)
+- Components will be built on top of Shadcn UI primitives
+- Each component will have proper TypeScript typing
+- Components will include accessibility features
+
+### Testing Approach
+
+- Unit tests with Vitest for functionality
+- Accessibility tests with axe-core
+- Storybook stories to demonstrate all variants and states
+- Snapshot tests for visual regression
+
+## Timeline
+
+- Estimated completion: 3-4 days
+- First 2 days: Implement individual components
+- Last 1-2 days: Integration, testing, and documentation
diff --git a/docs/task-planning/task-2.1.md b/docs/task-planning/task-2.1.md
@@ -0,0 +1,22 @@
+# Task 2.1 Planning - Form Primitives
+
+## Overview
+
+Task 2.1 involves completing the implementation of core form components (NumberInput, Select, Checkbox, RadioGroup) which already have base implementations but require tests and integration into a form story.
+
+## Tasks
+
+| Task Description                              | DoD (Definition of Done)                                                                                   | Status   |
+| --------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- |
+| Create unit tests for NumberInput component   | Tests verify component renders correctly with all prop variations (label, description, error states, etc.) | Complete |
+| Create unit tests for Select component        | Tests verify component renders correctly with all prop variations and options are displayed correctly      | Complete |
+| Create unit tests for Checkbox component      | Tests verify component renders correctly with all prop variations and state changes work                   | Complete |
+| Create unit tests for RadioGroup component    | Tests verify component renders correctly with all prop variations and option selection works               | Complete |
+| Set up a11y tests for all form components     | All components pass accessibility tests with no violations                                                 | Complete |
+| Create a form story displaying all components | Story shows all components with their variants in Storybook                                                | Complete |
+
+## Implementation Notes
+
+- Unit tests will follow the pattern established in the existing TextInput and Button tests
+- a11y tests will use the Storybook addon-a11y
+- The form story will showcase all components with their various states (default, disabled, with error, etc.)
diff --git a/docs/task-planning/task-2.1a-shadcn-upgrade.md b/docs/task-planning/task-2.1a-shadcn-upgrade.md
@@ -0,0 +1,41 @@
+# Task 2.1a Planning: Shadcn UI Component Upgrade
+
+## Overview
+
+This task involves upgrading the current form components to use the Shadcn CLI for better alignment with the latest Shadcn UI implementations. This will ensure the components are easier to maintain and update in the future.
+
+## Task Breakdown
+
+| Task Description                                             | Definition of Done (DoD)                                                                                                                                | Status   |
+| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| Set up Shadcn CLI and configuration                          | components.json file created with proper configuration; CLI commands functioning correctly                                                              | complete |
+| Reorganize project structure to match Shadcn standards       | Directory structure and imports aligned with Shadcn expectations; Utils in correct location                                                             | complete |
+| Update existing components using Shadcn CLI                  | All components (Button, Input, Select, Checkbox, RadioGroup) updated using the Shadcn CLI; Components maintain existing functionality                   | complete |
+| Ensure wrapper components align with updated base components | All wrapper components (NumberInput, Select, Checkbox, RadioGroup) function correctly with the updated base components; No regressions in functionality | complete |
+
+## Implementation Strategy
+
+### Step 1: Project Structure Reorganization (Completed)
+
+- Create `src/lib` directory for utilities to match Shadcn standards
+- Move `cn` utility from `src/utils/cn.ts` to `src/lib/utils.ts`
+- Update imports across the project to use the new paths
+- Update components.json to reflect the correct paths
+
+### Step 2: Component Updates (Completed)
+
+- Use the Shadcn CLI to update/reinstall all base components
+- Ensure the updated components use the latest patterns and styles
+- Verify all dependencies are correctly installed
+
+### Step 3: Wrapper Component Alignment (Completed)
+
+- Update wrapper components to work with the new base components
+- Ensure all functionality is maintained
+- Run tests to verify no regressions
+
+## Timeline
+
+- Estimated completion: 1-2 days (Completed in 1 day)
+- First step: Setup and initial component upgrades (Completed)
+- Second step: Complete remaining component updates and testing (Completed)
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@changesets/cli": "^2.29.4",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.27.0",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/builder-vite": "8.6.14",
@@ -34,7 +35,6 @@
     "eslint": "^9.27.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "@eslint/js": "^9.27.0",
     "husky": "^8.0.0",
     "lint-staged": "^16.0.0",
     "postcss": "^8.4.35",
@@ -46,6 +46,9 @@
     "vitest": "^3.1.3"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-select": "^2.2.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

diff --git a/packages/ui-kit/components.json b/packages/ui-kit/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -21,7 +21,7 @@
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest",
+    "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -34,14 +34,18 @@
     "tokens-check": "node scripts/tokens-check.js"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.3.1",
+    "@radix-ui/react-radio-group": "^1.3.6",
+    "@radix-ui/react-select": "^2.2.4",
+    "@radix-ui/react-slot": "^1.2.2",
     "@types/testing-library__jest-dom": "^6.0.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "jsdom": "^26.1.0",
+    "lucide-react": "^0.511.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tailwind-merge": "^2.2.1",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {