Merge branch 'main' into main

shadcn-ui · Sep 20, 2023 · d6ed34e · d6ed34e
2 parents dbc6e4d + c0deeac
commit d6ed34e
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 38 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "shadcn/ui" }],
+  "changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui/ui" }],
   "commit": false,
   "fixed": [],
   "linked": [],

diff --git a/.changeset/new-jeans-doubt.md b/.changeset/new-jeans-doubt.md
diff --git a/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/examples/tasks/components/data-table-faceted-filter.tsx
@@ -21,7 +21,7 @@ import {
 } from "@/registry/new-york/ui/popover"
 import { Separator } from "@/registry/new-york/ui/separator"
 
-interface DataTableFacetedFilter<TData, TValue> {
+interface DataTableFacetedFilterProps<TData, TValue> {
   column?: Column<TData, TValue>
   title?: string
   options: {
@@ -35,7 +35,7 @@ export function DataTableFacetedFilter<TData, TValue>({
   column,
   title,
   options,
-}: DataTableFacetedFilter<TData, TValue>) {
+}: DataTableFacetedFilterProps<TData, TValue>) {
   const facets = column?.getFacetedUniqueValues()
   const selectedValues = new Set(column?.getFilterValue() as string[])
 

diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx
@@ -51,7 +51,8 @@ npx shadcn-ui@latest add [component]
 You will be presented with a list of components to choose from:
 
 ```txt
-Which components would you like to add? › Space to select. Return to submit.
+Which components would you like to add? › Space to select. A to toggle all.
+Enter to submit.
 
 ◯  accordion
 ◯  alert

diff --git a/apps/www/content/docs/dark-mode/next.mdx b/apps/www/content/docs/dark-mode/next.mdx
@@ -42,7 +42,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <html lang="en" suppressHydrationWarning>
         <head />
         <body>
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
             {children}
           </ThemeProvider>
         </body>

diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx
@@ -139,7 +139,7 @@ module.exports = {
 
 Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).
 
-```css title="styles.css"
+```css title="globals.css"
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/apps/www/registry/default/example/dialog-demo.tsx b/apps/www/registry/default/example/dialog-demo.tsx
@@ -29,13 +29,21 @@ export default function DialogDemo() {
             <Label htmlFor="name" className="text-right">
               Name
             </Label>
-            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+            <Input
+              id="name"
+              defaultValue="Pedro Duarte"
+              className="col-span-3"
+            />
           </div>
           <div className="grid grid-cols-4 items-center gap-4">
             <Label htmlFor="username" className="text-right">
               Username
             </Label>
-            <Input id="username" value="@peduarte" className="col-span-3" />
+            <Input
+              id="username"
+              defaultValue="@peduarte"
+              className="col-span-3"
+            />
           </div>
         </div>
         <DialogFooter>

diff --git a/apps/www/registry/default/ui/table.tsx b/apps/www/registry/default/ui/table.tsx
@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto">
+  <div className="relative w-full overflow-auto">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

diff --git a/apps/www/registry/new-york/ui/table.tsx b/apps/www/registry/new-york/ui/table.tsx
@@ -6,7 +6,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto">
+  <div className="relative w-full overflow-auto">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -1,5 +1,25 @@
 # @shadcn/ui
 
+## 0.4.0
+
+### Minor Changes
+
+- [#1554](https://github.com/shadcn-ui/ui/pull/1554) [`2f0dbca`](https://github.com/shadcn-ui/ui/commit/2f0dbca22180507c20088f595613481adcfb51ed) Thanks [@shadcn](https://github.com/shadcn)! - do not ask for confirmation
+
+- [#1033](https://github.com/shadcn-ui/ui/pull/1033) [`963114e`](https://github.com/shadcn-ui/ui/commit/963114e118a2263f4ee449cc07b0f6f7e5104bc1) Thanks [@sramam](https://github.com/sramam)! - add --all option
+
+- [#973](https://github.com/shadcn-ui/ui/pull/973) [`58d012e`](https://github.com/shadcn-ui/ui/commit/58d012e342d2563b4c43ed2ac18879a6d5044980) Thanks [@plbstl](https://github.com/plbstl)! - ask for overwrite
+
+### Patch Changes
+
+- [#1466](https://github.com/shadcn-ui/ui/pull/1466) [`0a42865`](https://github.com/shadcn-ui/ui/commit/0a4286500ee06289eccde8fe9257c169b47dbc93) Thanks [@c0b41](https://github.com/c0b41)! - fix file extension
+
+- [#1555](https://github.com/shadcn-ui/ui/pull/1555) [`d3d52fc`](https://github.com/shadcn-ui/ui/commit/d3d52fc68723a895ddad99e1f5c9420d981d3387) Thanks [@shadcn](https://github.com/shadcn)! - update README
+
+- [#1319](https://github.com/shadcn-ui/ui/pull/1319) [`4506822`](https://github.com/shadcn-ui/ui/commit/450682238922bf025ff919f0a84147894710fb71) Thanks [@K-Sato1995](https://github.com/K-Sato1995)! - remove duplicate vi call
+
+- [#1089](https://github.com/shadcn-ui/ui/pull/1089) [`ae84578`](https://github.com/shadcn-ui/ui/commit/ae845788f688d60f0e8ac020e16a4bd357978baf) Thanks [@santidalmasso](https://github.com/santidalmasso)! - fix duplicate classnames
+
 ## 0.3.0
 
 ### Minor Changes

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -36,7 +36,7 @@ npx shadcn-ui add
 
 ## Documentation
 
-Visit http://ui.shadcn.com/docs to view the documentation.
+Visit https://ui.shadcn.com/docs/cli to view the documentation.
 
 ## License
 

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"

diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
@@ -24,20 +24,22 @@ const addOptionsSchema = z.object({
   yes: z.boolean(),
   overwrite: z.boolean(),
   cwd: z.string(),
+  all: z.boolean(),
   path: z.string().optional(),
 })
 
 export const add = new Command()
   .name("add")
   .description("add a component to your project")
   .argument("[components...]", "the components to add")
-  .option("-y, --yes", "skip confirmation prompt.", false)
+  .option("-y, --yes", "skip confirmation prompt.", true)
   .option("-o, --overwrite", "overwrite existing files.", false)
   .option(
     "-c, --cwd <cwd>",
     "the working directory. defaults to the current directory.",
     process.cwd()
   )
+  .option("-a, --all", "add all available components", false)
   .option("-p, --path <path>", "the path to add the component to.")
   .action(async (components, opts) => {
     try {
@@ -65,8 +67,10 @@ export const add = new Command()
 
       const registryIndex = await getRegistryIndex()
 
-      let selectedComponents = options.components
-      if (!options.components?.length) {
+      let selectedComponents = options.all
+        ? registryIndex.map((entry) => entry.name)
+        : options.components
+      if (!options.components?.length && !options.all) {
         const { components } = await prompts({
           type: "multiselect",
           name: "components",
@@ -76,6 +80,9 @@ export const add = new Command()
           choices: registryIndex.map((entry) => ({
             title: entry.name,
             value: entry.name,
+            selected: options.all
+              ? true
+              : options.components?.includes(entry.name),
           })),
         })
         selectedComponents = components
@@ -131,15 +138,27 @@ export const add = new Command()
 
         if (existingComponent.length && !options.overwrite) {
           if (selectedComponents.includes(item.name)) {
-            logger.warn(
-              `Component ${item.name} already exists. Use ${chalk.green(
-                "--overwrite"
-              )} to overwrite.`
-            )
-            process.exit(1)
-          }
+            spinner.stop()
+            const { overwrite } = await prompts({
+              type: "confirm",
+              name: "overwrite",
+              message: `Component ${item.name} already exists. Would you like to overwrite?`,
+              initial: false,
+            })
+
+            if (!overwrite) {
+              logger.info(
+                `Skipped ${item.name}. To overwrite, run with the ${chalk.green(
+                  "--overwrite"
+                )} flag.`
+              )
+              continue
+            }
 
-          continue
+            spinner.start(`Installing ${item.name}...`)
+          } else {
+            continue
+          }
         }
 
         for (const file of item.files) {
@@ -155,6 +174,7 @@ export const add = new Command()
 
           if (!config.tsx) {
             filePath = filePath.replace(/\.tsx$/, ".jsx")
+            filePath = filePath.replace(/\.ts$/, ".js")
           }
 
           await fs.writeFile(filePath, content)

diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
@@ -146,38 +146,38 @@ export function applyColorMapping(
 
   // Build color mappings.
   const classNames = input.split(" ")
-  const lightMode: string[] = []
-  const darkMode: string[] = []
+  const lightMode = new Set<string>()
+  const darkMode = new Set<string>()
   for (let className of classNames) {
     const [variant, value, modifier] = splitClassName(className)
     const prefix = PREFIXES.find((prefix) => value?.startsWith(prefix))
     if (!prefix) {
-      if (!lightMode.includes(className)) {
-        lightMode.push(className)
+      if (!lightMode.has(className)) {
+        lightMode.add(className)
       }
       continue
     }
 
     const needle = value?.replace(prefix, "")
     if (needle && needle in mapping.light) {
-      lightMode.push(
+      lightMode.add(
         [variant, `${prefix}${mapping.light[needle]}`]
           .filter(Boolean)
           .join(":") + (modifier ? `/${modifier}` : "")
       )
 
-      darkMode.push(
+      darkMode.add(
         ["dark", variant, `${prefix}${mapping.dark[needle]}`]
           .filter(Boolean)
           .join(":") + (modifier ? `/${modifier}` : "")
       )
       continue
     }
 
-    if (!lightMode.includes(className)) {
-      lightMode.push(className)
+    if (!lightMode.has(className)) {
+      lightMode.add(className)
     }
   }
 
-  return lightMode.join(" ") + " " + darkMode.join(" ").trim()
+  return [...Array.from(lightMode), ...Array.from(darkMode)].join(" ").trim()
 }
diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
@@ -23,3 +23,11 @@ export function Foo() {
 }\\"\\"
     "
 `;
+
+exports[`transform css vars 4`] = `
+"import * as React from \\"react\\"
+export function Foo() {
+	return <div className={cn(\\"bg-white border border-stone-200 dark:bg-stone-950 dark:border-stone-800\\")}>foo</div>
+}\\"\\"
+    "
+`;
diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts
@@ -64,7 +64,7 @@ describe("apply color mapping", async () => {
       input:
         "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
       output:
-        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
+        "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
     },
     {
       input:

diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts
@@ -56,6 +56,29 @@ export function Foo() {
       raw: `import * as React from "react"
 export function Foo() {
 	return <div className={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
+}"
+    `,
+      config: {
+        tsx: true,
+        tailwind: {
+          baseColor: "stone",
+          cssVariables: false,
+        },
+        aliases: {
+          components: "@/components",
+          utils: "@/lib/utils",
+        },
+      },
+      baseColor: stone,
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `import * as React from "react"
+export function Foo() {
+	return <div className={cn("bg-background border border-input")}>foo</div>
 }"
     `,
       config: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,7 @@ describe("apply color mapping", async () => { @@
           input:
             "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
           output:
-            "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900",
+            "text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900",
         },
         {
           input:
@@ Expand Down @@