Update Preset Patterns, GH Workflows, and add Husky hooks (#23)

* build(husky): add custom husky hooks

* chore(renovate): format file

* build: update dev scripts

* build(deps): update panda deps

* build(panda): update layout of preset configuration files

* refactor(components): use atomic config recipes for consistency

* ci(changesets): add changeset for recipe and preset restructure

* ci(workflows): add testing suite workflow

* build(tsup): update config to include use client banner appropriately

* ci(scripts): update test:ci script

* build(tsup): add symlink capability for local testing

* fix: fix typo

* build(docs): add up to date docs for library, fix invalid build issues, i.e. missing preset

* ci(changesets): add changeset for fix inappropriate build

* fix(panda): update config to use updated preset convention appropriately, update usage docs

* chore(docs): update prerequisites

.changeset/curvy-taxis-invite.md

@@ -0,0 +1,5 @@
+---
+"@hobbescodes/tigris-ui": patch
+---
+
+Update components to use atomic config recipes, adjust preset accordingly

.changeset/gentle-glasses-wash.md

@@ -0,0 +1,5 @@
+---
+"@hobbescodes/tigris-ui": minor
+---
+
+Fix missing tigrisPreset from build

.github/workflows/release.yml

@@ -24,7 +24,7 @@ jobs:
         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: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - name: Install dependencies
+        run: bun install
+      - name: Install Playwright
+        run: bunx 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,5 @@
-build
 node_modules
+build
+coverage
 generated
+storybook-static

.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"]
+}

.storybook/main.ts

@@ -1,6 +1,7 @@
 import { mergeConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+import type { AddonOptionsBabel as CoverageOptions } from "@storybook/addon-coverage";
 import type { StorybookConfig } from "@storybook/react-vite";
 
 /**
@@ -26,6 +27,14 @@ const storybookConfig: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "storybook-dark-mode",
+    {
+      name: "@storybook/addon-coverage",
+      options: {
+        istanbul: {
+          include: ["**/*.tsx", "**/*.stories.tsx"],
+        },
+      } as CoverageOptions,
+    },
   ],
   // staticDirs: ["../public"],
   viteFinal: (config) =>

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) hobbescodes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,3 +1,21 @@
-# tigris-ui
+# Tigris Design System & UI Kit
 
-## TODO
+Universal design system and component library built by [hobbescodes](https://github.com/hobbescodes), powered by [Panda](https://panda-css.com/) and [Ark](https://ark-ui.com/).
+
+## Quick Start
+
+Follow the [prerequisities](docs/usage.md#prerequisites) to install Panda in your project, then follow the [package install instructions](docs/usage.md#from-published-package).
+
+## Local Development
+
+1. Install dependencies: `bun install`
+2. Start development stack: `bun dev`
+   - This will launch the following:
+     - [Panda CSS](https://panda-css.com/) in watch mode
+     - [Storybook](https://storybook.js.org/) in development mode (default port: `6006`, e.g. http://localhost:6006)
+
+If you'd like to develop outside of Storybook, as in a dedicated app, follow the [prerequisities](docs/usage.md#prerequisites), then follow the [local usage instructions](docs/usage.md#local).
+
+## License
+
+The code in this repository is licensed under MIT, &copy; hobbescodes. See <a href="LICENSE.md">LICENSE.md</a> for more information.

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;

docs/usage.md

@@ -0,0 +1,79 @@
+# Tigris UI Library Usage
+
+Follow these steps to use the Tigris UI library in your project.
+
+## Prerequisites
+
+1. Install [Panda 🐼](https://panda-css.com/): `bun add -D @pandacss/dev`
+
+2. Create a Panda config file similar to this (Panda looks for `panda.config.ts` by default):
+
+   ```ts
+   // panda.config.ts
+   import { tigrisPreset } from "@hobbescodes/tigris-ui";
+   import { defineConfig } from "@pandacss/dev";
+
+   const pandaConfig = defineConfig({
+     preflight: true,
+     presets: ["@pandacss/preset-panda", tigrisPreset],
+     include: ["src/**/*.{ts,tsx}"],
+     outdir: "src/generated/panda",
+   });
+
+   export default pandaConfig;
+   ```
+
+   Feel free to modify the Panda config as needed, for example if you need to add more patterns to `include`.
+
+3. Create a `postcss.config.js` file in your project root with the following content:
+
+   ```js
+   module.exports = {
+     plugins: {
+       "@pandacss/dev/postcss": {},
+     },
+   };
+   ```
+
+   There is no need to install `postcss` as an explicit dependency in your project, the config will be picked up by the UI library bundle.
+
+4. Create a CSS file and import it into your project. You can name the CSS file anything you want, just make sure you import it early in your project. For example:
+
+   ```css
+   /* main.css */
+   @layer reset, base, tokens, recipes, utilities;
+   @import url("@hobbescodes/tigris-ui/index.css");
+   ```
+
+   ```tsx
+   // App.tsx
+   import "main.css";
+
+   const App = () => <></>;
+   ```
+
+5. (**_for TypeScript users_**) If you are using TypeScript, make sure your consuming application has `compilerOptions.moduleResolution` set to `node16` or higher (e.g. `nodenext`) in `tsconfig.json`. This will allow you to properly import from subpaths from the library. Read more about this [here](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/#ecmascript-module-support-in-node-js).
+
+Now you are ready to install the UI library. You can either install it [from the published package](#from-published-package) or from a [local clone](#local) on your local filesystem. The latter is useful if you are developing the library.
+
+## Remote
+
+Install from remote repository along with required dependencies: `bun add @hobbescodes/tigris-ui @ark-ui/react`
+
+## Local
+
+This workflow is ideal for local development.
+
+1. **Within the root UI library directory**, build the UI library: `bun run build`
+2. **Within the project directory:**
+
+   1. Install dependencies: `bun install`
+   2. Link the UI library: `bun link @hobbescodes/tigris-ui`. Linking will not modify `package.json`, it will just symlink the package into your `node_modules`. Note that the package must be published to bun's local store first (this happens automatically after a successful build of the UI library)
+
+      > 💡 **Note:** every time you install or modify dependencies (e.g. run `bun i` or `bun add [...]`), or update the store from the UI library (e.g. running `bun run build`) the package symlink will be cleared, and will need to be relinked:
+      >
+      > ```sh
+      >  bun link @hobbescodes/tigris-ui
+      > ```
+
+      > 💡 **Note:** if the UI library build fails, this will cause trickling errors. Make sure the UI library builds successfully if you are still having issues.

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 \"#ffc83d,#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\" \"bunx http-server storybook-static --port 6006 --silent\" \"bunx wait-on tcp:127.0.0.1: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,9 +55,14 @@
     "@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-coverage": "^0.0.9",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-interactions": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",
@@ -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 tigrisPreset from "lib/panda/tigris.preset";
+import * as recipes from "lib/theme/extensions/recipes";
+import * as slotRecipes from "lib/theme/extensions/slotRecipes";
+import { tigrisPreset } from "lib/theme/presets";
+import { mapArrayToObject } from "lib/util";
+
+const recipeKeys = Object.keys(recipes);
+const slotRecipeKeys = Object.keys(slotRecipes);
 
 /**
  * 🐼 Panda configuration.
@@ -10,10 +16,18 @@ const pandaConfig = defineConfig({
   preflight: true,
   include: ["src/**/*.{ts,tsx,mdx}"],
   outdir: "src/generated/panda",
-  presets: ["@pandacss/dev/presets", tigrisPreset],
+  presets: ["@pandacss/preset-panda", tigrisPreset],
   // set JSX factory name
   jsxFactory: "panda",
   jsxFramework: "react",
+  staticCss: {
+    // 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;

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }