Support BigInt for controls

storybookjs · Oct 23, 2023 · 7abd9b3 · 7abd9b3
1 parent 4ee42ac
commit 7abd9b3
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 9 deletions.
diff --git a/code/package.json b/code/package.json
@@ -251,6 +251,7 @@
     "process": "^0.11.10",
     "raf": "^3.4.1",
     "react": "^16.14.0",
+    "safe-stable-stringify": "^2.4.3",
     "semver": "^7.3.7",
     "serve-static": "^1.14.1",
     "trash": "^7.0.0",

diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx
@@ -15,6 +15,7 @@ import { Symbols } from '@storybook/components';
 import type { PreviewWeb } from '@storybook/preview-api';
 import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from '@storybook/channels';
+import { stringify } from 'safe-stable-stringify';
 
 import { DocsContext } from '@storybook/blocks';
 
@@ -262,7 +263,7 @@ export const decorators = [
         />
         <div style={{ marginTop: '1rem' }}>
           Current <code>{parameters.withRawArg}</code>:{' '}
-          <pre>{JSON.stringify(args[parameters.withRawArg], null, 2) || 'undefined'}</pre>
+          <pre>{stringify(args[parameters.withRawArg], null, 2) || 'undefined'}</pre>
         </div>
       </>
     );

diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
@@ -63,6 +63,7 @@
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "react-colorful": "^5.1.2",
+    "safe-stable-stringify": "^2.4.3",
     "telejson": "^7.2.0",
     "tocbot": "^4.20.1",
     "ts-dedent": "^2.0.0",

diff --git a/code/ui/blocks/src/controls/Object.stories.tsx b/code/ui/blocks/src/controls/Object.stories.tsx
@@ -13,7 +13,7 @@ export const Object: StoryObj<typeof ObjectControl> = {
     value: {
       name: 'Michael',
       someDate: new Date('2022-10-30T12:31:11'),
-      nested: { someBool: true, someNumber: 22 },
+      nested: { someBool: true, someNumber: 22, someBigInt: 999n },
     },
   },
 };

diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
@@ -4,6 +4,7 @@ import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
 import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { styled, useTheme, type Theme } from '@storybook/theming';
 import { Form, Icons, type IconsProps, IconButton } from '@storybook/components';
+import stringify from 'safe-stable-stringify';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -276,7 +277,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
       ref={htmlElRef}
       id={getControlId(name)}
       name={name}
-      defaultValue={value === null ? '' : JSON.stringify(value, null, 2)}
+      defaultValue={value === null ? '' : stringify(value, null, 2)}
       onBlur={(event: FocusEvent<HTMLTextAreaElement>) => updateRaw(event.target.value)}
       placeholder="Edit JSON string..."
       autoFocus={forceVisible}

diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx
@@ -7,6 +7,7 @@
 
 import type { ReactElement } from 'react';
 import React, { cloneElement, Component } from 'react';
+import stringify from 'safe-stable-stringify';
 import * as inputUsageTypes from './types/inputUsageTypes';
 
 import * as dataTypes from './types/dataTypes';
@@ -1005,6 +1006,27 @@ export class JsonNode extends Component<JsonNodeProps, JsonNodeState> {
             onSubmitValueParser={onSubmitValueParser}
           />
         );
+      case dataTypes.BIG_INT:
+        return (
+          <JsonValue
+            name={name}
+            value={`${data.toString()}n`}
+            originalValue={data}
+            keyPath={keyPath}
+            deep={deep}
+            handleRemove={handleRemove}
+            handleUpdateValue={handleUpdateValue}
+            readOnly={readOnly}
+            dataType={dataType}
+            getStyle={getStyle}
+            cancelButtonElement={cancelButtonElement}
+            editButtonElement={editButtonElement}
+            inputElementGenerator={inputElementGenerator}
+            minusMenuElement={minusMenuElement}
+            logger={logger}
+            onSubmitValueParser={onSubmitValueParser}
+          />
+        );
       default:
         return null;
     }
@@ -1453,11 +1475,12 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
   }
 
   handleEdit() {
-    const { handleUpdateValue, originalValue, logger, onSubmitValueParser, keyPath } = this.props;
+    const { handleUpdateValue, originalValue, logger, onSubmitValueParser, keyPath, dataType } =
+      this.props;
     const { inputRef, name, deep } = this.state;
     if (!inputRef) return;
 
-    const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value);
+    const newValue = onSubmitValueParser(true, keyPath, deep, name, inputRef.value, dataType);
 
     const result = {
       value: newValue,
@@ -1527,7 +1550,7 @@ export class JsonValue extends Component<JsonValueProps, JsonValueState> {
     });
     const inputElementLayout = cloneElement(inputElement, {
       ref: this.refInput,
-      defaultValue: JSON.stringify(originalValue),
+      defaultValue: stringify(originalValue),
     });
     const minusMenuLayout = cloneElement(minusMenuElement, {
       onClick: handleRemove,

diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/index.tsx b/code/ui/blocks/src/controls/react-editable-json-tree/index.tsx
@@ -163,7 +163,8 @@ JsonTree.defaultProps = {
   beforeAddAction: () => Promise.resolve(),
   beforeUpdateAction: () => Promise.resolve(),
   logger: { error: () => {} },
-  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue) => parse(rawValue),
+  onSubmitValueParser: (isEditMode, keyPath, deep, name, rawValue, dataType) =>
+    parse(rawValue, dataType),
   inputElement: () => <input />,
   textareaElement: () => <textarea />,
   fallback: null,

diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts b/code/ui/blocks/src/controls/react-editable-json-tree/types/dataTypes.ts
@@ -9,5 +9,19 @@ const NULL = 'Null';
 const UNDEFINED = 'Undefined';
 const FUNCTION = 'Function';
 const SYMBOL = 'Symbol';
+const BIG_INT = 'BigInt';
 
-export { ERROR, OBJECT, ARRAY, STRING, NUMBER, BOOLEAN, DATE, NULL, UNDEFINED, FUNCTION, SYMBOL };
+export {
+  ERROR,
+  OBJECT,
+  ARRAY,
+  STRING,
+  NUMBER,
+  BOOLEAN,
+  DATE,
+  NULL,
+  UNDEFINED,
+  FUNCTION,
+  SYMBOL,
+  BIG_INT,
+};
diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts b/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts
@@ -1,16 +1,22 @@
+import * as DATA_TYPES from '../types/dataTypes';
+
 /**
  * Parse.
  * @param string {String} string to parse
  * @returns {*}
  */
-export function parse(string: string) {
+export function parse(string: string, dataType: typeof DATA_TYPES[keyof typeof DATA_TYPES]) {
   let result = string;
 
   // Check if string contains 'function' and start with it to eval it
   if (result.indexOf('function') === 0) {
     return (0, eval)(`(${result})`); // eslint-disable-line no-eval
   }
 
+  if (dataType === DATA_TYPES.BIG_INT) {
+    return BigInt(string);
+  }
+
   try {
     result = JSON.parse(string);
   } catch (e) {

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -6502,6 +6502,7 @@ __metadata:
     memoizerific: ^1.11.3
     polished: ^4.2.2
     react-colorful: ^5.1.2
+    safe-stable-stringify: ^2.4.3
     telejson: ^7.2.0
     tocbot: ^4.20.1
     ts-dedent: ^2.0.0
@@ -7942,6 +7943,7 @@ __metadata:
     process: ^0.11.10
     raf: ^3.4.1
     react: ^16.14.0
+    safe-stable-stringify: ^2.4.3
     semver: ^7.3.7
     serve-static: ^1.14.1
     trash: ^7.0.0
@@ -28596,6 +28598,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-stable-stringify@npm:^2.4.3":
+  version: 2.4.3
+  resolution: "safe-stable-stringify@npm:2.4.3"
+  checksum: 81dede06b8f2ae794efd868b1e281e3c9000e57b39801c6c162267eb9efda17bd7a9eafa7379e1f1cacd528d4ced7c80d7460ad26f62ada7c9e01dec61b2e768
+  languageName: node
+  linkType: hard
+
 "safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.1.0":
   version: 2.1.2
   resolution: "safer-buffer@npm:2.1.2"