feat: add args transform parameters

README.md

@@ -52,16 +52,18 @@ export default {
   component: Button,
   parameters: {
     jsonschema: {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "$id": "https://my-components/button.schema.json",
-      "type": "object",
-      "properties": {
-        "primary": {
-          "type": "boolean",
-          "default": false,
-        },
-        "label": {
-          "type": "string"
+      schema: {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "https://my-components/button.schema.json",
+        "type": "object",
+        "properties": {
+          "primary": {
+            "type": "boolean",
+            "default": false,
+          },
+          "label": {
+            "type": "string"
+          }
         }
       }
     }

package.json

@@ -38,7 +38,7 @@
   "dependencies": {},
   "devDependencies": {
     "@kickstartds/core": "^2.2.2",
-    "@kickstartds/json-schema-viewer": "^2.0.0",
+    "@kickstartds/json-schema-viewer": "^2.0.1",
     "@monaco-editor/react": "^4.5.1",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/components": "^7.6.17",

src/components/SchemaEditor.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect, useRef, useMemo } from "react";
 import type { IRange, editor } from "monaco-editor";
+import type { Args } from "@storybook/types";
 import Editor, { useMonaco, OnMount, OnValidate } from "@monaco-editor/react";
 import { JsonSchema } from "@kickstartds/json-schema-viewer";
-import { pack, unpack } from "@kickstartds/core/lib/storybook";
 import { useArgs } from "@storybook/manager-api";
 import decomment from "decomment";
 
+const identity: <T>(v: T) => T = (v) => v;
+
 type SchemaEditorProps = {
   schema: JsonSchema;
   setValidationResults: (marker: editor.IMarker[]) => void;
   selectedValidationRange?: IRange;
+  fromArgs?: (args: Args) => Record<string, any>;
+  toArgs?: (obj: Record<string, any>) => Args;
 };
 
 const editorPreamble = `
@@ -22,20 +26,22 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({
   schema,
   setValidationResults,
   selectedValidationRange,
+  fromArgs = identity,
+  toArgs = identity,
 }) => {
   const editorRef = useRef<editor.IStandaloneCodeEditor>(null);
   const monaco = useMonaco();
   const [storybookArgs = {}, updateArgs] = useArgs();
 
-  const initialContent = useMemo(() => unpack(storybookArgs), [schema]);
+  const initialContent = useMemo(() => fromArgs(storybookArgs), [schema]);
 
   const handleEditorDidMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
   };
 
   const handleChange = (value: string) => {
     try {
-      updateArgs(pack(JSON.parse(decomment(value))));
+      updateArgs(toArgs(JSON.parse(decomment(value))));
     } catch (e) {}
   };
 

src/components/SchemaView.tsx

@@ -3,9 +3,9 @@ import { useParameter } from "@storybook/manager-api";
 import styled from "styled-components";
 import type { editor, IRange } from "monaco-editor";
 
-import { forSize, JsonSchema } from "@kickstartds/json-schema-viewer";
+import { forSize } from "@kickstartds/json-schema-viewer";
 
-import { PARAM_KEY } from "../constants";
+import { PARAM_KEY, JsonSchemaParameter } from "../constants";
 import { SchemaDoc } from "./SchemaDoc";
 import { SchemaEditor } from "./SchemaEditor";
 
@@ -43,12 +43,14 @@ const SchemaEditorContainerHeading = styled.h3`
 `;
 
 export const SchemaView: React.FC = () => {
-  const schema = useParameter<JsonSchema>(PARAM_KEY, {});
+  const { schema, fromArgs, toArgs } = useParameter<JsonSchemaParameter>(
+    PARAM_KEY,
+    { schema: {} }
+  );
   const [validationResults, setValidationResults] = useState<editor.IMarker[]>(
     []
   );
   const [selectedValidation, setSelectedValidation] = useState<IRange>();
-
   return (
     <SchemaContainer>
       <SchemaDocContainer>
@@ -63,6 +65,8 @@ export const SchemaView: React.FC = () => {
           schema={schema}
           setValidationResults={setValidationResults}
           selectedValidationRange={selectedValidation}
+          fromArgs={fromArgs}
+          toArgs={toArgs}
         />
         <SchemaEditorContainerHeading>
           Editor and Validator

src/constants.ts

@@ -1,3 +1,11 @@
+import type { Args } from "@storybook/types";
+import type { JsonSchema } from "@kickstartds/json-schema-viewer";
+
 export const ADDON_ID = "storybook/jsonschema";
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = "jsonschema";
+export type JsonSchemaParameter = {
+  schema: JsonSchema;
+  fromArgs?: (args: Args) => Record<string, any>;
+  toArgs?: (obj: Record<string, any>) => Args;
+} | undefined;

stories/button/Button.stories.js

@@ -6,7 +6,7 @@ export default {
   component: Button,
   parameters: {
     layout: "centered",
-    jsonschema: schema,
+    jsonschema: { schema },
   },
   args: {
     label: "Button",

stories/header/Header.stories.js

@@ -1,5 +1,6 @@
 import {
   pack,
+  unpack,
   unpackDecorator,
   getArgsShared,
 } from "@kickstartds/core/lib/storybook";
@@ -15,7 +16,7 @@ export default {
   argTypes,
   parameters: {
     layout: "fullscreen",
-    jsonschema: schema,
+    jsonschema: { schema, toArgs: pack, fromArgs: unpack },
   },
   decorators: [unpackDecorator],
 };

yarn.lock

@@ -1677,10 +1677,10 @@
     pubsub-js "^1.9.4"
     sass "^1.62.1"
 
-"@kickstartds/json-schema-viewer@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@kickstartds/json-schema-viewer/-/json-schema-viewer-2.0.0.tgz#0b58a3ddcb53a8efb7df5f5203120b9ccf06d062"
-  integrity sha512-6lf7Ezp5byL6BIit/2CWWVoiJany2PDqoR9inR7CK8dQw+z3j9z5nKF0Ac8rTjiFofIWqlch2Z6rD9Bx5Vn1Qg==
+"@kickstartds/json-schema-viewer@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@kickstartds/json-schema-viewer/-/json-schema-viewer-2.0.1.tgz#7d73a45bc4ef9c3904c64277d6d613db2ee16221"
+  integrity sha512-EfatoDe4Gr8qleW+xpbvq/aU2RlyDJb/mQWuG1VjSmwc/1dn86C+DCnsdQ4oYi8e3num8n2aHn87RY8838izZg==
 
 "@mdx-js/react@^2.1.5":
   version "2.3.0"