@sit-onyx/storybook-utils 0.1.0-alpha.1 → 1.0.0-alpha.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "0.1.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -17,7 +17,8 @@
     "@storybook/preview-api": ">= 7",
     "@storybook/theming": ">= 7",
     "@storybook/vue3": ">= 7",
-    "storybook-dark-mode": ">= 3"
+    "storybook-dark-mode": ">= 3",
+    "sit-onyx": "^0.1.0-alpha.3"
   },
   "dependencies": {
     "deepmerge-ts": "^5.1.0"

package/src/actions.ts

@@ -1,12 +1,8 @@
 import { useArgs } from "@storybook/preview-api";
-import type { ArgTypes, Meta } from "@storybook/vue3";
+import type { ArgTypes, Decorator, Meta } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 import { isReactive, reactive, watch } from "vue";
-import type {
-  ArrayElement,
-  DefineStorybookActionsAndVModelsOptions,
-  ExtractVueEventNames,
-} from ".";
+import type { DefineStorybookActionsAndVModelsOptions, ExtractVueEventNames } from ".";
 
 /**
  * Utility to define Storybook meta for a given Vue component which will take care of defining argTypes for
@@ -31,14 +27,14 @@ import type {
  */
 export const defineStorybookActionsAndVModels = <T>(
   options: DefineStorybookActionsAndVModelsOptions<T>,
-): Meta<T> => {
+): Meta => {
   const defaultMeta = {
     argTypes: {
       ...defineActions(options.events),
       ...{}, // this is needed to fix a type issue
     },
     decorators: [withVModelDecorator(options.events)],
-  } satisfies Meta<T>;
+  } satisfies Meta;
 
   return deepmerge(options, defaultMeta);
 };
@@ -81,9 +77,7 @@ export const defineActions = <T>(events: ExtractVueEventNames<T>[]): ArgTypes =>
  * }
  * ```
  */
-export const withVModelDecorator = <T>(
-  events: ExtractVueEventNames<T>[],
-): ArrayElement<Meta<T>["decorators"]> => {
+export const withVModelDecorator = <T>(events: ExtractVueEventNames<T>[]): Decorator => {
   return (story, ctx) => {
     const vModelEvents = events.filter((event) => event.startsWith("update:"));
     if (!vModelEvents.length) return story();

package/src/index.css

@@ -1,4 +1,4 @@
-@import url("../../sit-onyx/src/styles/variables-onyx.css");
+@import url("sit-onyx/src/styles/variables-onyx.css");
 
 .onyx-disclaimer {
   border-radius: 0.5rem;
@@ -7,7 +7,7 @@
   margin: 1rem 0;
 
   /* same color as VitePress var(--vp-c-tip-soft) */
-  background-color: color-mix(in srgb, var(--onyx-color-surface-info-400) 25%, transparent);
+  background-color: color-mix(in srgb, var(--onyx-color-base-info-400) 25%, transparent);
 }
 
 .onyx-disclaimer__title {
@@ -20,7 +20,7 @@
 }
 
 /* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
-.dark #storybook-docs .sbdocs-wrapper > div:nth-child(2) {
+#storybook-docs .sbdocs-wrapper > div:nth-child(2) {
   /* same as Storybook color "textMuted" inside ./theme.ts */
-  color: var(--onyx-color-brand-neutral-300);
+  color: var(--onyx-color-text-neutral-medium);
 }

package/src/preview.ts

@@ -12,13 +12,13 @@ const themes = {
 } as const;
 
 /**
- * Creates a default Storybook preview configuration for 'Onyx' with the following features:
+ * Creates a default Storybook preview configuration for 'onyx' with the following features:
  * - Improved controls (sorting and expanded controls so descriptions etc. are also shown in a single story)
  * - Improved Vue-specific code highlighting (e.g. using `@` instead of `v-on:`)
  * - Setup for dark mode (including docs page). Requires addon `storybook-dark-mode` to be enabled in .storybook/main.ts file
- * - Custom Storybook theme using Onyx colors (light and dark mode)
+ * - Custom Storybook theme using onyx colors (light and dark mode)
  * - Support for setting the light/dark mode when Storybook is embedded as an iframe (via query parameter, e.g. `?theme=dark`)
- * - Configure viewports / breakpoints as defined by Onyx
+ * - Configure viewports / breakpoints as defined by onyx
  *
  * @param overrides Custom preview / overrides, will be deep merged with the default preview.
  *

package/src/theme.ts

@@ -1,11 +1,11 @@
 import type { ThemeVars, ThemeVarsPartial } from "@storybook/theming";
 import { create } from "@storybook/theming/create";
-import onyxVariables from "../../sit-onyx/src/styles/variables-onyx.json";
+import onyxVariables from "sit-onyx/src/styles/variables-onyx.json";
 import storybookLogo from "./assets/logo-storybook-default.svg";
 import storybookLogoInverse from "./assets/logo-storybook-inverse.svg";
 
 /**
- * Creates a custom theme for Storybook that uses Onyx colors.
+ * Creates a custom theme for Storybook that uses onyx colors.
  *
  * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
  */
@@ -14,10 +14,10 @@ export const createTheme = (
 ) => {
   const base = options?.base ?? "light";
   const defaultBrandImage = base === "light" ? storybookLogo : storybookLogoInverse;
-  const primaryColor = onyxVariables["onyx-color-brand-primary-500"];
+  const primaryColor = onyxVariables["onyx-color-themed-primary-500"];
 
   return create({
-    brandTitle: options?.brandTitle ?? "Onyx Storybook",
+    brandTitle: options?.brandTitle ?? "onyx Storybook",
     brandUrl: options?.brandUrl ?? "https://onyx.schwarz",
     brandImage: options?.brandImage ?? defaultBrandImage,
     brandTarget: "_blank",
@@ -25,11 +25,11 @@ export const createTheme = (
 
     // default theme values that are independent of the light/dark mode:
     colorPrimary: primaryColor,
-    colorSecondary: onyxVariables["onyx-color-brand-secondary-500"],
+    colorSecondary: onyxVariables["onyx-color-themed-secondary-500"],
     barSelectedColor: primaryColor,
     barHoverColor: primaryColor,
-    appBorderRadius: remToNumber(onyxVariables["onyx-number-radius-400"]),
-    inputBorderRadius: remToNumber(onyxVariables["onyx-number-radius-300"]),
+    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()),
@@ -38,25 +38,25 @@ export const createTheme = (
 
 const getLightTheme = (): Partial<ThemeVars> => {
   return defineTheme({
-    background: onyxVariables["onyx-color-universal-greyscale-white"],
-    contentBackground: onyxVariables["onyx-color-brand-neutral-100"],
-    text: onyxVariables["onyx-color-brand-neutral-800"],
-    textMuted: onyxVariables["onyx-color-brand-neutral-900"],
-    border: onyxVariables["onyx-color-brand-neutral-200"],
+    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<ThemeVars> => {
   return defineTheme({
-    background: onyxVariables["onyx-color-brand-neutral-1100"],
-    contentBackground: onyxVariables["onyx-color-brand-neutral-1200"],
-    text: onyxVariables["onyx-color-brand-neutral-200"],
-    textMuted: onyxVariables["onyx-color-brand-neutral-300"],
-    border: onyxVariables["onyx-color-brand-neutral-1000"],
+    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. */
+/** Define a full onyx Storybook color theme based on the given 5 main colors. */
 const defineTheme = (colors: {
   text: string;
   textMuted: string;
@@ -91,7 +91,7 @@ const defineTheme = (colors: {
   } satisfies Partial<ThemeVars>;
 };
 
-/** All available Storybook breakpoints / viewports supported by Onyx. */
+/** All available Storybook breakpoints / viewports supported by onyx. */
 export const ONYX_BREAKPOINTS = {
   "2xs": {
     name: "2xs",

package/src/types.ts

@@ -46,8 +46,3 @@ export type DefineStorybookActionsAndVModelsOptions<T> = Meta<T> & {
   component: NonNullable<T>;
   events: ExtractVueEventNames<T>[];
 };
-
-/**
- * A utility type that gets the type of an array element.
- */
-export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;