From 79110bbb85ca008814ffa1e1baab42dc1aeaeb7e Mon Sep 17 00:00:00 2001 From: Joe Bell <7349341+joe-bell@users.noreply.github.com> Date: Thu, 22 Jun 2023 16:21:18 +0300 Subject: [PATCH 01/22] feat: compound components --- .../.gitignore | 24 + .../index.html | 14 + .../package.json | 26 ++ .../postcss.config.cjs | 6 + .../public/vite.svg | 1 + .../src/app.tsx | 76 ++++ .../src/components/index.ts | 1 + .../src/components/nav/index.ts | 1 + .../src/components/nav/nav.tsx | 107 +++++ .../src/index.css | 14 + .../src/main.tsx | 9 + .../src/vite-env.d.ts | 1 + .../tailwind.config.cjs | 8 + .../tsconfig.json | 21 + .../tsconfig.node.json | 9 + .../vite.config.ts | 7 + pnpm-lock.yaml | 429 +++++++++++++++++- 17 files changed, 753 insertions(+), 1 deletion(-) create mode 100644 examples/react-with-tailwindcss-compound/.gitignore create mode 100644 examples/react-with-tailwindcss-compound/index.html create mode 100644 examples/react-with-tailwindcss-compound/package.json create mode 100644 examples/react-with-tailwindcss-compound/postcss.config.cjs create mode 100644 examples/react-with-tailwindcss-compound/public/vite.svg create mode 100644 examples/react-with-tailwindcss-compound/src/app.tsx create mode 100644 examples/react-with-tailwindcss-compound/src/components/index.ts create mode 100644 examples/react-with-tailwindcss-compound/src/components/nav/index.ts create mode 100644 examples/react-with-tailwindcss-compound/src/components/nav/nav.tsx create mode 100644 examples/react-with-tailwindcss-compound/src/index.css create mode 100644 examples/react-with-tailwindcss-compound/src/main.tsx create mode 100644 examples/react-with-tailwindcss-compound/src/vite-env.d.ts create mode 100644 examples/react-with-tailwindcss-compound/tailwind.config.cjs create mode 100644 examples/react-with-tailwindcss-compound/tsconfig.json create mode 100644 examples/react-with-tailwindcss-compound/tsconfig.node.json create mode 100644 examples/react-with-tailwindcss-compound/vite.config.ts diff --git a/examples/react-with-tailwindcss-compound/.gitignore b/examples/react-with-tailwindcss-compound/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/react-with-tailwindcss-compound/index.html b/examples/react-with-tailwindcss-compound/index.html new file mode 100644 index 00000000..bb06f6a0 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/index.html @@ -0,0 +1,14 @@ + + + + + + + cva: React with Tailwind CSS + + + +
+ + + diff --git a/examples/react-with-tailwindcss-compound/package.json b/examples/react-with-tailwindcss-compound/package.json new file mode 100644 index 00000000..b3bfdbf0 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/package.json @@ -0,0 +1,26 @@ +{ + "name": "example-react-with-tailwindcss-compound", + "private": true, + "type": "module", + "scripts": { + "build": "pnpm check && vite build", + "check": "tsc", + "dev": "vite", + "preview": "vite preview" + }, + "dependencies": { + "class-variance-authority": "latest", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "devDependencies": { + "@types/react": "18.0.12", + "@types/react-dom": "18.0.5", + "@vitejs/plugin-react": "^3.1.0", + "autoprefixer": "^10.4.13", + "postcss": "^8.4.21", + "tailwindcss": "^3.3.2", + "typescript": "5.0.3", + "vite": "^4.1.0" + } +} diff --git a/examples/react-with-tailwindcss-compound/postcss.config.cjs b/examples/react-with-tailwindcss-compound/postcss.config.cjs new file mode 100644 index 00000000..33ad091d --- /dev/null +++ b/examples/react-with-tailwindcss-compound/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/examples/react-with-tailwindcss-compound/public/vite.svg b/examples/react-with-tailwindcss-compound/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/react-with-tailwindcss-compound/src/app.tsx b/examples/react-with-tailwindcss-compound/src/app.tsx new file mode 100644 index 00000000..8e409c2b --- /dev/null +++ b/examples/react-with-tailwindcss-compound/src/app.tsx @@ -0,0 +1,76 @@ +import { cx } from "class-variance-authority"; +import * as Nav from "./components/nav"; + +// ## Option 1 +// +// ```tsx +// import * as Nav from "./components/nav"; +// +// const Consumer = () => ( +// +// +// +// Home +// +// +// +// ); +// ``` +// +// ## Option 2 +// +// ```tsx +// import * as nav from "./components/nav"; +// +// const Consumer = () => ( +// +// ); +// ``` + +const density = ["compact", "cozy"] as const; + +function App() { + return ( + + + + {density.map((key) => ( + + ))} + + + + + {density.map((key) => ( + + ))} + + +
{key}
+
+ + {[0, 1, 2, 3, 4].map((_, i) => ( + + Item {i + 1} + + ))} + +
+
+ ); +} + +export default App; diff --git a/examples/react-with-tailwindcss-compound/src/components/index.ts b/examples/react-with-tailwindcss-compound/src/components/index.ts new file mode 100644 index 00000000..870d3745 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/src/components/index.ts @@ -0,0 +1 @@ +export * from "./nav"; diff --git a/examples/react-with-tailwindcss-compound/src/components/nav/index.ts b/examples/react-with-tailwindcss-compound/src/components/nav/index.ts new file mode 100644 index 00000000..870d3745 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/src/components/nav/index.ts @@ -0,0 +1 @@ +export * from "./nav"; diff --git a/examples/react-with-tailwindcss-compound/src/components/nav/nav.tsx b/examples/react-with-tailwindcss-compound/src/components/nav/nav.tsx new file mode 100644 index 00000000..de67e0a5 --- /dev/null +++ b/examples/react-with-tailwindcss-compound/src/components/nav/nav.tsx @@ -0,0 +1,107 @@ +import React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; + +// note: `data-*` attributes not required, but useful. +// +// +// Home +// +// +// Home +// +// ; + +/* Root + ============================================ */ + +export const root = cva( + [ + "[--nav-item-py-offset:calc(var(--nav-item-py)*0.5*-1)]", + "flex", + "flex-col", + "rounded-[--nav-radius]", + "border", + "border-zinc-200", + "shadow-sm", + ], + { + variants: { + density: { + compact: [ + "[--nav-radius:theme(borderRadius.lg)]", + "[--nav-item-px:theme(space.3)]", + "[--nav-item-py:theme(space.2)]", + ], + cozy: [ + "[--nav-radius:theme(borderRadius.xl)]", + "[--nav-item-px:theme(space.5)]", + "[--nav-item-py:theme(space.4)]", + ], + }, + }, + defaultVariants: { + density: "compact", + }, + } +); + +export interface RootProps + extends React.HTMLAttributes, + VariantProps {} + +export const Root: React.FC = ({ className, density, ...props }) => ( +