diff --git a/.changeset/config.json b/.changeset/config.json index ec9454c7bd1..5e1305538ef 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/@changesets/config@2.3.0/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 deleted file mode 100644 index 04708eec284..00000000000 --- a/.changeset/new-jeans-doubt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"shadcn-ui": patch ---- - -remove duplicate vi call 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 index 870f7ea649e..191b55099f0 100644 --- 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 { +interface DataTableFacetedFilterProps { column?: Column title?: string options: { @@ -35,7 +35,7 @@ export function DataTableFacetedFilter({ column, title, options, -}: DataTableFacetedFilter) { +}: DataTableFacetedFilterProps) { 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 index 31d344a0ab3..464a03c6a26 100644 --- 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 index 84bccb97403..175014c4ec8 100644 --- 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) { - + {children} diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx index f5058a25980..efc5dd1fc7f 100644 --- 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 index 78de9069e57..31bde7637f3 100644 --- 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() { - +
- +
diff --git a/apps/www/registry/default/ui/table.tsx b/apps/www/registry/default/ui/table.tsx index bb3a87f32a0..116d34bb77b 100644 --- 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 >(({ className, ...props }, ref) => ( -
+
>(({ className, ...props }, ref) => ( -
+
", "the working directory. defaults to the current directory.", process.cwd() ) + .option("-a, --all", "add all available components", false) .option("-p, --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 index d0ad624b147..b5f1259c102 100644 --- a/packages/cli/src/utils/transformers/transform-css-vars.ts +++ b/packages/cli/src/utils/transformers/transform-css-vars.ts @@ -146,27 +146,27 @@ export function applyColorMapping( // Build color mappings. const classNames = input.split(" ") - const lightMode: string[] = [] - const darkMode: string[] = [] + const lightMode = new Set() + const darkMode = new Set() 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}` : "") @@ -174,10 +174,10 @@ export function applyColorMapping( 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 index 9f5962a2a73..baedb74d2d5 100644 --- 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
foo
+}\\"\\" + " +`; diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts index 1b21150d57b..8da6765c772 100644 --- 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 index 46ad6916a58..586f1cee2bc 100644 --- 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
foo
+}" + `, + 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
foo
}" `, config: {