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 105ca00497c..b1a975fd7a9 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/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index e9aa1f1dbbe..5e36b64cac2 100644 --- 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 index a9d202577f1..49b9014fdf9 100644 --- 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 index 8e3a79bba33..e956074de02 100644 --- 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 index 46ef641575a..30957296615 100644 --- a/packages/cli/src/commands/add.ts +++ b/packages/cli/src/commands/add.ts @@ -24,6 +24,7 @@ const addOptionsSchema = z.object({ yes: z.boolean(), overwrite: z.boolean(), cwd: z.string(), + all: z.boolean(), path: z.string().optional(), }) @@ -31,13 +32,14 @@ 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 ", "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: {