rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-27 06:34:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into main

Browse Source
This commit is contained in:
iaingymware
2023-10-20 19:46:52 +01:00
committed by GitHub
parent 82528a62a0 648ddde3a2
commit dac5a0bd2c
18 changed files with 204 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/sweet-worms-fix.md Normal file
View File

@@ -0,0 +1,5 @@
---
"shadcn-ui": minor
---
add support for tailwind.config.ts

18
.kodiak.toml Normal file
View File

@@ -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

2
apps/www/components/site-header.tsx
View File

@@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button"
export function SiteHeader() {
return (
<header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 items-center">
<MainNav />
<MobileNav />

8
apps/www/content/docs/components/accordion.mdx
View File

@@ -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: {

10
apps/www/content/docs/installation/astro.mdx
View File

@@ -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/*"
]
}
// ...
}
}
```

2
apps/www/content/docs/installation/gatsby.mdx
View File

@@ -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
{

4
apps/www/content/docs/installation/manual.mdx
View File

@@ -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: {

22
apps/www/content/docs/installation/vite.mdx
View File

@@ -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)

2
apps/www/registry/default/example/alert-demo.tsx
View File

@@ -1,4 +1,4 @@
import { Terminal, Waves } from "lucide-react"
import { Terminal } from "lucide-react"
import {
Alert,

2
apps/www/registry/default/example/alert-destructive.tsx
View File

@@ -1,4 +1,4 @@
import { AlertCircle, FileWarning, Terminal } from "lucide-react"
import { AlertCircle } from "lucide-react"
import {
Alert,

2
apps/www/registry/default/example/dropdown-menu-radio-group.tsx
View File

@@ -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,

19
packages/cli/src/commands/init.ts
View File

@@ -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"
)

128
packages/cli/src/utils/templates.ts
View File

@@ -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`

4
packages/cli/test/commands/init.test.ts
View File

@@ -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(

4
packages/cli/test/fixtures/next/tailwind.config.js vendored
View File

@@ -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: {

4
tailwind.config.cjs
View File

@@ -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: {

2
templates/next-template/components/site-header.tsx
View File

@@ -8,7 +8,7 @@ import { ThemeToggle } from "@/components/theme-toggle"
export function SiteHeader() {
return (
<header className="bg-background sticky top-0 z-40 w-full border-b">
<header className="sticky top-0 z-40 w-full border-b bg-background">
<div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
<MainNav items={siteConfig.mainNav} />
<div className="flex flex-1 items-center justify-end space-x-4">

4
templates/next-template/tailwind.config.js
View File

@@ -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: {