feat: new boilerplate panda-css

.gitignore

@@ -111,3 +111,7 @@ dist
 
 # Generated GitHub Worflow action
 .github/actions/bati-gen
+
+## Panda
+styled-system
+styled-system-studio

boilerplates/panda-css/files/$package.json.ts

@@ -0,0 +1,13 @@
+import { loadPackageJson, type TransformerProps } from "@batijs/core";
+
+export default async function getPackageJson(props: TransformerProps) {
+  const packageJson = await loadPackageJson(props, await import("../package.json").then((x) => x.default));
+
+  return packageJson
+    .setScript("prepare", {
+      value: "panda codegen",
+      precedence: 20,
+    })
+    .addDevDependencies(["@pandacss/dev", "postcss"])
+    .addDependencies([]);
+}

boilerplates/panda-css/files/layouts/panda.css

@@ -0,0 +1 @@
+@layer reset, base, tokens, recipes, utilities;

boilerplates/panda-css/files/panda.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: [
+    "./components/**/*.{js,jsx,ts,tsx}",
+    "./layouts/**/*.{js,jsx,ts,tsx}",
+    "./pages/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: "styled-system",
+});

boilerplates/panda-css/files/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@pandacss/dev/postcss": {},
+  },
+};

boilerplates/panda-css/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@batijs/panda-css",
+  "private": true,
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "check-types": "tsc --noEmit",
+    "build": "bati-compile-boilerplate"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@batijs/compile": "workspace:*",
+    "@pandacss/dev": "^0.47.1",
+    "@types/node": "^18.19.64",
+    "postcss": "^8.4.47"
+  },
+  "dependencies": {
+    "@batijs/core": "workspace:*"
+  },
+  "files": [
+    "dist/"
+  ],
+  "bati": {
+    "if": {
+      "flag": "panda-css"
+    }
+  },
+  "exports": {
+    "./panda.config": {
+      "types": "./dist/types/panda.config.d.ts"
+    },
+    "./postcss.config": {
+      "types": "./dist/types/postcss.config.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "panda.config": [
+        "./dist/types/panda.config.d.ts"
+      ],
+      "postcss.config": [
+        "./dist/types/postcss.config.d.ts"
+      ]
+    }
+  }
+}

boilerplates/panda-css/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["../tsconfig.base.json"]
+}

boilerplates/shared/files/.gitignore

@@ -140,3 +140,7 @@ dist
 # aws-cdk
 .cdk.staging
 cdk.out
+
+## Panda
+styled-system
+styled-system-studio

packages/cli/turbo.json

@@ -25,6 +25,7 @@
         "@batijs/hono#build",
         "@batijs/lucia-auth#build",
         "@batijs/mantine#build",
+        "@batijs/panda-css#build",
         "@batijs/prettier#build",
         "@batijs/prisma#build",
         "@batijs/react#build",

packages/features/src/features.ts

@@ -131,6 +131,22 @@ export const features = [
       },
     ],
   },
+  {
+    category: "CSS",
+    label: "PandaCSS",
+    flag: "panda-css",
+    image:
+      "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHNoYXBlLXJlbmRlcmluZz0nZ2VvbWV0cmljUHJlY2lzaW9uJyB0ZXh0LXJlbmRlcmluZz0nZ2VvbWV0cmljUHJlY2lzaW9uJyBpbWFnZS1yZW5kZXJpbmc9J29wdGltaXplUXVhbGl0eScgZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIHZpZXdCb3g9JzAgMCA1MDcgNTEyLjMzJz48ZyBmaWxsLXJ1bGU9J25vbnplcm8nPjxwYXRoIGZpbGw9JyNGNkU0NTgnIGQ9J00wIDU4LjdDMCAyNi4yOCAyNi4yOCAwIDU4LjcxIDBoMzg5LjU4QzQ4MC43MiAwIDUwNyAyNi4yOCA1MDcgNTguN3YzOTQuOTNjMCAzMi40Mi0yNi4yOCA1OC43LTU4LjcxIDU4LjdINTguNzFDMjYuMjggNTEyLjMzIDAgNDg2LjA1IDAgNDUzLjYzVjU4Ljd6Jy8+PHBhdGggZD0nTTMyNC45MSAxMTQuNTJjLTI3Ljk4LTguMDQtNTYuNTEtOS4xMy04NS41OC02LjUyLTE2LjI3IDEuNjgtMzEuOTIgNC45MS00Ny4wMSAxMC41OC0zMi42MSAxMi4yNS01Ny4wOSAzMy40Ni03MS42OSA2NS40MS0xMC40NyAyMi45LTE0LjI1IDQ3LjIzLTE0LjY1IDcyLjE5LS40MiAyNi4zOCAyLjg5IDUyLjQgOC4xNCA3OC4xOSA0Ljc2IDIzLjM4IDExLjExIDQ2LjI5IDIwLjE2IDY4LjQyLjg2IDIuMSAxLjkzIDIuODEgNC4yMyAyLjggMjguNjQtLjA1IDU3LjI4LS4wNSA4NS45Mi0uMDUgOC40OCAwIDE2Ljk1IDAgMjUuNDQtLjAxLjY1IDAgMS4zLS4wNCAyLjA0LS4wOC4zOC0uMDEuNzktLjA0IDEuMjMtLjA2LS4xNy0uNC0uMzItLjc4LS40Ny0xLjE0LS4yOC0uNjktLjUzLTEuMy0uOC0xLjg4LTIuMDctNC40NC00LjE5LTguODQtNi4zMS0xMy4yNS00LjU4LTkuNTgtOS4xNi0xOS4xNS0xMy4zMS0yOC45LTEyLjU4LTI5LjU5LTIyLjIxLTYwLjA2LTI1LjE1LTkyLjMxLTEuMy0xNC4yMy0xLjExLTI4LjM3IDIuODMtNDIuMjQgNC41Mi0xNS44NSAxNC4yLTI3LjA0IDMwLjI1LTMxLjcxIDE0Ljc1LTQuMyAyOS43LTQuMjcgNDQuMzUuNDcgMTMuMDkgNC4yMyAyMS42MyAxMy4xNyAyNS4yNiAyNi41NiAyLjc4IDEwLjI3IDIuNzggMjAuNjYuNjcgMzEuMDItMS42MiA3Ljk4LTQuODkgMTUuMjYtMTAuNzcgMjEuMDktMTAuNTYgMTAuNDUtMjMuNzQgMTIuODUtMzcuODggMTIuMDUtMi41Mi0uMTQtNS4wMy0uNDItNy42MS0uNzEtMS4yMS0uMTMtMi40NC0uMjYtMy42OS0uMzkuMDQuNDEuMDUuNzcuMDggMS4xMi4wMy42OC4wNiAxLjI2LjIgMS44My42IDIuNDIgMS4xOCA0Ljg1IDEuNzUgNy4yOCAxLjM5IDUuODYgMi43NyAxMS43MiA0LjU1IDE3LjQ1IDMuNDkgMTEuMjcgNy41NSAyMi4yNSAxMi4xNiAzMi45OCAzMi44Mi0yLjU2IDYzLjA2LTEwLjcyIDk1LjE1LTI5Ljk4LjQ4LS4zLjkyLS41OCAxLjM2LS44NSAxMy43OS04LjU5IDI0Ljk0LTE5LjcyIDMyLjY0LTM0LjA5IDEyLjQ2LTIzLjI4IDE0Ljg5LTQ4LjE3IDExLjE4LTczLjg3LTMuODItMjYuNTItMTUuNzItNDguNzgtMzYuMi02Ni4yNC0xNC4yMS0xMi4xMS0zMC42NC0yMC4wNC00OC40Ny0yNS4xNnonLz48L2c+PC9zdmc+",
+    url: "https://panda-css.com/",
+    tagline: "Write type-safe styles with ease using panda",
+    repo: "chakra-ui/panda",
+    links: [
+      {
+        label: "Docs",
+        href: "https://panda-css.com/docs/overview/getting-started",
+      },
+    ],
+  },
 
   // UI Component Libraries