@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.11

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.1",
+  "version": "1.0.0-RC.11",
   "license": "SEE LICENSE IN LICENSE",
-  "homepage": "https://designsystem.stihl.de",
+  "homepage": "https://main--63440bbb95889041542a5ba3.chromatic.com",
   "keywords": [
     "stihl",
     "design",
@@ -37,6 +37,10 @@
       "require": "./partials/index.js"
     }
   },
+  "engines": {
+    "node": ">=18",
+    "npm": ">=10"
+  },
   "typesVersions": {
     "*": {
       "partials": [
@@ -47,9 +51,9 @@
   "scripts": {
     "predev": "npx vite-node 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:copyUtilitiesBuild && npm run build:copyTypes && cp package.json ./dist && npx vite-node scripts/cleanDistPackageJSON.ts",
     "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",
@@ -57,78 +61,85 @@
     "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:storybook": "storybook build",
-    "build:propsOverview": "EXCLUDED_COMPS=**/Asterisk.tsx,**/CustomReactSelect.tsx,**/OptionCheckbox.tsx,**/SystemFeedback.tsx,**/Radio.tsx && react-docgen ./src/components/**/*.tsx -o ./src/stories/Introduction/component-props.json -i **/*.test.tsx,**/*.utils.tsx,$EXCLUDED_COMPS",
+    "build:propsOverview": "npx vite-node scripts/generatePropsOverview.ts",
     "release": "cp package.json LICENSE.md README.md ./dist && cd dist && npm publish",
     "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",
     "test:e2e": "npx playwright test",
-    "test:e2e-ui": "npx playwright test --ui --project=chromium",
+    "test:e2e-ui": "npx playwright test --ui",
     "test:a11y": "test-storybook",
     "test:vrt": "npx playwright test --config=playwright.config.vrt.ts"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.25.2",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.11.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.47.2",
     "@react-docgen/cli": "^2.0.3",
-    "@storybook/addon-a11y": "^8.0.6",
-    "@storybook/addon-actions": "^8.0.6",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
-    "@storybook/test-runner": "^0.17.0",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "^20.8.8",
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@storybook/addon-a11y": "^8.3.2",
+    "@storybook/addon-actions": "^8.3.2",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/core-events": "^8.3.2",
+    "@storybook/manager-api": "^8.3.2",
+    "@storybook/preview-api": "^8.3.2",
+    "@storybook/react": "^8.3.2",
+    "@storybook/react-vite": "^8.3.2",
+    "@storybook/test": "^8.3.2",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.3.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.1",
+    "@types/node": "^22.6.1",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "anima-storybook-cli": "^0.13.1",
-    "axe-playwright": "^1.2.3",
-    "babel-loader": "^9.1.3",
-    "change-case": "^5.1.2",
-    "classnames": "^2.3.2",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.52.0",
-    "eslint-plugin-react": "^7.33.2",
+    "axe-playwright": "^2.0.2",
+    "babel-loader": "^9.2.1",
+    "change-case": "^5.4.4",
+    "classnames": "^2.5.1",
+    "concurrently": "^9.0.1",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-storybook": "^0.8.0",
-    "globby": "^13.2.2",
+    "globals": "^15.9.0",
+    "globby": "^14.0.2",
     "http-server": "^14.1.1",
-    "jsdom": "^22.1.0",
-    "react": "^18.x",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
     "react-docgen": "^7.0.3",
-    "react-dom": "^18.x",
-    "react-intersection-observer": "^9.5.2",
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.13.1",
     "react-syntax-highlighter": "^15.5.0",
-    "sass": "^1.69.4",
-    "storybook": "^8.0.6",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.1",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-lib-inject-css": "^1.3.0",
-    "vite-plugin-svgr": "^3.3.0",
-    "vitest": "^0.34.6"
+    "sass": "^1.79.3",
+    "storybook": "^8.3.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.4.7",
+    "vite-plugin-dts": "^4.2.2",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "react": ">=17.0.0 <19.0.0",
     "react-dom": ">=17.0.0 <19.0.0",
-    "react-intersection-observer": "^9.5.2",
-    "react-select": "^5.8.0"
+    "react-intersection-observer": "^9.10.2",
+    "react-select": "^5.8.1"
   }
 }

package/partials/connected-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none"><g clip-path="url(#a)"><path fill="#fff" d="M0 0h512v512H0z"/><mask id="b" width="512" height="512" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M512 0H0v512h512V0Z"/></mask><g mask="url(#b)"><path fill="#F37A1F" d="M517-5H-5v522h522V-5Z"/></g><mask id="d" width="320" height="349" x="95" y="81" maskUnits="userSpaceOnUse" style="mask-type:luminance"><mask id="c" width="512" height="512" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M512 0H0v512h512V0Z"/></mask><g mask="url(#c)"><path fill="#fff" d="M366.8 304.04c-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.01C383.36 112.57 329.82 81.73 269.1 82c-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"/></g></mask><g mask="url(#d)"><path fill="#fff" d="M419.85 77H91v357.84h328.85V77Z"/></g><mask id="f" width="133" height="173" x="224" y="169" maskUnits="userSpaceOnUse" style="mask-type:luminance"><mask id="e" width="512" height="512" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M512 0H0v512h512V0Z"/></mask><g mask="url(#e)"><path fill="#fff" d="M320.14 257.37c-.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"/></g></mask><g mask="url(#f)"><path fill="#fff" d="M361.56 164.84H219.14v182.04h142.42V164.84Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h512v512H0z"/></clipPath></defs></svg>

package/partials/copyAssets.js

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+export const NEXT_WITH_APP_ROUTER_MODE = 'nextWithAppRouter';
+export const SUPPORTED_PRODUCTS = ['imow', 'mystihl', 'connected'];
 
 const copyFile = (source, destination) => {
   try {
@@ -11,7 +12,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 +33,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 +56,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 +83,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/imow-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none"><path fill="#F37A1F" d="M0 0h32v32H0z"/><path fill="#fff" d="M19.122 16.501c-.224-.152-.489-.152-.753-.152h-2.636c-.52 0-.998.06-1.13.488-.092.305-.855 2.87-1.12 3.664-.04.122-.06.234-.06.326 0 .295.162.448.304.55.214.152.489.152.754.152h2.636c.519 0 .987-.061 1.12-.488.09-.316.864-2.87 1.129-3.664a.963.963 0 0 0 .05-.316c0-.295-.162-.458-.294-.56Zm-1.364 1.252-.733 2.382c-.05.132-.163.132-.234.132h-1.547c-.163 0-.193-.061-.163-.163l.743-2.381c.04-.143.153-.133.224-.133h1.557c.153 0 .183.061.153.163ZM24.475 19.433l-.03-3.084H23.04l-1.75 3.002-.02-3.002h-1.334l.01 5.18h1.608l1.588-2.84-.03 2.84h1.669l3.226-5.18h-1.71l-1.822 3.084ZM3.723 16.349l-.39 1.26h1.538l.389-1.26H3.723ZM2.125 21.529h1.537l.987-3.202H3.113l-.988 3.202ZM11.295 16.349l-1.903 3.043-.153-3.043H6.817l-1.639 5.18h1.486l1.221-3.888.214 3.888h1.364l2.504-3.888-1.211 3.888h1.486l1.598-5.18h-2.545ZM29.104 16.034a.76.76 0 0 0-.771.771.76.76 0 0 0 .77.772.76.76 0 0 0 .772-.772.76.76 0 0 0-.771-.77Zm0 1.433a.646.646 0 0 1-.651-.662c0-.369.277-.661.65-.661.374 0 .652.292.652.662 0 .369-.278.661-.651.661Z"/><path fill="#fff" d="M29.456 16.606c0-.16-.089-.247-.29-.247h-.342v.892h.11v-.396h.184l.251.396h.129l-.266-.396c.12-.02.224-.091.224-.249Zm-.377.156h-.145v-.31h.2c.109 0 .212.03.212.154 0 .151-.132.156-.267.156ZM7.753 13.047l1.615-2.578h2.163l-1.353 4.394H8.917l1.024-3.297-2.121 3.297H6.662l-.183-3.297-1.036 3.297H4.182l1.343-4.394h2.1l.128 2.578ZM14.589 10.469H16.1l-2.428 2.907-.455 1.487h-1.304l.463-1.506-.664-2.888h1.213l.323 1.664 1.34-1.664Z"/></svg>