build: update config patterns, include husky hooks, etc

.env.local.template

@@ -0,0 +1,2 @@
+# whether to pregenerate static CSS with Panda
+PREGENERATE_STATIC_CSS=true

.github/workflows/release.yml

@@ -11,20 +11,17 @@ jobs:
     name: Handle release 🦋
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "20.x"
-      - uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: latest
+          node-version: 20
       - name: Install dependencies
-        run: bun install
+        run: bun i
       - name: Create release PR or publish package
         id: changesets
         uses: changesets/action@v1
         with:
-          publish: bun run release
+          publish: bun release
           title: "feature(release): version packages"
           commit: "ci(changesets): version packages"
         env:

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Test 🧪
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    name: Run Storybook tests 🃏
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: bun i
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        # https://github.com/storybookjs/storybook/issues/6408
+        run: NODE_OPTIONS=--max_old_space_size=8192 bun storybook:build --quiet
+      - name: Serve Storybook and run tests
+        run: bun test:ci

.gitignore

@@ -1,3 +1,8 @@
-build
 node_modules
+build
+coverage
 generated
+storybook-static
+
+.env*
+!.env*.template

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+bun commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+bun lint-staged

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{ts,tsx}": ["bun format", "bun lint"]
+}

commitlint.config.ts

@@ -0,0 +1,38 @@
+import { RuleConfigSeverity } from "@commitlint/types";
+
+import type { UserConfig as CommitlintUserConfig } from "@commitlint/types";
+
+// TODO extract to dedicated repo with unit tests (test different commit message inputs)
+
+/**
+ * `commitlint` configuration.
+ * @see https://commitlint.js.org/#/reference-configuration
+ */
+const commitlintConfig: CommitlintUserConfig = {
+  extends: ["@commitlint/config-conventional"],
+  // whether to use default ignore rules
+  defaultIgnores: true,
+  // rule overrides
+  rules: {
+    // specify valid types
+    "type-enum": [
+      RuleConfigSeverity.Error,
+      "always",
+      [
+        "build", // build system, dependencies, tooling
+        "chore", // maintenance
+        "ci", // continuous integration
+        "docs", // update documentation
+        "feature", // add a feature
+        "fix", // fix a bug
+        "perf", // performance improvement
+        "refactor", // change project/code structure
+        // "revert", // revert a commit (intentionally omitted)
+        "style", // formatting, visual changes
+        "test", // update tests (unit, integration, E2E, etc.)
+      ],
+    ],
+  },
+};
+
+export default commitlintConfig;

package.json

@@ -26,12 +26,16 @@
     "bun"
   ],
   "scripts": {
-    "prepare": "panda codegen",
-    "dev": "concurrently --kill-others -n \"BUILD,STORYBOOK\" -c \"#f13334,#ff4785\" \"bun run build --watch\" \"bun run storybook\"",
+    "prepare": "husky install",
+    "dev": "panda codegen && concurrently --kill-others -n \"PANDA,STORYBOOK\" -c \"#f13334,#ff4785\" \"bun dev:css\" \"bun storybook\"",
+    "dev:css": "panda --watch",
     "build": "panda codegen && tsup",
     "format": "prettier . --write",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "test": "test-storybook",
+    "test:coverage": "bun run test --coverage",
+    "test:ci": "concurrently --kill-others -s first -n \"STORYBOOK,TEST\" -c \"#ff4785,#45ba4b\" \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && bun test:coverage --ci\"",
+    "test:watch": "bun run test --watch",
     "storybook": "storybook dev --quiet --no-open -p 6006",
     "storybook:build": "panda codegen && storybook build",
     "release": "bun run build && changeset publish"
@@ -51,8 +55,12 @@
     "@ark-ui/react": "^0.15.0",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
+    "@commitlint/cli": "^18.2.0",
+    "@commitlint/config-conventional": "^18.1.0",
+    "@commitlint/types": "^18.1.0",
     "@omnidev/knit": "^0.1.2",
-    "@pandacss/dev": "^0.16.0",
+    "@pandacss/dev": "^0.17.3",
+    "@pandacss/types": "^0.17.3",
     "@storybook/addon-a11y": "^7.4.6",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
@@ -71,6 +79,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "concurrently": "^8.2.1",
+    "dotenv-cli": "^7.3.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -83,6 +92,9 @@
     "eslint-plugin-testing-library": "^6.1.0",
     "eslint-plugin-typescript-sort-keys": "^3.1.0",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",

panda.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from "@pandacss/dev";
 
+import { PREGENERATE_STATIC_CSS } from "lib/config";
+import { recipes, slotRecipes } from "lib/panda";
 import tigrisPreset from "lib/panda/tigris.preset";
+import { mapArrayToObject } from "lib/util";
+
+const recipeKeys = Object.keys(recipes);
+const slotRecipeKeys = Object.keys(slotRecipes);
 
 /**
  * 🐼 Panda configuration.
@@ -10,10 +16,19 @@ const pandaConfig = defineConfig({
   preflight: true,
   include: ["src/**/*.{ts,tsx,mdx}"],
   outdir: "src/generated/panda",
-  presets: ["@pandacss/dev/presets", tigrisPreset],
-  // set JSX factory name
-  jsxFactory: "panda",
+  presets: ["@pandacss/preset-base", tigrisPreset],
   jsxFramework: "react",
+  jsxFactory: "panda",
+  staticCss: PREGENERATE_STATIC_CSS
+    ? {
+        // pregenerate recipe styles; allow Storybook stories to properly use `args` without needing to hint the extractor with `render` or other workarounds like `{fn}.raw`
+        // TODO PurgeCSS (https://panda-css.com/docs/guides/static#removing-unused-css)
+        recipes: {
+          ...mapArrayToObject(recipeKeys, ["*"]),
+          ...mapArrayToObject(slotRecipeKeys, ["*"]),
+        },
+      }
+    : {},
 });
 
 export default pandaConfig;

src/lib/config/app.config.ts

@@ -0,0 +1,11 @@
+/**
+ * Application config.
+ */
+const app = {
+  name: { short: "Tigris", full: "Tigris UI Library" },
+  organization: {
+    name: "Tigris",
+  },
+};
+
+export default app;

src/lib/config/env.config.ts

@@ -0,0 +1,4 @@
+/**
+ * Environment variables.
+ */
+export const { PREGENERATE_STATIC_CSS } = process.env;

src/lib/config/index.ts

@@ -0,0 +1,2 @@
+export { default as app } from "./app.config";
+export * from "./env.config";

src/lib/panda/index.ts

@@ -2,6 +2,6 @@ export { default as animations } from "./animations";
 export { default as colors } from "./colors";
 export { default as easings } from "./easings";
 export { default as keyframes } from "./keyframes";
-export { slotRecipes } from "./recipes";
+export { recipes, slotRecipes } from "./recipes";
 export { default as semanticTokens } from "./semanticTokens";
 export { default as zIndex } from "./zIndex";

src/lib/panda/recipes.ts

@@ -1,5 +1,7 @@
 import { modalRecipe } from "../../components/Modal/Modal.recipe";
 
+export const recipes = {};
+
 export const slotRecipes = {
   modal: modalRecipe,
 };

src/lib/util/index.ts

@@ -1 +1,2 @@
+export { default as mapArrayToObject } from "./mapArrayToObject";
 export { default as sleep } from "./sleep";

src/lib/util/mapArrayToObject.ts

@@ -0,0 +1,19 @@
+type ComputedPropertyName = string | number | symbol;
+
+// TODO extract to Omni common utils
+
+/**
+ * Map an array to an object.
+ * @param arr Array to map.
+ * @param val Value to assign to each key.
+ * @returns Object with the array values as keys and the value of each key is an array with a single value: "*".
+ *
+ * @example
+ * mapArrayToObject(["a", "b", "c"], "letter"); // { a: "letter", b: "letter", c: "letter" }
+ */
+const mapArrayToObject = <T extends ComputedPropertyName, V>(
+  arr: T[],
+  val: V
+) => arr.reduce((o, key) => ({ ...o, [key]: val }), {});
+
+export default mapArrayToObject;

test-runner-jest.config.js

@@ -0,0 +1,13 @@
+import { getJestConfig } from "@storybook/test-runner";
+
+/**
+ * Storybook test runner Jest configuration.
+ * @see https://github.com/storybookjs/test-runner#jest-options
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+export default {
+  // default configuration from `@storybook/test-runner`
+  ...getJestConfig(),
+  // set test timeout (default is 15s)
+  testTimeout: 30000,
+};

tsconfig.build.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    // enable declaration generation
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "moduleResolution": "node",
+    // generate declaration source map
+    "declarationMap": true,
+    "noImplicitAny": false
+  },
+  // overwrite include from composed `tsconfig`
+  "include": [],
+  "files": ["src/index.ts"]
+}

tsconfig.json

@@ -7,7 +7,10 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
@@ -16,9 +19,20 @@
     "sourceMap": true,
     "strict": true,
     "target": "esnext",
-    "typeRoots": ["generated/panda", "node_modules/@types"],
-    "outDir": "build"
+    "typeRoots": [
+      "generated/panda"
+    ]
   },
-  "include": ["src", "*.config.ts", "*.config.cjs", ".storybook/**/*.ts"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "src",
+    "*.config.ts",
+    "*.config.cjs",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx",
+    "test-runner-jest.config.js"
+  ],
+  "exclude": [
+    "**/node_modules",
+    "src/generated"
+  ]
+}