change linting settings & deal with changes

storybookjs · Jul 4, 2022 · 3f0808b · 3f0808b
1 parent 98ebe6e
commit 3f0808b
Show file tree

Hide file tree

Showing 22 changed files with 131 additions and 365 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,7 +1,7 @@
 {
   "bracketSpacing": true,
   "jsxBracketSameLine": true,
-  "printWidth": 80,
+  "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "es5"
 }
diff --git a/src/dom-inspector/DOMInspector.tsx b/src/dom-inspector/DOMInspector.tsx
@@ -18,11 +18,7 @@ const domIterator = function* (data: any) {
     for (let i = 0; i < data.childNodes.length; i++) {
       const node = data.childNodes[i];
 
-      if (
-        node.nodeType === Node.TEXT_NODE &&
-        node.textContent.trim().length === 0
-      )
-        continue;
+      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length === 0) continue;
 
       yield {
         name: `${node.tagName}[${i}]`,
@@ -44,13 +40,7 @@ const domIterator = function* (data: any) {
 };
 
 const DOMInspector: FC<any> = (props) => {
-  return (
-    <TreeView
-      nodeRenderer={DOMNodePreview}
-      dataIterator={domIterator}
-      {...props}
-    />
-  );
+  return <TreeView nodeRenderer={DOMNodePreview} dataIterator={domIterator} {...props} />;
 };
 
 // DOMInspector.propTypes = {

diff --git a/src/dom-inspector/DOMNodePreview.tsx b/src/dom-inspector/DOMNodePreview.tsx
@@ -36,8 +36,7 @@ const OpenTag: FC<any> = ({ tagName, attributes, styles }) => {
 
 // isChildNode style={{ marginLeft: -12 /* hack: offset placeholder */ }}
 const CloseTag = ({ tagName, isChildNode = false, styles }) => (
-  <span
-    style={Object.assign({}, styles.base, isChildNode && styles.offsetLeft)}>
+  <span style={Object.assign({}, styles.base, isChildNode && styles.offsetLeft)}>
     {'</'}
     <span style={styles.tagName}>{tagName}</span>
     {'>'}
@@ -58,30 +57,18 @@ export const DOMNodePreview: FC<any> = ({ isCloseTag, data, expanded }) => {
   const styles = useStyles('DOMNodePreview');
 
   if (isCloseTag) {
-    return (
-      <CloseTag
-        styles={styles.htmlCloseTag}
-        isChildNode
-        tagName={data.tagName}
-      />
-    );
+    return <CloseTag styles={styles.htmlCloseTag} isChildNode tagName={data.tagName} />;
   }
 
   switch (data.nodeType) {
     case Node.ELEMENT_NODE:
       return (
         <span>
-          <OpenTag
-            tagName={data.tagName}
-            attributes={data.attributes}
-            styles={styles.htmlOpenTag}
-          />
+          <OpenTag tagName={data.tagName} attributes={data.attributes} styles={styles.htmlOpenTag} />
 
           {shouldInline(data) ? data.textContent : !expanded && '…'}
 
-          {!expanded && (
-            <CloseTag tagName={data.tagName} styles={styles.htmlCloseTag} />
-          )}
+          {!expanded && <CloseTag tagName={data.tagName} styles={styles.htmlCloseTag} />}
         </span>
       );
     case Node.TEXT_NODE:

diff --git a/src/index.tsx b/src/index.tsx
@@ -11,14 +11,7 @@ import { ObjectRootLabel } from './object-inspector/ObjectRootLabel';
 import { ObjectValue } from './object/ObjectValue';
 import { ObjectName } from './object/ObjectName';
 
-export {
-  ObjectInspector,
-  ObjectLabel,
-  ObjectPreview,
-  ObjectRootLabel,
-  ObjectValue,
-  ObjectName,
-};
+export { ObjectInspector, ObjectLabel, ObjectPreview, ObjectRootLabel, ObjectValue, ObjectName };
 
 import React, { FC } from 'react';
 // import PropTypes from 'prop-types';

diff --git a/src/object-inspector/ObjectInspector.spec.js b/src/object-inspector/ObjectInspector.spec.js
@@ -15,9 +15,7 @@ describe('ObjectInspector', () => {
   it('passes `nodeRenderer` prop to <TreeView/>', () => {
     const nodeRenderer = () => <span>unit test</span>;
 
-    const tree = TestRenderer.create(
-      <ObjectInspector nodeRenderer={nodeRenderer} />
-    );
+    const tree = TestRenderer.create(<ObjectInspector nodeRenderer={nodeRenderer} />);
 
     expect(tree).toMatchSnapshot();
   });

diff --git a/src/object-inspector/ObjectInspector.tsx b/src/object-inspector/ObjectInspector.tsx
@@ -12,8 +12,7 @@ import { themeAcceptor } from '../styles';
 
 const createIterator = (showNonenumerable: any, sortObjectKeys: any) => {
   const objectIterator = function* (data: any) {
-    const shouldIterate =
-      (typeof data === 'object' && data !== null) || typeof data === 'function';
+    const shouldIterate = (typeof data === 'object' && data !== null) || typeof data === 'function';
     if (!shouldIterate) return;
 
     const dataIsArray = Array.isArray(data);
@@ -98,22 +97,11 @@ const defaultNodeRenderer = ({ depth, name, data, isNonenumerable }: any) =>
 /**
  * Tree-view for objects
  */
-const ObjectInspector: FC<any> = ({
-  showNonenumerable = false,
-  sortObjectKeys,
-  nodeRenderer,
-  ...treeViewProps
-}) => {
+const ObjectInspector: FC<any> = ({ showNonenumerable = false, sortObjectKeys, nodeRenderer, ...treeViewProps }) => {
   const dataIterator = createIterator(showNonenumerable, sortObjectKeys);
   const renderer = nodeRenderer ? nodeRenderer : defaultNodeRenderer;
 
-  return (
-    <TreeView
-      nodeRenderer={renderer}
-      dataIterator={dataIterator}
-      {...treeViewProps}
-    />
-  );
+  return <TreeView nodeRenderer={renderer} dataIterator={dataIterator} {...treeViewProps} />;
 };
 
 // ObjectInspector.propTypes = {

diff --git a/src/object-inspector/ObjectLabel.tsx b/src/object-inspector/ObjectLabel.tsx
@@ -7,20 +7,12 @@ import { ObjectPreview } from './ObjectPreview';
 /**
  * if isNonenumerable is specified, render the name dimmed
  */
-export const ObjectLabel: FC<any> = ({
-  name,
-  data,
-  isNonenumerable = false,
-}) => {
+export const ObjectLabel: FC<any> = ({ name, data, isNonenumerable = false }) => {
   const object = data;
 
   return (
     <span>
-      {typeof name === 'string' ? (
-        <ObjectName name={name} dimmed={isNonenumerable} />
-      ) : (
-        <ObjectPreview data={name} />
-      )}
+      {typeof name === 'string' ? <ObjectName name={name} dimmed={isNonenumerable} /> : <ObjectPreview data={name} />}
       <span>: </span>
       <ObjectValue object={object} />
     </span>

diff --git a/src/object-inspector/ObjectPreview.tsx b/src/object-inspector/ObjectPreview.tsx
@@ -24,12 +24,7 @@ export const ObjectPreview: FC<any> = ({ data }) => {
   const styles = useStyles('ObjectPreview');
   const object = data;
 
-  if (
-    typeof object !== 'object' ||
-    object === null ||
-    object instanceof Date ||
-    object instanceof RegExp
-  ) {
+  if (typeof object !== 'object' || object === null || object instanceof Date || object instanceof RegExp) {
     return <ObjectValue object={object} />;
   }
 
@@ -44,9 +39,7 @@ export const ObjectPreview: FC<any> = ({ data }) => {
     const arrayLength = object.length;
     return (
       <React.Fragment>
-        <span style={styles.objectDescription}>
-          {arrayLength === 0 ? `` : `(${arrayLength})\xa0`}
-        </span>
+        <span style={styles.objectDescription}>{arrayLength === 0 ? `` : `(${arrayLength})\xa0`}</span>
         <span style={styles.preview}>[{intersperse(previewArray, ', ')}]</span>
       </React.Fragment>
     );
@@ -56,10 +49,7 @@ export const ObjectPreview: FC<any> = ({ data }) => {
     for (const propertyName in object) {
       if (hasOwnProperty.call(object, propertyName)) {
         let ellipsis;
-        if (
-          propertyNodes.length === maxProperties - 1 &&
-          Object.keys(object).length > maxProperties
-        ) {
+        if (propertyNodes.length === maxProperties - 1 && Object.keys(object).length > maxProperties) {
           ellipsis = <span key={'ellipsis'}>…</span>;
         }
 
@@ -76,16 +66,12 @@ export const ObjectPreview: FC<any> = ({ data }) => {
       }
     }
 
-    const objectConstructorName = object.constructor
-      ? object.constructor.name
-      : 'Object';
+    const objectConstructorName = object.constructor ? object.constructor.name : 'Object';
 
     return (
       <React.Fragment>
         <span style={styles.objectDescription}>
-          {objectConstructorName === 'Object'
-            ? ''
-            : `${objectConstructorName} `}
+          {objectConstructorName === 'Object' ? '' : `${objectConstructorName} `}
         </span>
         <span style={styles.preview}>
           {'{'}

diff --git a/src/object/ObjectName.spec.js b/src/object/ObjectName.spec.js
@@ -10,17 +10,13 @@ describe('ObjectName', () => {
   });
 
   it('should apply dimming if `dimmed` prop is true', () => {
-    const tree = TestRenderer.create(
-      <ObjectName name="testvalue" dimmed={true} />
-    );
+    const tree = TestRenderer.create(<ObjectName name="testvalue" dimmed={true} />);
 
     expect(tree).toMatchSnapshot();
   });
 
   it('should not apply dimming if `dimmed` prop is false', () => {
-    const tree = TestRenderer.create(
-      <ObjectName name="testvalue" dimmed={false} />
-    );
+    const tree = TestRenderer.create(<ObjectName name="testvalue" dimmed={false} />);
 
     expect(tree).toMatchSnapshot();
   });

diff --git a/src/object/ObjectValue.spec.js b/src/object/ObjectValue.spec.js
@@ -9,9 +9,7 @@ describe('ObjectValue', () => {
   });
 
   it('should render bigint', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={9007199254740993n} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={9007199254740993n} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['9007199254740993', 'n']);
   });
@@ -23,9 +21,7 @@ describe('ObjectValue', () => {
   });
 
   it('should render string with quotes', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={'octocat'} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={'octocat'} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['"', 'octocat', '"']);
   });
@@ -37,9 +33,7 @@ describe('ObjectValue', () => {
   });
 
   it('should render undefined', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={undefined} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={undefined} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['undefined']);
   });
@@ -59,9 +53,7 @@ describe('ObjectValue', () => {
   });
 
   it('should render array with length information', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={[1, 2, 3, 4, 5]} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={[1, 2, 3, 4, 5]} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['Array(5)']);
   });
@@ -73,17 +65,13 @@ describe('ObjectValue', () => {
   });
 
   it('should render a simple object', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={{ k: 'v' }} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={{ k: 'v' }} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['Object']);
   });
 
   it('should render a null prototyped object', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={Object.create(null)} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={Object.create(null)} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['Object']);
   });
@@ -115,27 +103,21 @@ describe('ObjectValue', () => {
   */
 
   it('should render a symbol', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={Symbol()} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={Symbol()} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['Symbol()']);
   });
 
   it('should render a symbol foo', () => {
-    const tree = TestRenderer.create(
-      <ObjectValue object={Symbol('foo')} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue object={Symbol('foo')} />).toJSON();
     expect(tree.type).toBe('span');
     expect(tree.children).toEqual(['Symbol(foo)']);
   });
 
   it('accepts and applies style from `styles` prop', () => {
     // Custom `styles` prop gets applied to the element
     const style = { color: 'blue' };
-    const tree = TestRenderer.create(
-      <ObjectValue styles={style} object={''} />
-    ).toJSON();
+    const tree = TestRenderer.create(<ObjectValue styles={style} object={''} />).toJSON();
     expect(tree.props.style.color).toEqual('blue');
   });
 });
diff --git a/src/object/ObjectValue.tsx b/src/object/ObjectValue.tsx
@@ -15,17 +15,13 @@ export const ObjectValue: FC<any> = ({ object, styles }) => {
 
   switch (typeof object) {
     case 'bigint':
-      return (
-        <span style={mkStyle('objectValueNumber')}>{String(object)}n</span>
-      );
+      return <span style={mkStyle('objectValueNumber')}>{String(object)}n</span>;
     case 'number':
       return <span style={mkStyle('objectValueNumber')}>{String(object)}</span>;
     case 'string':
       return <span style={mkStyle('objectValueString')}>"{object}"</span>;
     case 'boolean':
-      return (
-        <span style={mkStyle('objectValueBoolean')}>{String(object)}</span>
-      );
+      return <span style={mkStyle('objectValueBoolean')}>{String(object)}</span>;
     case 'undefined':
       return <span style={mkStyle('objectValueUndefined')}>undefined</span>;
     case 'object':
@@ -36,20 +32,15 @@ export const ObjectValue: FC<any> = ({ object, styles }) => {
         return <span>{object.toString()}</span>;
       }
       if (object instanceof RegExp) {
-        return (
-          <span style={mkStyle('objectValueRegExp')}>{object.toString()}</span>
-        );
+        return <span style={mkStyle('objectValueRegExp')}>{object.toString()}</span>;
       }
       if (Array.isArray(object)) {
         return <span>{`Array(${object.length})`}</span>;
       }
       if (!object.constructor) {
         return <span>Object</span>;
       }
-      if (
-        typeof object.constructor.isBuffer === 'function' &&
-        object.constructor.isBuffer(object)
-      ) {
+      if (typeof object.constructor.isBuffer === 'function' && object.constructor.isBuffer(object)) {
         return <span>{`Buffer[${object.length}]`}</span>;
       }
 
@@ -58,15 +49,11 @@ export const ObjectValue: FC<any> = ({ object, styles }) => {
       return (
         <span>
           <span style={mkStyle('objectValueFunctionPrefix')}>ƒ&nbsp;</span>
-          <span style={mkStyle('objectValueFunctionName')}>
-            {object.name}()
-          </span>
+          <span style={mkStyle('objectValueFunctionName')}>{object.name}()</span>
         </span>
       );
     case 'symbol':
-      return (
-        <span style={mkStyle('objectValueSymbol')}>{object.toString()}</span>
-      );
+      return <span style={mkStyle('objectValueSymbol')}>{object.toString()}</span>;
     default:
       return <span />;
   }