@sit-onyx/storybook-utils 0.1.0-alpha.2 → 1.0.0-alpha.4

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "0.1.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
   "files": [
     "src"
   ],
+  "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
     "./style.css": "./src/index.css"
@@ -18,7 +19,7 @@
     "@storybook/theming": ">= 7",
     "@storybook/vue3": ">= 7",
     "storybook-dark-mode": ">= 3",
-    "sit-onyx": "^0.1.0-alpha.2"
+    "sit-onyx": "^0.1.0-alpha.4"
   },
   "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

@@ -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-base-neutral-300);
+  color: var(--onyx-color-text-neutral-medium);
 }

package/src/theme.ts

@@ -14,7 +14,7 @@ export const createTheme = (
 ) => {
   const base = options?.base ?? "light";
   const defaultBrandImage = base === "light" ? storybookLogo : storybookLogoInverse;
-  const primaryColor = onyxVariables["onyx-color-themed-brand-500"];
+  const primaryColor = onyxVariables["onyx-color-themed-primary-500"];
 
   return create({
     brandTitle: options?.brandTitle ?? "onyx Storybook",
@@ -25,7 +25,7 @@ export const createTheme = (
 
     // default theme values that are independent of the light/dark mode:
     colorPrimary: primaryColor,
-    colorSecondary: onyxVariables["onyx-color-themed-action-500"],
+    colorSecondary: onyxVariables["onyx-color-themed-secondary-500"],
     barSelectedColor: primaryColor,
     barHoverColor: primaryColor,
     appBorderRadius: remToNumber(onyxVariables["onyx-number-radius-300"]),
@@ -38,11 +38,11 @@ export const createTheme = (
 
 const getLightTheme = (): Partial<ThemeVars> => {
   return defineTheme({
-    background: onyxVariables["onyx-color-universal-greyscale-white"],
+    background: onyxVariables["onyx-color-universal-grayscale-white"],
     contentBackground: onyxVariables["onyx-color-themed-neutral-100"],
-    text: onyxVariables["onyx-color-themed-neutral-800"],
-    textMuted: onyxVariables["onyx-color-themed-neutral-900"],
-    border: onyxVariables["onyx-color-themed-neutral-200"],
+    text: onyxVariables["onyx-color-themed-neutral-700"],
+    textMuted: onyxVariables["onyx-color-themed-neutral-600"],
+    border: onyxVariables["onyx-color-themed-neutral-300"],
   });
 };
 
@@ -51,8 +51,8 @@ const getDarkTheme = (): Partial<ThemeVars> => {
     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-300"],
-    border: onyxVariables["onyx-color-themed-neutral-1000"],
+    textMuted: onyxVariables["onyx-color-themed-neutral-400"],
+    border: onyxVariables["onyx-color-themed-neutral-900"],
   });
 };
 

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;