From 87ad14cb2a27ee2d1000344cbe5f8f4fdbfc939a Mon Sep 17 00:00:00 2001 From: Nirmalya Ghosh Date: Sat, 13 May 2023 14:37:39 +0530 Subject: [PATCH] fix(shadcn-ui): add missing deps for Button (#259) * fix: add missing deps for Button * fix: use correct dep Co-authored-by: Pablo * chore: add changeset --------- Co-authored-by: Pablo Co-authored-by: shadcn --- .changeset/wicked-eagles-turn.md | 5 +++++ apps/www/config/components.ts | 1 + apps/www/content/docs/components/button.mdx | 8 +++++++- apps/www/pages/api/components.json | 5 +++-- 4 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .changeset/wicked-eagles-turn.md diff --git a/.changeset/wicked-eagles-turn.md b/.changeset/wicked-eagles-turn.md new file mode 100644 index 00000000000..ea4258c0c0e --- /dev/null +++ b/.changeset/wicked-eagles-turn.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": patch +--- + +add missing deps for button diff --git a/apps/www/config/components.ts b/apps/www/config/components.ts index 47ea0add265..8e060c14df2 100644 --- a/apps/www/config/components.ts +++ b/apps/www/config/components.ts @@ -36,6 +36,7 @@ export const components = [ { component: "button", name: "Button", + dependencies: ["@radix-ui/react-slot"], files: ["components/ui/button.tsx"], }, { diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx index c77501df5cd..12c3bfc8143 100644 --- a/apps/www/content/docs/components/button.mdx +++ b/apps/www/content/docs/components/button.mdx @@ -20,7 +20,13 @@ npx shadcn-ui add button Manual Installation -1. Copy and paste the following code into your project. +1. Install the `@radix-ui/react-slot` component from radix-ui: + +```bash +npm install @radix-ui/react-slot +``` + +2. diff --git a/apps/www/pages/api/components.json b/apps/www/pages/api/components.json index af23326aece..b2b0b1df504 100644 --- a/apps/www/pages/api/components.json +++ b/apps/www/pages/api/components.json @@ -80,11 +80,12 @@ { "component": "button", "name": "Button", + "dependencies": ["@radix-ui/react-slot"], "files": [ { "name": "button.tsx", "dir": "components/ui", - "content": "import * as React from \"react\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"underline-offset-4 hover:underline text-primary\",\n },\n size: {\n default: \"h-10 py-2 px-4\",\n sm: \"h-9 px-3 rounded-md\",\n lg: \"h-11 px-8 rounded-md\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, ...props }, ref) => {\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"underline-offset-4 hover:underline text-primary\",\n },\n size: {\n default: \"h-10 py-2 px-4\",\n sm: \"h-9 px-3 rounded-md\",\n lg: \"h-11 px-8 rounded-md\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, ...props }, ref) => {\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" } ] }, @@ -474,4 +475,4 @@ } ] } -] \ No newline at end of file +]