Merge pull request #12824 from hydrosquall/cameron.yick/feature/ui-ed…

…itable-json-tree-knob

Addon-controls: Add JSON tree editor for Object/Array Type args

.eslintignore

@@ -9,6 +9,7 @@ built-storybooks
 lib/cli/test
 lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
+lib/components/src/controls/react-editable-json-tree
 scripts/storage
 *.bundle.js
 *.js.map

addons/docs/src/frameworks/react/react-argtypes.stories.tsx

@@ -4,6 +4,7 @@ import { storiesOf, StoryContext } from '@storybook/react';
 import { ArgsTable } from '@storybook/components';
 import { Args } from '@storybook/api';
 import { inferControls } from '@storybook/client-api';
+import { useTheme, Theme } from '@storybook/theming';
 
 import { extractArgTypes } from './extractArgTypes';
 import { Component } from '../../blocks';
@@ -16,15 +17,20 @@ const argsTableProps = (component: Component) => {
 };
 
 function FormatArg({ arg }) {
+  const theme = useTheme<Theme>();
+  const badgeStyle = {
+    background: theme.background.hoverable,
+    border: `1px solid ${theme.background.hoverable}`,
+    borderRadius: 2,
+  };
   if (typeof arg !== 'undefined') {
     try {
       return <code>{JSON.stringify(arg, null, 2)}</code>;
     } catch (err) {
-      return <code style={{ backgroundColor: '#eee' }}>{arg.toString()}</code>;
+      return <code style={badgeStyle}>{arg.toString()}</code>;
     }
   }
-
-  return <code style={{ backgroundColor: '#eee' }}>undefined</code>;
+  return <code style={badgeStyle}>undefined</code>;
 }
 
 const ArgsStory = ({ component }: any) => {

examples/official-storybook/stories/addon-controls.stories.tsx

@@ -7,26 +7,33 @@ export default {
   argTypes: {
     children: { control: 'text', name: 'Children' },
     type: { control: 'text', name: 'Type' },
-    somethingElse: { control: 'object', name: 'Something Else' },
+    json: { control: 'object', name: 'JSON' },
     imageUrls: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
   },
   parameters: { chromatic: { disable: true } },
 };
 
-const Template = (args) => <Button {...args} />;
+const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } };
+
+const Template = (args) => (
+  <div>
+    <Button type={args.type}>{args.children}</Button>
+    {args.json && <pre>{JSON.stringify(args.json, null, 2)}</pre>}
+  </div>
+);
 
 export const Basic = Template.bind({});
 Basic.args = {
   children: 'basic',
-  somethingElse: { a: 2 },
+  json: DEFAULT_NESTED_OBJECT,
 };
 Basic.parameters = { chromatic: { disable: false } };
 
 export const Action = Template.bind({});
 Action.args = {
   children: 'hmmm',
   type: 'action',
-  somethingElse: { a: 4 },
+  json: null,
 };
 
 export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;
@@ -35,6 +42,12 @@ ImageFileControl.args = {
 };
 
 export const CustomControls = Template.bind({});
+CustomControls.args = {
+  children: 'hmmm',
+  type: 'action',
+  json: DEFAULT_NESTED_OBJECT,
+};
+
 CustomControls.argTypes = {
   children: { table: { disable: true } },
   type: { control: { disable: true } },

lib/components/package.json

@@ -51,6 +51,7 @@
     "memoizerific": "^1.11.3",
     "overlayscrollbars": "^1.13.1",
     "polished": "^4.0.5",
+    "prop-types": "^15.7.2",
     "react-color": "^2.19.3",
     "react-popper-tooltip": "^3.1.1",
     "react-syntax-highlighter": "^13.5.3",

lib/components/src/blocks/ArgsTable/ArgControl.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useCallback, useState, useEffect } from 'react';
 import { Args, ArgType } from './types';
 import {
-  ArrayControl,
   BooleanControl,
   ColorControl,
   DateControl,
@@ -51,7 +50,8 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => {
   const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
   switch (control.type) {
     case 'array':
-      return <ArrayControl {...props} {...control} />;
+    case 'object':
+      return <ObjectControl {...props} {...control} />;
     case 'boolean':
       return <BooleanControl {...props} {...control} />;
     case 'color':
@@ -60,8 +60,6 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs }) => {
       return <DateControl {...props} {...control} />;
     case 'number':
       return <NumberControl {...props} {...control} />;
-    case 'object':
-      return <ObjectControl {...props} {...control} />;
     case 'check':
     case 'inline-check':
     case 'radio':

lib/components/src/controls/Number.tsx

@@ -38,7 +38,8 @@ export const NumberControl: FC<NumberProps> = ({
         onChange={handleChange}
         size="flex"
         placeholder="Adjust number dynamically"
-        {...{ name, value, min, max, step, onFocus, onBlur }}
+        value={value === null ? undefined : value}
+        {...{ name, min, max, step, onFocus, onBlur }}
       />
     </Wrapper>
   );