Merge remote-tracking branch 'origin/main' into feature/tooltip

lerna.json

@@ -2,5 +2,5 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "0.0.0"
+  "version": "0.1.0"
 }

package.json

@@ -29,16 +29,16 @@
   "devDependencies": {
     "@eslint/js": "^8.56.0",
     "@types/eslint__js": "^8.42.3",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "lerna": "^8.0.2",
     "nx": "^17.2.8",
-    "prettier": "^3.2.2",
+    "prettier": "^3.2.4",
     "prettier-plugin-jsdoc": "^1.3.0",
     "prettier-plugin-pkgsort": "^0.2.1",
     "prettier-plugin-sort-json": "^3.1.0",

packages/components/dev/cssModuleClassNameGenerator.test.ts

@@ -1,3 +1,4 @@
+import { test } from "@jest/globals";
 import { cssModuleClassNameGenerator } from "./cssModuleClassNameGenerator";
 
 test.each([
@@ -8,6 +9,13 @@ test.each([
       expected: "foo",
     },
   ],
+  [
+    {
+      filename: "src/foo/styles.modules.scss",
+      className: "foo",
+      expected: "foo",
+    },
+  ],
   [
     {
       filename: "src/components/Slider/styles.css",
@@ -18,29 +26,36 @@ test.each([
   [
     {
       filename: "src/components/Slider/styles.module.css",
-      className: "root",
-      expected: "flow-slider",
+      className: "slider",
+      expected: "flow--slider",
+    },
+  ],
+  [
+    {
+      filename: "src/components/AdvancedSlider/styles.module.css",
+      className: "advanced-slider",
+      expected: "flow--advanced-slider",
     },
   ],
   [
     {
       filename: "src/components/Slider/styles.module.css",
       className: "thumb",
-      expected: "flow-slider-thumb",
+      expected: "flow--slider--thumb",
     },
   ],
   [
     {
       filename: "src/components/Slider/components/Thumb/styles.module.css",
-      className: "root",
-      expected: "flow-slider-thumb",
+      className: "thumb",
+      expected: "flow--slider--thumb",
     },
   ],
   [
     {
       filename: "src/components/Slider/components/Thumb/styles.module.css",
       className: "tooltip",
-      expected: "flow-slider-thumb-tooltip",
+      expected: "flow--slider--thumb--tooltip",
     },
   ],
 ])(

packages/components/dev/cssModuleClassNameGenerator.ts

@@ -1,12 +1,14 @@
 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") {
     return name;
   }
@@ -15,20 +17,22 @@ export const cssModuleClassNameGenerator = (
     ? filename.slice(parentDir.length)
     : filename;
 
-  if (!relativeFilename.endsWith(".module.css")) {
+  if (!/.*\.module\.s?css/.test(relativeFilename)) {
     return name;
   }
 
   const parts = Array.from(
     relativeFilename.matchAll(/(components\/(.+?)\/)/g),
-  ).map((p) => p[2]);
+  ).map((p) => decamelize(p[2], { separator: "-" }).toLowerCase());
 
   if (parts.length > 0) {
-    if (name !== "root") {
+    const lastPart = parts[parts.length - 1];
+
+    if (lastPart !== name) {
       parts.push(name);
     }
 
-    return "flow-" + parts.map((p) => p.toLowerCase()).join("-");
+    return "flow--" + parts.join("--");
   }
 
   return name;

packages/components/dev/viteI18nPlugin.test.ts

@@ -1,5 +1,5 @@
+import { expect, describe, it, jest } from "@jest/globals";
 import plugin from "./viteI18nPlugin";
-import { expect } from "@jest/globals";
 import path from "path";
 import type {
   PartialResolvedId,
@@ -8,6 +8,9 @@ import type {
   SourceDescription,
 } from "rollup";
 import { HmrContext, ModuleGraph, ViteDevServer, WebSocketServer } from "vite";
+import { URL } from "url";
+
+const __dirname = new URL(".", import.meta.url).pathname;
 
 describe("vite i18n plugin", () => {
   it("resolve will return correct id", async () => {

packages/components/jest.config.js

@@ -1,6 +1,7 @@
 /** @type {import("ts-jest").JestConfigWithTsJest} */
 export default {
-  preset: "ts-jest",
+  extensionsToTreatAsEsm: [".ts", ".tsx"],
+  preset: "ts-jest/presets/default-esm",
   testEnvironment: "jsdom",
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-next-components",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "exports": {
     "./Button": "./dist/Button.js",
@@ -38,7 +38,7 @@
     "storybook:start": "run storybook dev -p 6006",
     "test": "concurrently yarn:test:compile yarn:test:unit",
     "test:compile": "tsc --noEmit",
-    "test:unit": "run jest"
+    "test:unit": "yarn node --experimental-vm-modules $(yarn bin jest)"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -51,29 +51,30 @@
     "react-aria": "^3.31.1",
     "react-aria-components": "^1.0.1",
     "react-stately": "^3.29.1",
-    "remeda": "^1.36.0"
+    "remeda": "^1.37.0"
   },
   "devDependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@jest/globals": "^29.7.0",
     "@nx/storybook": "^17.2.8",
-    "@storybook/addon-a11y": "^7.6.8",
-    "@storybook/addon-actions": "^7.6.8",
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/addon-interactions": "^7.6.8",
-    "@storybook/addon-links": "^7.6.8",
-    "@storybook/blocks": "^7.6.8",
-    "@storybook/react": "^7.6.8",
-    "@storybook/react-vite": "^7.6.8",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-vite": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
     "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.47",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/rollup": "^0.54.0",
     "concurrently": "^8.2.2",
+    "decamelize": "^6.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.33",
@@ -83,14 +84,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-element-to-jsx-string": "^15.0.0",
-    "rollup": "^4.9.5",
-    "storybook": "^7.6.8",
+    "rollup": "^4.9.6",
+    "sass": "^1.70.0",
+    "storybook": "^7.6.10",
     "storybook-addon-rtl-direction": "^0.0.19",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
     "typescript-plugin-css-modules": "^5.0.2",
-    "vite": "^5.0.11",
-    "vite-plugin-dts": "^3.7.0"
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.1"
   },
   "peerDependencies": {
     "react": "18.2.0",

packages/components/src/components/Avatar/Avatar.module.css → packages/components/src/components/Avatar/Avatar.module.scss

@@ -1,11 +1,21 @@
 @import "@/styles";
-.root {
+
+.avatar {
   border-radius: var(--border-radius--round);
   width: var(--avatar-size);
   height: var(--avatar-size);
   overflow: hidden;
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @extend .size-s;
 }
 
+/* Elements */
 .initials {
   width: 100%;
   height: 100%;
@@ -15,20 +25,13 @@
   font-size: calc(var(--avatar-size) * 0.4);
 }
 
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.size-s {
-  --avatar-size: var(--avatar--size--s);
+/* Sizes */
+@mixin size($size) {
+  .size-#{$size} {
+    --avatar-size: var(--avatar--size--#{$size});
+  }
 }
 
-.size-m {
-  --avatar-size: var(--avatar--size--m);
-}
-
-.size-l {
-  --avatar-size: var(--avatar--size--l);
-}
+@include size(s);
+@include size(m);
+@include size(l);

packages/components/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import React, { FC, PropsWithChildren } from "react";
-import styles from "./Avatar.module.css";
+import styles from "./Avatar.module.scss";
 import clsx from "clsx";
 import { PropsContext, PropsContextProvider } from "@/lib/propsContext";
 
@@ -12,15 +12,12 @@ interface AvatarProps extends PropsWithChildren {
 export const Avatar: FC<AvatarProps> = (props) => {
   const { children, className, size = "s" } = props;
 
-  const rootClassName = clsx(className, styles.root, styles[`size-${size}`]);
+  const rootClassName = clsx(styles.avatar, styles[`size-${size}`], className);
 
   const propsContext: PropsContext = {
     Initials: {
       className: styles.initials,
     },
-    Image: {
-      className: styles.image,
-    },
   };
 
   return (