Merge pull request #25 from kickstartDS/next

Next

.github/workflows/release.yml

@@ -25,4 +25,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn release
+        run: yarn release

.storybook/main.ts

@@ -1,14 +1,11 @@
-import { StorybookConfig } from '@storybook/react-vite';
+import { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-essentials", "../manager.js"],
   framework: {
-    name: '@storybook/react-vite',
-    options: {}
+    name: "@storybook/react-vite",
+    options: {},
   },
 };
 

.storybook/preview.ts

@@ -1,9 +1,4 @@
-import { Preview } from '@storybook/react';
-import { unpackDecorator } from "@kickstartds/core/lib/storybook";
-
-import "@kickstartds/core/lib/design-tokens/tokens.css";
-import "@kickstartds/base/lib/global/base.js";
-import "@kickstartds/base/lib/global/base.css";
+import { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
@@ -14,7 +9,6 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [unpackDecorator],
-}
+};
 
-export default preview;
+export default preview;

CHANGELOG.md

@@ -97,8 +97,6 @@
 
 # v1.0.1 (Sun Dec 12 2021)
 
-
-
 ---
 
 # v1.0.0 (Sun Dec 12 2021)

README.md

@@ -21,10 +21,11 @@ It was slightly modified to generate bundles that can be imported for partial us
 
 ## What it's for
 
-Three things you can use this addon for:  
-1. Explore associated JSON Schema documentation, in a nicely organized fashion in the `JSON Schema Explorer`  
-2. Configure components through Controls, copy the resulting JSON as a starting point or template for API-usage / data generation purposes in the `JSON Code Editor`  
-3. Paste JSON to validate data or preview component state in the `JSON Code Editor`  
+Three things you can use this addon for:
+
+1. Explore associated JSON Schema documentation, in a nicely organized fashion in the `JSON Schema Explorer`
+2. Configure components through Controls, copy the resulting JSON as a starting point or template for API-usage / data generation purposes in the `JSON Code Editor`
+3. Paste JSON to validate data or preview component state in the `JSON Code Editor`
 
 ## Getting started
 
@@ -40,7 +41,7 @@ Second step, register the addon inside your `.storybook/main.js` (just add it to
 
 ```javascript
 module.exports = {
-  addons: ['@kickstartds/storybook-addon-jsonschema']
+  addons: ["@kickstartds/storybook-addon-jsonschema"],
 };
 ```
 
@@ -52,20 +53,22 @@ 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,
+      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",
+          },
         },
-        "label": {
-          "type": "string"
-        }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 ```
 

bundle.js

@@ -3,7 +3,7 @@ const { nodeExternalsPlugin } = require("esbuild-node-externals");
 
 /** @type import("esbuild").BuildOptions */
 const sharedConfig = {
-  entryPoints: ["src/index.ts", "src/manager.ts"],
+  entryPoints: ["src/index.ts", "src/manager.tsx"],
   bundle: true,
   platform: "browser",
   minify: true,

manager.js

@@ -1 +1 @@
-export * from "./dist/esm/manager";
+export * from "./dist/esm/manager";

package.json

@@ -37,38 +37,35 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@kickstartds/base": "^2.2.0",
-    "@kickstartds/content": "^2.1.0",
-    "@kickstartds/core": "^2.2.0",
-    "@kickstartds/json-schema-viewer": "^2.0.0",
+    "@kickstartds/core": "^2.2.2",
+    "@kickstartds/json-schema-viewer": "^2.0.1",
     "@monaco-editor/react": "^4.5.1",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/builder-vite": "^7.4.0",
-    "@storybook/components": "^7.4.0",
-    "@storybook/manager-api": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-vite": "^7.4.0",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/components": "^7.6.17",
+    "@storybook/manager-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@types/decomment": "^0.9.3",
     "@types/json-schema": "^7.0.13",
     "@types/react-dom": "^18.2.8",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^3.0.6",
-    "@vitejs/plugin-react": "^4.1.0",
-    "auto": "^11.0.4",
+    "auto": "^11.0.5",
     "decomment": "^0.9.5",
     "esbuild": "^0.19.3",
     "esbuild-node-externals": "^1.9.0",
+    "monaco-editor": "^0.39.0",
     "patch-package": "^8.0.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.4.0",
+    "storybook": "^7.6.17",
     "styled-components": "^3.2.6",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^5.1.4"
   },
   "peerDependencies": {
     "@kickstartds/core": "^2.2.0",
@@ -82,6 +79,9 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.2.0"
   },
   "peerDependenciesMeta": {
+    "@kickstartds/core": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },

src/components/SchemaDoc.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { useLocation } from "react-router-dom";
+import type { editor, IRange } from "monaco-editor";
 
 import {
   SchemaExplorer,
@@ -32,9 +33,15 @@ const removeLeadingSlash = (v: string): string => {
 
 type SchemaDocProps = {
   schema: JsonSchema;
+  validationResults: editor.IMarker[];
+  onSelectValidationRange: (range: IRange) => void;
 };
 
-export const SchemaDoc: React.FC<SchemaDocProps> = ({ schema }) => {
+export const SchemaDoc: React.FC<SchemaDocProps> = ({
+  schema,
+  validationResults,
+  onSelectValidationRange,
+}) => {
   const lookup = new InternalLookup(schema);
 
   const getPathFromRoute = (lookup: Lookup): Array<PathElement> => {
@@ -84,7 +91,7 @@ export const SchemaDoc: React.FC<SchemaDocProps> = ({ schema }) => {
   const currentPathElement = path[path.length - 1];
   const currentSchema = getSchemaFromReference(
     currentPathElement.reference,
-    lookup
+    lookup,
   );
 
   if (currentSchema === undefined) {
@@ -107,8 +114,8 @@ export const SchemaDoc: React.FC<SchemaDocProps> = ({ schema }) => {
     lookup,
     schema: currentSchema,
     stage: "both",
-    onSelectValidationRange(range) {},
-    validationResults: [],
+    onSelectValidationRange,
+    validationResults,
   };
 
   return <SchemaExplorer {...explorerArgs} />;

src/components/SchemaEditor.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect, useRef, useMemo } from "react";
-import Editor, {
-  useMonaco,
-  OnMount,
-  OnValidate,
-  OnChange,
-} from "@monaco-editor/react";
+import React, { useEffect, 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 { pack, unpack } from "@kickstartds/core/lib/storybook";
 import { useArgs } from "@storybook/manager-api";
 import decomment from "decomment";
 
-type OnChangeParams = Parameters<OnChange>;
+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>;
 };
 
 const editorPreamble = `
@@ -22,29 +22,41 @@ const editorPreamble = `
 // benefit of validation and autocompletion!
 `.trim();
 
-export const SchemaEditor: React.FC<SchemaEditorProps> = ({ schema }) => {
-  const editorRef = useRef(null);
+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, setInitialContent] = useState<Record<string, any>>({});
 
   const handleEditorDidMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
   };
 
-  const handleChange = (value: OnChangeParams[0]) => {
+  const handleChange = async (value: string) => {
     try {
-      updateArgs(pack(JSON.parse(decomment(value))));
+      updateArgs(await toArgs(JSON.parse(decomment(value))));
     } catch (e) {}
   };
 
   const handleEditorValidChange: OnValidate = (markers) => {
-    if (markers.length === 0 && editorRef && editorRef.current) {
+    setValidationResults(markers);
+    if (markers.length === 0 && editorRef.current) {
       handleChange(editorRef.current.getValue());
     }
   };
 
+  useEffect(() => {
+    const update = async (args: Args) =>
+      setInitialContent(await fromArgs(args));
+    update(storybookArgs).catch(console.error);
+  }, [schema]);
+
   useEffect(() => {
     monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
       validate: true,
@@ -59,6 +71,13 @@ export const SchemaEditor: React.FC<SchemaEditorProps> = ({ schema }) => {
     });
   }, [monaco, schema]);
 
+  useEffect(() => {
+    if (editorRef.current && selectedValidationRange) {
+      editorRef.current.setSelection(selectedValidationRange);
+      editorRef.current.revealRangeAtTop(selectedValidationRange);
+    }
+  }, [selectedValidationRange]);
+
   return (
     <Editor
       defaultLanguage="json"