Add mstudio components package

package.json

@@ -13,6 +13,7 @@
     "build": "run all build",
     "build:deps:watch": "nx watch --projects=$@ --includeDependentProjects -- nx run-many --targets=build --projects=$(tsx dev/nxDependencies.ts $@)",
     "components": "nx run @mittwald/flow-react-components:\"$@\"",
+    "mstudio-components": "nx run @mittwald/flow-mstudio-react-components:\"$@\"",
     "dev:init-githooks": "yarn dlx simple-git-hooks",
     "docs": "nx run @mittwald/flow-documentation:\"$@\"",
     "format": "prettier --write '**/*.{ts,tsx,yaml,yml,json,md,mdx,js,cjs,mjs,css}'",

packages/components/package.json

@@ -266,6 +266,12 @@
       "types": "./dist/js/types/lib/propsContext/PropsContextProvider.d.ts",
       "import": "./dist/js/PropsContextProvider.js"
     },
+    "./PropsContext": {
+      "types": "./dist/js/types/lib/propsContext/types.d.ts"
+    },
+    "./props": {
+      "types": "./dist/js/types/lib/types/props.d.ts"
+    },
     "./RadioGroup/styles.css": "./dist/css/RadioGroup.css",
     "./RadioGroup": {
       "types": "./dist/js/types/components/RadioGroup/index.d.ts",

packages/design-tokens/src/mStudio/user-menu.yml

@@ -0,0 +1,3 @@
+user-menu:
+  max-width:
+    value: "300px"

packages/mstudio-components/.gitignore

@@ -0,0 +1,2 @@
+.build/
+/dev/.cache/

packages/mstudio-components/.storybook/main.ts

@@ -0,0 +1,43 @@
+import { dirname, join } from "path";
+import type { StorybookConfig } from "@storybook/react-vite";
+import viteCheckerPlugin from "vite-plugin-checker";
+
+function getAbsolutePath<T extends string>(value: T): T {
+  return dirname(require.resolve(join(value, "package.json"))) as T;
+}
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("storybook-addon-rtl"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {
+      // no options
+    },
+  },
+  core: {},
+  docs: {
+    autodocs: "tag",
+  },
+  viteFinal: async (conf) => {
+    // See why dynamic import: see https://github.com/storybookjs/storybook/issues/26291#issuecomment-1978193283
+    const { mergeConfig } = await import("vite");
+
+    return mergeConfig(conf, {
+      plugins: [
+        viteCheckerPlugin({
+          typescript: true,
+          terminal: true,
+        }),
+      ],
+    });
+  },
+};
+
+export default config;

packages/mstudio-components/.storybook/manager.ts

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

packages/mstudio-components/.storybook/mittwaldTheme.ts

@@ -0,0 +1,10 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "dark",
+  brandTitle: "Flow - mStudio Components",
+  brandUrl: "https://mittwald.de",
+  brandImage:
+    "https://raw.githubusercontent.com/mittwald/flow-previews/main/assets/mittwald_logo_white.svg",
+  brandTarget: "_self",
+});

packages/mstudio-components/.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import "../src/styles";
+import type { Preview } from "@storybook/react";
+import React from "react";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      document.body.classList.add("flow-mstudio");
+      return <Story />;
+    },
+  ],
+  globalTypes: {
+    rtlDirection: {},
+  },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/mstudio-components/README.md

@@ -0,0 +1,5 @@
+# @mittwald/flow-mstudio-react-components
+
+This package is part of
+[Flow – mittwald design system](https://mittwald.github.io/flow/). See the
+homepage for more details.

packages/mstudio-components/dev/cssModuleClassNameGenerator.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "vitest";
+import { cssModuleClassNameGenerator } from "./cssModuleClassNameGenerator";
+
+test.each([
+  [
+    {
+      filename: "src/foo/styles.module.css",
+      className: "foo",
+      expected: "foo",
+    },
+  ],
+  [
+    {
+      filename: "src/foo/styles.module.scss",
+      className: "foo",
+      expected: "foo",
+    },
+  ],
+])(
+  "class names are generated correctly for %o",
+  ({ filename, className, expected }) => {
+    expect(cssModuleClassNameGenerator(className, filename)).toBe(expected);
+  },
+);

packages/mstudio-components/dev/cssModuleClassNameGenerator.ts

@@ -0,0 +1,39 @@
+import { dirname } from "path";
+import * as _dirname from "./dirname.cjs";
+import decamelize from "decamelize";
+
+const parentDir = dirname(_dirname.default);
+
+export const cssModuleClassNameGenerator = (
+  name: string,
+  filename: string,
+): string => {
+  name = decamelize(name, { separator: "-" });
+  if (name === "flow-mstudio") {
+    return name;
+  }
+
+  const relativeFilename = filename.startsWith(parentDir)
+    ? filename.slice(parentDir.length)
+    : filename;
+
+  if (!/.*\.module\.s?css/.test(relativeFilename)) {
+    return name;
+  }
+
+  const parts = Array.from(
+    relativeFilename.matchAll(/(components\/(.+?)\/)/g),
+  ).map((p) => decamelize(p[2], { separator: "-" }).toLowerCase());
+
+  if (parts.length > 0) {
+    const lastPart = parts[parts.length - 1];
+
+    if (lastPart !== name) {
+      parts.push(name);
+    }
+
+    return "flow-mstudio--" + parts.join("--");
+  }
+
+  return name;
+};

packages/mstudio-components/dev/dirname.cjs

@@ -0,0 +1 @@
+module.exports = __dirname;

packages/mstudio-components/dev/dirname.d.cts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

packages/mstudio-components/dev/vitest/setupFiles.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

packages/mstudio-components/dev/vitest/setupGlobal.ts

@@ -0,0 +1,3 @@
+export const setup = () => {
+  process.env.LC_ALL = "de.DE";
+};

packages/mstudio-components/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "@mittwald/flow-mstudio-react-components",
+  "version": "0.1.0-alpha",
+  "type": "module",
+  "description": "Flow components for mStudio development",
+  "homepage": "https://mittwald.github.io/flow",
+  "repository": "https://github.com/mittwald/flow",
+  "exports": {
+    "./UserMenu/styles.css": "./dist/css/UserMenu.css",
+    "./UserMenu": {
+      "types": "./dist/js/types/components/UserMenu/index.d.ts",
+      "import": "./dist/js/UserMenu.js"
+    }
+  },
+  "files": [
+    "*.md",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20.11"
+  },
+  "scripts": {
+    "build": "",
+    "build:base": "run vite build --config vite.build.config.ts",
+    "build:css": "run vite build --config vite.build.config.css.ts && run postbuild:css",
+    "postbuild:css": "rimraf dist/css/**/*.js",
+    "build:deps:watch": "run -T build:deps:watch @mittwald/flow-mstudio-react-components",
+    "build:storybook": "run storybook build",
+    "dev": "run nx run-many --outputStyle=stream --projects=@mittwald/flow-mstudio-react-components --targets=start,build:deps:watch",
+    "start": "run storybook dev --port 6006",
+    "test": "",
+    "test:compile": "run tsc --noEmit",
+    "test:unit": "run vitest run"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "html-react-parser": "^5.1.18",
+    "object-code": "^1.3.3",
+    "react-children-utilities": "^2.10.0",
+    "react-stately": "^3.33.0",
+    "remeda": "^2.15.0",
+    "use-callback-ref": "^1.3.2",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@mittwald/flow-design-tokens": "workspace:^",
+    "@mittwald/flow-react-components": "workspace:^",
+    "@mittwald/react-tunnel": "workspace:^",
+    "@mittwald/react-use-promise": "^2.5.0",
+    "@nx/storybook": "^20.0.0",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/components": "^8.3.5",
+    "@storybook/core-events": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/preview-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/theming": "^8.3.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "6.4.7",
+    "@testing-library/react": "~16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/invariant": "^2.2.37",
+    "@types/node": "22.7.5",
+    "@types/prettier": "^3.0.0",
+    "@types/prop-types": "^15.7.13",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "@types/rollup": "^0.54.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "~2.1.2",
+    "decamelize": "^6.0.0",
+    "fs-jetpack": "^5.1.0",
+    "glob": "^10.4.1",
+    "happy-dom": "^15.7.4",
+    "next": "^14.2.15",
+    "nx": "^20.0.0",
+    "postcss": "^8.4.47",
+    "postcss-nested-import": "^1.3.0",
+    "postcss-nesting": "^13.0.0",
+    "prettier": "^3.3.3",
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.3.1",
+    "react-element-to-jsx-string": "^15.0.0",
+    "react-hook-form": "^7.53.0",
+    "rimraf": "^6.0.1",
+    "rollup": "~4.24.0",
+    "sass": "^1.79.4",
+    "storybook": "^8.3.5",
+    "storybook-addon-rtl": "^1.0.1",
+    "tsx": "^4.19.1",
+    "typescript": "^5.6.3",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.8",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-checker": "^0.8.0",
+    "vite-plugin-dts": "^4.2.3",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "~2.1.2",
+    "yaml": "^2.5.1"
+  },
+  "peerDependencies": {
+    "@mittwald/react-use-promise": "^2.3.12",
+    "next": "*",
+    "react": "~18.3.0",
+    "react-dom": "~18.3.0",
+    "react-hook-form": "*"
+  },
+  "peerDependenciesMeta": {
+    "@mittwald/react-use-promise": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    }
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "build:imports",
+          {
+            "projects": "@mittwald/flow-react-components",
+            "target": "build:docs-properties"
+          },
+          "^build"
+        ]
+      },
+      "dev": {
+        "dependsOn": [
+          "build:imports",
+          {
+            "projects": "@mittwald/flow-react-components",
+            "target": "build:docs-properties"
+          },
+          "^build"
+        ]
+      },
+      "build:docs-properties": {
+        "cache": true,
+        "inputs": [
+          "{projectRoot}/src/components/**/*"
+        ],
+        "outputs": [
+          "{projectRoot}/out"
+        ]
+      }
+    }
+  }
+}

packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss

@@ -0,0 +1,11 @@
+.contextMenu {
+  max-width: var(--user-menu--max-width);
+
+  section:first-of-type {
+    align-items: center;
+
+    .heading {
+      text-align: center;
+    }
+  }
+}