diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000..36abcd9 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,29 @@ +name: Publish pandacn + +on: + workflow_dispatch: + push: + tags: ['pandacn-v*'] + +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: pnpm/action-setup@v4 + + - uses: actions/setup-node@v4 + with: + node-version-file: .nvmrc + registry-url: 'https://registry.npmjs.org' + + - name: Install + run: pnpm install + working-directory: examples/monorepo + + - name: Publish + run: pnpm publish --no-git-checks --access public + working-directory: examples/monorepo/packages/ds + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore index 0d2e21e..4b43dc5 100644 --- a/.gitignore +++ b/.gitignore @@ -5,5 +5,3 @@ dist styled-system *.log .DS_Store - -.ds-tarball/ diff --git a/AGENTS.md b/AGENTS.md index 48cfaf2..44f54b0 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -4,7 +4,7 @@ Panda CSS examples. Each folder under `examples/` is a standalone project you ca ## Layout -- `examples/monorepo` — the design system (`packages/ds` = `@chakra-ui/shadcn-panda`) + a Next.js app, in a pnpm + Turborepo workspace. +- `examples/monorepo` — the design system (`packages/ds` = `pandacn`) + a Next.js app, in a pnpm + Turborepo workspace. - `examples/standalone-app` — a Next.js app that consumes the published design system as prebuilt CSS + components, no Panda. - `examples/panda-app` — a Next.js app that runs Panda and consumes the design system via `designSystem`. @@ -27,4 +27,4 @@ pnpm run check-examples # install + build every example standalone pnpm install && pnpm dev ``` -`@chakra-ui/shadcn-panda` is not published to npm. `standalone-app` and `panda-app` bundle it as a tarball (`chakra-ui-shadcn-panda-0.1.0.tgz`) and install it with a `file:` dependency, so they work offline and stay degit-able. Run `pnpm run pack-ds` to rebuild the tarballs after changing the design system. +The design system is published to npm as `pandacn`; its source is `examples/monorepo/packages/ds`. The `monorepo` example consumes it via `workspace:*`; `standalone-app` and `panda-app` install it from npm. Publishing runs from the `Publish pandacn` GitHub Action (or `pnpm -C examples/monorepo/packages/ds publish`). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7785267..754e3e1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -31,7 +31,7 @@ pnpm dev Every folder under `examples/` is its own project with pinned dependencies — no `workspace:*` (except the `monorepo` example, which is itself a workspace). You can copy any example out of the repo and it runs on its own. -The shadcn design system lives in `examples/monorepo/packages/ds`. It isn't published to npm — the `standalone-app` and `panda-app` examples bundle it as a tarball and install it with a `file:` dependency. Run `pnpm run pack-ds` to rebuild the tarballs after changing the design system. +The shadcn design system lives in `examples/monorepo/packages/ds` and is published to npm as [`pandacn`](https://npmx.dev/pandacn). The `monorepo` example consumes it via `workspace:*`; the `standalone-app` and `panda-app` examples install it from npm. ## Tooling diff --git a/README.md b/README.md index 1ba443c..26e82e9 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,7 @@ Three ways to ship and consume one design system — [shadcn/ui](https://ui.shad | [`standalone-app`](examples/standalone-app) | A Next.js app with **no Panda installed** — it imports the published CSS and React components. | A team wants the components without running Panda. | | [`panda-app`](examples/panda-app) | A Next.js app that runs Panda, pulls the published system through `designSystem`, and extends its tokens. | Your app uses Panda and builds on the system. | -The design system itself lives at [`examples/monorepo/packages/ds`](examples/monorepo/packages/ds) as the `@chakra-ui/shadcn-panda` package. It isn't published to npm — the `standalone-app` and `panda-app` examples each **bundle it as a tarball**, so they install offline with no registry, exactly like consuming a published package. - -> After changing the design system, run `pnpm run pack-ds` to rebuild the bundled tarballs. +The design system itself lives at [`examples/monorepo/packages/ds`](examples/monorepo/packages/ds) and is published to npm as [`pandacn`](https://npmx.dev/pandacn). The `monorepo` example consumes it via the workspace; `standalone-app` and `panda-app` install it from npm. ## Using an Example diff --git a/examples/monorepo/README.md b/examples/monorepo/README.md index 206d7d0..9754ffd 100644 --- a/examples/monorepo/README.md +++ b/examples/monorepo/README.md @@ -4,10 +4,12 @@ A [shadcn/ui](https://ui.shadcn.com/) design system built on **Panda CSS**, cons This is the "decide once, use everywhere" setup: the design system is a workspace package, and the app pulls it in through Panda's `designSystem` config. No copy-pasted components, no re-declared tokens. +**The design system's source lives in [`packages/ds`](packages/ds).** That's the `pandacn` package — the same one the [`standalone-app`](../standalone-app) and [`panda-app`](../panda-app) examples consume. If you're wondering where those imports come from, it's here. + ``` -design-system-monorepo/ +monorepo/ ├─ packages/ -│ └─ ds/ @chakra-ui/shadcn-panda — tokens, recipes, React components +│ └─ ds/ pandacn — the design system: tokens, recipes, React components └─ apps/ └─ web/ Next.js App Router app that consumes the DS ``` @@ -20,13 +22,12 @@ design-system-monorepo/ - `src//` — thin React wrappers over the generated recipes. - `panda lib` emits `dist/panda/lib.json` + a preset and syncs `package.json` exports. -**`apps/web`** consumes it in one line: +**`apps/web`** consumes it through its `panda.config.ts`: ```ts -// apps/web/panda.config.ts export default defineConfig({ - designSystem: '@chakra-ui/shadcn-panda', - // ... + designSystem: 'pandacn', + include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], }) ``` diff --git a/examples/monorepo/apps/web/components/showcase-gallery.tsx b/examples/monorepo/apps/web/components/showcase-gallery.tsx index 0dba514..aefde07 100644 --- a/examples/monorepo/apps/web/components/showcase-gallery.tsx +++ b/examples/monorepo/apps/web/components/showcase-gallery.tsx @@ -22,7 +22,7 @@ import { TabsList, TabsTrigger, TabsContent, -} from '@chakra-ui/shadcn-panda' +} from 'pandacn' import { css, cx } from '../styled-system/css' import { container, sectionCard, sectionLabel, row } from '../lib/frame' diff --git a/examples/monorepo/apps/web/components/theme-toggle.tsx b/examples/monorepo/apps/web/components/theme-toggle.tsx index b418bcc..4b2211e 100644 --- a/examples/monorepo/apps/web/components/theme-toggle.tsx +++ b/examples/monorepo/apps/web/components/theme-toggle.tsx @@ -1,7 +1,7 @@ 'use client' import { useSyncExternalStore } from 'react' -import { Switch } from '@chakra-ui/shadcn-panda' +import { Switch } from 'pandacn' import { css } from '../styled-system/css' function subscribe(callback: () => void) { diff --git a/examples/monorepo/apps/web/next.config.ts b/examples/monorepo/apps/web/next.config.ts index 6f76288..4969aaf 100644 --- a/examples/monorepo/apps/web/next.config.ts +++ b/examples/monorepo/apps/web/next.config.ts @@ -1,7 +1,7 @@ import type { NextConfig } from 'next' const nextConfig: NextConfig = { - transpilePackages: ['@chakra-ui/shadcn-panda'], + transpilePackages: ['pandacn'], } export default nextConfig diff --git a/examples/monorepo/apps/web/package.json b/examples/monorepo/apps/web/package.json index cb282ed..962d310 100644 --- a/examples/monorepo/apps/web/package.json +++ b/examples/monorepo/apps/web/package.json @@ -12,8 +12,8 @@ "lint": "eslint ." }, "dependencies": { - "@chakra-ui/shadcn-panda": "workspace:*", "next": "16.3.0", + "pandacn": "workspace:*", "react": "19.2.0", "react-dom": "19.2.0" }, diff --git a/examples/monorepo/apps/web/panda.config.ts b/examples/monorepo/apps/web/panda.config.ts index 9a07d79..8f1baf8 100644 --- a/examples/monorepo/apps/web/panda.config.ts +++ b/examples/monorepo/apps/web/panda.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from '@pandacss/dev' export default defineConfig({ - designSystem: '@chakra-ui/shadcn-panda', + designSystem: 'pandacn', include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'], outdir: 'styled-system', jsxFramework: 'react', diff --git a/examples/monorepo/packages/ds/README.md b/examples/monorepo/packages/ds/README.md index 79ced5a..8d5186b 100644 --- a/examples/monorepo/packages/ds/README.md +++ b/examples/monorepo/packages/ds/README.md @@ -1,4 +1,4 @@ -# @chakra-ui/shadcn-panda +# pandacn [shadcn/ui](https://ui.shadcn.com/) modeled as a [Panda CSS](https://panda-css.com) design system. Same components, same look, built at build time instead of shipped as source you paste in. @@ -6,7 +6,11 @@ You get shadcn's tokens and components as a real package: semantic tokens with l ## Getting it -This package isn't on npm. The [example apps](https://github.com/chakra-ui/panda-examples) bundle it as a tarball built with `panda lib`, so they install it offline with a `file:` dependency. Copy `packages/ds` into your own repo to make it yours, or run `pnpm pack` here to produce the tarball your apps install. +```bash +pnpm add pandacn +``` + +The source lives in this repo at `examples/monorepo/packages/ds` — copy it into your own repo to make it yours. The [example apps](https://github.com/chakra-ui/panda-examples) show every way to consume it. ## Use it in a Panda app @@ -16,13 +20,13 @@ Point Panda at the package in your `panda.config.ts`. It merges the tokens and r import { defineConfig } from '@pandacss/dev' export default defineConfig({ - designSystem: '@chakra-ui/shadcn-panda', + designSystem: 'pandacn', include: ['./app/**/*.{ts,tsx}'], }) ``` ```tsx -import { Button, Card } from '@chakra-ui/shadcn-panda' +import { Button, Card } from 'pandacn' ``` Install the base presets alongside it: @@ -38,8 +42,8 @@ The recipes are built on Panda's default scales (`h-9`, `text-sm`, spacing). Thi Import the prebuilt stylesheet and the components. No Panda, no config. ```tsx -import '@chakra-ui/shadcn-panda/styles.css' -import { Button } from '@chakra-ui/shadcn-panda' +import 'pandacn/styles.css' +import { Button } from 'pandacn' ``` ## Dark mode diff --git a/examples/monorepo/packages/ds/package.json b/examples/monorepo/packages/ds/package.json index bddf713..b2795ed 100644 --- a/examples/monorepo/packages/ds/package.json +++ b/examples/monorepo/packages/ds/package.json @@ -1,8 +1,20 @@ { - "name": "@chakra-ui/shadcn-panda", + "name": "pandacn", "version": "0.1.0", "description": "shadcn/ui modeled as a Panda CSS design system, shipped with `panda lib`.", + "keywords": [ + "design-system", + "panda-css", + "react", + "shadcn" + ], + "homepage": "https://github.com/chakra-ui/panda-examples/tree/main/examples/monorepo/packages/ds", "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/chakra-ui/panda-examples.git", + "directory": "examples/monorepo/packages/ds" + }, "files": [ "dist", "styled-system", @@ -57,6 +69,9 @@ "default": "./styled-system/helpers.js" } }, + "publishConfig": { + "access": "public" + }, "scripts": { "codegen": "panda codegen", "lib": "panda codegen && panda lib", diff --git a/examples/monorepo/pnpm-lock.yaml b/examples/monorepo/pnpm-lock.yaml index 3223f45..e3a19a3 100644 --- a/examples/monorepo/pnpm-lock.yaml +++ b/examples/monorepo/pnpm-lock.yaml @@ -17,7 +17,7 @@ importers: apps/web: dependencies: - '@chakra-ui/shadcn-panda': + 'pandacn': specifier: workspace:* version: link:../../packages/ds next: diff --git a/examples/panda-app/README.md b/examples/panda-app/README.md index a9fcd67..e683c33 100644 --- a/examples/panda-app/README.md +++ b/examples/panda-app/README.md @@ -6,13 +6,12 @@ Use this when your app already uses Panda and you want to build on a shared desi ## How it works -Point Panda at the published design system: +Point Panda at the published design system in your `panda.config.ts`: ```ts -// panda.config.ts export default defineConfig({ - designSystem: '@chakra-ui/shadcn-panda', - // ... + designSystem: 'pandacn', + include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'], }) ``` @@ -47,6 +46,4 @@ pnpm dev ## The design system -`@chakra-ui/shadcn-panda` isn't on npm. This example bundles it as a tarball (`chakra-ui-shadcn-panda-0.1.0.tgz`) and installs it with `file:`, so `pnpm install` works offline — the same as consuming a published package. `designSystem` resolves it from there. - -Inside this repo, run `pnpm run pack-ds` from the root after changing the design system to rebuild the tarball. +The design system is the [`pandacn`](https://npmx.dev/pandacn) package, installed from npm. Its source lives in [`examples/monorepo/packages/ds`](../monorepo/packages/ds). `designSystem: 'pandacn'` in `panda.config.ts` pulls its tokens and recipes into this app's build. diff --git a/examples/panda-app/chakra-ui-shadcn-panda-0.1.0.tgz b/examples/panda-app/chakra-ui-shadcn-panda-0.1.0.tgz deleted file mode 100644 index aac83ec..0000000 Binary files a/examples/panda-app/chakra-ui-shadcn-panda-0.1.0.tgz and /dev/null differ diff --git a/examples/panda-app/components/showcase-gallery.tsx b/examples/panda-app/components/showcase-gallery.tsx index 0dba514..aefde07 100644 --- a/examples/panda-app/components/showcase-gallery.tsx +++ b/examples/panda-app/components/showcase-gallery.tsx @@ -22,7 +22,7 @@ import { TabsList, TabsTrigger, TabsContent, -} from '@chakra-ui/shadcn-panda' +} from 'pandacn' import { css, cx } from '../styled-system/css' import { container, sectionCard, sectionLabel, row } from '../lib/frame' diff --git a/examples/panda-app/components/theme-toggle.tsx b/examples/panda-app/components/theme-toggle.tsx index b418bcc..4b2211e 100644 --- a/examples/panda-app/components/theme-toggle.tsx +++ b/examples/panda-app/components/theme-toggle.tsx @@ -1,7 +1,7 @@ 'use client' import { useSyncExternalStore } from 'react' -import { Switch } from '@chakra-ui/shadcn-panda' +import { Switch } from 'pandacn' import { css } from '../styled-system/css' function subscribe(callback: () => void) { diff --git a/examples/panda-app/next.config.ts b/examples/panda-app/next.config.ts index 6f76288..4969aaf 100644 --- a/examples/panda-app/next.config.ts +++ b/examples/panda-app/next.config.ts @@ -1,7 +1,7 @@ import type { NextConfig } from 'next' const nextConfig: NextConfig = { - transpilePackages: ['@chakra-ui/shadcn-panda'], + transpilePackages: ['pandacn'], } export default nextConfig diff --git a/examples/panda-app/package.json b/examples/panda-app/package.json index 9c88cb2..a71189d 100644 --- a/examples/panda-app/package.json +++ b/examples/panda-app/package.json @@ -14,8 +14,8 @@ "format:check": "oxfmt --check ." }, "dependencies": { - "@chakra-ui/shadcn-panda": "file:./chakra-ui-shadcn-panda-0.1.0.tgz", "next": "16.3.0", + "pandacn": "^0.1.0", "react": "19.2.0", "react-dom": "19.2.0" }, diff --git a/examples/panda-app/panda.config.ts b/examples/panda-app/panda.config.ts index 2f351b2..0650869 100644 --- a/examples/panda-app/panda.config.ts +++ b/examples/panda-app/panda.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from '@pandacss/dev' export default defineConfig({ - designSystem: '@chakra-ui/shadcn-panda', + designSystem: 'pandacn', include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'], outdir: 'styled-system', jsxFramework: 'react', diff --git a/examples/panda-app/pnpm-lock.yaml b/examples/panda-app/pnpm-lock.yaml index 7e54aec..4e4d948 100644 --- a/examples/panda-app/pnpm-lock.yaml +++ b/examples/panda-app/pnpm-lock.yaml @@ -8,12 +8,12 @@ importers: .: dependencies: - '@chakra-ui/shadcn-panda': - specifier: file:./chakra-ui-shadcn-panda-0.1.0.tgz - version: file:chakra-ui-shadcn-panda-0.1.0.tgz(react@19.2.0) next: specifier: 16.3.0 version: 16.3.0(@babel/core@7.29.7)(@types/node@24.10.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + pandacn: + specifier: ^0.1.0 + version: 0.1.0(react@19.2.0) react: specifier: 19.2.0 version: 19.2.0 @@ -121,12 +121,6 @@ packages: resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==} engines: {node: '>=6.9.0'} - '@chakra-ui/shadcn-panda@file:chakra-ui-shadcn-panda-0.1.0.tgz': - resolution: {integrity: sha512-1eZSNa6reVSAsLVEa3ag1Dh+faSYhMyUFhXh1PPepjZ1NrfWBUBAiranMcGU7jUDCKx8JGXS/O9UMa/n6H5R3Q==, tarball: file:chakra-ui-shadcn-panda-0.1.0.tgz} - version: 0.1.0 - peerDependencies: - react: '>=18' - '@clack/core@1.4.3': resolution: {integrity: sha512-/kr3UWNtdJfxZtPgDqUOmG2pvwlmcLGheex5yiZKdwbzZJxhV+HMNR9QNmyY5cGwTNV6LrR7Jtp+KjhUAP1qBQ==} engines: {node: '>= 20.12.0'} @@ -1933,6 +1927,11 @@ packages: resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} engines: {node: '>=10'} + pandacn@0.1.0: + resolution: {integrity: sha512-ZBEql+ldYIupqT82cxdAE2XUh8ZhF8DkfpFQe1WcocIat9x+KELLf0nNNrB67YkggWln9ItYQ8qv5AgxqgGoPQ==} + peerDependencies: + react: '>=18' + parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -2386,10 +2385,6 @@ snapshots: '@babel/helper-string-parser': 7.29.7 '@babel/helper-validator-identifier': 7.29.7 - '@chakra-ui/shadcn-panda@file:chakra-ui-shadcn-panda-0.1.0.tgz(react@19.2.0)': - dependencies: - react: 19.2.0 - '@clack/core@1.4.3': dependencies: fast-wrap-ansi: 0.2.2 @@ -3537,7 +3532,7 @@ snapshots: eslint: 9.39.5 eslint-import-resolver-node: 0.3.10 eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.5) eslint-plugin-react: 7.37.5(eslint@9.39.5) eslint-plugin-react-hooks: 7.1.1(eslint@9.39.5) @@ -3570,7 +3565,7 @@ snapshots: tinyglobby: 0.2.17 unrs-resolver: 1.12.2 optionalDependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5) transitivePeerDependencies: - supports-color @@ -3585,7 +3580,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -4250,6 +4245,10 @@ snapshots: dependencies: p-limit: 3.1.0 + pandacn@0.1.0(react@19.2.0): + dependencies: + react: 19.2.0 + parent-module@1.0.1: dependencies: callsites: 3.1.0 diff --git a/examples/standalone-app/README.md b/examples/standalone-app/README.md index 618a24c..d2ad925 100644 --- a/examples/standalone-app/README.md +++ b/examples/standalone-app/README.md @@ -6,18 +6,18 @@ Use this when a team wants the design system but doesn't run Panda themselves. T ## How it works -The design system is published to npm with `panda lib`. That publish includes a prebuilt stylesheet (every token, recipe, and variant) and the React components. +The design system ships as the [`pandacn`](https://npmx.dev/pandacn) package — built with `panda lib` into a prebuilt stylesheet (every token, recipe, and variant) plus the React components. Its source is [`examples/monorepo/packages/ds`](../monorepo/packages/ds). -The app does two things: +The app does two things — import the stylesheet in `app/layout.tsx`: ```tsx -// app/layout.tsx -import '@chakra-ui/shadcn-panda/styles.css' +import 'pandacn/styles.css' ``` +and render the components: + ```tsx -// app/page.tsx -import { Button, Card, Badge } from '@chakra-ui/shadcn-panda' +import { Button, Card, Badge } from 'pandacn' ``` No Panda in `package.json`. The only build is `next build`. `transpilePackages` in `next.config.ts` compiles the design system's source; the app itself stays Panda-free. @@ -32,9 +32,3 @@ pnpm dev ``` Open http://localhost:3000. Toggle light/dark in the header — the `.dark` class flips the shadcn tokens, same as shadcn's own theme. - -## The design system - -`@chakra-ui/shadcn-panda` isn't on npm. This example bundles it as a tarball (`chakra-ui-shadcn-panda-0.1.0.tgz`) and installs it with `file:`, so `pnpm install` works offline — the same as consuming a published package. - -Inside this repo, run `pnpm run pack-ds` from the root after changing the design system to rebuild the tarball. diff --git a/examples/standalone-app/app/layout.tsx b/examples/standalone-app/app/layout.tsx index 697d899..4bdcc3e 100644 --- a/examples/standalone-app/app/layout.tsx +++ b/examples/standalone-app/app/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from 'next' import { Space_Grotesk, Inter } from 'next/font/google' -import '@chakra-ui/shadcn-panda/styles.css' +import 'pandacn/styles.css' import './frame.css' const display = Space_Grotesk({ diff --git a/examples/standalone-app/chakra-ui-shadcn-panda-0.1.0.tgz b/examples/standalone-app/chakra-ui-shadcn-panda-0.1.0.tgz deleted file mode 100644 index aac83ec..0000000 Binary files a/examples/standalone-app/chakra-ui-shadcn-panda-0.1.0.tgz and /dev/null differ diff --git a/examples/standalone-app/components/showcase-gallery.tsx b/examples/standalone-app/components/showcase-gallery.tsx index 26ae6f5..398fab8 100644 --- a/examples/standalone-app/components/showcase-gallery.tsx +++ b/examples/standalone-app/components/showcase-gallery.tsx @@ -22,7 +22,7 @@ import { TabsList, TabsTrigger, TabsContent, -} from '@chakra-ui/shadcn-panda' +} from 'pandacn' function Section({ label, children }: { label: string; children: React.ReactNode }) { return ( @@ -157,7 +157,7 @@ export function ShowcaseGallery() {

- Import @chakra-ui/shadcn-panda/styles.css once. + Import pandacn/styles.css once.

diff --git a/examples/standalone-app/components/theme-toggle.tsx b/examples/standalone-app/components/theme-toggle.tsx index 8d0816e..9104b9b 100644 --- a/examples/standalone-app/components/theme-toggle.tsx +++ b/examples/standalone-app/components/theme-toggle.tsx @@ -1,7 +1,7 @@ 'use client' import { useSyncExternalStore } from 'react' -import { Switch } from '@chakra-ui/shadcn-panda' +import { Switch } from 'pandacn' function subscribe(callback: () => void) { window.addEventListener('theme-change', callback) diff --git a/examples/standalone-app/next.config.ts b/examples/standalone-app/next.config.ts index 6f76288..4969aaf 100644 --- a/examples/standalone-app/next.config.ts +++ b/examples/standalone-app/next.config.ts @@ -1,7 +1,7 @@ import type { NextConfig } from 'next' const nextConfig: NextConfig = { - transpilePackages: ['@chakra-ui/shadcn-panda'], + transpilePackages: ['pandacn'], } export default nextConfig diff --git a/examples/standalone-app/package.json b/examples/standalone-app/package.json index aeb54e8..ccd5c54 100644 --- a/examples/standalone-app/package.json +++ b/examples/standalone-app/package.json @@ -12,8 +12,8 @@ "format:check": "oxfmt --check ." }, "dependencies": { - "@chakra-ui/shadcn-panda": "file:./chakra-ui-shadcn-panda-0.1.0.tgz", "next": "16.3.0", + "pandacn": "^0.1.0", "react": "19.2.0", "react-dom": "19.2.0" }, diff --git a/examples/standalone-app/pnpm-lock.yaml b/examples/standalone-app/pnpm-lock.yaml index cecc3f4..2cf94f6 100644 --- a/examples/standalone-app/pnpm-lock.yaml +++ b/examples/standalone-app/pnpm-lock.yaml @@ -8,12 +8,12 @@ importers: .: dependencies: - '@chakra-ui/shadcn-panda': - specifier: file:./chakra-ui-shadcn-panda-0.1.0.tgz - version: file:chakra-ui-shadcn-panda-0.1.0.tgz(react@19.2.0) next: specifier: 16.3.0 version: 16.3.0(@babel/core@7.29.7)(@types/node@24.10.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + pandacn: + specifier: ^0.1.0 + version: 0.1.0(react@19.2.0) react: specifier: 19.2.0 version: 19.2.0 @@ -112,12 +112,6 @@ packages: resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==} engines: {node: '>=6.9.0'} - '@chakra-ui/shadcn-panda@file:chakra-ui-shadcn-panda-0.1.0.tgz': - resolution: {integrity: sha512-1eZSNa6reVSAsLVEa3ag1Dh+faSYhMyUFhXh1PPepjZ1NrfWBUBAiranMcGU7jUDCKx8JGXS/O9UMa/n6H5R3Q==, tarball: file:chakra-ui-shadcn-panda-0.1.0.tgz} - version: 0.1.0 - peerDependencies: - react: '>=18' - '@emnapi/core@1.10.0': resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==} @@ -1584,6 +1578,11 @@ packages: resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} engines: {node: '>=10'} + pandacn@0.1.0: + resolution: {integrity: sha512-ZBEql+ldYIupqT82cxdAE2XUh8ZhF8DkfpFQe1WcocIat9x+KELLf0nNNrB67YkggWln9ItYQ8qv5AgxqgGoPQ==} + peerDependencies: + react: '>=18' + parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -2021,10 +2020,6 @@ snapshots: '@babel/helper-string-parser': 7.29.7 '@babel/helper-validator-identifier': 7.29.7 - '@chakra-ui/shadcn-panda@file:chakra-ui-shadcn-panda-0.1.0.tgz(react@19.2.0)': - dependencies: - react: 19.2.0 - '@emnapi/core@1.10.0': dependencies: '@emnapi/wasi-threads': 1.2.1 @@ -2893,7 +2888,7 @@ snapshots: eslint: 9.39.5 eslint-import-resolver-node: 0.3.10 eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.5) eslint-plugin-react: 7.37.5(eslint@9.39.5) eslint-plugin-react-hooks: 7.1.1(eslint@9.39.5) @@ -2926,7 +2921,7 @@ snapshots: tinyglobby: 0.2.17 unrs-resolver: 1.12.2 optionalDependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5) transitivePeerDependencies: - supports-color @@ -2941,7 +2936,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.5): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.66.0(eslint@9.39.5)(typescript@5.9.3))(eslint@9.39.5))(eslint@9.39.5))(eslint@9.39.5): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -3584,6 +3579,10 @@ snapshots: dependencies: p-limit: 3.1.0 + pandacn@0.1.0(react@19.2.0): + dependencies: + react: 19.2.0 + parent-module@1.0.1: dependencies: callsites: 3.1.0 diff --git a/package.json b/package.json index 7e63d4b..0badf88 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,7 @@ "scripts": { "check-examples": "./scripts/check-examples.sh", "format": "oxfmt --write .", - "format:check": "oxfmt --check .", - "pack-ds": "./scripts/pack-ds.sh" + "format:check": "oxfmt --check ." }, "devDependencies": { "oxfmt": "^0.63.0" diff --git a/scripts/check-examples.sh b/scripts/check-examples.sh index 255c880..1fb1438 100755 --- a/scripts/check-examples.sh +++ b/scripts/check-examples.sh @@ -3,6 +3,9 @@ set -euo pipefail root_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)" failures=() +skipped=() + +pandacn_published="$(npm view pandacn version 2>/dev/null || true)" for folder in "$root_dir"/examples/*/; do name="$(basename "$folder")" @@ -30,6 +33,12 @@ for folder in "$root_dir"/examples/*/; do continue fi + if grep -q '"pandacn"' "$folder/package.json" && [ -z "$pandacn_published" ]; then + echo " – skipped: needs pandacn on npm" + skipped+=("$name") + continue + fi + ( cd "$folder" pnpm install --ignore-workspace @@ -39,6 +48,11 @@ for folder in "$root_dir"/examples/*/; do ) || failures+=("$name") done +if [ ${#skipped[@]} -ne 0 ]; then + echo "" + echo "Skipped (pandacn not yet on npm): ${skipped[*]}" +fi + if [ ${#failures[@]} -ne 0 ]; then echo "" echo "Failed examples: ${failures[*]}" @@ -46,4 +60,4 @@ if [ ${#failures[@]} -ne 0 ]; then fi echo "" -echo "All examples installed and built successfully." +echo "All checked examples installed and built successfully." diff --git a/scripts/pack-ds.sh b/scripts/pack-ds.sh deleted file mode 100755 index f7e4e85..0000000 --- a/scripts/pack-ds.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail - -root_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)" -ds_dir="$root_dir/examples/monorepo/packages/ds" -tarball="chakra-ui-shadcn-panda-0.1.0.tgz" -consumers=(standalone-app panda-app) - -echo "==> Packing @chakra-ui/shadcn-panda" -rm -rf "$ds_dir/.pack" -pnpm -C "$ds_dir" pack --pack-destination "$ds_dir/.pack" >/dev/null - -for app in "${consumers[@]}"; do - cp "$ds_dir/.pack/$tarball" "$root_dir/examples/$app/$tarball" - echo " → examples/$app/$tarball" -done - -rm -rf "$ds_dir/.pack" -echo "Done. Re-run \`pnpm install\` in each consumer example to pick up the new build."