Foundation (#1)

* feature: add foundational project boilerplate

* lint: allow '@ts-ignore' with description

* build(deps): upgrade dependencies

* chore: format tsconfig, disable prettier formatting thereof

* build(deps): add Storybook theming dependencies

* feature(storybook): add Storybook config and ANIREF logo asset

* chore(eslint): format ESLint config

* feature: add application config

* feature(panda): add Panda config

* chore(panda): rename Panda config object, add JSDoc

* feature(tsup): add tsup config

* feature: add button component

* test(button): add button render unit test

* feature(panda): enable JSX emission and set JSX factory

* feature(storybook): add button component story

* docs: add README and license

* ci(test): add test workflow for unit tests and coverage

* build(scripts): add Panda codegen step to test script

* ci(test-workflow): set Node major to 20

* chore: add storybook output to ignore patterns

* chore: add Zag store override (chakra-ui/zag#761)

* chore: 'overrides' -> 'resolutions'

* ci(test-workflow): set coverage runner package manager to Yarn

* build(scripts): add Panda codegen step to Storybook build script

* ci(test-workflow): set custom coverage runner script

* fix(yarn): add 'yarnPath'

* chore(yarn): update lock file

* build(yarn): pin Yarn to v3.6.1

.eslintignore

@@ -0,0 +1,8 @@
+# node_modules ignored by default
+build
+coverage
+generated
+storybook-static
+
+# see https://github.com/storybookjs/eslint-plugin-storybook#installation
+!.storybook

.eslintrc

@@ -0,0 +1,118 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    // ! NB: empty object is intentional, mitigates module alias issue
+    "import/resolver": {
+      "typescript": {}
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:jest/recommended",
+    "plugin:jest-dom/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+    "plugin:testing-library/react",
+    "prettier"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "import",
+    "typescript-sort-keys",
+    "unused-imports",
+    "prefer-arrow",
+    "react-hooks",
+    "jest",
+    "jest-dom",
+    "testing-library"
+  ],
+  "rules": {
+    // allow non-null assertion operators
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        // allow `@ts-ignore` if a description is specified
+        "ts-ignore": "allow-with-description"
+      }
+    ],
+    // disallow unused variables
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    // suppress errors for missing React import (prefer modern JSX transform)
+    "react/react-in-jsx-scope": "off",
+    // prevent multiple components per file
+    "react/no-multi-comp": "error",
+    // enforce arrow functions for React components
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    // warn on use of type `any`
+    "@typescript-eslint/no-explicit-any": "warn",
+    // explicitly handle promises (e.g. `await`, `void`)
+    "@typescript-eslint/no-floating-promises": "error",
+    // enforce type imports
+    "@typescript-eslint/consistent-type-imports": "error",
+    // prevent duplicate imports
+    "import/no-duplicates": "error",
+    // remove unused imports
+    "unused-imports/no-unused-imports": "warn",
+    // enforce import group order
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "caseInsensitive": true,
+          "order": "asc"
+        },
+        // separate import groups (e.g. external dependencies from internal dependencies)
+        "groups": [
+          "builtin",
+          "external",
+          [
+            "internal",
+            // NB: TS aliased paths fall into `unknown` category. See https://github.com/import-js/eslint-plugin-import/issues/1379
+            "unknown",
+            "parent",
+            "sibling",
+            "index",
+            "object"
+          ],
+          "type"
+        ],
+        "newlines-between": "always"
+      }
+    ]
+  }
+}

.github/workflows/test.yml

@@ -0,0 +1,32 @@
+name: Run tests
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test_unit:
+    name: Run unit tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: yarn
+      - name: Run unit tests
+        run: yarn test:ci
+
+  coverage:
+    name: Determine code coverage
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ArtiomTr/jest-coverage-report-action@v2
+        with:
+          package-manager: yarn
+          test-script: yarn test:coverage

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+build
+coverage
+generated
+storybook-static
+
+.yarn/*
+!.yarn/releases

.husky/pre-commit

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

.lintstagedrc

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

.prettierignore

@@ -0,0 +1,6 @@
+# node_modules ignored by default
+build
+coverage
+generated
+tsconfig.json
+storybook-static

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "always",
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false
+}

.storybook/main.ts

@@ -0,0 +1,38 @@
+import { mergeConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+/**
+ * Storybook configuration.
+ */
+const storybookConfig: StorybookConfig = {
+  core: {
+    builder: "@storybook/builder-vite",
+    disableTelemetry: true,
+  },
+  framework: "@storybook/react-vite",
+  stories: ["../src/**/*.stories.@(ts|tsx|mdx)"],
+  typescript: {
+    // typecheck stories during Storybook build
+    check: true,
+  },
+  addons: [
+    "@storybook/addon-a11y",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  staticDirs: ["../public"],
+  viteFinal: (config) =>
+    // recursively merge Vite options
+    mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+      // add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ["storybook-dark-mode"],
+      },
+    }),
+};
+
+export default storybookConfig;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+
+import theme from "./theme";
+
+// apply custom Storybook theme
+addons.setConfig({ theme });

.storybook/preview.ts

@@ -0,0 +1,20 @@
+import "../src/lib/styles/main.css";
+
+import type { Preview } from "@storybook/react";
+
+/**
+ * Storybook preview.
+ */
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,16 @@
+import { create } from "@storybook/theming/create";
+
+import { app } from "../src/lib/config";
+
+/**
+ * Custom Storybook theme.
+ */
+const storybookTheme = create({
+  // set dark theme default
+  base: "dark",
+  brandUrl: app.organization.url,
+  brandTitle: `<img src="/img/logo.png" width="40px" height="40px"/>`,
+  brandTarget: "_self",
+});
+
+export default storybookTheme;

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: pnpm
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Anima Reflection LLC
+
+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

@@ -0,0 +1,16 @@
+# ANIREF Design System & UI Kit
+
+Universal design system and component library for Anima Reflection.
+
+## Local Development
+
+1. Install dependencies: `yarn`
+2. Start development stack: `yarn dev`
+   - This will launch the following:
+     - [Panda CSS](https://panda-css.com/) in watch mode
+     - [tsup](https://tsup.egoist.dev/) in watch mode
+     - [Storybook](https://storybook.js.org/) in development mode (default port: `6006`, e.g. http://localhost:6006)
+
+## License
+
+The code in this repository is licensed under MIT, &copy; Anima Reflection LLC. See <a href="LICENSE.md">LICENSE.md</a> for more information.

jest.config.ts

@@ -0,0 +1,53 @@
+import type { Config as JestConfig } from "jest";
+
+/**
+ * Test coverage options.
+ */
+const coverageOptions: Pick<
+  JestConfig,
+  | "collectCoverage"
+  | "coverageDirectory"
+  | "coveragePathIgnorePatterns"
+  | "coverageProvider"
+  | "coverageReporters"
+  | "coverageThreshold"
+  | "collectCoverageFrom"
+  | "forceCoverageMatch"
+> = {
+  coverageProvider: "v8",
+  collectCoverageFrom: [
+    "<rootDir>/src/**/*.tsx",
+    // ignore stories
+    "!<rootDir>/src/**/*.stories.tsx",
+  ],
+};
+
+/**
+ * Jest configuration.
+ * @see https://jestjs.io/docs/configuration
+ */
+const jestConfig: JestConfig = {
+  // throw error on deprecated API usage
+  errorOnDeprecated: true,
+  testEnvironment: "jsdom",
+  modulePaths: ["<rootDir>/src"],
+  transform: {
+    // run tests with`@swc/jest`: https://swc.rs/docs/usage/jest
+    "^.+\\.(mjs|ts|tsx)$": [
+      "@swc/jest",
+      {
+        jsc: {
+          transform: {
+            react: {
+              // enable support for React 17 JSX transform: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
+              runtime: "automatic",
+            },
+          },
+        },
+      },
+    ],
+  },
+  ...coverageOptions,
+};
+
+export default jestConfig;