feat(next-template): update template and dependencies (#483)

* feat(next-template): update template and deps

* docs(next-template): update README

* fix(www): update deps

* chore: remove console.log
This commit is contained in:
shadcn
2023-05-29 11:02:02 +04:00
committed by GitHub
parent dffbe89f7d
commit eb27529f50
11 changed files with 2169 additions and 2105 deletions

View File

@@ -90,7 +90,6 @@ interface ExampleCodeLinkProps {
}
export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
console.log(pathname)
const example = examples.find((example) => pathname?.startsWith(example.href))
if (!example?.code) {

View File

@@ -18,77 +18,77 @@
"dependencies": {
"@faker-js/faker": "^7.6.0",
"@hookform/resolvers": "^3.1.0",
"@radix-ui/react-accessible-icon": "^1.0.1",
"@radix-ui/react-accordion": "^1.1.0",
"@radix-ui/react-alert-dialog": "^1.0.2",
"@radix-ui/react-aspect-ratio": "^1.0.1",
"@radix-ui/react-avatar": "^1.0.1",
"@radix-ui/react-checkbox": "^1.0.1",
"@radix-ui/react-collapsible": "^1.0.1",
"@radix-ui/react-context-menu": "^2.1.1",
"@radix-ui/react-dialog": "^1.0.2",
"@radix-ui/react-dropdown-menu": "^2.0.1",
"@radix-ui/react-hover-card": "^1.0.3",
"@radix-ui/react-label": "^2.0.0",
"@radix-ui/react-menubar": "^1.0.0",
"@radix-ui/react-navigation-menu": "^1.1.1",
"@radix-ui/react-popover": "^1.0.2",
"@radix-ui/react-progress": "^1.0.1",
"@radix-ui/react-radio-group": "^1.1.0",
"@radix-ui/react-scroll-area": "^1.0.2",
"@radix-ui/react-select": "^1.2.0",
"@radix-ui/react-separator": "^1.0.1",
"@radix-ui/react-slider": "^1.1.0",
"@radix-ui/react-slot": "^1.0.1",
"@radix-ui/react-switch": "^1.0.1",
"@radix-ui/react-tabs": "^1.0.2",
"@radix-ui/react-toast": "^1.1.2",
"@radix-ui/react-toggle": "^1.0.1",
"@radix-ui/react-toggle-group": "^1.0.1",
"@radix-ui/react-tooltip": "^1.0.3",
"@radix-ui/react-accessible-icon": "^1.0.3",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-alert-dialog": "^1.0.4",
"@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-avatar": "^1.0.3",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-context-menu": "^2.1.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-hover-card": "^1.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.3",
"@radix-ui/react-navigation-menu": "^1.1.3",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-scroll-area": "^1.0.4",
"@radix-ui/react-select": "^1.2.2",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.4",
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-toggle-group": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.6",
"@tanstack/react-table": "^8.9.1",
"@vercel/analytics": "^1.0.0",
"@vercel/analytics": "^1.0.1",
"@vercel/og": "^0.0.21",
"class-variance-authority": "^0.4.0",
"clsx": "^1.2.1",
"cmdk": "^0.2.0",
"contentlayer": "0.3.0",
"date-fns": "^2.29.3",
"date-fns": "^2.30.0",
"lucide-react": "0.214.0",
"next": "13.4.3",
"next-contentlayer": "0.3.0",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-day-picker": "^8.6.0",
"react-day-picker": "^8.7.1",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.9",
"react-wrap-balancer": "^0.4.0",
"recharts": "^2.5.0",
"react-hook-form": "^7.44.2",
"react-wrap-balancer": "^0.4.1",
"recharts": "^2.6.2",
"sharp": "^0.31.3",
"tailwind-merge": "^1.8.0",
"zod": "^3.20.2"
"tailwind-merge": "^1.12.0",
"zod": "^3.21.4"
},
"devDependencies": {
"@types/node": "^17.0.12",
"@types/react": "^18.0.22",
"@types/node": "^17.0.45",
"@types/react": "^18.2.7",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^18.0.7",
"esbuild": "^0.17.3",
"eslint": "^8.31.0",
"mdast-util-toc": "^6.1.0",
"postcss": "^8.4.21",
"@types/react-dom": "^18.2.4",
"esbuild": "^0.17.19",
"eslint": "^8.41.0",
"mdast-util-toc": "^6.1.1",
"postcss": "^8.4.24",
"rehype": "^12.0.1",
"rehype-autolink-headings": "^6.1.1",
"rehype-pretty-code": "^0.6.0",
"rehype-slug": "^5.1.0",
"remark": "^14.0.2",
"remark-code-import": "^1.1.1",
"remark": "^14.0.3",
"remark-code-import": "^1.2.0",
"remark-gfm": "^3.0.1",
"shiki": "^0.12.1",
"tailwindcss": "^3.3.1",
"typescript": "^4.9.3",
"tailwindcss": "^3.3.2",
"typescript": "^4.9.5",
"unist-builder": "3.0.0",
"unist-util-visit": "^4.1.1"
"unist-util-visit": "^4.1.2"
},
"peerDependencies": {
"esbuild": "^0.17.3"

View File

@@ -35,34 +35,34 @@
},
"packageManager": "pnpm@8.5.1",
"dependencies": {
"@babel/core": "^7.20.7",
"@babel/core": "^7.22.1",
"@changesets/changelog-github": "^0.4.8",
"@changesets/cli": "^2.26.0",
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@changesets/cli": "^2.26.1",
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.3",
"@ianvs/prettier-plugin-sort-imports": "^3.7.2",
"@manypkg/cli": "^0.20.0",
"@types/node": "^17.0.12",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@typescript-eslint/parser": "^5.58.0",
"autoprefixer": "^10.4.13",
"@types/node": "^17.0.45",
"@types/react": "^18.2.7",
"@types/react-dom": "^18.2.4",
"@typescript-eslint/parser": "^5.59.7",
"autoprefixer": "^10.4.14",
"concurrently": "^8.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint": "^8.41.0",
"eslint-config-next": "13.3.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-turbo": "^1.9.3",
"eslint-config-turbo": "^1.9.9",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-tailwindcss": "^3.11.0",
"husky": "^8.0.2",
"postcss": "^8.4.21",
"prettier": "^2.8.7",
"eslint-plugin-tailwindcss": "^3.12.0",
"husky": "^8.0.3",
"postcss": "^8.4.24",
"prettier": "^2.8.8",
"pretty-quick": "^3.1.3",
"tailwindcss": "^3.3.1",
"tailwindcss": "^3.3.2",
"tailwindcss-animate": "^1.0.5",
"ts-node": "^10.9.1",
"turbo": "^1.9.3",
"typescript": "^4.9.3"
"turbo": "^1.9.9",
"typescript": "^4.9.5"
}
}

4059
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -15,7 +15,7 @@
"settings": {
"tailwindcss": {
"callees": ["cn"],
"config": "./tailwind.config.js"
"config": "tailwind.config.js"
},
"next": {
"rootDir": ["./"]

View File

@@ -10,12 +10,11 @@ npx create-next-app -e https://github.com/shadcn/next-template
## Features
- Next.js 13 App Directory
- Radix UI Primitives
- Tailwind CSS
- Fonts with `next/font`
- Icons from [Lucide](https://lucide.dev)
- Dark mode with `next-themes`
- Automatic import sorting with `@ianvs/prettier-plugin-sort-imports`
- Tailwind CSS class sorting, merging and linting.
## License

View File

@@ -7,11 +7,11 @@ export default function IndexPage() {
return (
<section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
<div className="flex max-w-[980px] flex-col items-start gap-2">
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter sm:text-3xl md:text-5xl lg:text-6xl">
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
Beautifully designed components <br className="hidden sm:inline" />
built with Radix UI and Tailwind CSS.
</h1>
<p className="max-w-[700px] text-lg text-muted-foreground sm:text-xl">
<p className="max-w-[700px] text-lg text-muted-foreground">
Accessible and customizable components that you can copy and paste
into your apps. Free. Open Source. And Next.js 13 Ready.
</p>
@@ -21,7 +21,7 @@ export default function IndexPage() {
href={siteConfig.links.docs}
target="_blank"
rel="noreferrer"
className={buttonVariants({ size: "lg" })}
className={buttonVariants()}
>
Documentation
</Link>
@@ -29,7 +29,7 @@ export default function IndexPage() {
target="_blank"
rel="noreferrer"
href={siteConfig.links.github}
className={buttonVariants({ variant: "outline", size: "lg" })}
className={buttonVariants({ variant: "outline" })}
>
GitHub
</Link>

View File

@@ -1,14 +0,0 @@
import { SiteHeader } from "@/components/site-header"
interface LayoutProps {
children: React.ReactNode
}
export function Layout({ children }: LayoutProps) {
return (
<>
<SiteHeader />
<main>{children}</main>
</>
)
}

View File

@@ -13,14 +13,12 @@ interface MainNavProps {
export function MainNav({ items }: MainNavProps) {
return (
<div className="flex gap-6 md:gap-10">
<Link href="/" className="hidden items-center space-x-2 md:flex">
<Link href="/" className="flex items-center space-x-2">
<Icons.logo className="h-6 w-6" />
<span className="hidden font-bold sm:inline-block">
{siteConfig.name}
</span>
<span className="inline-block font-bold">{siteConfig.name}</span>
</Link>
{items?.length ? (
<nav className="hidden gap-6 md:flex">
<nav className="flex gap-6">
{items?.map(
(item, index) =>
item.href && (
@@ -28,7 +26,7 @@ export function MainNav({ items }: MainNavProps) {
key={index}
href={item.href}
className={cn(
"flex items-center text-lg font-semibold text-muted-foreground sm:text-sm",
"flex items-center text-sm font-medium text-muted-foreground",
item.disabled && "cursor-not-allowed opacity-80"
)}
>

View File

@@ -1,5 +1,6 @@
import * as React from "react"
import { VariantProps, cva } from "class-variance-authority"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
@@ -33,12 +34,15 @@ const buttonVariants = cva(
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {}
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, ...props }, ref) => {
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<button
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}

View File

@@ -14,34 +14,33 @@
"format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
},
"dependencies": {
"@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.4.0",
"clsx": "^1.2.1",
"cmdk": "^0.2.0",
"lucide-react": "0.105.0-alpha.4",
"next": "^13.3.0",
"next": "^13.4.4",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-day-picker": "^8.6.0",
"react-dom": "^18.2.0",
"sharp": "^0.31.3",
"tailwind-merge": "^1.12.0",
"tailwindcss-animate": "^1.0.5"
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "^3.7.1",
"@types/node": "^17.0.12",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@typescript-eslint/parser": "^5.58.0",
"autoprefixer": "^10.4.13",
"eslint": "^8.31.0",
"@ianvs/prettier-plugin-sort-imports": "^3.7.2",
"@types/node": "^17.0.45",
"@types/react": "^18.2.7",
"@types/react-dom": "^18.2.4",
"@typescript-eslint/parser": "^5.59.7",
"autoprefixer": "^10.4.14",
"eslint": "^8.41.0",
"eslint-config-next": "13.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.31.11",
"eslint-plugin-tailwindcss": "^3.8.0",
"postcss": "^8.4.21",
"prettier": "^2.7.1",
"tailwindcss": "^3.3.1",
"typescript": "^4.9.3"
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-tailwindcss": "^3.12.0",
"postcss": "^8.4.24",
"prettier": "^2.8.8",
"tailwindcss": "^3.3.2",
"typescript": "^4.9.5"
}
}