@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.4",
+  "version": "1.0.0-RC.40",
   "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
+  "homepage": "https://designsystem.stihl.de/",
   "keywords": [
     "stihl",
     "design",
@@ -30,13 +30,22 @@
     "./styles/fonts/*.css": {
       "default": "./styles/fonts/*.css"
     },
-    "./styles/scss": "./styles/scss/_index.scss",
+    "./styles/scss/ds": "./styles/scss/ds/index.scss",
+    "./styles/js": {
+      "types": "./styles/js/index.d.ts",
+      "import": "./styles/js/index.es.js",
+      "default": "./styles/js/index.es.js"
+    },
     "./partials": {
       "types": "./partials/index.d.ts",
       "import": "./partials/index.js",
       "require": "./partials/index.js"
     }
   },
+  "engines": {
+    "node": ">=18",
+    "npm": ">=10"
+  },
   "typesVersions": {
     "*": {
       "partials": [
@@ -45,90 +54,99 @@
     }
   },
   "scripts": {
-    "predev": "npx vite-node scripts/extractAriaTypes.ts && prettier ./src/types/aria-types.d.ts --write",
+    "predev": "tsx scripts/extractAriaTypes.ts && prettier ./src/types/aria-types.d.ts --write",
     "dev": "npm run storybook",
-    "prebuild": "npm run build:propsOverview",
+    "prebuild": "npm run lint && npm run build:propsOverview",
     "build": "npm run build:components && npm run build:storybook",
-    "build:components": "tsc && vite build && npm run build:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist",
+    "build:components": "tsc && vite build && npm run build:utilities:partials && npm run build:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist && tsx scripts/cleanDistPackageJSON.ts",
+    "build:utilities:partials": "cd ../utilities && npm run build:partials:bundle",
     "build:copyComponents": "npm run build:components && ../../copyDistToExampleApps.sh '../../'",
     "build:copyTypes": "TARGET=./dist/types && rm -rf $TARGET && mkdir -p $TARGET && cp -r ./src/types/* $TARGET/",
-    "build:copyUtilitiesBuild": "npm run build:copyUtilitiesBuild:scss && npm run build:copyUtilitiesBuild:fonts && npm run build:copyUtilitiesBuild:partials",
+    "build:copyPatterns": "tsx scripts/copyPatterns.ts --clear-dest --no-verbose && npm run build --prefix ../../../examples",
+    "build:copyUtilitiesBuild": "npm run build:copyUtilitiesBuild:scss && npm run build:copyUtilitiesBuild:fonts && npm run build:copyUtilitiesBuild:partials && npm run build:copyUtilitiesBuild:js",
     "build:copyUtilitiesBuild:scss": "TARGET=./dist/styles/scss && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/scss/* $TARGET/",
     "build:copyUtilitiesBuild:fonts": "TARGET=./dist/styles/fonts && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/fonts/* $TARGET/",
     "build:copyUtilitiesBuild:partials": "TARGET=./dist/partials && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/partials/* $TARGET/",
+    "build:copyUtilitiesBuild:js": "TARGET=./dist/styles/js && rm -rf $TARGET && mkdir -p $TARGET && cp -r ../utilities/dist/js/* $TARGET/",
     "build:storybook": "storybook build",
-    "build:propsOverview": "npx vite-node scripts/generatePropsOverview.ts",
-    "release": "cp package.json LICENSE.md README.md ./dist && cd dist && npm publish",
+    "build:propsOverview": "tsx scripts/generatePropsOverview.ts",
+    "release": "cp package.json LICENSE.md README.md ./dist && cd dist && npm publish --tag latest --access public",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "sync": "npm run build && anima-storybook sync",
-    "lint": "eslint -c .eslintrc.cjs './src/**/*.{ts,tsx}'",
+    "lint": "eslint -c eslint.config.js",
     "pretest:smoke": "npm run build:components && npm run build:propsOverview",
     "test:smoke": "vitest --config vitest.smoke.config.ts",
     "test:unit": "vitest",
     "pretest:e2e": "npx playwright install --with-deps",
     "pretest:e2e-ui": "npx playwright install --with-deps",
+    "pretest:e2e-dead-link": "npx playwright install --with-deps",
     "test:e2e": "npx playwright test",
-    "test:e2e-ui": "npx playwright test --ui --project=chromium",
+    "test:e2e-ui": "npx playwright test --ui",
+    "test:e2e-dead-link": "npx playwright test --config=playwright.config.dead-link.ts",
+    "test:e2e-update-translations": "npm run test:e2e Translations -- -u",
     "test:a11y": "test-storybook",
     "test:vrt": "npx playwright test --config=playwright.config.vrt.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
+    "@babel/core": "^7.28.4",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@floating-ui/react": "^0.27.16",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "^1.44.0",
-    "@react-docgen/cli": "^2.0.3",
-    "@storybook/addon-a11y": "^8.1.1",
-    "@storybook/addon-actions": "^8.1.1",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-vite": "^8.1.1",
-    "@storybook/test": "^8.1.1",
-    "@storybook/test-runner": "^0.18.1",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
-    "@types/node": "^20.12.12",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@playwright/test": "^1.57.0",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@storybook/test-runner": "^0.24.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^7.9.0",
-    "@typescript-eslint/parser": "^7.9.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "anima-storybook-cli": "^0.13.1",
-    "axe-playwright": "^2.0.1",
-    "babel-loader": "^9.1.3",
+    "axe-playwright": "^2.2.2",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-storybook": "^0.8.0",
-    "globby": "^14.0.1",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^10.1.11",
+    "globals": "^17.0.0",
+    "globby": "^16.1.0",
     "http-server": "^14.1.1",
-    "jsdom": "^24.0.0",
-    "react": "^18.3.1",
-    "react-docgen": "^7.0.3",
-    "react-dom": "^18.3.1",
-    "react-intersection-observer": "^9.10.2",
-    "react-syntax-highlighter": "^15.5.0",
-    "sass": "^1.77.2",
-    "storybook": "^8.1.1",
-    "typescript": "^5.4.5",
-    "vite": "5.2.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^1.6.0"
+    "jsdom": "^27.4.0",
+    "posthog-js": "^1.313.0",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "react": "^19.2.3",
+    "react-compiler-runtime": "^1.0.0",
+    "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^19.2.3",
+    "react-intersection-observer": "^10.0.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "sass": "^1.97.1",
+    "storybook": "^10.1.11",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
+    "@floating-ui/react": "^0.27.16",
     "classnames": "^2.5.1",
-    "react": ">=17.0.0 <19.0.0",
-    "react-dom": ">=17.0.0 <19.0.0",
-    "react-intersection-observer": "^9.10.2",
-    "react-select": "^5.8.0"
+    "react": ">=17.0.0 <20",
+    "react-dom": ">=17.0.0 <20",
+    "react-intersection-observer": "^10.0.0",
+    "react-select": "^5.10.2"
   }
 }

package/partials/assets.const.js

@@ -0,0 +1,2 @@
+export const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+export const SUPPORTED_PRODUCTS = ['imow', 'mystihl', 'connected'];

package/partials/connected-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M0 0h512v512H0z"/><path fill="#fff" d="M366.806 304.042c-17.69 35.56-54.39 60.01-96.8 60.04-57.87.04-105.97-46.12-108.17-103.95-2.35-61.65 46.94-112.38 108.08-112.38 42.34 0 78.99 24.33 96.75 59.77l48.01-48.01c-31.31-46.94-84.85-77.78-145.57-77.51-96.25.44-174.4 80.08-173.09 176.33 1.28 94.95 78.65 171.51 173.9 171.51 60.49 0 113.77-30.89 144.93-77.76l-48.04-48.04Z"/><path fill="#fff" d="M320.115 257.376c-.92-.92-.92-2.41 0-3.32l36.3-36.3c-9.38-21.21-26.31-38.31-47.39-47.92l-84.21 84.21c-.92.91-.92 2.4 0 3.32l84.5 84.5c21.05-9.67 37.93-26.83 47.23-48.07l-36.43-36.43"/></svg>

package/partials/copyAssets.js

@@ -1,6 +1,9 @@
 import fs from 'fs';
 import path from 'path';
-const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+import {
+  NEXT_WITH_APP_ROUTER_MODE,
+  SUPPORTED_PRODUCTS,
+} from './assets.const.js';
 
 const copyFile = (source, destination) => {
   try {
@@ -11,7 +14,13 @@ const copyFile = (source, destination) => {
   }
 };
 
-const copyAssets = (copyDirectory, mode) => {
+export const copyAssets = (copyDirectory, mode, product) => {
+  if (product !== 'default' && !SUPPORTED_PRODUCTS.includes(product)) {
+    throw new Error(
+      `[STIHL Design System] - [Meta Icons]: You passed the product name "${product}" as an argument, which is not supported. Supported product name arguments are: [${SUPPORTED_PRODUCTS.join(', ')}]. Please check our Meta Icons Partial documentation: https://main--63440bbb95889041542a5ba3.chromatic.com/?path=/docs/utilities-partials-meta-icons--documentation`
+    );
+  }
+
   // Define the source and destination directories
   const sourceDir = path.resolve(
     'node_modules',
@@ -26,11 +35,11 @@ const copyAssets = (copyDirectory, mode) => {
 
   // Array of file names to copy
   const filesToCopy = [
-    'apple-icon.png',
-    'favicon.ico',
-    'icon-192.png',
-    'icon-512.png',
-    'icon.svg',
+    `${product}-apple-icon.png`,
+    `${product}-favicon.ico`,
+    `${product}-icon-192.png`,
+    `${product}-icon-512.png`,
+    `${product}-icon.svg`,
     mode === NEXT_WITH_APP_ROUTER_MODE
       ? 'manifest.json'
       : 'manifest.webmanifest',
@@ -49,21 +58,23 @@ const copyAssets = (copyDirectory, mode) => {
     let fileName = file;
     // adjustments for next with app router
     if (mode === NEXT_WITH_APP_ROUTER_MODE) {
-      if (file === 'icon-192.png') {
+      if (file === `${product}-icon-192.png`) {
         fileName = 'icon2.png';
-      } else if (file === 'icon-512.png') {
+      } else if (file === `${product}-icon-512.png`) {
         fileName = 'icon1.png';
       } else if (file === 'manifest.json') {
         fileName = 'manifest.webmanifest';
       }
     }
-    const destFile = path.join(destDir, fileName);
+
+    // remove product from final file name
+    const destFile = path.join(destDir, fileName.replace(`${product}-`, ''));
 
     if (fs.existsSync(sourceFile)) {
       copyFile(sourceFile, destFile);
       console.log(`Copied ${file} to ${destDir}`);
     } else {
-      console.error(`Source file ${sourceFile} does not exist.`);
+      throw Error(`Source file ${sourceFile} does not exist.`);
     }
   });
   console.log('\x1b[32m%s\x1b[0m', 'SUCCESS - Copying Meta Icon Assets');
@@ -74,11 +85,14 @@ const args = process.argv;
 // Extract directory argument
 const dirArg = args.find((arg) => arg.startsWith('--dir='));
 const copyDirectory = dirArg ? dirArg.replace('--dir=', '') : './';
+// Extract product argument
+const productArg = args.find((arg) => arg.startsWith('--product='));
+const product = productArg ? productArg.replace('--product=', '') : 'default';
 
 const modeArg = args.find((arg) => arg.startsWith('--mode='));
 const mode = modeArg ? modeArg.replace('--mode=', '') : undefined;
 try {
-  copyAssets(copyDirectory, mode);
-} catch (e) {
+  copyAssets(copyDirectory, mode, product);
+} catch (error) {
   console.error('ERROR - Copying Meta Icon Assets:', error);
 }

package/partials/default-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M512 0H0v512h512V0Z"/><path fill="#fff" d="m154.502 145.006-25.035 81.859c-11.126 36.45 9.14 63.364 45.048 63.364h117.226a7.613 7.613 0 0 1 6.007 3.271 7.625 7.625 0 0 1 .965 6.771l-6.322 20.592a15.536 15.536 0 0 1-13.077 10.042H95.076l-23.084 75.502H309.55c26.191 0 48.589-12.138 60.04-49.636l23.77-77.741c11.235-36.992-9.681-63.255-42.446-63.255H233.182c-6.502 0-9.103-4.769-7.225-10.549l6.286-20.591a15.53 15.53 0 0 1 15.353-12.174h169.462l23.084-75.501H215.12c-32.116 0-52.237 20.591-60.618 48.046Z"/></svg>

package/partials/imow-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M512 0H0v512h512V0Z"/><path fill="#fff" d="M305.948 264.021c-3.583-2.444-7.816-2.444-12.05-2.444H251.72c-8.305 0-15.96.978-18.076 7.816-1.464 4.887-13.68 45.924-17.912 58.624-.652 1.956-.978 3.746-.978 5.215 0 4.72 2.606 7.165 4.885 8.793 3.421 2.442 7.817 2.442 12.051 2.442h42.176c8.306 0 15.798-.979 17.915-7.818 1.464-5.048 13.842-45.921 18.075-58.624a15.41 15.41 0 0 0 .813-5.048c0-4.723-2.605-7.328-4.721-8.956Zm-21.821 20.028-11.725 38.108c-.814 2.116-2.607 2.116-3.744 2.116h-24.755c-2.605 0-3.093-.977-2.605-2.604l11.888-38.108c.651-2.278 2.443-2.116 3.582-2.116h24.916c2.443 0 2.931.976 2.443 2.604ZM391.603 310.92l-.488-49.343h-22.473l-28.01 48.04-.325-48.04h-21.332l.163 82.89h25.728l25.405-45.435-.488 45.435h26.705l51.623-82.89h-27.357l-29.151 49.343ZM59.566 261.577l-6.224 20.178h24.59l6.223-20.178H59.566ZM34 344.464h24.59l15.801-51.229h-24.59L34 344.464ZM180.721 261.577l-30.453 48.692-2.442-48.692h-38.759l-26.217 82.89h23.775l19.541-62.208 3.421 62.208h21.821l40.06-62.208-19.378 62.208h23.776l25.567-82.89h-40.712ZM465.66 256.548c-6.967 0-12.34 5.406-12.34 12.34 0 6.935 5.373 12.341 12.34 12.341 6.968 0 12.34-5.406 12.34-12.341 0-6.932-5.372-12.34-12.34-12.34Zm0 22.924c-5.972 0-10.418-4.678-10.418-10.584 0-5.904 4.446-10.584 10.418-10.584 5.971 0 10.415 4.679 10.415 10.584 0 5.908-4.444 10.584-10.415 10.584Z"/><path fill="#fff" d="M471.3 265.697c0-2.553-1.427-3.947-4.645-3.947h-5.473v14.266h1.758v-6.338h2.954l4.012 6.338h2.058l-4.246-6.338c1.921-.33 3.582-1.459 3.582-3.981Zm-6.037 2.488h-2.325v-4.944h3.22c1.726 0 3.38.466 3.38 2.456 0 2.423-2.12 2.488-4.275 2.488ZM124.046 208.746l25.839-41.246h34.617l-21.648 70.304H142.67l16.382-52.752-33.934 52.752h-18.526l-2.926-52.752-16.575 52.752H66.906L88.4 167.5h33.598l2.049 41.246ZM233.417 167.5h24.182l-38.844 46.515-7.276 23.787h-20.868l7.411-24.084-10.627-46.218h19.403l5.168 26.619 21.451-26.619Z"/></svg>