feat: new integration panda-css

.gitignore

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

boilerplates/eslint/files/eslint.config.js

@@ -19,6 +19,8 @@ export default tseslint.config(
       ".vercel/*",
       //# BATI.has("aws")
       "cdk.out/*",
+      //# BATI.has("panda-css")
+      "styled-system/",
       // JS files at the root of the project
       "*.js",
       "*.cjs",

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,32 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: BATI.has("vue")
+    ? [
+        "./components/**/*.{js,jsx,ts,tsx,vue}",
+        "./layouts/**/*.{js,jsx,ts,tsx,vue}",
+        "./pages/**/*.{js,jsx,ts,tsx,vue}",
+        "./src/**/*.{js,jsx,ts,tsx,vue}",
+      ]
+    : [
+        "./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/react/files/layouts/LayoutDefault.tsx

@@ -1,22 +1,25 @@
 import "./style.css";
 //# BATI.has("tailwindcss")
 import "./tailwind.css";
+//# BATI.has("panda-css")
+import "./panda.css";
 import React from "react";
 import logoUrl from "../assets/logo.svg";
 import { Link } from "../components/Link.js";
+import { css } from "../styled-system/css";
 
 export default function LayoutDefault({ children }: { children: React.ReactNode }) {
   return (
     <div
-      //# BATI.has("tailwindcss")
-      className="flex max-w-5xl m-auto"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={BATI.has("tailwindcss") ? "flex max-w-5xl m-auto" : css({ display: "flex", maxW: "900px", m: "auto" })}
       //# BATI.has("compiled-css")
       css={{
         display: "flex",
         maxWidth: 1024,
         margin: "auto",
       }}
-      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
       style={{
         display: "flex",
         maxWidth: 900,
@@ -39,8 +42,19 @@ function Sidebar({ children }: { children: React.ReactNode }) {
   return (
     <div
       id="sidebar"
-      //# BATI.has("tailwindcss")
-      className="p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={
+        BATI.has("tailwindcss")
+          ? "p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"
+          : css({
+              p: "20px",
+              display: "flex",
+              flexShrink: 0,
+              flexDir: "column",
+              lineHeight: "1.8em",
+              borderRight: "2px solid #eee",
+            })
+      }
       //# BATI.has("compiled-css")
       css={{
         padding: 20,
@@ -50,7 +64,7 @@ function Sidebar({ children }: { children: React.ReactNode }) {
         lineHeight: "1.8em",
         borderRight: "2px solid #eee",
       }}
-      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
       style={{
         padding: 20,
         flexShrink: 0,
@@ -70,15 +84,15 @@ function Content({ children }: { children: React.ReactNode }) {
     <div id="page-container">
       <div
         id="page-content"
-        //# BATI.has("tailwindcss")
-        className="p-5 pb-12 min-h-screen"
+        //# BATI.has("tailwindcss") || BATI.has("panda-css")
+        className={BATI.has("tailwindcss") ? "p-5 pb-12 min-h-screen" : css({ p: "20px", pb: "50px", minH: "100vh" })}
         //# BATI.has("compiled-css")
         css={{
           padding: 20,
           paddingBottom: 48,
           minHeight: "100vh",
         }}
-        //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+        //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
         style={{
           padding: 20,
           paddingBottom: 50,
@@ -94,14 +108,14 @@ function Content({ children }: { children: React.ReactNode }) {
 function Logo() {
   return (
     <div
-      //# BATI.has("tailwindcss")
-      className="p-5 mb-2"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={BATI.has("tailwindcss") ? "p-5 mb-2" : css({ p: "20px", mb: "10px" })}
       //# BATI.has("compiled-css")
       css={{
         padding: 20,
         marginBottom: 8,
       }}
-      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css")
+      //# !BATI.has("tailwindcss") && !BATI.has("compiled-css") && !BATI.has("panda-css")
       style={{
         marginTop: 20,
         marginBottom: 10,

boilerplates/react/files/pages/index/+Page.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { Counter } from "./Counter.js";
+import { css } from "../../styled-system/css";
 
 export default function Page() {
   return (
     <>
       <h1
-        //# BATI.has("tailwindcss")
-        className="font-bold text-3xl pb-4"
+        //# BATI.has("tailwindcss") || BATI.has("panda-css")
+        className={
+          BATI.has("tailwindcss")
+            ? "font-bold text-3xl pb-4"
+            : css({ font: "bold 2em sans-serif", marginBlock: "0.67em" })
+        }
         //# BATI.has("compiled-css")
         css={{ fontWeight: "700", fontSize: "1.875rem", paddingBottom: "1rem" }}
       >

boilerplates/react/files/pages/index/Counter.tsx

@@ -1,13 +1,28 @@
 import React, { useState } from "react";
+import { css } from "../../styled-system/css";
 
 export function Counter() {
   const [count, setCount] = useState(0);
 
   return (
     <button
       type="button"
-      //# BATI.has("tailwindcss")
-      className="inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
+      //# BATI.has("tailwindcss") || BATI.has("panda-css")
+      className={
+        BATI.has("tailwindcss")
+          ? "inline-block border border-black rounded bg-gray-200 px-2 py-1 text-xs font-medium uppercase leading-normal"
+          : css({
+              display: "inline-block",
+              border: "1px solid black",
+              rounded: "sm",
+              bg: "gray.200",
+              px: 1,
+              py: 0.5,
+              fontSize: 12,
+              fontWeight: 500,
+              lineHeight: "16px",
+            })
+      }
       //# BATI.has("compiled-css")
       css={{
         display: "inline-block",

boilerplates/react/files/pages/todo/TodoList.tsx

@@ -1,6 +1,7 @@
 import { onNewTodo } from "@batijs/telefunc/pages/todo/TodoList.telefunc";
 import { trpc } from "@batijs/trpc/trpc/client";
 import { client } from "@batijs/ts-rest/ts-rest/client";
+import { css } from "../../styled-system/css";
 import React, { useState } from "react";
 
 export function TodoList({ initialTodoItems }: { initialTodoItems: { text: string }[] }) {
@@ -48,8 +49,55 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
             }
           }}
         >
-          <input type="text" onChange={(ev) => setNewTodo(ev.target.value)} value={newTodo} />{" "}
-          <button type="submit">Add to-do</button>
+          <input
+            type="text"
+            onChange={(ev) => setNewTodo(ev.target.value)}
+            value={newTodo}
+            //# BATI.has("tailwindcss") || BATI.has("panda-css")
+            className={
+              BATI.has("tailwindcss")
+                ? "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto p-2 mr-1 mb-1"
+                : css({
+                    p: 2,
+                    bg: "gray.50",
+                    borderWidth: 1,
+                    borderColor: "gray.300",
+                    color: "gray.900",
+                    fontSize: "sm",
+                    rounded: "md",
+                    width: { base: "full", sm: "auto" },
+                    _focus: { ringColor: "teal.500", borderColor: "teal.500" },
+                    mr: 1,
+                    mb: 1,
+                  })
+            }
+          />
+          <button
+            type="submit"
+            //# BATI.has("tailwindcss") || BATI.has("panda-css")
+            className={
+              BATI.has("tailwindcss")
+                ? "text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto p-2"
+                : css({
+                    color: "white",
+                    bg: { base: "teal.700", _hover: "teal.800" },
+                    _focus: {
+                      ringWidth: 2,
+                      ringColor: "teal.300",
+                      outline: "1px solid transparent",
+                      outlineOffset: "1px",
+                    },
+                    cursor: "pointer",
+                    fontSize: "sm",
+                    fontWeight: 500,
+                    rounded: "md",
+                    width: { base: "full", sm: "auto" },
+                    p: 2,
+                  })
+            }
+          >
+            Add to-do
+          </button>
         </form>
       </div>
     </>

boilerplates/react/package.json

@@ -5,6 +5,7 @@
   "description": "",
   "type": "module",
   "scripts": {
+    "prepare": "panda codegen --silent",
     "check-types": "tsc --noEmit",
     "build": "bati-compile-boilerplate"
   },
@@ -17,6 +18,7 @@
     "@babel/plugin-transform-react-jsx": "^7.25.9",
     "@batijs/compile": "workspace:*",
     "@mantine/core": "^7.14.1",
+    "@pandacss/dev": "^0.47.1",
     "@types/node": "^18.19.64",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

boilerplates/react/panda.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  outdir: "files/styled-system",
+});

boilerplates/react/tsconfig.json

@@ -5,6 +5,8 @@
     "jsx": "preserve",
     "jsxImportSource": "react",
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "checkJs": false,
+    "allowJs": true,
     "baseUrl": "."
   }
 }

boilerplates/shared/files/.gitignore

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

boilerplates/shared/files/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "strict": true,
     "allowJs": true,
-    "checkJs": true,
+    "checkJs": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,