@sit-onyx/storybook-utils 1.0.0-beta.71 → 1.0.0-beta.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +10 -6
  2. package/src/actions.ts +48 -1
  3. package/src/style.css +12 -12
  4. package/src/theme.ts +10 -10
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sit-onyx/storybook-utils",
3
3
  "description": "Storybook utilities for Vue",
4
- "version": "1.0.0-beta.71",
4
+ "version": "1.0.0-beta.73",
5
5
  "type": "module",
6
6
  "author": "Schwarz IT KG",
7
7
  "license": "Apache-2.0",
@@ -23,19 +23,23 @@
23
23
  "url": "https://github.com/SchwarzIT/onyx/issues"
24
24
  },
25
25
  "peerDependencies": {
26
+ "@storybook/addon-actions": ">= 8.3.0",
26
27
  "@storybook/vue3": ">= 8.3.0",
27
28
  "storybook": ">= 8.3.0",
28
29
  "storybook-dark-mode": ">= 4",
29
- "@sit-onyx/shared": "^0.0.0",
30
- "@sit-onyx/icons": "^1.0.0-beta.7"
30
+ "vue-component-type-helpers": ">= 2",
31
+ "@sit-onyx/icons": "^1.0.0-beta.7",
32
+ "@sit-onyx/shared": "^0.0.1-beta.0"
31
33
  },
32
34
  "dependencies": {
33
35
  "deepmerge-ts": "^7.1.3"
34
36
  },
35
37
  "devDependencies": {
36
- "vue": "3.5.12",
37
- "@sit-onyx/shared": "^0.0.0",
38
- "@sit-onyx/icons": "^1.0.0-beta.7"
38
+ "@storybook/addon-actions": "^8.4.5",
39
+ "vue": "3.5.13",
40
+ "vue-component-type-helpers": "^2.1.10",
41
+ "@sit-onyx/icons": "^1.0.0-beta.7",
42
+ "@sit-onyx/shared": "^0.0.1-beta.0"
39
43
  },
40
44
  "scripts": {
41
45
  "build": "tsc --noEmit",
package/src/actions.ts CHANGED
@@ -1,9 +1,56 @@
1
+ import { action } from "@storybook/addon-actions";
1
2
  import type { Decorator } from "@storybook/vue3";
2
3
  import { useArgs } from "storybook/internal/preview-api";
3
4
  import type { ArgTypes, ArgTypesEnhancer, StrictInputType } from "storybook/internal/types";
4
- import { isReactive, reactive, watch, type Events } from "vue";
5
+ import { h, isReactive, reactive, watch, type Component, type Events } from "vue";
6
+ import type { ComponentProps, ComponentSlots } from "vue-component-type-helpers";
5
7
  import { EVENT_DOC_MAP } from "./events";
6
8
 
9
+ type ComponentEmits<Props extends ComponentProps<unknown>> = keyof {
10
+ [Key in keyof Props as Key extends `on${string}` ? Key : never]: true;
11
+ };
12
+
13
+ /**
14
+ * Wraps the original component and adds [Storybook action logging](https://storybook.js.org/docs/essentials/actions).
15
+ * This is useful for slotted child components that emit relevant events.
16
+ *
17
+ * Returns a wrapped component, which can be used in place of the original component.
18
+ *
19
+ * ```ts
20
+ * import { createActionLoggerWrapper } from "@sit-onyx/storybook-utils";
21
+ * import _ChildComponent from "./_ChildComponent.vue";
22
+ *
23
+ * // Usual story setup...
24
+ *
25
+ * const ChildComponent = createActionLoggerWrapper(_ChildComponent, ["onChildEmit"]);
26
+ *
27
+ * export const Default = {
28
+ * args: {
29
+ * propName: 'Value'
30
+ * someSlot: () => h(ChildComponent, { label: "Item 1" }),
31
+ * },
32
+ * } satisfies Story;
33
+ * ```
34
+ */
35
+ export const createActionLoggerWrapper =
36
+ <C extends Component>(component: C, emitsToLog: ComponentEmits<ComponentProps<C>>[]) =>
37
+ (props: ComponentProps<C>, ctx: { slots: ComponentSlots<C> }) => {
38
+ const entries = emitsToLog.map((emitName) => [
39
+ emitName,
40
+ // Log action in the format of `<component name> ~ <emit name>`
41
+ action(`${(component as { __name: string }).__name} ~ ${String(emitName)}`),
42
+ ]);
43
+ const eventHandler = Object.fromEntries(entries);
44
+ return h(
45
+ component,
46
+ {
47
+ ...eventHandler,
48
+ ...props,
49
+ },
50
+ ctx.slots,
51
+ );
52
+ };
53
+
7
54
  /**
8
55
  * Adds actions for all argTypes of the 'event' category, so that they are logged via the actions plugin.
9
56
  */
package/src/style.css CHANGED
@@ -40,18 +40,18 @@
40
40
  */
41
41
  :where(:root),
42
42
  .onyx-theme-default {
43
- --onyx-color-themed-neutral-100: #fafbfc;
44
- --onyx-color-themed-neutral-200: #e3eaf0;
45
- --onyx-color-themed-neutral-300: #c9d6e0;
46
- --onyx-color-themed-neutral-400: #9db3c4;
47
- --onyx-color-themed-neutral-500: #7392aa;
48
- --onyx-color-themed-neutral-600: #506e84;
49
- --onyx-color-themed-neutral-700: #3e596e;
50
- --onyx-color-themed-neutral-800: #31495c;
51
- --onyx-color-themed-neutral-900: #22384a;
52
- --onyx-color-themed-neutral-1000: #11212d;
53
- --onyx-color-themed-neutral-1100: #081723;
54
- --onyx-color-themed-neutral-1200: #000e19;
43
+ --onyx-color-steel-100: #fafbfc;
44
+ --onyx-color-steel-200: #e3eaf0;
45
+ --onyx-color-steel-300: #c9d6e0;
46
+ --onyx-color-steel-400: #9db3c4;
47
+ --onyx-color-steel-500: #7392aa;
48
+ --onyx-color-steel-600: #506e84;
49
+ --onyx-color-steel-700: #3e596e;
50
+ --onyx-color-steel-800: #31495c;
51
+ --onyx-color-steel-900: #22384a;
52
+ --onyx-color-steel-1000: #11212d;
53
+ --onyx-color-steel-1100: #081723;
54
+ --onyx-color-steel-1200: #000e19;
55
55
  --onyx-color-themed-primary-100: #e8fcfc;
56
56
  --onyx-color-themed-primary-200: #bbeaed;
57
57
  --onyx-color-themed-primary-300: #79dde2;
package/src/theme.ts CHANGED
@@ -19,7 +19,7 @@ export const getCustomProperty = (property: string, el: Element = document.body)
19
19
  * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
20
20
  */
21
21
  export const createTheme = (base: "light" | "dark" = "light", brandDetails?: BrandDetails) => {
22
- const primaryColor = getCustomProperty("--onyx-color-themed-primary-500");
22
+ const primaryColor = getCustomProperty("--onyx-color-base-primary-500");
23
23
 
24
24
  return create({
25
25
  brandTitle: brandDetails?.brandTitle,
@@ -44,20 +44,20 @@ export const createTheme = (base: "light" | "dark" = "light", brandDetails?: Bra
44
44
  const getLightTheme = (): Partial<ThemeVars> => {
45
45
  return defineTheme({
46
46
  background: getCustomProperty("--onyx-color-universal-grayscale-white"),
47
- contentBackground: getCustomProperty("--onyx-color-themed-neutral-100"),
48
- text: getCustomProperty("--onyx-color-themed-neutral-700"),
49
- textMuted: getCustomProperty("--onyx-color-themed-neutral-600"),
50
- border: getCustomProperty("--onyx-color-themed-neutral-300"),
47
+ contentBackground: getCustomProperty("--onyx-color-steel-100"),
48
+ text: getCustomProperty("--onyx-color-steel-700"),
49
+ textMuted: getCustomProperty("--onyx-color-steel-600"),
50
+ border: getCustomProperty("--onyx-color-steel-300"),
51
51
  });
52
52
  };
53
53
 
54
54
  const getDarkTheme = (): Partial<ThemeVars> => {
55
55
  return defineTheme({
56
- background: getCustomProperty("--onyx-color-themed-neutral-1100"),
57
- contentBackground: getCustomProperty("--onyx-color-themed-neutral-1200"),
58
- text: getCustomProperty("--onyx-color-themed-neutral-200"),
59
- textMuted: getCustomProperty("--onyx-color-themed-neutral-400"),
60
- border: getCustomProperty("--onyx-color-themed-neutral-900"),
56
+ background: getCustomProperty("--onyx-color-steel-1100"),
57
+ contentBackground: getCustomProperty("--onyx-color-steel-1200"),
58
+ text: getCustomProperty("--onyx-color-steel-200"),
59
+ textMuted: getCustomProperty("--onyx-color-steel-400"),
60
+ border: getCustomProperty("--onyx-color-steel-900"),
61
61
  });
62
62
  };
63
63