chore: fix cyclic dependencies

.changeset/tricky-llamas-attack.md

@@ -0,0 +1,7 @@
+---
+"@sit-onyx/storybook-utils": major
+---
+
+**BREAKING**: Removed brand defaults, `createPreview` now expects a new first parameter which requires brand details to be set.
+**BREAKING**: Removed brand defaults, `createTheme` now requires brand details to be set, `base: "light" | "dark"` is now the secondary parameter.
+feat: Added `getCustomProperty` function which is used to load color values for theme.

.github/workflows/import-figma.yml

@@ -27,7 +27,7 @@ jobs:
       # we need to separately import the themes because they are all needed in different formats and selectors
       - name: 🎨 Import onyx variables
         run: |
-          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m onyx -f CSS JSON -s ":where(:root), .onyx-theme-default"
+          pnpm run @sit-onyx/figma-utils import-variables -k "${{ vars.FIGMA_FILE_KEY }}" -t "${{ secrets.FIGMA_TOKEN }}" -d "../sit-onyx/src/styles/variables/themes" -m onyx -f CSS -s ":where(:root), .onyx-theme-default"
         working-directory: packages/figma-utils
 
       - name: 🎨 Import additional onyx themes

apps/demo-app/vite.config.ts

@@ -1,5 +1,5 @@
+import { VITE_BASE_CONFIG } from "@sit-onyx/shared/vite.config.base";
 import { defineConfig } from "vite";
-import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config/
 export default defineConfig({

apps/docs/package.json

@@ -16,6 +16,7 @@
     "@playwright/test": "^1.48.2",
     "@sit-onyx/chartjs-plugin": "workspace:^",
     "@sit-onyx/icons": "workspace:^",
+    "@sit-onyx/storybook-utils": "workspace:^",
     "@sit-onyx/shared": "workspace:^",
     "@sit-onyx/vitepress-theme": "workspace:^",
     "chart.js": "catalog:",

apps/docs/vite.config.ts

@@ -1,6 +1,6 @@
+import { VITE_BASE_CONFIG } from "@sit-onyx/shared/vite.config.base";
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
-import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config
 export default defineConfig({

apps/playground/vite.config.ts

@@ -1,5 +1,5 @@
+import { VITE_BASE_CONFIG } from "@sit-onyx/shared/vite.config.base";
 import { defineConfig } from "vite";
-import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config
 export default defineConfig({

package.json

@@ -27,8 +27,6 @@
     "@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:^",
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/blocks": "^8.4.2",
     "@storybook/vue3": "^8.4.2",
@@ -75,7 +73,8 @@
   },
   "pnpm": {
     "overrides": {
-      "vue": "catalog:"
+      "vue": "catalog:",
+      "sass-embedded": "catalog:"
     }
   }
 }

packages/chartjs-plugin/package.json

@@ -35,8 +35,10 @@
   },
   "devDependencies": {
     "@sit-onyx/shared": "workspace:^",
+    "@sit-onyx/storybook-utils": "workspace:^",
     "@vue/compiler-dom": "catalog:",
     "chart.js": "catalog:",
+    "sit-onyx": "workspace:^",
     "vue": "catalog:",
     "vue-chartjs": "^5.3.2"
   }

packages/chartjs-plugin/vite.config.ts

@@ -1,5 +1,5 @@
+import { VITE_BASE_CONFIG } from "@sit-onyx/shared/vite.config.base";
 import { defineConfig } from "vite";
-import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config
 export default defineConfig({

packages/icons/package.json

@@ -13,15 +13,19 @@
     "url": "https://github.com/schwarzit/onyx/issues"
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
-  "types": "./src/index.ts",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
+    },
     "./metadata": "./src/metadata.json",
     "./*": "./src/assets/*"
   },
   "scripts": {
+    "build": "tsc",
     "test": "vitest",
     "generate:changeset": "tsx ./scripts/changeset.ts"
   },

packages/icons/tsconfig.json

@@ -5,6 +5,7 @@
     "rootDir": "./src",
     "baseUrl": ".",
     "types": ["node"],
+    "outDir": "./dist",
     "verbatimModuleSyntax": true,
     "resolveJsonModule": true
   }

packages/nuxt/package.json

@@ -43,8 +43,9 @@
     "@nuxt/schema": "^3.14.159",
     "@nuxt/test-utils": "^3.14.4",
     "@nuxtjs/i18n": "^9.0.0",
-    "nuxt": "^3.14.159",
-    "vue-i18n": "^10.0.4"
+    "nuxt": "^3.13.2",
+    "vue-i18n": "^10.0.4",
+    "sit-onyx": "workspace:^"
   },
   "peerDependencies": {
     "sit-onyx": "workspace:^"

packages/shared/package.json

@@ -1,9 +1,21 @@
 {
   "name": "@sit-onyx/shared",
-  "version": "1.0.0",
+  "version": "0.0.0",
   "description": "",
-  "private": true,
   "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./src/*.ts",
+      "import": "./dist/*.js"
+    }
+  },
   "peerDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
     "sass-embedded": "catalog:",

packages/shared/vite.config.base.ts → packages/shared/src/vite.config.base.ts

@@ -17,4 +17,4 @@ export const VITE_BASE_CONFIG = {
       } satisfies ViteScssOptions,
     },
   },
-} satisfies UserConfig;
+} as const satisfies UserConfig;

packages/shared/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    /* Projects */
+
+    /* Language and Environment */
+    "target": "es2020" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+
+    /* Modules */
+    "module": "es2020" /* Specify what module code is generated. */,
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+
+    /* Emit */
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+
+    /* Interop Constraints */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+
+    /* Completeness */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

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 */}

packages/sit-onyx/.storybook/preview.ts

@@ -13,35 +13,42 @@ import "../src/styles/index.scss";
 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,
 }));
 
 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,

packages/sit-onyx/package.json

@@ -34,6 +34,7 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "scripts": {
+    "td": "turbo watch --filter=sit-onyx dev",
     "dev": "storybook dev -p 6006 --no-open",
     "build": "vite build && vue-tsc -p tsconfig.app.json --composite false",
     "build:storybook": "storybook build",
@@ -44,13 +45,14 @@
   },
   "peerDependencies": {
     "@sit-onyx/icons": "workspace:^",
+    "@sit-onyx/shared": "workspace:^",
     "typescript": ">= 5.2.2",
     "vue": ">= 3.5.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
     "@sit-onyx/headless": "workspace:^",
-    "@sit-onyx/shared": "workspace:^",
+    "@sit-onyx/storybook-utils": "workspace:^",
     "@storybook/addon-a11y": "^8.4.2",
     "@vue/compiler-dom": "catalog:",
     "axe-core": "^4.10.2",

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 }) => {

packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.ct.tsx

@@ -1,12 +1,12 @@
 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,
   defineLogoMockRoutes,
   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";

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";

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";

packages/sit-onyx/src/components/OnyxNavBar/types.ts

@@ -1,6 +1,6 @@
+import type { OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
 import type { ComputedRef, InjectionKey } from "vue";
 import type { MoreListInjectionKey } from "../../composables/useMoreList";
-import type { OnyxBreakpoint } from "../../types";
 import type { OnyxNavAppAreaProps } from "../OnyxNavAppArea/types";
 
 export type OnyxNavBarProps = Omit<OnyxNavAppAreaProps, "label"> & {

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]) => {

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 }) => {

packages/sit-onyx/src/components/examples/GridPlayground/EditGridElementDialog/EditGridElementDialog.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { type OnyxBreakpoint, ONYX_BREAKPOINTS } from "@sit-onyx/shared/breakpoints";
 import { ref, toRaw, watch } from "vue";
-import { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "../../../../types";
 import OnyxButton from "../../../OnyxButton/OnyxButton.vue";
 import OnyxCheckbox from "../../../OnyxCheckbox/OnyxCheckbox.vue";
 import OnyxDialog from "../../../OnyxDialog/OnyxDialog.vue";

packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.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 GridPlayground from "./GridPlayground.vue";
 
 test.beforeEach(async ({ page }) => {

packages/sit-onyx/src/components/examples/GridPlayground/GridPlayground.vue

@@ -2,9 +2,9 @@
 import edit from "@sit-onyx/icons/edit.svg?raw";
 import plus from "@sit-onyx/icons/plus.svg?raw";
 import settings from "@sit-onyx/icons/settings.svg?raw";
+import { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
 import { computed, nextTick, ref, shallowRef, watch } from "vue";
 import { useResizeObserver } from "../../../composables/useResizeObserver";
-import { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "../../../types";
 import OnyxHeadline from "../../OnyxHeadline/OnyxHeadline.vue";
 import OnyxIcon from "../../OnyxIcon/OnyxIcon.vue";
 import OnyxLink from "../../OnyxLink/OnyxLink.vue";

packages/sit-onyx/src/index.ts

@@ -1,5 +1,7 @@
 import "./styles/index.scss";
 
+export { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
+
 export { default as OnyxAppLayout } from "./components/OnyxAppLayout/OnyxAppLayout.vue";
 export * from "./components/OnyxAppLayout/types";
 

packages/sit-onyx/src/styles/grid.ct.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable playwright/expect-expect */
 import type { Locator, Page } from "@playwright/test";
+import { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "@sit-onyx/shared/breakpoints";
 import { expect, test } from "../playwright/a11y";
-import { ONYX_BREAKPOINTS, type OnyxBreakpoint } from "../types";
 
 /**
  * Map of column count per breakpoint.