From 545423c93bff0e11adb7656ad51c5fc16cfa7ca8 Mon Sep 17 00:00:00 2001 From: shadcn Date: Thu, 19 Oct 2023 21:12:17 +0400 Subject: [PATCH 1/5] chore: add kodiak --- .kodiak.toml | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 .kodiak.toml diff --git a/.kodiak.toml b/.kodiak.toml new file mode 100644 index 0000000000..bbfdb22584 --- /dev/null +++ b/.kodiak.toml @@ -0,0 +1,18 @@ +# .kodiak.toml +version = 1 + +[merge] +automerge_label = "automerge" +require_automerge_label = true +method = "squash" +delete_branch_on_merge = true +optimistic_updates = false +prioritize_ready_to_merge = true +notify_on_conflict = true + +[merge.message] +title = "pull_request_title" +body = "pull_request_body" +include_pr_number = true +body_type = "markdown" +strip_html_comments = true From 33f89e9654613506d5996eddb3bf82a563ef0228 Mon Sep 17 00:00:00 2001 From: Josiah Hawkins <94198149+jhawkins11@users.noreply.github.com> Date: Thu, 19 Oct 2023 12:20:34 -0500 Subject: [PATCH 2/5] docs: remove unused imports (#1661) - Remove unused import from Alert Default example - Remove unused imports from Alert Destructive example - Remove unused imports from Dropdown Menu Radio Group example --- apps/www/registry/default/example/alert-demo.tsx | 2 +- apps/www/registry/default/example/alert-destructive.tsx | 2 +- apps/www/registry/default/example/dropdown-menu-radio-group.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/www/registry/default/example/alert-demo.tsx b/apps/www/registry/default/example/alert-demo.tsx index 5255cc9514..a26c71fcfd 100644 --- a/apps/www/registry/default/example/alert-demo.tsx +++ b/apps/www/registry/default/example/alert-demo.tsx @@ -1,4 +1,4 @@ -import { Terminal, Waves } from "lucide-react" +import { Terminal } from "lucide-react" import { Alert, diff --git a/apps/www/registry/default/example/alert-destructive.tsx b/apps/www/registry/default/example/alert-destructive.tsx index 2b4154a8a3..a72c26b8f8 100644 --- a/apps/www/registry/default/example/alert-destructive.tsx +++ b/apps/www/registry/default/example/alert-destructive.tsx @@ -1,4 +1,4 @@ -import { AlertCircle, FileWarning, Terminal } from "lucide-react" +import { AlertCircle } from "lucide-react" import { Alert, diff --git a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx b/apps/www/registry/default/example/dropdown-menu-radio-group.tsx index 42ab782d03..2c06e7b131 100644 --- a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx +++ b/apps/www/registry/default/example/dropdown-menu-radio-group.tsx @@ -1,12 +1,10 @@ "use client" import * as React from "react" -import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu" import { Button } from "@/registry/default/ui/button" import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, From 9091dcdc1b4b14e49d5e5b6de8160db44028c8f5 Mon Sep 17 00:00:00 2001 From: CamTheGoblin <97644920+CamTheGoblin@users.noreply.github.com> Date: Thu, 19 Oct 2023 13:27:01 -0400 Subject: [PATCH 3/5] docs(install): Clarify & Match tsconfig Edits (#1642) This is a small update to the installation instructions for some of the frameworks to make the instructions on editing the tsconfig file consistant across the frameworks, and remove some potentially confusing wording (if people read too fast...like me). Mainly applying the gatsby tsconfig instructions to vite and astro, as it is the most clear. Additionally changed the wording from: ``` Add the code below to the compilerOptions... ``` to: ``` Add the following code to the compilerOptions... ``` to avoid people easily misreading it as "add the code **below the** compilerOptions". --- apps/www/content/docs/installation/astro.mdx | 10 ++++++--- apps/www/content/docs/installation/gatsby.mdx | 2 +- apps/www/content/docs/installation/vite.mdx | 22 +++++++++++++------ 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx index e689b20700..cb5e84c3de 100644 --- a/apps/www/content/docs/installation/astro.mdx +++ b/apps/www/content/docs/installation/astro.mdx @@ -62,15 +62,19 @@ Answer `Yes` to all the question prompted by the CLI when installing Tailwind CS ### Edit tsconfig.json file -Add the code below to the tsconfig.json file to resolve paths: +Add the following code to the `tsconfig.json` file to resolve paths: -```json {2-7} showLineNumbers +```ts {4-9} showLineNumbers { "compilerOptions": { + // ... "baseUrl": ".", "paths": { - "@/*": ["src/*"] + "@/*": [ + "./src/*" + ] } + // ... } } ``` diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index cd83d6f8f6..184e0f9cbf 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -35,7 +35,7 @@ You will be asked a few questions to configure your project: ### Edit tsconfig.json file -Add the code below to the `tsconfig.json` file to resolve paths: +Add the following code to the `tsconfig.json` file to resolve paths: ```ts {4-9} showLineNumbers { diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index b198b23c30..eddceefcad 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -23,20 +23,28 @@ npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` -### Edit tsconfig.json +### Edit tsconfig.json file -Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error +Add the following code to the `tsconfig.json` file to resolve paths: -```typescript -"baseUrl": ".", -"paths": { - "@/*": ["./src/*"] +```ts {4-9} showLineNumbers +{ + "compilerOptions": { + // ... + "baseUrl": ".", + "paths": { + "@/*": [ + "./src/*" + ] + } + // ... + } } ``` ### Update vite.config.ts -Add the code below to the vite.config.ts so your app can resolve paths without error +Add the following code to the vite.config.ts so your app can resolve paths without error ```bash # (so you can import "path" without error) From 4ec8a67dab94d0c2bcda2396d01174abee0991a0 Mon Sep 17 00:00:00 2001 From: Luka Hartwig Date: Thu, 19 Oct 2023 19:44:11 +0200 Subject: [PATCH 4/5] Support tailwind.config.ts (#1247) Fixes #659 Fixes #633 Create Next App is using `tailwind.config.ts` in the TypeScript template. Since this is a very common use case it would be nice to preserve the type safety of the file. I added new templates for TypeScript files. I see there is an issue #1073 which asks for ESM support as well. This is not included in this PR. I also fixed the type error in the keyframes that is also handled in #636 --- .changeset/sweet-worms-fix.md | 5 + .../www/content/docs/components/accordion.mdx | 8 +- apps/www/content/docs/installation/manual.mdx | 4 +- packages/cli/src/commands/init.ts | 19 ++- packages/cli/src/utils/templates.ts | 128 +++++++++++++++++- packages/cli/test/commands/init.test.ts | 4 +- .../cli/test/fixtures/next/tailwind.config.js | 4 +- tailwind.config.cjs | 4 +- templates/next-template/tailwind.config.js | 4 +- 9 files changed, 159 insertions(+), 21 deletions(-) create mode 100644 .changeset/sweet-worms-fix.md diff --git a/.changeset/sweet-worms-fix.md b/.changeset/sweet-worms-fix.md new file mode 100644 index 0000000000..deaf083004 --- /dev/null +++ b/.changeset/sweet-worms-fix.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": minor +--- + +add support for tailwind.config.ts diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx index 41ca737ee8..6db148f736 100644 --- a/apps/www/content/docs/components/accordion.mdx +++ b/apps/www/content/docs/components/accordion.mdx @@ -42,12 +42,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -90,12 +90,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx index efc5dd1fc7..4625b2cde4 100644 --- a/apps/www/content/docs/installation/manual.mdx +++ b/apps/www/content/docs/installation/manual.mdx @@ -117,12 +117,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 598ab6d60e..2653af78c9 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -228,12 +228,25 @@ export async function runInit(cwd: string, config: Config) { const extension = config.tsx ? "ts" : "js" + const tailwindConfigExtension = path.extname( + config.resolvedPaths.tailwindConfig + ) + + let tailwindConfigTemplate: string + if (tailwindConfigExtension === ".ts") { + tailwindConfigTemplate = config.tailwind.cssVariables + ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES + : templates.TAILWIND_CONFIG_TS + } else { + tailwindConfigTemplate = config.tailwind.cssVariables + ? templates.TAILWIND_CONFIG_WITH_VARIABLES + : templates.TAILWIND_CONFIG + } + // Write tailwind config. await fs.writeFile( config.resolvedPaths.tailwindConfig, - config.tailwind.cssVariables - ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension }) - : template(templates.TAILWIND_CONFIG)({ extension }), + template(tailwindConfigTemplate)({ extension }), "utf8" ) diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 94fb1d900c..f110cf90fc 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -34,12 +34,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -111,12 +111,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -127,3 +127,123 @@ module.exports = { }, plugins: [require("tailwindcss-animate")], }` + +export const TAILWIND_CONFIG_TS = `import type { Config } from "tailwindcss" + +const config = { + darkMode: ["class"], + content: [ + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config` + +export const TAILWIND_CONFIG_TS_WITH_VARIABLES = `import type { Config } from "tailwindcss" + +const config = { + darkMode: ["class"], + content: [ + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config` diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts index ad2a7023b1..8135e8a480 100644 --- a/packages/cli/test/commands/init.test.ts +++ b/packages/cli/test/commands/init.test.ts @@ -51,7 +51,7 @@ test("init config-full", async () => { expect(mockWriteFile).toHaveBeenNthCalledWith( 1, expect.stringMatching(/tailwind.config.ts$/), - expect.stringContaining(`/** @type {import('tailwindcss').Config} */`), + expect.stringContaining(`import type { Config } from "tailwindcss"`), "utf8" ) expect(mockWriteFile).toHaveBeenNthCalledWith( @@ -121,7 +121,7 @@ test("init config-partial", async () => { expect(mockWriteFile).toHaveBeenNthCalledWith( 1, expect.stringMatching(/tailwind.config.ts$/), - expect.stringContaining(`/** @type {import('tailwindcss').Config} */`), + expect.stringContaining(`import type { Config } from "tailwindcss"`), "utf8" ) expect(mockWriteFile).toHaveBeenNthCalledWith( diff --git a/packages/cli/test/fixtures/next/tailwind.config.js b/packages/cli/test/fixtures/next/tailwind.config.js index da23e8eecf..6e84f58f07 100644 --- a/packages/cli/test/fixtures/next/tailwind.config.js +++ b/packages/cli/test/fixtures/next/tailwind.config.js @@ -58,12 +58,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/tailwind.config.cjs b/tailwind.config.cjs index b70952b4a4..a0c2402724 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -59,12 +59,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/templates/next-template/tailwind.config.js b/templates/next-template/tailwind.config.js index ffdff01ca6..3ea1db1112 100644 --- a/templates/next-template/tailwind.config.js +++ b/templates/next-template/tailwind.config.js @@ -58,12 +58,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { From 648ddde3a20723e7b0f4da45e25380e6c4924028 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Olle=20M=C3=A5nsson?= <31876997+ollema@users.noreply.github.com> Date: Thu, 19 Oct 2023 20:10:45 +0200 Subject: [PATCH 5/5] Fix support rule in `site-header.tsx` (#1628) Fixes https://github.com/shadcn-ui/ui/issues/1627 if that is desired. --- apps/www/components/site-header.tsx | 2 +- templates/next-template/components/site-header.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx index 17cf6861f3..3c13add4ad 100644 --- a/apps/www/components/site-header.tsx +++ b/apps/www/components/site-header.tsx @@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button" export function SiteHeader() { return ( -
+
diff --git a/templates/next-template/components/site-header.tsx b/templates/next-template/components/site-header.tsx index 4e7d2472e6..91e7808703 100644 --- a/templates/next-template/components/site-header.tsx +++ b/templates/next-template/components/site-header.tsx @@ -8,7 +8,7 @@ import { ThemeToggle } from "@/components/theme-toggle" export function SiteHeader() { return ( -
+