Merge pull request #26 from kickstartDS/feature/optional-pack-args-pa…

…rameter

Add optional `packArgs` parameter

package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@kickstartds/core": "^2.2.2",
+    "@kickstartds/core": "^4.0.0",
     "@kickstartds/json-schema-viewer": "^2.0.1",
     "@monaco-editor/react": "^4.5.1",
     "@storybook/addon-essentials": "^7.6.17",
@@ -68,7 +68,7 @@
     "vite": "^5.1.4"
   },
   "peerDependencies": {
-    "@kickstartds/core": "^2.2.0",
+    "@kickstartds/core": "^2.2.0 || ^4.0.0",
     "@storybook/api": "^7.0.0",
     "@storybook/components": "^7.0.0",
     "@storybook/core-events": "^7.0.0",

src/components/SchemaEditor.tsx

@@ -1,19 +1,16 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } 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 { 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> | Promise<Record<string, any>>;
-  toArgs?: (obj: Record<string, any>) => Args | Promise<Args>;
+  packArgs?: boolean;
 };
 
 const editorPreamble = `
@@ -26,8 +23,7 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({
   schema,
   setValidationResults,
   selectedValidationRange,
-  fromArgs = identity,
-  toArgs = identity,
+  packArgs,
 }) => {
   const editorRef = useRef<editor.IStandaloneCodeEditor>(null);
   const monaco = useMonaco();
@@ -40,7 +36,11 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({
 
   const handleChange = async (value: string) => {
     try {
-      updateArgs(await toArgs(JSON.parse(decomment(value))));
+      const parsed = JSON.parse(decomment(value));
+      const args = packArgs
+        ? (await import("@kickstartds/core/lib/storybook")).pack(parsed)
+        : parsed;
+      updateArgs(args);
     } catch (e) {}
   };
 
@@ -52,10 +52,14 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({
   };
 
   useEffect(() => {
-    const update = async (args: Args) =>
-      setInitialContent(await fromArgs(args));
+    const update = async (args: Args) => {
+      const transformedArgs = packArgs
+        ? (await import("@kickstartds/core/lib/storybook")).unpack(args)
+        : args;
+      return setInitialContent(transformedArgs);
+    };
     update(storybookArgs).catch(console.error);
-  }, [schema]);
+  }, [packArgs, schema]);
 
   useEffect(() => {
     monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({

src/components/SchemaView.tsx

@@ -43,12 +43,12 @@ const SchemaEditorContainerHeading = styled.h3`
 `;
 
 export const SchemaView: React.FC = () => {
-  const { schema, fromArgs, toArgs } = useParameter<JsonSchemaParameter>(
+  const { schema = {}, packArgs } = useParameter<JsonSchemaParameter>(
     PARAM_KEY,
-    { schema: {} },
+    { schema: {} }
   );
   const [validationResults, setValidationResults] = useState<editor.IMarker[]>(
-    [],
+    []
   );
   const [selectedValidation, setSelectedValidation] = useState<IRange>();
   return (
@@ -65,8 +65,7 @@ export const SchemaView: React.FC = () => {
           schema={schema}
           setValidationResults={setValidationResults}
           selectedValidationRange={selectedValidation}
-          fromArgs={fromArgs}
-          toArgs={toArgs}
+          packArgs={packArgs}
         />
         <SchemaEditorContainerHeading>
           Editor and Validator

src/constants.ts

@@ -5,9 +5,5 @@ 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;
-    }
+  | { schema: JsonSchema; packArgs?: boolean }
   | undefined;

stories/header/Header.stories.js

@@ -17,12 +17,7 @@ export default {
     layout: "fullscreen",
     jsonschema: {
       schema,
-      async toArgs(obj) {
-        return (await import("@kickstartds/core/lib/storybook")).pack(obj);
-      },
-      async fromArgs(args) {
-        return (await import("@kickstartds/core/lib/storybook")).unpack(args);
-      },
+      packArgs: true,
     },
   },
   decorators: [unpackDecorator],

yarn.lock

@@ -1657,10 +1657,10 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@kickstartds/core@^2.2.2":
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/@kickstartds/core/-/core-2.2.2.tgz#82f8588420fe71b2c6aa52b1f75ea495ea3c8884"
-  integrity sha512-6D2cKBveyHMfTQSBTHr4YB1tJXkdeN8vjvForPwRuTFsvfXnptrrGKPf7pnzFAuAUUnMXwtWz2kasagW+dnBdQ==
+"@kickstartds/core@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@kickstartds/core/-/core-4.0.2.tgz#277744da0688cf09c1bb3898ae758bffd1c9f79a"
+  integrity sha512-xLTPOrM0ul2wYxgsUPd6nzqUHmCCiJm/MJqY/JAlIBYTdm0txsZKzItN6JnDRQNwniYcHcl5xPKlZ2NawEnsRQ==
   dependencies:
     "@babel/runtime" "^7.21.5"
     bourbon "^7.3.0"
@@ -1672,8 +1672,6 @@
     fs-extra "^11.1.1"
     json-schema "^0.4.0"
     lazysizes "^5.3.2"
-    lodash "^4.17.21"
-    lodash-es "^4.17.21"
     pubsub-js "^1.9.4"
     sass "^1.62.1"
 
@@ -5624,11 +5622,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"