shadcn Komponenten Visual Adapter

# shadcn Component Visual Adapter ## Step 1 - Analyze the Existing Component Before writing any code, I need to read the full source of `${component_file_path}`. Since I don't have access to the actual file, I'll need you to provide the current component code. **Audit Table** (to be filled after reading the source): | Item | Current value | Action | |------|--------------|--------| | Props | _pending_ | keep / rename / remove | | State | _pending_ | keep / migrate | | Context/Hooks | _pending_ | keep / replace | | Sub-components | _pending_ | keep / replace | | Dependencies | _pending_ | keep / install / remove | ## Step 2 - Dependency Resolution Run the install command: ```bash bunx --bun shadcn@latest add accordion ``` After the command completes, the generated files will appear in `components/ui/`. Proceed to Step 3 using those files. ## Step 3 - Review Reference Component Since `${reference_url}` is blank, I'll read the files downloaded by the CLI command in Step 2 and extract: - cva variant schema - data-state / data-disabled attributes - animation/transition classes - ARIA roles and props - cn() usage patterns ## Step 4 - Refactor the Component Apply the visual structure from Step 3 to the existing component from Step 1. ### Rules: - ✅ Keep all existing prop names and types unless a direct shadcn equivalent exists. - ✅ Keep all data-fetching, business logic, and callbacks. - ✅ Wrap Radix primitives using `forwardRef` and spread `...props` to preserve flexibility. - ✅ Use `cn()` for all className merging - never string concatenation. - ✅ Export named compound sub-components if the reference component uses them (e.g., `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`). - ❌ Do NOT import the generated shadcn file and re-export it - build the primitive inline in the refactored file to keep the logic co-located. - ❌ Do NOT add Tailwind classes not present in the reference component without explicit instruction. ### Responsive behavior (`sm md lg`): Apply mobile-first responsive classes. Confirm current breakpoints in `tailwind.config.ts` match the project's convention. If the reference uses container queries, install `@tailwindcss/container-queries`. ## Step 5 - Context Providers and Hooks If the reference component requires a context provider (e.g., `ToastProvider`, `TooltipProvider`): 1. Check if it is already mounted in `app/layout.tsx` or `app/providers.tsx`. 2. If not, add it to the appropriate layout file. Provide the exact diff. 3. If a custom hook is required (e.g., `useToast`, `useDialog`), place it in `hooks/` and import it from there. ## Step 6 - Clarifying Questions (ask before generating if unknown) Before I can proceed, I need the following information: 1. **Data/props**: What shape of data will be passed? (Provide a sample object if helpful.) 2. **State management**: Is component state local, or managed externally (Zustand, Redux, React Query)? 3. **Assets**: Are there required images, logos, or custom icons not covered by lucide-react? 4. **Responsive**: What is the expected layout at `sm md lg` breakpoints? 5. **Placement**: Where in the app routing/layout tree will this component live? (Important for context provider placement.) ## Step 7 - Output Format Once the above is resolved, I will provide: 1. **`${component_file_path}`** - full refactored component file. 2. **`components/ui/${shadcn_component_slug}.tsx`** - shadcn primitive (only if needed and not generated by CLI). 3. **`lib/utils.ts`** - only if it needs to be created or updated. 4. **Layout/provider diff** - only if a provider needs to be added. 5. A short **migration notes** section listing: - Removed dependencies - Renamed props (if any) - Any manual steps required (e.g., adding CSS variables to `globals.css`) ## Tailwind CSS Variables (shadcn design tokens) Confirm that `globals.css` contains the required CSS custom properties. If the reference component uses tokens like `--radius`, `--background`, `--foreground`, `--primary`, `--ring`, append the missing variables. Use the shadcn default token set for `zinc` unless the project already defines a custom theme. ## Constraints - Framework: **Next.js 14+ App Router** - Styling: **Tailwind CSS 3** only - no inline styles, no CSS modules, no styled-components. - TypeScript: **strict mode**. All new code must be fully typed. - Do not upgrade or downgrade any existing dependency version unless there is a direct peer conflict. --- **Please provide:** 1. The current source code of `${component_file_path}` 2. Answers to the clarifying questions in Step 6 3. Your `tailwind.config.ts` and `globals.css` files (to verify breakpoints and tokens)