From 963691701bc3594b1cc6a575f932eaf55be7b018 Mon Sep 17 00:00:00 2001 From: ChristianBusshoff Date: Thu, 10 Oct 2024 12:22:21 +0200 Subject: [PATCH 01/28] remove cyclic dependencies --- apps/docs/package.json | 1 + package.json | 4 +--- packages/chartjs-plugin/package.json | 1 + packages/sit-onyx/package.json | 2 ++ pnpm-lock.yaml | 32 ++++++++++++++-------------- 5 files changed, 21 insertions(+), 19 deletions(-) diff --git a/apps/docs/package.json b/apps/docs/package.json index 3a67420467..8ae5f454d5 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -16,6 +16,7 @@ "@playwright/test": "^1.47.2", "@sit-onyx/chartjs-plugin": "workspace:^", "@sit-onyx/icons": "workspace:^", + "@sit-onyx/storybook-utils": "workspace:^", "@sit-onyx/vitepress-theme": "workspace:^", "chart.js": "^4.4.4", "postcss": "^8.4.47", diff --git a/package.json b/package.json index e8c974b2cb..983c867d48 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "publint:all": "pnpm -r --parallel --aggregate-output exec publint", "prepare": "simple-git-hooks", "gh:show-report": "./scripts/show-last-test-report.sh", - "preinstall": "npx only-allow pnpm" + "preinstall": "npx only-allow pnpm && pnpm list --depth=-1 --long | grep cycle && echo 'Cyclic dependency detected!' && exit 1 || echo 'No cyclic dependencies'" }, "devDependencies": { "@changesets/cli": "^2.27.9", @@ -26,8 +26,6 @@ "@playwright/experimental-ct-vue": "^1.47.2", "@playwright/test": "^1.47.2", "@rushstack/eslint-patch": "^1.10.4", - "@sit-onyx/eslint-plugin": "workspace:^", - "@sit-onyx/storybook-utils": "workspace:^", "@storybook/addon-essentials": "^8.3.5", "@storybook/blocks": "^8.3.5", "@storybook/vue3": "^8.3.5", diff --git a/packages/chartjs-plugin/package.json b/packages/chartjs-plugin/package.json index 36ec96c0f9..7813e3a017 100644 --- a/packages/chartjs-plugin/package.json +++ b/packages/chartjs-plugin/package.json @@ -34,6 +34,7 @@ "sit-onyx": "workspace:^" }, "devDependencies": { + "@sit-onyx/storybook-utils": "workspace:^", "@vue/compiler-dom": "catalog:", "chart.js": "catalog:", "vue": "catalog:", diff --git a/packages/sit-onyx/package.json b/packages/sit-onyx/package.json index 4b0cdc0748..85e590bbff 100644 --- a/packages/sit-onyx/package.json +++ b/packages/sit-onyx/package.json @@ -50,6 +50,8 @@ "devDependencies": { "@axe-core/playwright": "^4.10.0", "@sit-onyx/headless": "workspace:^", + "@sit-onyx/storybook-utils": "workspace:^", + "@sit-onyx/eslint-plugin": "workspace:^", "@storybook/addon-a11y": "^8.3.5", "@vue/compiler-dom": "catalog:", "eslint-plugin-vue-scoped-css": "^2.8.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ccdf67bc25..bcf365ab83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,7 +14,7 @@ catalogs: version: 4.4.4 sass: specifier: ^1.79.3 - version: 1.79.3 + version: 1.79.4 overrides: vue: 3.5.11 @@ -44,12 +44,6 @@ importers: '@rushstack/eslint-patch': specifier: ^1.10.4 version: 1.10.4 - '@sit-onyx/eslint-plugin': - specifier: workspace:^ - version: link:packages/eslint-plugin - '@sit-onyx/storybook-utils': - specifier: workspace:^ - version: link:packages/storybook-utils '@storybook/addon-essentials': specifier: ^8.3.5 version: 8.3.5(storybook@8.3.5)(webpack-sources@3.2.3) @@ -161,7 +155,7 @@ importers: devDependencies: sass: specifier: 'catalog:' - version: 1.79.3 + version: 1.79.4 vue: specifier: 3.5.11 version: 3.5.11(typescript@5.6.2) @@ -177,6 +171,9 @@ importers: '@sit-onyx/icons': specifier: workspace:^ version: link:../../packages/icons + '@sit-onyx/storybook-utils': + specifier: workspace:^ + version: link:../../packages/storybook-utils '@sit-onyx/vitepress-theme': specifier: workspace:^ version: link:../../packages/vitepress-theme @@ -227,6 +224,9 @@ importers: specifier: workspace:^ version: link:../sit-onyx devDependencies: + '@sit-onyx/storybook-utils': + specifier: workspace:^ + version: link:../storybook-utils '@vue/compiler-dom': specifier: 'catalog:' version: 3.5.11 @@ -325,9 +325,15 @@ importers: '@axe-core/playwright': specifier: ^4.10.0 version: 4.10.0(playwright-core@1.47.2) + '@sit-onyx/eslint-plugin': + specifier: workspace:^ + version: link:../eslint-plugin '@sit-onyx/headless': specifier: workspace:^ version: link:../headless + '@sit-onyx/storybook-utils': + specifier: workspace:^ + version: link:../storybook-utils '@storybook/addon-a11y': specifier: ^8.3.5 version: 8.3.5(storybook@8.3.5) @@ -339,7 +345,7 @@ importers: version: 2.8.1(eslint@9.10.0(jiti@1.21.6))(vue-eslint-parser@9.4.3(eslint@9.10.0(jiti@1.21.6))) sass: specifier: 'catalog:' - version: 1.79.3 + version: 1.79.4 vue: specifier: 3.5.11 version: 3.5.11(typescript@5.6.2) @@ -2087,9 +2093,6 @@ packages: '@types/eslint@8.56.12': resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==} - '@types/estree@1.0.5': - resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} - '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} @@ -8376,11 +8379,9 @@ snapshots: '@types/eslint@8.56.12': dependencies: - '@types/estree': 1.0.5 + '@types/estree': 1.0.6 '@types/json-schema': 7.0.15 - '@types/estree@1.0.5': {} - '@types/estree@1.0.6': {} '@types/express-serve-static-core@4.19.6': @@ -12186,7 +12187,6 @@ snapshots: chokidar: 4.0.1 immutable: 4.3.7 source-map-js: 1.2.1 - optional: true sax@1.2.4: {} From 27fb3974337512acd00509c84fc1df0b56996060 Mon Sep 17 00:00:00 2001 From: ChristianBusshoff Date: Sun, 27 Oct 2024 11:50:13 +0100 Subject: [PATCH 02/28] move theme and style.css from storybook-utils to sit-onyx --- package.json | 2 +- packages/sit-onyx/.storybook/preview.ts | 2 +- .../storybook-utils/style.css} | 0 .../src => sit-onyx/storybook-utils}/theme.ts | 2 +- packages/storybook-utils/package.json | 3 +-- packages/storybook-utils/src/index.ts | 1 - packages/storybook-utils/src/preview.ts | 2 +- packages/storybook-utils/tsconfig.json | 2 +- pnpm-lock.yaml | 20 +++++++++---------- 9 files changed, 15 insertions(+), 19 deletions(-) rename packages/{storybook-utils/src/index.css => sit-onyx/storybook-utils/style.css} (100%) rename packages/{storybook-utils/src => sit-onyx/storybook-utils}/theme.ts (98%) diff --git a/package.json b/package.json index e9371c6122..904c099e4a 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "publint:all": "pnpm -r --parallel --aggregate-output exec publint", "prepare": "simple-git-hooks", "gh:show-report": "./scripts/show-last-test-report.sh", - "preinstall": "npx only-allow pnpm && pnpm list --depth=-1 --long | grep cycle && echo 'Cyclic dependency detected!' && exit 1 || echo 'No cyclic dependencies'" + "preinstall": "npx only-allow pnpm" }, "devDependencies": { "@changesets/cli": "^2.27.9", diff --git a/packages/sit-onyx/.storybook/preview.ts b/packages/sit-onyx/.storybook/preview.ts index 0c3c611031..32906def74 100644 --- a/packages/sit-onyx/.storybook/preview.ts +++ b/packages/sit-onyx/.storybook/preview.ts @@ -6,10 +6,10 @@ import { onyxThemeGlobalType, withOnyxTheme } from "./theme-switch"; import "@fontsource-variable/source-code-pro"; import "@fontsource-variable/source-sans-3"; -import "@sit-onyx/storybook-utils/style.css"; import { getRules, Spec } from "axe-core"; import { a11yTags } from "../src/a11yConfig"; import "../src/styles/index.scss"; +import "../storybook-utils/style.css"; import "./docs-template.scss"; import { enhanceFormInjectedSymbol } from "./formInjected"; import { enhanceManagedSymbol } from "./managed"; diff --git a/packages/storybook-utils/src/index.css b/packages/sit-onyx/storybook-utils/style.css similarity index 100% rename from packages/storybook-utils/src/index.css rename to packages/sit-onyx/storybook-utils/style.css diff --git a/packages/storybook-utils/src/theme.ts b/packages/sit-onyx/storybook-utils/theme.ts similarity index 98% rename from packages/storybook-utils/src/theme.ts rename to packages/sit-onyx/storybook-utils/theme.ts index a5b36dafe1..6e5bd832b5 100644 --- a/packages/storybook-utils/src/theme.ts +++ b/packages/sit-onyx/storybook-utils/theme.ts @@ -1,7 +1,7 @@ +import onyxLogo from "@sit-onyx/storybook-utils/assets/logo-onyx.svg"; import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx"; import onyxVariables from "sit-onyx/themes/onyx.json"; import { create, type ThemeVars, type ThemeVarsPartial } from "storybook/internal/theming"; -import onyxLogo from "./assets/logo-onyx.svg"; /** * Creates a custom theme for Storybook that uses onyx colors. diff --git a/packages/storybook-utils/package.json b/packages/storybook-utils/package.json index 8875b9422a..9e25332355 100644 --- a/packages/storybook-utils/package.json +++ b/packages/storybook-utils/package.json @@ -11,7 +11,7 @@ "types": "./src/index.ts", "exports": { ".": "./src/index.ts", - "./style.css": "./src/index.css" + "./assets/logo-onyx.svg": "./src/assets/logo-onyx.svg" }, "homepage": "https://onyx.schwarz/development/packages/storybook-utils.html", "repository": { @@ -30,7 +30,6 @@ "peerDependencies": { "@sit-onyx/icons": "workspace:^", "@storybook/vue3": ">= 8.3.0", - "sit-onyx": "workspace:^", "storybook": ">= 8.3.0", "storybook-dark-mode": ">= 4" }, diff --git a/packages/storybook-utils/src/index.ts b/packages/storybook-utils/src/index.ts index 11fdbf1576..98efeb784d 100644 --- a/packages/storybook-utils/src/index.ts +++ b/packages/storybook-utils/src/index.ts @@ -1,5 +1,4 @@ export * from "./actions"; export * from "./preview"; export * from "./sbType"; -export * from "./theme"; export * from "./types"; diff --git a/packages/storybook-utils/src/preview.ts b/packages/storybook-utils/src/preview.ts index 65d9a0faa3..c1d0bd1baa 100644 --- a/packages/storybook-utils/src/preview.ts +++ b/packages/storybook-utils/src/preview.ts @@ -5,9 +5,9 @@ import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode"; import { DOCS_RENDERED } from "storybook/internal/core-events"; import { addons } from "storybook/internal/preview-api"; import type { ThemeVars } from "storybook/internal/theming"; +import { ONYX_BREAKPOINTS, createTheme } from "../../sit-onyx/storybook-utils/theme"; import { enhanceEventArgTypes } from "./actions"; import { requiredGlobalType, withRequired } from "./required"; -import { ONYX_BREAKPOINTS, createTheme } from "./theme"; const themes = { light: createTheme(), diff --git a/packages/storybook-utils/tsconfig.json b/packages/storybook-utils/tsconfig.json index 99d988a1b9..57fb89e844 100644 --- a/packages/storybook-utils/tsconfig.json +++ b/packages/storybook-utils/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "@vue/tsconfig/tsconfig.dom.json", - "include": ["src", "svg.d.ts"], + "include": ["src", "svg.d.ts", "../sit-onyx/storybook-utils/theme.ts", "src/preview.ts"], "compilerOptions": { "types": ["node", "vite/client"], "rootDir": "./src", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 74a50aee7e..9aa779583c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,6 @@ catalogs: chart.js: specifier: ^4.4.4 version: 4.4.4 - sass: - specifier: ^1.79.3 sass-embedded: specifier: 1.79.4 version: 1.79.4 @@ -176,12 +174,12 @@ importers: '@sit-onyx/icons': specifier: workspace:^ version: link:../../packages/icons - '@sit-onyx/storybook-utils': - specifier: workspace:^ - version: link:../../packages/storybook-utils '@sit-onyx/shared': specifier: workspace:^ version: link:../../packages/shared + '@sit-onyx/storybook-utils': + specifier: workspace:^ + version: link:../../packages/storybook-utils '@sit-onyx/vitepress-theme': specifier: workspace:^ version: link:../../packages/vitepress-theme @@ -238,12 +236,12 @@ importers: specifier: workspace:^ version: link:../sit-onyx devDependencies: - '@sit-onyx/storybook-utils': - specifier: workspace:^ - version: link:../storybook-utils '@sit-onyx/shared': specifier: workspace:^ version: link:../shared + '@sit-onyx/storybook-utils': + specifier: workspace:^ + version: link:../storybook-utils '@vue/compiler-dom': specifier: 'catalog:' version: 3.5.11 @@ -360,12 +358,12 @@ importers: '@sit-onyx/headless': specifier: workspace:^ version: link:../headless - '@sit-onyx/storybook-utils': - specifier: workspace:^ - version: link:../storybook-utils '@sit-onyx/shared': specifier: workspace:^ version: link:../shared + '@sit-onyx/storybook-utils': + specifier: workspace:^ + version: link:../storybook-utils '@storybook/addon-a11y': specifier: ^8.3.5 version: 8.3.5(storybook@8.3.5) From dcbb48484f7a04636036d7844d3907490fe40128 Mon Sep 17 00:00:00 2001 From: ChristianBusshoff Date: Tue, 29 Oct 2024 10:21:39 +0100 Subject: [PATCH 03/28] updated pnpm-lock --- pnpm-lock.yaml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ca3c92fa26..081fab36f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -424,9 +424,6 @@ importers: deepmerge-ts: specifier: ^7.1.3 version: 7.1.3 - sit-onyx: - specifier: workspace:^ - version: link:../sit-onyx storybook: specifier: '>= 8.3.0' version: 8.3.6 @@ -6511,6 +6508,9 @@ packages: vue-component-type-helpers@2.1.6: resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==} + vue-component-type-helpers@2.1.8: + resolution: {integrity: sha512-ii36gDzrYAfOQIkOlo44yceDdT5269gKmNGxf07Qx6seH2U50+tQ2ol02XLhYPmxrh6YabAsOdte8WDrpaO6Tw==} + vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} engines: {node: '>=12'} @@ -8677,7 +8677,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.5.12(typescript@5.6.3) - vue-component-type-helpers: 2.1.6 + vue-component-type-helpers: 2.1.8 '@trysound/sax@0.2.0': {} @@ -13662,6 +13662,8 @@ snapshots: vue-component-type-helpers@2.1.6: {} + vue-component-type-helpers@2.1.8: {} + vue-demi@0.14.10(vue@3.5.12(typescript@5.6.3)): dependencies: vue: 3.5.12(typescript@5.6.3) From 7a854f7990f8648904b17a2865abbd9a1e7de926 Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 11:38:14 +0100 Subject: [PATCH 04/28] no preinstall script necessary anymore --- package.json | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index c7920a4f9c..e84c46b2ad 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "publint:all": "pnpm -r --parallel --aggregate-output exec publint", "prepare": "simple-git-hooks", "gh:show-report": "./scripts/show-last-test-report.sh", - "preinstall": "npx only-allow pnpm && pnpm list --depth=-1 --long | grep cycle && echo 'Cyclic dependency detected!' && exit 1 || echo 'No cyclic dependencies'" + "preinstall": "npx only-allow pnpm" }, "devDependencies": { "@changesets/cli": "^2.27.9", @@ -25,11 +25,13 @@ "@fontsource-variable/source-code-pro": "^5.1.0", "@fontsource-variable/source-sans-3": "^5.1.0", "@microsoft/eslint-formatter-sarif": "^3.1.0", - "@playwright/experimental-ct-vue": "^1.47.2", - "@playwright/test": "^1.47.2", - "@rushstack/eslint-patch": "^1.10.4", + "@playwright/experimental-ct-vue": "^1.48.2", + "@playwright/test": "^1.48.2", "@sit-onyx/eslint-plugin": "workspace:^", "@sit-onyx/storybook-utils": "workspace:^", + "@tsconfig/node22": "^22.0.0", + "@types/eslint": "^9.6.1", + "@rushstack/eslint-patch": "^1.10.4", "@storybook/addon-essentials": "^8.3.5", "@storybook/blocks": "^8.3.5", "@storybook/vue3": "^8.3.5", From 267abde38d9b166856d3f25d58a2befe6998ce12 Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 11:41:36 +0100 Subject: [PATCH 05/28] remove @sit-onyx/eslint-plugin from root --- package.json | 7 +++---- pnpm-lock.yaml | 15 --------------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index e84c46b2ad..cde9ab5058 100644 --- a/package.json +++ b/package.json @@ -27,16 +27,15 @@ "@microsoft/eslint-formatter-sarif": "^3.1.0", "@playwright/experimental-ct-vue": "^1.48.2", "@playwright/test": "^1.48.2", - "@sit-onyx/eslint-plugin": "workspace:^", - "@sit-onyx/storybook-utils": "workspace:^", - "@tsconfig/node22": "^22.0.0", - "@types/eslint": "^9.6.1", "@rushstack/eslint-patch": "^1.10.4", + "@sit-onyx/storybook-utils": "workspace:^", "@storybook/addon-essentials": "^8.3.5", "@storybook/blocks": "^8.3.5", "@storybook/vue3": "^8.3.5", "@storybook/vue3-vite": "^8.3.5", "@tsconfig/node20": "^20.1.4", + "@tsconfig/node22": "^22.0.0", + "@types/eslint": "^9.6.1", "@types/jsdom": "^21.1.7", "@types/node": "^22.8.6", "@vitejs/plugin-vue": "^5.1.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 523f46e7f3..119e644a45 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,18 +4,6 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false -catalogs: - default: - '@vue/compiler-dom': - specifier: 3.5.12 - version: 3.5.12 - chart.js: - specifier: ^4.4.5 - version: 4.4.5 - sass-embedded: - specifier: 1.80.4 - version: 1.80.4 - overrides: vue: 3.5.12 @@ -50,9 +38,6 @@ importers: '@rushstack/eslint-patch': specifier: ^1.10.4 version: 1.10.4 - '@sit-onyx/eslint-plugin': - specifier: workspace:^ - version: link:packages/eslint-plugin '@sit-onyx/storybook-utils': specifier: workspace:^ version: link:packages/storybook-utils From f18329d30246af4d23d6d9e356b72afe3a1d41da Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 11:46:06 +0100 Subject: [PATCH 06/28] remove @sit-onyx packages from root --- package.json | 1 - pnpm-lock.yaml | 15 ++++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index cde9ab5058..3e87345f87 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "@playwright/experimental-ct-vue": "^1.48.2", "@playwright/test": "^1.48.2", "@rushstack/eslint-patch": "^1.10.4", - "@sit-onyx/storybook-utils": "workspace:^", "@storybook/addon-essentials": "^8.3.5", "@storybook/blocks": "^8.3.5", "@storybook/vue3": "^8.3.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 119e644a45..b2f185a247 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,18 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +catalogs: + default: + '@vue/compiler-dom': + specifier: 3.5.12 + version: 3.5.12 + chart.js: + specifier: ^4.4.5 + version: 4.4.5 + sass-embedded: + specifier: 1.80.4 + version: 1.80.4 + overrides: vue: 3.5.12 @@ -38,9 +50,6 @@ importers: '@rushstack/eslint-patch': specifier: ^1.10.4 version: 1.10.4 - '@sit-onyx/storybook-utils': - specifier: workspace:^ - version: link:packages/storybook-utils '@storybook/addon-essentials': specifier: ^8.3.5 version: 8.4.0(@types/react@18.3.12)(storybook@8.4.0(prettier@3.3.3))(webpack-sources@3.2.3) From 55fd3a8994578ff91982006a261e81444328f76d Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 11:48:00 +0100 Subject: [PATCH 07/28] fix packages --- package.json | 2 -- pnpm-lock.yaml | 28 ---------------------------- 2 files changed, 30 deletions(-) diff --git a/package.json b/package.json index 3e87345f87..99676c2063 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,10 @@ "@microsoft/eslint-formatter-sarif": "^3.1.0", "@playwright/experimental-ct-vue": "^1.48.2", "@playwright/test": "^1.48.2", - "@rushstack/eslint-patch": "^1.10.4", "@storybook/addon-essentials": "^8.3.5", "@storybook/blocks": "^8.3.5", "@storybook/vue3": "^8.3.5", "@storybook/vue3-vite": "^8.3.5", - "@tsconfig/node20": "^20.1.4", "@tsconfig/node22": "^22.0.0", "@types/eslint": "^9.6.1", "@types/jsdom": "^21.1.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b2f185a247..7d2631b9f3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,18 +4,6 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false -catalogs: - default: - '@vue/compiler-dom': - specifier: 3.5.12 - version: 3.5.12 - chart.js: - specifier: ^4.4.5 - version: 4.4.5 - sass-embedded: - specifier: 1.80.4 - version: 1.80.4 - overrides: vue: 3.5.12 @@ -47,9 +35,6 @@ importers: '@playwright/test': specifier: ^1.48.2 version: 1.48.2 - '@rushstack/eslint-patch': - specifier: ^1.10.4 - version: 1.10.4 '@storybook/addon-essentials': specifier: ^8.3.5 version: 8.4.0(@types/react@18.3.12)(storybook@8.4.0(prettier@3.3.3))(webpack-sources@3.2.3) @@ -62,9 +47,6 @@ importers: '@storybook/vue3-vite': specifier: ^8.3.5 version: 8.4.0(storybook@8.4.0(prettier@3.3.3))(vite@5.4.10(@types/node@22.8.6)(sass-embedded@1.80.5)(sass@1.80.4)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3) - '@tsconfig/node20': - specifier: ^20.1.4 - version: 20.1.4 '@tsconfig/node22': specifier: ^22.0.0 version: 22.0.0 @@ -2083,9 +2065,6 @@ packages: cpu: [x64] os: [win32] - '@rushstack/eslint-patch@1.10.4': - resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==} - '@shikijs/core@1.22.1': resolution: {integrity: sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==} @@ -2302,9 +2281,6 @@ packages: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} - '@tsconfig/node20@20.1.4': - resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==} - '@tsconfig/node22@22.0.0': resolution: {integrity: sha512-twLQ77zevtxobBOD4ToAtVmuYrpeYUh3qh+TEp+08IWhpsrIflVHqQ1F1CiPxQGL7doCdBIOOCF+1Tm833faNg==} @@ -8669,8 +8645,6 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.24.0': optional: true - '@rushstack/eslint-patch@1.10.4': {} - '@shikijs/core@1.22.1': dependencies: '@shikijs/engine-javascript': 1.22.1 @@ -9000,8 +8974,6 @@ snapshots: '@trysound/sax@0.2.0': {} - '@tsconfig/node20@20.1.4': {} - '@tsconfig/node22@22.0.0': {} '@types/body-parser@1.19.5': From 99a5666a08e1f56f2dfad239e6ee01099c8a3337 Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 15:48:59 +0100 Subject: [PATCH 08/28] made shared package public and added breakpoints --- packages/shared/breakpoints.ts | 14 ++++++++++++++ packages/shared/package.json | 3 +-- 2 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 packages/shared/breakpoints.ts diff --git a/packages/shared/breakpoints.ts b/packages/shared/breakpoints.ts new file mode 100644 index 0000000000..d5c61fbfc1 --- /dev/null +++ b/packages/shared/breakpoints.ts @@ -0,0 +1,14 @@ +/** + * All available onyx breakpoints / viewports. + * Key = breakpoint name, value = width in pixels. + */ +export const ONYX_BREAKPOINTS = { + "2xs": 320, + xs: 576, + sm: 768, + md: 992, + lg: 1440, + xl: 1920, +} as const; + +export type OnyxBreakpoint = keyof typeof ONYX_BREAKPOINTS; diff --git a/packages/shared/package.json b/packages/shared/package.json index cad3f4c1c0..1e8d7fe1d9 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,8 +1,7 @@ { "name": "@sit-onyx/shared", - "version": "1.0.0", + "version": "0.0.0", "description": "", - "private": true, "type": "module", "peerDependencies": { "@vitejs/plugin-vue": "^5.1.4", From 13b087d73e6ab749a6969455155aafe56b601f32 Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 15:52:04 +0100 Subject: [PATCH 09/28] docs(changeset): **BREAKING**: Removed brand defaults, `createPreview` now expects a new first parameter which requires brand details to be set --- .changeset/tricky-llamas-attack.md | 5 + .../storybook-utils/src/assets/logo-onyx.svg | 51 -------- packages/storybook-utils/src/preview.ts | 17 +-- packages/storybook-utils/src/theme.ts | 115 ++++++++++++++++++ 4 files changed, 130 insertions(+), 58 deletions(-) create mode 100644 .changeset/tricky-llamas-attack.md delete mode 100644 packages/storybook-utils/src/assets/logo-onyx.svg create mode 100644 packages/storybook-utils/src/theme.ts diff --git a/.changeset/tricky-llamas-attack.md b/.changeset/tricky-llamas-attack.md new file mode 100644 index 0000000000..7046adca54 --- /dev/null +++ b/.changeset/tricky-llamas-attack.md @@ -0,0 +1,5 @@ +--- +"@sit-onyx/storybook-utils": major +--- + +**BREAKING**: Removed brand defaults, `createPreview` now expects a new first parameter which requires brand details to be set diff --git a/packages/storybook-utils/src/assets/logo-onyx.svg b/packages/storybook-utils/src/assets/logo-onyx.svg deleted file mode 100644 index ba58ae87f7..0000000000 --- a/packages/storybook-utils/src/assets/logo-onyx.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/storybook-utils/src/preview.ts b/packages/storybook-utils/src/preview.ts index c1d0bd1baa..9221015703 100644 --- a/packages/storybook-utils/src/preview.ts +++ b/packages/storybook-utils/src/preview.ts @@ -5,14 +5,9 @@ import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode"; import { DOCS_RENDERED } from "storybook/internal/core-events"; import { addons } from "storybook/internal/preview-api"; import type { ThemeVars } from "storybook/internal/theming"; -import { ONYX_BREAKPOINTS, createTheme } from "../../sit-onyx/storybook-utils/theme"; import { enhanceEventArgTypes } from "./actions"; import { requiredGlobalType, withRequired } from "./required"; - -const themes = { - light: createTheme(), - dark: createTheme({ base: "dark" }), -} as const; +import { ONYX_BREAKPOINTS, createTheme, type BrandDetails } from "./theme"; /** * Creates a default Storybook preview configuration for 'onyx' with the following features: @@ -40,7 +35,15 @@ const themes = { * export default preview; * ``` */ -export const createPreview = (overrides?: T) => { +export const createPreview = ( + brandDetails: BrandDetails, + overrides?: T, +) => { + const themes = { + light: createTheme(brandDetails), + dark: createTheme(brandDetails, "dark"), + } as const; + const defaultPreview = { argTypesEnhancers: [enhanceEventArgTypes], globalTypes: { diff --git a/packages/storybook-utils/src/theme.ts b/packages/storybook-utils/src/theme.ts new file mode 100644 index 0000000000..acccb830e1 --- /dev/null +++ b/packages/storybook-utils/src/theme.ts @@ -0,0 +1,115 @@ +import { + ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, + type OnyxBreakpoint, +} from "@sit-onyx/shared/breakpoints"; +import onyxVariables from "sit-onyx/themes/onyx.json"; +import { create, type ThemeVars } from "storybook/internal/theming"; + +export type BrandDetails = Required>; + +/** + * Creates a custom theme for Storybook that uses onyx colors. + * + * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart + */ +export const createTheme = (brandDetails: BrandDetails, base: "light" | "dark" = "light") => { + const primaryColor = onyxVariables["onyx-color-themed-primary-500"]; + + return create({ + brandTitle: brandDetails.brandTitle, + brandUrl: brandDetails.brandUrl, + brandImage: brandDetails.brandImage, + brandTarget: "_blank", + base, + + // default theme values that are independent of the light/dark mode: + colorPrimary: primaryColor, + colorSecondary: onyxVariables["onyx-color-themed-secondary-500"], + barSelectedColor: primaryColor, + barHoverColor: primaryColor, + appBorderRadius: remToNumber(onyxVariables["onyx-number-radius-300"]), + inputBorderRadius: remToNumber(onyxVariables["onyx-number-radius-200"]), + + // custom colors depending on light/dark theme + ...(base === "light" ? getLightTheme() : getDarkTheme()), + }) satisfies ThemeVars; +}; + +const getLightTheme = (): Partial => { + return defineTheme({ + background: onyxVariables["onyx-color-universal-grayscale-white"], + contentBackground: onyxVariables["onyx-color-themed-neutral-100"], + text: onyxVariables["onyx-color-themed-neutral-700"], + textMuted: onyxVariables["onyx-color-themed-neutral-600"], + border: onyxVariables["onyx-color-themed-neutral-300"], + }); +}; + +const getDarkTheme = (): Partial => { + return defineTheme({ + background: onyxVariables["onyx-color-themed-neutral-1100"], + contentBackground: onyxVariables["onyx-color-themed-neutral-1200"], + text: onyxVariables["onyx-color-themed-neutral-200"], + textMuted: onyxVariables["onyx-color-themed-neutral-400"], + border: onyxVariables["onyx-color-themed-neutral-900"], + }); +}; + +/** Define a full onyx Storybook color theme based on the given 5 main colors. */ +const defineTheme = (colors: { + text: string; + textMuted: string; + background: string; + border: string; + contentBackground: string; +}) => { + return { + // UI + appBg: colors.background, + appContentBg: colors.contentBackground, + appPreviewBg: colors.contentBackground, + appBorderColor: colors.border, + + // Text colors + textColor: colors.text, + textInverseColor: colors.contentBackground, + + // Toolbar default and active/hover colors + barTextColor: colors.text, + barBg: colors.background, + + // Form colors + inputBg: colors.background, + inputBorder: colors.border, + inputTextColor: colors.text, + booleanBg: colors.background, + booleanSelectedBg: colors.contentBackground, + buttonBg: colors.background, + buttonBorder: colors.border, + textMutedColor: colors.textMuted, + } satisfies Partial; +}; + +/** All available Storybook breakpoints / viewports supported by onyx. */ +export const ONYX_BREAKPOINTS = Object.entries(RAW_ONYX_BREAKPOINTS).reduce( + (obj, [name, width]) => { + const breakpoint = name as OnyxBreakpoint; + obj[breakpoint] = { name: breakpoint, styles: { width: `${width}px`, height: "100%" } }; + return obj; + }, + {} as Record, +); + +export type StorybookBreakpoint = { + name: OnyxBreakpoint; + styles: { + width: string; + height: string; + }; +}; + +/** + * Converts a rem string into a numeric value with a rem base of 16. + * @example "1rem" => 16 + */ +const remToNumber = (value: string) => +value.replace("rem", "") * 16; From 51883ddb6c8e28fd4465f08e0be19f930155d932 Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 15:53:32 +0100 Subject: [PATCH 10/28] use shared package in storybook-utils and revert css changes --- .../.storybook/pages/introduction.mdx | 2 +- packages/sit-onyx/.storybook/preview.ts | 43 ++++--- .../.storybook/public/onyx-logo-long.svg | 51 ++++++++ packages/sit-onyx/src/types/breakpoints.ts | 15 +-- packages/sit-onyx/storybook-utils/theme.ts | 114 ------------------ packages/storybook-utils/package.json | 3 +- .../src}/style.css | 2 - packages/storybook-utils/tsconfig.json | 2 +- pnpm-lock.yaml | 15 +++ 9 files changed, 96 insertions(+), 151 deletions(-) create mode 100644 packages/sit-onyx/.storybook/public/onyx-logo-long.svg delete mode 100644 packages/sit-onyx/storybook-utils/theme.ts rename packages/{sit-onyx/storybook-utils => storybook-utils/src}/style.css (95%) diff --git a/packages/sit-onyx/.storybook/pages/introduction.mdx b/packages/sit-onyx/.storybook/pages/introduction.mdx index 6373033c85..beedf7dd11 100644 --- a/packages/sit-onyx/.storybook/pages/introduction.mdx +++ b/packages/sit-onyx/.storybook/pages/introduction.mdx @@ -1,7 +1,7 @@ import { Meta, Story } from "@storybook/blocks"; import logoDark from "../../../../.github/onyx-logo-dark.svg"; import logoLight from "../../../../.github/onyx-logo-light.svg"; -import logo from "../../../storybook-utils/src/assets/logo-onyx.svg"; +import logo from "../public/onyx-logo-long.svg"; import { Default as ComponentShowcase } from "../../src/components/examples/ComponentShowcase/ComponentShowcase.stories.ts"; {/* workaround for hiding the table of contents, see docs-template.scss file */} diff --git a/packages/sit-onyx/.storybook/preview.ts b/packages/sit-onyx/.storybook/preview.ts index 32906def74..b63487ead9 100644 --- a/packages/sit-onyx/.storybook/preview.ts +++ b/packages/sit-onyx/.storybook/preview.ts @@ -6,15 +6,15 @@ import { onyxThemeGlobalType, withOnyxTheme } from "./theme-switch"; import "@fontsource-variable/source-code-pro"; import "@fontsource-variable/source-sans-3"; +import "@sit-onyx/storybook-utils/style.css"; import { getRules, Spec } from "axe-core"; import { a11yTags } from "../src/a11yConfig"; import "../src/styles/index.scss"; -import "../storybook-utils/style.css"; import "./docs-template.scss"; import { enhanceFormInjectedSymbol } from "./formInjected"; import { enhanceManagedSymbol } from "./managed"; +import brandImage from "./public/onyx-logo-long.svg"; import { withOnyxVModelDecorator } from "./vModel"; - const enabledRules = getRules(a11yTags).map((ruleMetadata) => ({ id: ruleMetadata.ruleId, enabled: true, @@ -22,26 +22,33 @@ const enabledRules = getRules(a11yTags).map((ruleMetadata) => ({ const axeConfig: Spec = { rules: enabledRules }; -const basePreview = createPreview({ - argTypesEnhancers: [enhanceManagedSymbol, enhanceFormInjectedSymbol], - parameters: { - docs: { - page: docsTemplate, - toc: { - title: "Table of Contents", - // add our custom "Properties, Events and Slots" headline from docs-template.mdx to the table of contents - headingSelector: ".sb-anchor > h3, #properties-events-and-slots, #examples", +const basePreview = createPreview( + { + brandImage, + brandTitle: "onyx Storybook", + brandUrl: "https://onyx.schwarz", + }, + { + argTypesEnhancers: [enhanceManagedSymbol, enhanceFormInjectedSymbol], + parameters: { + docs: { + page: docsTemplate, + toc: { + title: "Table of Contents", + // add our custom "Properties, Events and Slots" headline from docs-template.mdx to the table of contents + headingSelector: ".sb-anchor > h3, #properties-events-and-slots, #examples", + }, + }, + a11y: { + config: axeConfig, }, }, - a11y: { - config: axeConfig, + globalTypes: { + ...onyxThemeGlobalType, }, + decorators: [withOnyxTheme, withOnyxVModelDecorator], }, - globalTypes: { - ...onyxThemeGlobalType, - }, - decorators: [withOnyxTheme, withOnyxVModelDecorator], -}); +); const preview: Preview = { ...basePreview, diff --git a/packages/sit-onyx/.storybook/public/onyx-logo-long.svg b/packages/sit-onyx/.storybook/public/onyx-logo-long.svg new file mode 100644 index 0000000000..ba58ae87f7 --- /dev/null +++ b/packages/sit-onyx/.storybook/public/onyx-logo-long.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/sit-onyx/src/types/breakpoints.ts b/packages/sit-onyx/src/types/breakpoints.ts index d5c61fbfc1..0bbb06c1d4 100644 --- a/packages/sit-onyx/src/types/breakpoints.ts +++ b/packages/sit-onyx/src/types/breakpoints.ts @@ -1,14 +1 @@ -/** - * All available onyx breakpoints / viewports. - * Key = breakpoint name, value = width in pixels. - */ -export const ONYX_BREAKPOINTS = { - "2xs": 320, - xs: 576, - sm: 768, - md: 992, - lg: 1440, - xl: 1920, -} as const; - -export type OnyxBreakpoint = keyof typeof ONYX_BREAKPOINTS; +export * from "@sit-onyx/shared/breakpoints"; diff --git a/packages/sit-onyx/storybook-utils/theme.ts b/packages/sit-onyx/storybook-utils/theme.ts deleted file mode 100644 index 6e5bd832b5..0000000000 --- a/packages/sit-onyx/storybook-utils/theme.ts +++ /dev/null @@ -1,114 +0,0 @@ -import onyxLogo from "@sit-onyx/storybook-utils/assets/logo-onyx.svg"; -import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx"; -import onyxVariables from "sit-onyx/themes/onyx.json"; -import { create, type ThemeVars, type ThemeVarsPartial } from "storybook/internal/theming"; - -/** - * Creates a custom theme for Storybook that uses onyx colors. - * - * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart - */ -export const createTheme = ( - options?: Pick, -) => { - const base = options?.base ?? "light"; - const primaryColor = onyxVariables["onyx-color-themed-primary-500"]; - - return create({ - brandTitle: options?.brandTitle ?? "onyx Storybook", - brandUrl: options?.brandUrl ?? "https://onyx.schwarz", - brandImage: options?.brandImage ?? onyxLogo, - brandTarget: "_blank", - base: base, - - // default theme values that are independent of the light/dark mode: - colorPrimary: primaryColor, - colorSecondary: onyxVariables["onyx-color-themed-secondary-500"], - barSelectedColor: primaryColor, - barHoverColor: primaryColor, - appBorderRadius: remToNumber(onyxVariables["onyx-number-radius-300"]), - inputBorderRadius: remToNumber(onyxVariables["onyx-number-radius-200"]), - - // custom colors depending on light/dark theme - ...(base === "light" ? getLightTheme() : getDarkTheme()), - }) satisfies ThemeVars; -}; - -const getLightTheme = (): Partial => { - return defineTheme({ - background: onyxVariables["onyx-color-universal-grayscale-white"], - contentBackground: onyxVariables["onyx-color-themed-neutral-100"], - text: onyxVariables["onyx-color-themed-neutral-700"], - textMuted: onyxVariables["onyx-color-themed-neutral-600"], - border: onyxVariables["onyx-color-themed-neutral-300"], - }); -}; - -const getDarkTheme = (): Partial => { - return defineTheme({ - background: onyxVariables["onyx-color-themed-neutral-1100"], - contentBackground: onyxVariables["onyx-color-themed-neutral-1200"], - text: onyxVariables["onyx-color-themed-neutral-200"], - textMuted: onyxVariables["onyx-color-themed-neutral-400"], - border: onyxVariables["onyx-color-themed-neutral-900"], - }); -}; - -/** Define a full onyx Storybook color theme based on the given 5 main colors. */ -const defineTheme = (colors: { - text: string; - textMuted: string; - background: string; - border: string; - contentBackground: string; -}) => { - return { - // UI - appBg: colors.background, - appContentBg: colors.contentBackground, - appPreviewBg: colors.contentBackground, - appBorderColor: colors.border, - - // Text colors - textColor: colors.text, - textInverseColor: colors.contentBackground, - - // Toolbar default and active/hover colors - barTextColor: colors.text, - barBg: colors.background, - - // Form colors - inputBg: colors.background, - inputBorder: colors.border, - inputTextColor: colors.text, - booleanBg: colors.background, - booleanSelectedBg: colors.contentBackground, - buttonBg: colors.background, - buttonBorder: colors.border, - textMutedColor: colors.textMuted, - } satisfies Partial; -}; - -/** All available Storybook breakpoints / viewports supported by onyx. */ -export const ONYX_BREAKPOINTS = Object.entries(RAW_ONYX_BREAKPOINTS).reduce( - (obj, [name, width]) => { - const breakpoint = name as OnyxBreakpoint; - obj[breakpoint] = { name: breakpoint, styles: { width: `${width}px`, height: "100%" } }; - return obj; - }, - {} as Record, -); - -export type StorybookBreakpoint = { - name: OnyxBreakpoint; - styles: { - width: string; - height: string; - }; -}; - -/** - * Converts a rem string into a numeric value with a rem base of 16. - * @example "1rem" => 16 - */ -const remToNumber = (value: string) => +value.replace("rem", "") * 16; diff --git a/packages/storybook-utils/package.json b/packages/storybook-utils/package.json index c2f34a3fe9..7bf9514a54 100644 --- a/packages/storybook-utils/package.json +++ b/packages/storybook-utils/package.json @@ -11,7 +11,7 @@ "types": "./src/index.ts", "exports": { ".": "./src/index.ts", - "./assets/logo-onyx.svg": "./src/assets/logo-onyx.svg" + "./style.css": "./src/style.css" }, "homepage": "https://onyx.schwarz/development/packages/storybook-utils.html", "repository": { @@ -28,6 +28,7 @@ "test:coverage": "vitest run --coverage" }, "peerDependencies": { + "@sit-onyx/shared": "workspace:^", "@sit-onyx/icons": "workspace:^", "@storybook/vue3": ">= 8.3.0", "storybook": ">= 8.3.0", diff --git a/packages/sit-onyx/storybook-utils/style.css b/packages/storybook-utils/src/style.css similarity index 95% rename from packages/sit-onyx/storybook-utils/style.css rename to packages/storybook-utils/src/style.css index a0cb882dc4..e680ca68c2 100644 --- a/packages/sit-onyx/storybook-utils/style.css +++ b/packages/storybook-utils/src/style.css @@ -1,5 +1,3 @@ -@import url("sit-onyx/themes/onyx.css"); - .onyx-disclaimer { border-radius: 0.5rem; padding: 1rem; diff --git a/packages/storybook-utils/tsconfig.json b/packages/storybook-utils/tsconfig.json index 57fb89e844..869ee691e9 100644 --- a/packages/storybook-utils/tsconfig.json +++ b/packages/storybook-utils/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "@vue/tsconfig/tsconfig.dom.json", - "include": ["src", "svg.d.ts", "../sit-onyx/storybook-utils/theme.ts", "src/preview.ts"], + "include": ["src", "svg.d.ts", "src/theme.ts", "src/preview.ts"], "compilerOptions": { "types": ["node", "vite/client"], "rootDir": "./src", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d2631b9f3..ccc96d7c3d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,18 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +catalogs: + default: + '@vue/compiler-dom': + specifier: 3.5.12 + version: 3.5.12 + chart.js: + specifier: ^4.4.5 + version: 4.4.5 + sass-embedded: + specifier: 1.80.4 + version: 1.80.4 + overrides: vue: 3.5.12 @@ -400,6 +412,9 @@ importers: '@sit-onyx/icons': specifier: workspace:^ version: link:../icons + '@sit-onyx/shared': + specifier: workspace:^ + version: link:../shared '@storybook/vue3': specifier: '>= 8.3.0' version: 8.3.6(storybook@8.3.6)(vue@3.5.12(typescript@5.6.3)) From 09998944112b5a15c74d3acf5a325afbd3224f4e Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 16:59:47 +0100 Subject: [PATCH 11/28] removed onyxVariables reference from storybook utils --- packages/storybook-utils/src/theme.ts | 36 ++++++++++++++++----------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/storybook-utils/src/theme.ts b/packages/storybook-utils/src/theme.ts index acccb830e1..983d3b650a 100644 --- a/packages/storybook-utils/src/theme.ts +++ b/packages/storybook-utils/src/theme.ts @@ -2,18 +2,24 @@ import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint, } from "@sit-onyx/shared/breakpoints"; -import onyxVariables from "sit-onyx/themes/onyx.json"; import { create, type ThemeVars } from "storybook/internal/theming"; export type BrandDetails = Required>; +/** + * Get the computed value for a CSS custom property. + * Per default the property value is taken from the body element. + */ +export const getCustomProperty = (property: string, el: Element = document.body) => + getComputedStyle(el).getPropertyValue(property); + /** * Creates a custom theme for Storybook that uses onyx colors. * * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart */ export const createTheme = (brandDetails: BrandDetails, base: "light" | "dark" = "light") => { - const primaryColor = onyxVariables["onyx-color-themed-primary-500"]; + const primaryColor = getCustomProperty("--onyx-color-themed-primary-500"); return create({ brandTitle: brandDetails.brandTitle, @@ -24,11 +30,11 @@ export const createTheme = (brandDetails: BrandDetails, base: "light" | "dark" = // default theme values that are independent of the light/dark mode: colorPrimary: primaryColor, - colorSecondary: onyxVariables["onyx-color-themed-secondary-500"], + colorSecondary: getCustomProperty("--onyx-color-themed-secondary-500"), barSelectedColor: primaryColor, barHoverColor: primaryColor, - appBorderRadius: remToNumber(onyxVariables["onyx-number-radius-300"]), - inputBorderRadius: remToNumber(onyxVariables["onyx-number-radius-200"]), + appBorderRadius: remToNumber(getCustomProperty("--onyx-number-radius-300")), + inputBorderRadius: remToNumber(getCustomProperty("--onyx-number-radius-200")), // custom colors depending on light/dark theme ...(base === "light" ? getLightTheme() : getDarkTheme()), @@ -37,21 +43,21 @@ export const createTheme = (brandDetails: BrandDetails, base: "light" | "dark" = const getLightTheme = (): Partial => { return defineTheme({ - background: onyxVariables["onyx-color-universal-grayscale-white"], - contentBackground: onyxVariables["onyx-color-themed-neutral-100"], - text: onyxVariables["onyx-color-themed-neutral-700"], - textMuted: onyxVariables["onyx-color-themed-neutral-600"], - border: onyxVariables["onyx-color-themed-neutral-300"], + background: getCustomProperty("--onyx-color-universal-grayscale-white"), + contentBackground: getCustomProperty("--onyx-color-themed-neutral-100"), + text: getCustomProperty("--onyx-color-themed-neutral-700"), + textMuted: getCustomProperty("--onyx-color-themed-neutral-600"), + border: getCustomProperty("--onyx-color-themed-neutral-300"), }); }; const getDarkTheme = (): Partial => { return defineTheme({ - background: onyxVariables["onyx-color-themed-neutral-1100"], - contentBackground: onyxVariables["onyx-color-themed-neutral-1200"], - text: onyxVariables["onyx-color-themed-neutral-200"], - textMuted: onyxVariables["onyx-color-themed-neutral-400"], - border: onyxVariables["onyx-color-themed-neutral-900"], + background: getCustomProperty("--onyx-color-themed-neutral-1100"), + contentBackground: getCustomProperty("--onyx-color-themed-neutral-1200"), + text: getCustomProperty("--onyx-color-themed-neutral-200"), + textMuted: getCustomProperty("--onyx-color-themed-neutral-400"), + border: getCustomProperty("--onyx-color-themed-neutral-900"), }); }; From 0eb5a6c7adce9d8fa6fe371df86c858e13ff857f Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 17:02:41 +0100 Subject: [PATCH 12/28] revert stroybook version ref to ^8.4.0 --- package.json | 8 ++++---- pnpm-lock.yaml | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 99676c2063..1511519a97 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,10 @@ "@microsoft/eslint-formatter-sarif": "^3.1.0", "@playwright/experimental-ct-vue": "^1.48.2", "@playwright/test": "^1.48.2", - "@storybook/addon-essentials": "^8.3.5", - "@storybook/blocks": "^8.3.5", - "@storybook/vue3": "^8.3.5", - "@storybook/vue3-vite": "^8.3.5", + "@storybook/addon-essentials": "^8.4.0", + "@storybook/blocks": "^8.4.0", + "@storybook/vue3": "^8.4.0", + "@storybook/vue3-vite": "^8.4.0", "@tsconfig/node22": "^22.0.0", "@types/eslint": "^9.6.1", "@types/jsdom": "^21.1.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ccc96d7c3d..b7a07e2bf9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,16 +48,16 @@ importers: specifier: ^1.48.2 version: 1.48.2 '@storybook/addon-essentials': - specifier: ^8.3.5 + specifier: ^8.4.0 version: 8.4.0(@types/react@18.3.12)(storybook@8.4.0(prettier@3.3.3))(webpack-sources@3.2.3) '@storybook/blocks': - specifier: ^8.3.5 + specifier: ^8.4.0 version: 8.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.0(prettier@3.3.3)) '@storybook/vue3': - specifier: ^8.3.5 + specifier: ^8.4.0 version: 8.4.0(storybook@8.4.0(prettier@3.3.3))(vue@3.5.12(typescript@5.6.3)) '@storybook/vue3-vite': - specifier: ^8.3.5 + specifier: ^8.4.0 version: 8.4.0(storybook@8.4.0(prettier@3.3.3))(vite@5.4.10(@types/node@22.8.6)(sass-embedded@1.80.5)(sass@1.80.4)(stylus@0.57.0)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3) '@tsconfig/node22': specifier: ^22.0.0 From d94bb8a39d9f082b5af9bee64b0158c574b7f5fc Mon Sep 17 00:00:00 2001 From: Jonathan Carle Date: Mon, 4 Nov 2024 17:10:59 +0100 Subject: [PATCH 13/28] Get rid of breakpoint re-export and use directly --- packages/sit-onyx/package.json | 2 +- .../sit-onyx/src/components/OnyxDialog/OnyxDialog.ct.tsx | 2 +- .../sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx | 2 +- .../src/components/OnyxNavBar/OnyxNavBar.stories.ts | 2 +- packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue | 2 +- packages/sit-onyx/src/components/OnyxNavBar/types.ts | 2 +- packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx | 2 +- .../examples/ComponentShowcase/ComponentShowcase.ct.tsx | 2 +- .../EditGridElementDialog/EditGridElementDialog.vue | 2 +- .../examples/GridPlayground/GridPlayground.ct.tsx | 2 +- .../components/examples/GridPlayground/GridPlayground.vue | 2 +- packages/sit-onyx/src/styles/grid.ct.tsx | 2 +- packages/sit-onyx/src/types/breakpoints.ts | 1 - packages/sit-onyx/src/types/index.ts | 1 - pnpm-lock.yaml | 6 +++--- 15 files changed, 15 insertions(+), 17 deletions(-) delete mode 100644 packages/sit-onyx/src/types/breakpoints.ts diff --git a/packages/sit-onyx/package.json b/packages/sit-onyx/package.json index 138c106556..1d40877806 100644 --- a/packages/sit-onyx/package.json +++ b/packages/sit-onyx/package.json @@ -44,6 +44,7 @@ }, "peerDependencies": { "@sit-onyx/icons": "workspace:^", + "@sit-onyx/shared": "workspace:^", "typescript": ">= 5.2.2", "vue": ">= 3.5.0" }, @@ -52,7 +53,6 @@ "@sit-onyx/headless": "workspace:^", "@sit-onyx/storybook-utils": "workspace:^", "@sit-onyx/eslint-plugin": "workspace:^", - "@sit-onyx/shared": "workspace:^", "@storybook/addon-a11y": "^8.4.0", "@vue/compiler-dom": "catalog:", "axe-core": "^4.10.2", diff --git a/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.ct.tsx b/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.ct.tsx index 75bfc8a11e..27f1ac2b2a 100644 --- a/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxDialog/OnyxDialog.ct.tsx @@ -1,5 +1,5 @@ +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; import { expect, test } from "../../playwright/a11y"; -import { ONYX_BREAKPOINTS } from "../../types"; import OnyxDialog from "./OnyxDialog.vue"; test.beforeEach(async ({ page }) => { diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx index e092d0009c..9db1ff2227 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx @@ -1,4 +1,5 @@ import { navigationTesting } from "@sit-onyx/headless/playwright"; +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; import { expect, test } from "../../playwright/a11y"; import { MOCK_PLAYWRIGHT_LOGO_URL, @@ -6,7 +7,6 @@ import { executeMatrixScreenshotTest, mockPlaywrightIcon, } from "../../playwright/screenshots"; -import { ONYX_BREAKPOINTS } from "../../types"; import OnyxAppLayout from "../OnyxAppLayout/OnyxAppLayout.vue"; import OnyxBadge from "../OnyxBadge/OnyxBadge.vue"; import OnyxIcon from "../OnyxIcon/OnyxIcon.vue"; diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts index 735d0751c7..ab8975fdd3 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts +++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.stories.ts @@ -2,9 +2,9 @@ import browserTerminal from "@sit-onyx/icons/browser-terminal.svg?raw"; import placeholder from "@sit-onyx/icons/placeholder.svg?raw"; import search from "@sit-onyx/icons/search.svg?raw"; import settings from "@sit-onyx/icons/settings.svg?raw"; +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; import type { Meta, StoryObj } from "@storybook/vue3"; import { h } from "vue"; -import { ONYX_BREAKPOINTS } from "../../types"; import OnyxBadge from "../OnyxBadge/OnyxBadge.vue"; import OnyxIcon from "../OnyxIcon/OnyxIcon.vue"; import OnyxIconButton from "../OnyxIconButton/OnyxIconButton.vue"; diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue index 40aa7bda7e..86dbb6fed6 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue +++ b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue @@ -3,10 +3,10 @@ import { createNavigationMenu } from "@sit-onyx/headless"; import chevronLeftSmall from "@sit-onyx/icons/chevron-left-small.svg?raw"; import menu from "@sit-onyx/icons/menu.svg?raw"; import moreVertical from "@sit-onyx/icons/more-vertical.svg?raw"; +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; import { computed, provide, ref, toRef } from "vue"; import { useResizeObserver } from "../../composables/useResizeObserver"; import { injectI18n } from "../../i18n"; -import { ONYX_BREAKPOINTS } from "../../types"; import OnyxIconButton from "../OnyxIconButton/OnyxIconButton.vue"; import OnyxMobileNavButton from "../OnyxMobileNavButton/OnyxMobileNavButton.vue"; import OnyxNavAppArea from "../OnyxNavAppArea/OnyxNavAppArea.vue"; diff --git a/packages/sit-onyx/src/components/OnyxNavBar/types.ts b/packages/sit-onyx/src/components/OnyxNavBar/types.ts index d55e0d2327..742daa12cf 100644 --- a/packages/sit-onyx/src/components/OnyxNavBar/types.ts +++ b/packages/sit-onyx/src/components/OnyxNavBar/types.ts @@ -1,5 +1,5 @@ +import type { OnyxBreakpoint } from "@sit-onyx/shared/breakpoints"; import type { ComputedRef, InjectionKey } from "vue"; -import type { OnyxBreakpoint } from "../../types"; import type { OnyxNavAppAreaProps } from "../OnyxNavAppArea/types"; export type OnyxNavBarProps = Omit & { diff --git a/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx b/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx index 032b708e7b..8423026c57 100644 --- a/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx +++ b/packages/sit-onyx/src/components/OnyxToast/OnyxToast.ct.tsx @@ -1,5 +1,5 @@ +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; import { expect, test } from "../../playwright/a11y"; -import { ONYX_BREAKPOINTS } from "../../types"; import PlaywrightTestWrapper from "./PlaywrightTestWrapper.ct.vue"; Object.entries(ONYX_BREAKPOINTS).forEach(([breakpoint, width]) => { diff --git a/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.ct.tsx b/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.ct.tsx index ffcc75857d..93ddafab4b 100644 --- a/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.ct.tsx +++ b/packages/sit-onyx/src/components/examples/ComponentShowcase/ComponentShowcase.ct.tsx @@ -1,5 +1,5 @@ +import { ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints"; import { expect, test } from "../../../playwright/a11y"; -import { ONYX_BREAKPOINTS } from "../../../types"; import ComponentShowcase from "./ComponentShowcase.vue"; test.beforeEach(async ({ page }) => { diff --git a/packages/sit-onyx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue b/packages/sit-onyx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue index 1bd178c382..f5c6056161 100644 --- a/packages/sit-onyx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue +++ b/packages/sit-onyx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue @@ -1,6 +1,6 @@