From 5a6fbd373b2d34bd5fb78413840769233da6a822 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Thu, 31 Oct 2024 15:18:40 +0100 Subject: [PATCH 01/11] feat: add mstudio components package --- .pnp.cjs | 201 +++++++++++++++++- package.json | 1 + packages/mstudio-components/.gitignore | 2 + .../mstudio-components/.storybook/main.ts | 43 ++++ .../mstudio-components/.storybook/manager.ts | 6 + .../.storybook/mittwaldTheme.ts | 10 + .../mstudio-components/.storybook/preview.tsx | 25 +++ packages/mstudio-components/README.md | 5 + .../dev/cssModuleClassNameGenerator.test.ts | 24 +++ .../dev/cssModuleClassNameGenerator.ts | 39 ++++ packages/mstudio-components/dev/dirname.cjs | 1 + packages/mstudio-components/dev/dirname.d.cts | 2 + .../dev/vitest/setupFiles.ts | 1 + .../dev/vitest/setupGlobal.ts | 3 + packages/mstudio-components/package.json | 141 ++++++++++++ .../components/UserMenu/UserMenu.module.scss | 3 + .../src/components/UserMenu/UserMenu.tsx | 13 ++ .../src/components/UserMenu/index.ts | 4 + .../UserMenu/stories/Default.stories.tsx | 30 +++ .../mstudio-components/src/styles/index.scss | 1 + .../mstudio-components/src/styles/index.ts | 3 + packages/mstudio-components/tsconfig.dev.json | 4 + packages/mstudio-components/tsconfig.json | 16 ++ packages/mstudio-components/types.d.ts | 12 ++ .../vite.build.config.base.ts | 62 ++++++ .../vite.build.config.css.ts | 5 + .../mstudio-components/vite.build.config.ts | 5 + packages/mstudio-components/vite.config.ts | 24 +++ packages/mstudio-components/vitest.config.ts | 22 ++ yarn.lock | 91 ++++++++ 30 files changed, 798 insertions(+), 1 deletion(-) create mode 100644 packages/mstudio-components/.gitignore create mode 100644 packages/mstudio-components/.storybook/main.ts create mode 100644 packages/mstudio-components/.storybook/manager.ts create mode 100644 packages/mstudio-components/.storybook/mittwaldTheme.ts create mode 100644 packages/mstudio-components/.storybook/preview.tsx create mode 100644 packages/mstudio-components/README.md create mode 100644 packages/mstudio-components/dev/cssModuleClassNameGenerator.test.ts create mode 100644 packages/mstudio-components/dev/cssModuleClassNameGenerator.ts create mode 100644 packages/mstudio-components/dev/dirname.cjs create mode 100644 packages/mstudio-components/dev/dirname.d.cts create mode 100644 packages/mstudio-components/dev/vitest/setupFiles.ts create mode 100644 packages/mstudio-components/dev/vitest/setupGlobal.ts create mode 100644 packages/mstudio-components/package.json create mode 100644 packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss create mode 100644 packages/mstudio-components/src/components/UserMenu/UserMenu.tsx create mode 100644 packages/mstudio-components/src/components/UserMenu/index.ts create mode 100644 packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx create mode 100644 packages/mstudio-components/src/styles/index.scss create mode 100644 packages/mstudio-components/src/styles/index.ts create mode 100644 packages/mstudio-components/tsconfig.dev.json create mode 100644 packages/mstudio-components/tsconfig.json create mode 100644 packages/mstudio-components/types.d.ts create mode 100644 packages/mstudio-components/vite.build.config.base.ts create mode 100644 packages/mstudio-components/vite.build.config.css.ts create mode 100644 packages/mstudio-components/vite.build.config.ts create mode 100644 packages/mstudio-components/vite.config.ts create mode 100644 packages/mstudio-components/vitest.config.ts diff --git a/.pnp.cjs b/.pnp.cjs index 818f6b496..e9e38e646 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -26,6 +26,10 @@ const RAW_RUNTIME_STATE = "name": "@mittwald/flow-documentation",\ "reference": "workspace:packages/docs"\ },\ + {\ + "name": "@mittwald/flow-mstudio-react-components",\ + "reference": "workspace:packages/mstudio-components"\ + },\ {\ "name": "@mittwald/react-tunnel",\ "reference": "workspace:packages/react-tunnel"\ @@ -40,8 +44,9 @@ const RAW_RUNTIME_STATE = "fallbackExclusionList": [\ ["@mittwald/flow-design-tokens", ["workspace:packages/design-tokens"]],\ ["@mittwald/flow-documentation", ["workspace:packages/docs"]],\ + ["@mittwald/flow-mstudio-react-components", ["workspace:packages/mstudio-components"]],\ ["@mittwald/flow-project", ["workspace:."]],\ - ["@mittwald/flow-react-components", ["virtual:c4e1b5de3c2221b63a822911bcf0be057e450c9772904486db938942efc684c035d907717e21ec2b40cde01712fe1164bb28cd81903edc8b86d34febd372a71c#workspace:packages/components", "virtual:f09e910c1b508d3d7569e5bd3d1b58e6c8eedf483d3ecb00a35f3e6fff907cff61fcf2c7acd90c04d26e337186c1afc7265f77161911bcd5beabe7070df91545#workspace:packages/components", "workspace:packages/components"]],\ + ["@mittwald/flow-react-components", ["virtual:53cd63bb5b6fe77009bbb72c413e944fd028b45ad5bb096a752ac9c7b84f876ef4d565a5a36d02cd63fe2f598be6e8c27184bab38ad7ccb8dd047c0b286fdfce#workspace:packages/components", "virtual:c4e1b5de3c2221b63a822911bcf0be057e450c9772904486db938942efc684c035d907717e21ec2b40cde01712fe1164bb28cd81903edc8b86d34febd372a71c#workspace:packages/components", "virtual:f09e910c1b508d3d7569e5bd3d1b58e6c8eedf483d3ecb00a35f3e6fff907cff61fcf2c7acd90c04d26e337186c1afc7265f77161911bcd5beabe7070df91545#workspace:packages/components", "workspace:packages/components"]],\ ["@mittwald/flow-stylesheet", ["workspace:packages/stylesheet"]],\ ["@mittwald/react-tunnel", ["virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#workspace:packages/react-tunnel", "workspace:packages/react-tunnel"]]\ ],\ @@ -4275,6 +4280,86 @@ const RAW_RUNTIME_STATE = "linkType": "SOFT"\ }]\ ]],\ + ["@mittwald/flow-mstudio-react-components", [\ + ["workspace:packages/mstudio-components", {\ + "packageLocation": "./packages/mstudio-components/",\ + "packageDependencies": [\ + ["@mittwald/flow-mstudio-react-components", "workspace:packages/mstudio-components"],\ + ["@mittwald/flow-design-tokens", "workspace:packages/design-tokens"],\ + ["@mittwald/flow-react-components", "virtual:53cd63bb5b6fe77009bbb72c413e944fd028b45ad5bb096a752ac9c7b84f876ef4d565a5a36d02cd63fe2f598be6e8c27184bab38ad7ccb8dd047c0b286fdfce#workspace:packages/components"],\ + ["@mittwald/react-tunnel", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#workspace:packages/react-tunnel"],\ + ["@mittwald/react-use-promise", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.5.0"],\ + ["@nx/storybook", "npm:20.0.0"],\ + ["@storybook/addon-a11y", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-actions", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-essentials", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-interactions", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-links", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/blocks", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/components", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/core-events", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/manager-api", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/preview-api", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/react-vite", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/test", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/theming", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@testing-library/dom", "npm:10.4.0"],\ + ["@testing-library/jest-dom", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:6.4.7"],\ + ["@testing-library/react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:16.0.1"],\ + ["@testing-library/user-event", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:14.5.2"],\ + ["@types/invariant", "npm:2.2.37"],\ + ["@types/node", "npm:22.7.5"],\ + ["@types/prettier", "npm:3.0.0"],\ + ["@types/prop-types", "npm:15.7.13"],\ + ["@types/react", "npm:18.3.11"],\ + ["@types/react-dom", "npm:18.3.0"],\ + ["@types/rollup", "npm:0.54.0"],\ + ["@vitejs/plugin-react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:4.3.2"],\ + ["@vitest/coverage-v8", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.1.2"],\ + ["clsx", "npm:2.1.1"],\ + ["decamelize", "npm:6.0.0"],\ + ["fs-jetpack", "npm:5.1.0"],\ + ["glob", "npm:10.4.5"],\ + ["happy-dom", "npm:15.7.4"],\ + ["html-react-parser", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:5.1.18"],\ + ["next", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:14.2.15"],\ + ["nx", "virtual:0f196ee022db0ef66dff42eeb9a201ea1a8aaaf1b346295bb86504146fb5e4442a0e1868781449daca06e09c92640d77d857bea488d43129e59692cf7ae1bee5#npm:20.0.0"],\ + ["object-code", "npm:1.3.3"],\ + ["postcss", "npm:8.4.47"],\ + ["postcss-nested-import", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:1.3.0"],\ + ["postcss-nesting", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:13.0.0"],\ + ["prettier", "npm:3.3.3"],\ + ["prop-types", "npm:15.8.1"],\ + ["react", "npm:18.3.1"],\ + ["react-children-utilities", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.10.0"],\ + ["react-docgen-typescript", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.2.2"],\ + ["react-dom", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:18.3.1"],\ + ["react-element-to-jsx-string", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:15.0.0"],\ + ["react-hook-form", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:7.53.0"],\ + ["react-stately", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.33.0"],\ + ["remeda", "npm:2.15.0"],\ + ["rimraf", "npm:6.0.1"],\ + ["rollup", "npm:4.24.0"],\ + ["sass", "npm:1.79.4"],\ + ["storybook", "npm:8.3.5"],\ + ["storybook-addon-rtl", "npm:1.0.1"],\ + ["tsx", "npm:4.19.1"],\ + ["typescript", "patch:typescript@npm%3A5.6.3#optional!builtin::version=5.6.3&hash=8c6c40"],\ + ["typescript-plugin-css-modules", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:5.1.0"],\ + ["use-callback-ref", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:1.3.2"],\ + ["vite", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:5.4.8"],\ + ["vite-plugin-banner", "npm:0.8.0"],\ + ["vite-plugin-checker", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:0.8.0"],\ + ["vite-plugin-dts", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:4.2.3"],\ + ["vite-plugin-externalize-deps", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:0.8.0"],\ + ["vitest", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.1.2"],\ + ["yaml", "npm:2.5.1"],\ + ["zod", "npm:3.23.8"]\ + ],\ + "linkType": "SOFT"\ + }]\ + ]],\ ["@mittwald/flow-project", [\ ["workspace:.", {\ "packageLocation": "./",\ @@ -4302,6 +4387,120 @@ const RAW_RUNTIME_STATE = }]\ ]],\ ["@mittwald/flow-react-components", [\ + ["virtual:53cd63bb5b6fe77009bbb72c413e944fd028b45ad5bb096a752ac9c7b84f876ef4d565a5a36d02cd63fe2f598be6e8c27184bab38ad7ccb8dd047c0b286fdfce#workspace:packages/components", {\ + "packageLocation": "./.yarn/__virtual__/@mittwald-flow-react-components-virtual-bd4fa3bb3c/1/packages/components/",\ + "packageDependencies": [\ + ["@mittwald/flow-react-components", "virtual:53cd63bb5b6fe77009bbb72c413e944fd028b45ad5bb096a752ac9c7b84f876ef4d565a5a36d02cd63fe2f598be6e8c27184bab38ad7ccb8dd047c0b286fdfce#workspace:packages/components"],\ + ["@chakra-ui/live-region", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.1.0"],\ + ["@faker-js/faker", "npm:9.0.3"],\ + ["@internationalized/date", "npm:3.5.6"],\ + ["@internationalized/string-compiler", "npm:3.2.5"],\ + ["@mittwald/flow-design-tokens", "workspace:packages/design-tokens"],\ + ["@mittwald/react-tunnel", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#workspace:packages/react-tunnel"],\ + ["@mittwald/react-use-promise", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.5.0"],\ + ["@nx/storybook", "npm:20.0.0"],\ + ["@react-aria/form", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.0.10"],\ + ["@react-aria/utils", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.25.3"],\ + ["@react-stately/form", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.0.6"],\ + ["@react-types/shared", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.25.0"],\ + ["@storybook/addon-a11y", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-actions", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-essentials", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-interactions", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/addon-links", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/blocks", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/components", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/core-events", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/manager-api", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/preview-api", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/react-vite", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/test", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@storybook/theming", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.3.5"],\ + ["@tabler/icons-react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.19.0"],\ + ["@tanstack/react-table", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:8.20.5"],\ + ["@testing-library/dom", "npm:10.4.0"],\ + ["@testing-library/jest-dom", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:6.4.7"],\ + ["@testing-library/react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:16.0.1"],\ + ["@testing-library/user-event", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:14.5.2"],\ + ["@types/invariant", "npm:2.2.37"],\ + ["@types/luxon", "npm:3.4.2"],\ + ["@types/mittwald__react-use-promise", null],\ + ["@types/next", null],\ + ["@types/node", "npm:22.7.5"],\ + ["@types/prettier", "npm:3.0.0"],\ + ["@types/prop-types", "npm:15.7.13"],\ + ["@types/react", "npm:18.3.11"],\ + ["@types/react-dom", "npm:18.3.0"],\ + ["@types/react-hook-form", null],\ + ["@types/react-syntax-highlighter", "npm:15.5.13"],\ + ["@types/rollup", "npm:0.54.0"],\ + ["@vitejs/plugin-react", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:4.3.2"],\ + ["@vitest/coverage-v8", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.1.2"],\ + ["clsx", "npm:2.1.1"],\ + ["copy-to-clipboard", "npm:3.3.3"],\ + ["decamelize", "npm:6.0.0"],\ + ["dot-prop", "npm:9.0.0"],\ + ["framer-motion", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:11.11.7"],\ + ["fs-jetpack", "npm:5.1.0"],\ + ["glob", "npm:10.4.5"],\ + ["happy-dom", "npm:15.7.4"],\ + ["html-react-parser", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:5.1.18"],\ + ["invariant", "npm:2.2.4"],\ + ["luxon", "npm:3.5.0"],\ + ["mobx", "npm:6.13.3"],\ + ["mobx-react-lite", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:4.0.7"],\ + ["next", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:14.2.15"],\ + ["nx", "virtual:0f196ee022db0ef66dff42eeb9a201ea1a8aaaf1b346295bb86504146fb5e4442a0e1868781449daca06e09c92640d77d857bea488d43129e59692cf7ae1bee5#npm:20.0.0"],\ + ["object-code", "npm:1.3.3"],\ + ["postcss", "npm:8.4.47"],\ + ["postcss-nested-import", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:1.3.0"],\ + ["postcss-nesting", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:13.0.0"],\ + ["prettier", "npm:3.3.3"],\ + ["prop-types", "npm:15.8.1"],\ + ["react", "npm:18.3.1"],\ + ["react-aria", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.35.0"],\ + ["react-aria-components", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:1.4.0"],\ + ["react-children-utilities", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.10.0"],\ + ["react-docgen-typescript", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.2.2"],\ + ["react-dom", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:18.3.1"],\ + ["react-element-to-jsx-string", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:15.0.0"],\ + ["react-hook-form", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:7.53.0"],\ + ["react-stately", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:3.33.0"],\ + ["react-syntax-highlighter", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:15.6.1"],\ + ["remeda", "npm:2.15.0"],\ + ["rimraf", "npm:6.0.1"],\ + ["rollup", "npm:4.24.0"],\ + ["sass", "npm:1.79.4"],\ + ["storybook", "npm:8.3.5"],\ + ["storybook-addon-rtl", "npm:1.0.1"],\ + ["tsx", "npm:4.19.1"],\ + ["typescript", "patch:typescript@npm%3A5.6.3#optional!builtin::version=5.6.3&hash=8c6c40"],\ + ["typescript-plugin-css-modules", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:5.1.0"],\ + ["use-callback-ref", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:1.3.2"],\ + ["vite", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:5.4.8"],\ + ["vite-plugin-banner", "npm:0.8.0"],\ + ["vite-plugin-checker", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:0.8.0"],\ + ["vite-plugin-dts", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:4.2.3"],\ + ["vite-plugin-externalize-deps", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:0.8.0"],\ + ["vitest", "virtual:ab0bf91802555465ebc7d7ba21ec0819758bb9ee11045ccd34f02a13730ce9f42ce681600fe46d0f4f24266bbd2a9c664d502c53968dc8e4b1c38c49b0728fef#npm:2.1.2"],\ + ["yaml", "npm:2.5.1"],\ + ["zod", "npm:3.23.8"]\ + ],\ + "packagePeers": [\ + "@mittwald/react-use-promise",\ + "@types/mittwald__react-use-promise",\ + "@types/next",\ + "@types/react-dom",\ + "@types/react-hook-form",\ + "@types/react",\ + "next",\ + "react-dom",\ + "react-hook-form",\ + "react"\ + ],\ + "linkType": "SOFT"\ + }],\ ["virtual:c4e1b5de3c2221b63a822911bcf0be057e450c9772904486db938942efc684c035d907717e21ec2b40cde01712fe1164bb28cd81903edc8b86d34febd372a71c#workspace:packages/components", {\ "packageLocation": "./.yarn/__virtual__/@mittwald-flow-react-components-virtual-a61e07d7ea/1/packages/components/",\ "packageDependencies": [\ diff --git a/package.json b/package.json index 78f9d0a2e..02e4f738b 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "docs": "nx run @mittwald/flow-documentation:\"$@\"", "format": "prettier --write '**/*.{ts,tsx,yaml,yml,json,md,mdx,js,cjs,mjs,css}'", "lint": "eslint .", + "mstudio-components": "nx run @mittwald/flow-mstudio-react-components:\"$@\"", "test": "run all test" }, "simple-git-hooks": { diff --git a/packages/mstudio-components/.gitignore b/packages/mstudio-components/.gitignore new file mode 100644 index 000000000..45ddca9fc --- /dev/null +++ b/packages/mstudio-components/.gitignore @@ -0,0 +1,2 @@ +.build/ +/dev/.cache/ diff --git a/packages/mstudio-components/.storybook/main.ts b/packages/mstudio-components/.storybook/main.ts new file mode 100644 index 000000000..5553ace08 --- /dev/null +++ b/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(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; diff --git a/packages/mstudio-components/.storybook/manager.ts b/packages/mstudio-components/.storybook/manager.ts new file mode 100644 index 000000000..321225644 --- /dev/null +++ b/packages/mstudio-components/.storybook/manager.ts @@ -0,0 +1,6 @@ +import { addons } from "@storybook/manager-api"; +import mittwaldTheme from "./mittwaldTheme"; + +addons.setConfig({ + theme: mittwaldTheme, +}); diff --git a/packages/mstudio-components/.storybook/mittwaldTheme.ts b/packages/mstudio-components/.storybook/mittwaldTheme.ts new file mode 100644 index 000000000..a6e55452e --- /dev/null +++ b/packages/mstudio-components/.storybook/mittwaldTheme.ts @@ -0,0 +1,10 @@ +import { create } from "@storybook/theming/create"; + +export default create({ + base: "light", + brandTitle: "Flow - mStudio Components", + brandUrl: "https://mittwald.de", + brandImage: + "https://raw.githubusercontent.com/mittwald/flow-previews/main/assets/mittwald_logo_white.svg", + brandTarget: "_self", +}); diff --git a/packages/mstudio-components/.storybook/preview.tsx b/packages/mstudio-components/.storybook/preview.tsx new file mode 100644 index 000000000..a578b8269 --- /dev/null +++ b/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 ; + }, + ], + globalTypes: { + rtlDirection: {}, + }, + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/mstudio-components/README.md b/packages/mstudio-components/README.md new file mode 100644 index 000000000..fc90a3cd9 --- /dev/null +++ b/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. diff --git a/packages/mstudio-components/dev/cssModuleClassNameGenerator.test.ts b/packages/mstudio-components/dev/cssModuleClassNameGenerator.test.ts new file mode 100644 index 000000000..e20e55f36 --- /dev/null +++ b/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); + }, +); diff --git a/packages/mstudio-components/dev/cssModuleClassNameGenerator.ts b/packages/mstudio-components/dev/cssModuleClassNameGenerator.ts new file mode 100644 index 000000000..4c1658819 --- /dev/null +++ b/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; +}; diff --git a/packages/mstudio-components/dev/dirname.cjs b/packages/mstudio-components/dev/dirname.cjs new file mode 100644 index 000000000..5092b4dd8 --- /dev/null +++ b/packages/mstudio-components/dev/dirname.cjs @@ -0,0 +1 @@ +module.exports = __dirname; diff --git a/packages/mstudio-components/dev/dirname.d.cts b/packages/mstudio-components/dev/dirname.d.cts new file mode 100644 index 000000000..ae80ecad1 --- /dev/null +++ b/packages/mstudio-components/dev/dirname.d.cts @@ -0,0 +1,2 @@ +declare const _default: string; +export default _default; diff --git a/packages/mstudio-components/dev/vitest/setupFiles.ts b/packages/mstudio-components/dev/vitest/setupFiles.ts new file mode 100644 index 000000000..f149f27ae --- /dev/null +++ b/packages/mstudio-components/dev/vitest/setupFiles.ts @@ -0,0 +1 @@ +import "@testing-library/jest-dom/vitest"; diff --git a/packages/mstudio-components/dev/vitest/setupGlobal.ts b/packages/mstudio-components/dev/vitest/setupGlobal.ts new file mode 100644 index 000000000..4a85f7b44 --- /dev/null +++ b/packages/mstudio-components/dev/vitest/setupGlobal.ts @@ -0,0 +1,3 @@ +export const setup = () => { + process.env.LC_ALL = "de.DE"; +}; diff --git a/packages/mstudio-components/package.json b/packages/mstudio-components/package.json new file mode 100644 index 000000000..9daa035ff --- /dev/null +++ b/packages/mstudio-components/package.json @@ -0,0 +1,141 @@ +{ + "name": "@mittwald/flow-mstudio-react-components", + "version": "0.1.0-alpha.316", + "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:docs-properties": { + "cache": true, + "inputs": [ + "{projectRoot}/src/components/**/*" + ], + "outputs": [ + "{projectRoot}/out" + ] + } + } + } +} diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss new file mode 100644 index 000000000..6446ebfd4 --- /dev/null +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss @@ -0,0 +1,3 @@ +.test { + color: red; +} diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx new file mode 100644 index 000000000..0837c045f --- /dev/null +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx @@ -0,0 +1,13 @@ +import type { FC, PropsWithChildren } from "react"; +import React from "react"; +import { ContextMenu } from "@mittwald/flow-react-components/ContextMenu"; + +export type UserMenuProps = PropsWithChildren; + +export const UserMenu: FC = (props) => { + const { children } = props; + + return {children}; +}; + +export default UserMenu; diff --git a/packages/mstudio-components/src/components/UserMenu/index.ts b/packages/mstudio-components/src/components/UserMenu/index.ts new file mode 100644 index 000000000..05febf6b7 --- /dev/null +++ b/packages/mstudio-components/src/components/UserMenu/index.ts @@ -0,0 +1,4 @@ +import { UserMenu } from "./UserMenu"; + +export { type UserMenuProps, UserMenu } from "./UserMenu"; +export default UserMenu; diff --git a/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx b/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx new file mode 100644 index 000000000..b7202191f --- /dev/null +++ b/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import UserMenu from "@/components/UserMenu"; +import { MenuItem } from "@mittwald/flow-react-components/MenuItem"; +import { Avatar } from "@mittwald/flow-react-components/Avatar"; +import { Initials } from "@mittwald/flow-react-components/Initials"; +import { ContextMenuTrigger } from "@mittwald/flow-react-components/ContextMenu"; +import { Button } from "@mittwald/flow-react-components/Button"; + +const meta: Meta = { + title: "UserMenu", + component: UserMenu, + render: (props) => ( + + + + + + MaxMustermann + + + + + ), +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/mstudio-components/src/styles/index.scss b/packages/mstudio-components/src/styles/index.scss new file mode 100644 index 000000000..0c89c49bc --- /dev/null +++ b/packages/mstudio-components/src/styles/index.scss @@ -0,0 +1 @@ +@forward "@mittwald/flow-react-components/all.css"; diff --git a/packages/mstudio-components/src/styles/index.ts b/packages/mstudio-components/src/styles/index.ts new file mode 100644 index 000000000..b24a6d038 --- /dev/null +++ b/packages/mstudio-components/src/styles/index.ts @@ -0,0 +1,3 @@ +import "./index.scss"; + +export default {}; diff --git a/packages/mstudio-components/tsconfig.dev.json b/packages/mstudio-components/tsconfig.dev.json new file mode 100644 index 000000000..4e64e8b36 --- /dev/null +++ b/packages/mstudio-components/tsconfig.dev.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "include": ["dev/**/*.ts"] +} diff --git a/packages/mstudio-components/tsconfig.json b/packages/mstudio-components/tsconfig.json new file mode 100644 index 000000000..2db89751a --- /dev/null +++ b/packages/mstudio-components/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "jsx": "react", + "module": "ESNext", + "moduleResolution": "Bundler", + "paths": { + "@/*": ["src/*"] + }, + "plugins": [{ "name": "typescript-plugin-css-modules" }], + "types": ["vitest/globals", "@testing-library/jest-dom", "./types.d.ts"] + }, + "exclude": ["node_modules", "dist"], + "extends": "../../tsconfig.json", + "include": ["**/*.ts", "**/*.tsx", "./dev/vitest/setupFiles.ts"] +} diff --git a/packages/mstudio-components/types.d.ts b/packages/mstudio-components/types.d.ts new file mode 100644 index 000000000..11c3d9e4c --- /dev/null +++ b/packages/mstudio-components/types.d.ts @@ -0,0 +1,12 @@ +/// + +declare module "*.module.css" { + const classes: Record; + export default classes; +} + +declare module "*.locale.json" { + import type { LocalizedStrings } from "react-aria"; + const langFile: LocalizedStrings; + export default langFile; +} diff --git a/packages/mstudio-components/vite.build.config.base.ts b/packages/mstudio-components/vite.build.config.base.ts new file mode 100644 index 000000000..8f060a57a --- /dev/null +++ b/packages/mstudio-components/vite.build.config.base.ts @@ -0,0 +1,62 @@ +import type { LibraryOptions, PluginOption } from "vite"; +import { defineConfig, mergeConfig } from "vite"; +import banner from "vite-plugin-banner"; +import dts from "vite-plugin-dts"; +import baseConfig from "./vite.config"; +import { externalizeDeps } from "vite-plugin-externalize-deps"; + +interface Options { + mode: "cssChunks" | "default"; +} + +export const buildConfig = (opts: Options) => { + const { mode } = opts; + const outDir = mode === "cssChunks" ? "dist/css" : "dist/js"; + + const plugins: PluginOption[] = + mode === "cssChunks" + ? [] + : [ + banner((filename) => + filename.endsWith(".js") ? '"use client"\r\n/* */' : "", + ), + externalizeDeps(), + dts({ + include: ["src"], + outDir: "dist/js/types", + }), + ]; + + const cssCodeSplit = mode === "cssChunks"; + + const entryPoints: LibraryOptions["entry"] = { + UserMenu: "./src/components/UserMenu/index.ts", + }; + + return defineConfig( + mergeConfig(baseConfig, { + plugins, + build: { + outDir, + cssCodeSplit, + lib: { + entry: entryPoints, + formats: ["es"], + }, + rollupOptions: { + output: { + assetFileNames: (assetInfo: { name: string }) => { + if (assetInfo.name === "style.css") { + return "all.css"; + } + if (assetInfo.name === "globals.css") { + return "globals.css"; + } + return assetInfo.name; + }, + }, + }, + }, + }), + ); +}; diff --git a/packages/mstudio-components/vite.build.config.css.ts b/packages/mstudio-components/vite.build.config.css.ts new file mode 100644 index 000000000..9fed661ff --- /dev/null +++ b/packages/mstudio-components/vite.build.config.css.ts @@ -0,0 +1,5 @@ +import { buildConfig } from "./vite.build.config.base"; + +export default buildConfig({ + mode: "cssChunks", +}); diff --git a/packages/mstudio-components/vite.build.config.ts b/packages/mstudio-components/vite.build.config.ts new file mode 100644 index 000000000..5cfd6b1cb --- /dev/null +++ b/packages/mstudio-components/vite.build.config.ts @@ -0,0 +1,5 @@ +import { buildConfig } from "./vite.build.config.base"; + +export default buildConfig({ + mode: "default", +}); diff --git a/packages/mstudio-components/vite.config.ts b/packages/mstudio-components/vite.config.ts new file mode 100644 index 000000000..28d709d32 --- /dev/null +++ b/packages/mstudio-components/vite.config.ts @@ -0,0 +1,24 @@ +import { defineConfig } from "vite"; +import postcssNesting from "postcss-nesting"; +import { cssModuleClassNameGenerator } from "./dev/cssModuleClassNameGenerator"; +import path from "path"; + +export default defineConfig({ + assetsInclude: ["/sb-preview/runtime.js"], + resolve: { + alias: [ + { + find: /@\//, + replacement: path.resolve(__dirname) + "/src/", + }, + ], + }, + css: { + postcss: { + plugins: [postcssNesting], + }, + modules: { + generateScopedName: cssModuleClassNameGenerator, + }, + }, +}); diff --git a/packages/mstudio-components/vitest.config.ts b/packages/mstudio-components/vitest.config.ts new file mode 100644 index 000000000..97f820684 --- /dev/null +++ b/packages/mstudio-components/vitest.config.ts @@ -0,0 +1,22 @@ +import defaultConfig from "./vite.config"; +import { mergeConfig } from "vite"; +import { defineConfig } from "vitest/config"; + +export default mergeConfig( + defaultConfig, + defineConfig({ + test: { + globals: true, + globalSetup: "./dev/vitest/setupGlobal.ts", + setupFiles: "./dev/vitest/setupFiles.ts", + environmentMatchGlobs: [ + ["dev/**", "node"], + ["src/**", "happy-dom"], + ], + coverage: { + reporter: ["json-summary", "json"], + reportOnFailure: true, + }, + }, + }), +); diff --git a/yarn.lock b/yarn.lock index 384dccb21..a5f96bc72 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2836,6 +2836,97 @@ __metadata: languageName: unknown linkType: soft +"@mittwald/flow-mstudio-react-components@workspace:packages/mstudio-components": + version: 0.0.0-use.local + resolution: "@mittwald/flow-mstudio-react-components@workspace:packages/mstudio-components" + dependencies: + "@mittwald/flow-design-tokens": "workspace:^" + "@mittwald/flow-react-components": "workspace:^" + "@mittwald/react-tunnel": "workspace:^" + "@mittwald/react-use-promise": "npm:^2.5.0" + "@nx/storybook": "npm:^20.0.0" + "@storybook/addon-a11y": "npm:^8.3.5" + "@storybook/addon-actions": "npm:^8.3.5" + "@storybook/addon-essentials": "npm:^8.3.5" + "@storybook/addon-interactions": "npm:^8.3.5" + "@storybook/addon-links": "npm:^8.3.5" + "@storybook/blocks": "npm:^8.3.5" + "@storybook/components": "npm:^8.3.5" + "@storybook/core-events": "npm:^8.3.5" + "@storybook/manager-api": "npm:^8.3.5" + "@storybook/preview-api": "npm:^8.3.5" + "@storybook/react": "npm:^8.3.5" + "@storybook/react-vite": "npm:^8.3.5" + "@storybook/test": "npm:^8.3.5" + "@storybook/theming": "npm:^8.3.5" + "@testing-library/dom": "npm:^10.4.0" + "@testing-library/jest-dom": "npm:6.4.7" + "@testing-library/react": "npm:~16.0.1" + "@testing-library/user-event": "npm:^14.5.2" + "@types/invariant": "npm:^2.2.37" + "@types/node": "npm:22.7.5" + "@types/prettier": "npm:^3.0.0" + "@types/prop-types": "npm:^15.7.13" + "@types/react": "npm:^18.3.11" + "@types/react-dom": "npm:^18.3.0" + "@types/rollup": "npm:^0.54.0" + "@vitejs/plugin-react": "npm:^4.3.2" + "@vitest/coverage-v8": "npm:~2.1.2" + clsx: "npm:^2.1.1" + decamelize: "npm:^6.0.0" + fs-jetpack: "npm:^5.1.0" + glob: "npm:^10.4.1" + happy-dom: "npm:^15.7.4" + html-react-parser: "npm:^5.1.18" + next: "npm:^14.2.15" + nx: "npm:^20.0.0" + object-code: "npm:^1.3.3" + postcss: "npm:^8.4.47" + postcss-nested-import: "npm:^1.3.0" + postcss-nesting: "npm:^13.0.0" + prettier: "npm:^3.3.3" + prop-types: "npm:^15.8.1" + react: "npm:^18.3.1" + react-children-utilities: "npm:^2.10.0" + react-docgen-typescript: "npm:^2.2.2" + react-dom: "npm:^18.3.1" + react-element-to-jsx-string: "npm:^15.0.0" + react-hook-form: "npm:^7.53.0" + react-stately: "npm:^3.33.0" + remeda: "npm:^2.15.0" + rimraf: "npm:^6.0.1" + rollup: "npm:~4.24.0" + sass: "npm:^1.79.4" + storybook: "npm:^8.3.5" + storybook-addon-rtl: "npm:^1.0.1" + tsx: "npm:^4.19.1" + typescript: "npm:^5.6.3" + typescript-plugin-css-modules: "npm:^5.1.0" + use-callback-ref: "npm:^1.3.2" + vite: "npm:^5.4.8" + vite-plugin-banner: "npm:^0.8.0" + vite-plugin-checker: "npm:^0.8.0" + vite-plugin-dts: "npm:^4.2.3" + vite-plugin-externalize-deps: "npm:^0.8.0" + vitest: "npm:~2.1.2" + yaml: "npm:^2.5.1" + zod: "npm:^3.23.8" + 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 + languageName: unknown + linkType: soft + "@mittwald/flow-project@workspace:.": version: 0.0.0-use.local resolution: "@mittwald/flow-project@workspace:." From fe29fae1f1c4d3748dd5e47c10a5a6faad474288 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 4 Nov 2024 08:53:15 +0100 Subject: [PATCH 02/11] feat: add user menu component --- packages/components/package.json | 3 ++ .../.storybook/mittwaldTheme.ts | 2 +- .../components/UserMenu/UserMenu.module.scss | 15 +++++- .../src/components/UserMenu/UserMenu.tsx | 19 ++++++- .../UserMenu/stories/Default.stories.tsx | 32 +++++++++-- .../UserMenu/stories/EdgeCases.stories.tsx | 54 +++++++++++++++++++ 6 files changed, 116 insertions(+), 9 deletions(-) create mode 100644 packages/mstudio-components/src/components/UserMenu/stories/EdgeCases.stories.tsx diff --git a/packages/components/package.json b/packages/components/package.json index 8f0215d12..ae55d3adb 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -257,6 +257,9 @@ "types": "./dist/js/types/lib/propsContext/PropsContextProvider.d.ts", "import": "./dist/js/PropsContextProvider.js" }, + "./PropsContext": { + "types": "./dist/js/types/lib/propsContext/types.d.ts" + }, "./RadioGroup/styles.css": "./dist/css/RadioGroup.css", "./RadioGroup": { "types": "./dist/js/types/components/RadioGroup/index.d.ts", diff --git a/packages/mstudio-components/.storybook/mittwaldTheme.ts b/packages/mstudio-components/.storybook/mittwaldTheme.ts index a6e55452e..2c2a09f34 100644 --- a/packages/mstudio-components/.storybook/mittwaldTheme.ts +++ b/packages/mstudio-components/.storybook/mittwaldTheme.ts @@ -1,7 +1,7 @@ import { create } from "@storybook/theming/create"; export default create({ - base: "light", + base: "dark", brandTitle: "Flow - mStudio Components", brandUrl: "https://mittwald.de", brandImage: diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss index 6446ebfd4..6dc96ee8c 100644 --- a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss @@ -1,3 +1,14 @@ -.test { - color: red; +.contextMenu { + max-width: 300px; +} + +.menuItem { + &:has(.avatar) { + justify-content: center; + } +} + +.heading { + text-align: center; + justify-self: center; } diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx index 0837c045f..ccd2328b3 100644 --- a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx @@ -1,13 +1,30 @@ import type { FC, PropsWithChildren } from "react"; import React from "react"; import { ContextMenu } from "@mittwald/flow-react-components/ContextMenu"; +import type { PropsContext } from "@mittwald/flow-react-components/PropsContext"; +import PropsContextProvider from "@mittwald/flow-react-components/PropsContextProvider"; +import styles from "./UserMenu.module.scss"; export type UserMenuProps = PropsWithChildren; export const UserMenu: FC = (props) => { const { children } = props; - return {children}; + const propsContext: PropsContext = { + ContextMenu: { + MenuItem: { + className: styles.menuItem, + Avatar: { size: "l", className: styles.avatar }, + }, + Heading: { level: 4, className: styles.heading }, + }, + }; + + return ( + + {children} + + ); }; export default UserMenu; diff --git a/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx b/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx index b7202191f..cbd9b56dc 100644 --- a/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx +++ b/packages/mstudio-components/src/components/UserMenu/stories/Default.stories.tsx @@ -6,6 +6,14 @@ import { Avatar } from "@mittwald/flow-react-components/Avatar"; import { Initials } from "@mittwald/flow-react-components/Initials"; import { ContextMenuTrigger } from "@mittwald/flow-react-components/ContextMenu"; import { Button } from "@mittwald/flow-react-components/Button"; +import { Text } from "@mittwald/flow-react-components/Text"; +import { Section } from "@mittwald/flow-react-components/Section"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Separator } from "@mittwald/flow-react-components/Separator"; +import { + IconLogout, + IconSettings, +} from "@mittwald/flow-react-components/Icons"; const meta: Meta = { title: "UserMenu", @@ -14,11 +22,25 @@ const meta: Meta = { - - - MaxMustermann - - +
+ + + Max Mustermann + + + Max Mustermann +
+ +
+ + + Profilverwaltung + + + + Logout + +
), diff --git a/packages/mstudio-components/src/components/UserMenu/stories/EdgeCases.stories.tsx b/packages/mstudio-components/src/components/UserMenu/stories/EdgeCases.stories.tsx new file mode 100644 index 000000000..a0b5b062e --- /dev/null +++ b/packages/mstudio-components/src/components/UserMenu/stories/EdgeCases.stories.tsx @@ -0,0 +1,54 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import defaultMeta from "./Default.stories"; +import { UserMenu } from "@/components/UserMenu"; +import { Section } from "@mittwald/flow-react-components/Section"; +import Avatar from "@mittwald/flow-react-components/Avatar"; +import { Initials } from "@mittwald/flow-react-components/Initials"; +import { Heading } from "@mittwald/flow-react-components/Heading"; +import { Separator } from "@mittwald/flow-react-components/Separator"; +import { Text } from "@mittwald/flow-react-components/Text"; +import { + IconLogout, + IconSettings, +} from "@mittwald/flow-react-components/Icons"; +import { MenuItem } from "@mittwald/flow-react-components/MenuItem"; +import { ContextMenuTrigger } from "@mittwald/flow-react-components/ContextMenu"; +import { Button } from "@mittwald/flow-react-components/Button"; + +const meta: Meta = { + ...defaultMeta, + title: "UserMenu/Edge Cases", +}; +export default meta; + +type Story = StoryObj; + +export const LongUserName: Story = { + render: (props) => ( + + + +
+ + + Max Mustermann + + + Max Martin Marco Martina Marta Mathilda Mustermann +
+ +
+ + + Profilverwaltung + + + + Logout + +
+ + + ), +}; From 8a2845fba7f7411592fc7e86e5636876fb7ce4a1 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 4 Nov 2024 08:59:59 +0100 Subject: [PATCH 03/11] feat: add user menu component --- packages/components/package.json | 3 +++ .../src/components/UserMenu/UserMenu.tsx | 10 +++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index ae55d3adb..cdd473433 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -260,6 +260,9 @@ "./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", diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx index ccd2328b3..6133f073e 100644 --- a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx @@ -4,11 +4,15 @@ import { ContextMenu } from "@mittwald/flow-react-components/ContextMenu"; import type { PropsContext } from "@mittwald/flow-react-components/PropsContext"; import PropsContextProvider from "@mittwald/flow-react-components/PropsContextProvider"; import styles from "./UserMenu.module.scss"; +import type { PropsWithClassName } from "@mittwald/flow-react-components/props"; +import clsx from "clsx"; -export type UserMenuProps = PropsWithChildren; +export type UserMenuProps = PropsWithChildren & PropsWithClassName; export const UserMenu: FC = (props) => { - const { children } = props; + const { children, className } = props; + + const rootClassName = clsx(styles.contextMenu, className); const propsContext: PropsContext = { ContextMenu: { @@ -22,7 +26,7 @@ export const UserMenu: FC = (props) => { return ( - {children} + {children} ); }; From 1e6615e6da3796300ada68f3a3d3dc79868a3370 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 5 Nov 2024 07:37:32 +0100 Subject: [PATCH 04/11] chore: merge main --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 79d93f785..2fef7c6c4 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,11 @@ "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}'", "lint": "eslint .", - "mstudio-components": "nx run @mittwald/flow-mstudio-react-components:\"$@\"", "test": "run all test" }, "simple-git-hooks": { From b0151fd2dfff9a214da1f3d9fc413b917256dc1f Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 5 Nov 2024 07:46:48 +0100 Subject: [PATCH 05/11] chore: fix dependencies --- packages/mstudio-components/package.json | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/mstudio-components/package.json b/packages/mstudio-components/package.json index 9daa035ff..70ab49906 100644 --- a/packages/mstudio-components/package.json +++ b/packages/mstudio-components/package.json @@ -127,6 +127,26 @@ }, "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": [ From 3fcd87d42cef63dd954ecc4ceccd927892f7a7ae Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 5 Nov 2024 07:58:08 +0100 Subject: [PATCH 06/11] chore: add storybook preview --- .../publish-review-mstudio-storybook.yml | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 .github/workflows/publish-review-mstudio-storybook.yml diff --git a/.github/workflows/publish-review-mstudio-storybook.yml b/.github/workflows/publish-review-mstudio-storybook.yml new file mode 100644 index 000000000..15d3e5e63 --- /dev/null +++ b/.github/workflows/publish-review-mstudio-storybook.yml @@ -0,0 +1,73 @@ +name: Publish preview Storybook to GitHub Pages + +on: + push: + branches-ignore: + - main + +permissions: + contents: read + +env: + TARGET_PATH: "/mstudio/storybook/${{ github.ref_name }}" + BASE_PATH: "/flow-previews/mstudio/storybook/${{ github.ref_name }}" + +jobs: + deploy: + runs-on: ubuntu-latest + + environment: + name: github-pages-preview-mstudio-storybook + url: https://mittwald.github.io${{ env.BASE_PATH }} + + env: + PUBLISH_PAT: ${{ secrets.PUBLISH_PAT }} + GH_TOKEN: ${{ secrets.PUBLISH_PAT }} + + steps: + - name: Checkout ⬇️ + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node 🎛️ + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: "yarn" + registry-url: "https://registry.npmjs.org" + + - name: Git Identity 🪪 + run: | + git config user.name "${{ github.actor }}" + git config user.email "${{ github.actor }}@users.noreply.github.com" + + - name: Install Dependencies 📦️ + run: yarn install --immutable + + - name: Setup NX 1/2 🎛️ + uses: nrwl/nx-set-shas@v4 + + - name: Setup NX 2/2 🎛 + if: github.ref != 'refs/heads/main' + run: git branch --track main origin/main + + - name: Build 🔨 + run: yarn build --exclude @mittwald/flow-documentation + + - name: Build Storybook 🔨 + run: yarn components build:storybook + + - name: Upload files to GitHub Pages 🚀 + uses: maaaathis/github-action-push-to-another-repository@main + env: + API_TOKEN_GITHUB: ${{ secrets.PUBLISH_PAT }} + with: + source-directory: packages/components/storybook-static + destination-github-username: mittwald + destination-repository-name: flow-previews + target-branch: main + target-directory: "${{ env.TARGET_PATH }}" + + - name: Output the URL + run: echo "${{ job.environment.url }}" From 788349c20aeec2d407687929debbc97c799be15c Mon Sep 17 00:00:00 2001 From: lmeyer Date: Tue, 5 Nov 2024 08:12:44 +0100 Subject: [PATCH 07/11] chore: remove storybook preview --- .../publish-review-mstudio-storybook.yml | 73 ------------------- 1 file changed, 73 deletions(-) delete mode 100644 .github/workflows/publish-review-mstudio-storybook.yml diff --git a/.github/workflows/publish-review-mstudio-storybook.yml b/.github/workflows/publish-review-mstudio-storybook.yml deleted file mode 100644 index 15d3e5e63..000000000 --- a/.github/workflows/publish-review-mstudio-storybook.yml +++ /dev/null @@ -1,73 +0,0 @@ -name: Publish preview Storybook to GitHub Pages - -on: - push: - branches-ignore: - - main - -permissions: - contents: read - -env: - TARGET_PATH: "/mstudio/storybook/${{ github.ref_name }}" - BASE_PATH: "/flow-previews/mstudio/storybook/${{ github.ref_name }}" - -jobs: - deploy: - runs-on: ubuntu-latest - - environment: - name: github-pages-preview-mstudio-storybook - url: https://mittwald.github.io${{ env.BASE_PATH }} - - env: - PUBLISH_PAT: ${{ secrets.PUBLISH_PAT }} - GH_TOKEN: ${{ secrets.PUBLISH_PAT }} - - steps: - - name: Checkout ⬇️ - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - - name: Setup Node 🎛️ - uses: actions/setup-node@v4 - with: - node-version: 20 - cache: "yarn" - registry-url: "https://registry.npmjs.org" - - - name: Git Identity 🪪 - run: | - git config user.name "${{ github.actor }}" - git config user.email "${{ github.actor }}@users.noreply.github.com" - - - name: Install Dependencies 📦️ - run: yarn install --immutable - - - name: Setup NX 1/2 🎛️ - uses: nrwl/nx-set-shas@v4 - - - name: Setup NX 2/2 🎛 - if: github.ref != 'refs/heads/main' - run: git branch --track main origin/main - - - name: Build 🔨 - run: yarn build --exclude @mittwald/flow-documentation - - - name: Build Storybook 🔨 - run: yarn components build:storybook - - - name: Upload files to GitHub Pages 🚀 - uses: maaaathis/github-action-push-to-another-repository@main - env: - API_TOKEN_GITHUB: ${{ secrets.PUBLISH_PAT }} - with: - source-directory: packages/components/storybook-static - destination-github-username: mittwald - destination-repository-name: flow-previews - target-branch: main - target-directory: "${{ env.TARGET_PATH }}" - - - name: Output the URL - run: echo "${{ job.environment.url }}" From f008b1a6d5dcfe720a51836d4560da558788b7c7 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 11 Nov 2024 07:13:31 +0100 Subject: [PATCH 08/11] chore: update package json --- packages/mstudio-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mstudio-components/package.json b/packages/mstudio-components/package.json index 70ab49906..d879e9b8e 100644 --- a/packages/mstudio-components/package.json +++ b/packages/mstudio-components/package.json @@ -1,6 +1,6 @@ { "name": "@mittwald/flow-mstudio-react-components", - "version": "0.1.0-alpha.316", + "version": "0.1.0-alpha", "type": "module", "description": "Flow components for mStudio development", "homepage": "https://mittwald.github.io/flow", From 52fce99481d694dbc5f1973bfaf3c22507f3bed7 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 11 Nov 2024 10:33:37 +0100 Subject: [PATCH 09/11] feat(UserMenu): add user menu --- .../src/components/UserMenu/UserMenu.module.scss | 15 ++++++--------- .../src/components/UserMenu/UserMenu.tsx | 2 +- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss index 6dc96ee8c..db3f1b503 100644 --- a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss @@ -1,14 +1,11 @@ .contextMenu { max-width: 300px; -} -.menuItem { - &:has(.avatar) { - justify-content: center; - } -} + section:first-of-type { + align-items: center; -.heading { - text-align: center; - justify-self: center; + .heading { + text-align: center; + } + } } diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx index 6133f073e..4b21bcc1a 100644 --- a/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.tsx @@ -18,7 +18,7 @@ export const UserMenu: FC = (props) => { ContextMenu: { MenuItem: { className: styles.menuItem, - Avatar: { size: "l", className: styles.avatar }, + Avatar: { size: "l" }, }, Heading: { level: 4, className: styles.heading }, }, From 024b6d3f0f50d01dce80e6801736f423bc0b6448 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 11 Nov 2024 10:35:43 +0100 Subject: [PATCH 10/11] feat(UserMenu): add user menu --- packages/mstudio-components/types.d.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/mstudio-components/types.d.ts b/packages/mstudio-components/types.d.ts index 11c3d9e4c..cb4800b9e 100644 --- a/packages/mstudio-components/types.d.ts +++ b/packages/mstudio-components/types.d.ts @@ -4,9 +4,3 @@ declare module "*.module.css" { const classes: Record; export default classes; } - -declare module "*.locale.json" { - import type { LocalizedStrings } from "react-aria"; - const langFile: LocalizedStrings; - export default langFile; -} From 52bf4fd443c87699f7eb300e3d324edc4ba63325 Mon Sep 17 00:00:00 2001 From: lmeyer Date: Mon, 11 Nov 2024 11:39:43 +0100 Subject: [PATCH 11/11] feat(UserMenu): add tokens --- packages/design-tokens/src/mStudio/user-menu.yml | 3 +++ .../src/components/UserMenu/UserMenu.module.scss | 2 +- packages/mstudio-components/src/styles/index.scss | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 packages/design-tokens/src/mStudio/user-menu.yml diff --git a/packages/design-tokens/src/mStudio/user-menu.yml b/packages/design-tokens/src/mStudio/user-menu.yml new file mode 100644 index 000000000..56b93db6d --- /dev/null +++ b/packages/design-tokens/src/mStudio/user-menu.yml @@ -0,0 +1,3 @@ +user-menu: + max-width: + value: "300px" diff --git a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss index db3f1b503..dbe705fb3 100644 --- a/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss +++ b/packages/mstudio-components/src/components/UserMenu/UserMenu.module.scss @@ -1,5 +1,5 @@ .contextMenu { - max-width: 300px; + max-width: var(--user-menu--max-width); section:first-of-type { align-items: center; diff --git a/packages/mstudio-components/src/styles/index.scss b/packages/mstudio-components/src/styles/index.scss index 0c89c49bc..0df88f682 100644 --- a/packages/mstudio-components/src/styles/index.scss +++ b/packages/mstudio-components/src/styles/index.scss @@ -1 +1,2 @@ @forward "@mittwald/flow-react-components/all.css"; +@forward "@mittwald/flow-design-tokens/css";