Add tests and tweak general project setup

.github/workflows/ci.yml

@@ -20,4 +20,4 @@ jobs:
       - uses: nrwl/nx-set-shas@v3
       - if: github.ref != 'refs/heads/main'
         run: git branch --track main origin/main
-      - run: yarn nx affected -t build --parallel=3
+      - run: yarn nx affected -t test,build --parallel=3

.prettierignore

@@ -2,3 +2,5 @@ node_modules
 dist
 .nx
 .yarn
+.next
+.pnp*

nx.json

@@ -3,7 +3,9 @@
     "defaultBase": "master"
   },
   "namedInputs": {
-    "default": ["{projectRoot}/src/**/*"],
+    "src": ["{projectRoot}/{src,dev}/**/!(*.test).ts"],
+    "test": ["{projectRoot}/{src,dev}/**/*.test.ts"],
+    "default": ["src"],
     "production": ["default"]
   },
   "targetDefaults": {
@@ -15,6 +17,10 @@
     "dev": {
       "dependsOn": ["^build"]
     },
+    "test": {
+      "inputs": ["test", "default", "^default"],
+      "dependsOn": ["^build"]
+    },
     "start": {
       "dependsOn": ["build"]
     }
@@ -23,7 +29,7 @@
     "default": {
       "runner": "nx-cloud",
       "options": {
-        "cacheableOperations": ["build"],
+        "cacheableOperations": ["build", "test"],
         "accessToken": "ZTRhMTQzNWUtZGY5Mi00OWVjLTg4ZjAtNzM3ZjRmZjJiNDRifHJlYWQ="
       }
     }

package.json

@@ -12,8 +12,9 @@
     "docs:build:watch": "lerna watch --scope=@mittwald/flow-documentation --include-dependencies -- run lerna:build:watch:base \\$LERNA_PACKAGE_NAME",
     "docs:dev": "concurrently 'yarn:docs:build:watch --ignore=@mittwald/flow-documentation' 'yarn:docs:dev:base'",
     "docs:dev:base": "lerna run dev --scope=@mittwald/flow-documentation",
-    "format": "prettier --write $@ '**/*.{ts,tsx,yaml,yml,json,md,mdx}'",
+    "format": "prettier --write '**/*.{ts,tsx,yaml,yml,json,md,mdx,js,cjs,mjs}'",
     "lerna:build:watch:base": "lerna run build --include-dependents --scope=$0",
+    "test:format": "run format --check",
     "tokens:build": "lerna run build --scope=@mittwald/flow-design-tokens",
     "tokens:build:watch": "lerna watch --scope=@mittwald/flow-design-tokens --include-dependencies -- run lerna:build:watch:base \\$LERNA_PACKAGE_NAME"
   },

packages/components/dev/cssModuleClassNameGenerator.test.ts

@@ -0,0 +1,51 @@
+import { cssModuleClassNameGenerator } from "./cssModuleClassNameGenerator";
+
+test.each([
+  [
+    {
+      filename: "src/foo/styles.modules.css",
+      className: "foo",
+      expected: "foo",
+    },
+  ],
+  [
+    {
+      filename: "src/components/Slider/styles.css",
+      className: "foo",
+      expected: "foo",
+    },
+  ],
+  [
+    {
+      filename: "src/components/Slider/styles.module.css",
+      className: "root",
+      expected: "flow-slider",
+    },
+  ],
+  [
+    {
+      filename: "src/components/Slider/styles.module.css",
+      className: "thumb",
+      expected: "flow-slider-thumb",
+    },
+  ],
+  [
+    {
+      filename: "src/components/Slider/components/Thumb/styles.module.css",
+      className: "root",
+      expected: "flow-slider-thumb",
+    },
+  ],
+  [
+    {
+      filename: "src/components/Slider/components/Thumb/styles.module.css",
+      className: "tooltip",
+      expected: "flow-slider-thumb-tooltip",
+    },
+  ],
+])(
+  "class names are generated correctly for %o",
+  ({ filename, className, expected }) => {
+    expect(cssModuleClassNameGenerator(className, filename)).toBe(expected);
+  },
+);

packages/components/dev/cssModuleClassNameGenerator.ts

@@ -0,0 +1,26 @@
+export const cssModuleClassNameGenerator = (
+  name: string,
+  filename: string,
+): string => {
+  if (name === "flow") {
+    return name;
+  }
+
+  if (!filename.endsWith(".module.css")) {
+    return name;
+  }
+
+  const parts = Array.from(filename.matchAll(/(components\/(.+?)\/)/g)).map(
+    (p) => p[2],
+  );
+
+  if (parts.length > 0) {
+    if (name !== "root") {
+      parts.push(name);
+    }
+
+    return "flow-" + parts.map((p) => p.toLowerCase()).join("-");
+  }
+
+  return name;
+};

packages/components/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import("ts-jest").JestConfigWithTsJest} */
+export default {
+  preset: "ts-jest",
+  testEnvironment: "node",
+};

packages/components/package.json

@@ -12,7 +12,8 @@
     "build": "vite build --config vite.build.config.ts",
     "dev": "run storybook:start",
     "storybook:build": "storybook build",
-    "storybook:start": "storybook dev -p 6006"
+    "storybook:start": "storybook dev -p 6006",
+    "test": "jest"
   },
   "files": [
     "dist"
@@ -25,6 +26,7 @@
     "@mittwald/flow-design-tokens": "workspace:*"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@nx/storybook": "^16.10.0",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
@@ -34,10 +36,12 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@types/jest": "^29.5.8",
     "@types/postcss-prefix-selector": "^1.16.3",
     "@types/prop-types": "^15.7.10",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "jest": "^29.7.0",
     "postcss": "^8.4.31",
     "postcss-nested-import": "^1.3.0",
     "postcss-nesting": "^12.0.1",
@@ -46,6 +50,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.5.3",
+    "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
     "typescript-plugin-css-modules": "^5.0.2",
     "vite": "^5.0.0",

packages/components/vite.build.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig, mergeConfig } from "vite";
 import dts from "vite-plugin-dts";
 import prefixer from "postcss-prefix-selector";
-import baseConfig from "./vite.config.js";
+import baseConfig from "./vite.config";
 
 export default defineConfig(
   mergeConfig(baseConfig, {

packages/components/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import postcssNesting from "postcss-nesting";
+import { cssModuleClassNameGenerator } from "./dev/cssModuleClassNameGenerator";
 
 export default defineConfig({
   resolve: {
@@ -12,25 +13,7 @@ export default defineConfig({
       plugins: [postcssNesting],
     },
     modules: {
-      generateScopedName: (name, filename) => {
-        if (name === "flow") {
-          return name;
-        }
-
-        const parts = Array.from(
-          filename.matchAll(/.*components\/(.*?)\/styles.module.css/gm),
-        ).map((p) => p[1]);
-
-        if (parts.length > 0) {
-          if (name !== "root") {
-            parts.push(name);
-          }
-
-          return "flow-" + parts.map((p) => p.toLowerCase()).join("-");
-        }
-
-        return name;
-      },
+      generateScopedName: cssModuleClassNameGenerator,
     },
   },
 });

packages/design-tokens/style-dictionary.config.cjs

@@ -2,25 +2,25 @@ const StyleDictionary = require("style-dictionary");
 const yaml = require("js-yaml");
 
 StyleDictionary.registerParser({
-    pattern: /\.yml$/,
-    parse: ({ contents }) => yaml.load(contents),
+  pattern: /\.yml$/,
+  parse: ({ contents }) => yaml.load(contents),
 });
 
 module.exports = {
-    source: [`src/**/*.yml`],
-    platforms: {
-        css: {
-            transformGroup: "css",
-            buildPath: "dist/",
-            files: [
-                {
-                    destination: "variables.css",
-                    format: "css/variables",
-                    options: {
-                        outputReferences: true
-                    }
-                },
-            ],
+  source: [`src/**/*.yml`],
+  platforms: {
+    css: {
+      transformGroup: "css",
+      buildPath: "dist/",
+      files: [
+        {
+          destination: "variables.css",
+          format: "css/variables",
+          options: {
+            outputReferences: true,
+          },
         },
+      ],
     },
+  },
 };

packages/docs/next.config.cjs

@@ -1,4 +1,4 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {}
+/** @type {import("next").NextConfig} */
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;