style(storybook): update code style

Author: Lodin

__stories__/FixedSizeTree.story.tsx

@@ -1,6 +1,6 @@
 import {number, withKnobs} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
-import * as React from 'react';
+import React, {FC} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
   FixedSizeNodeComponentProps,
@@ -27,7 +27,7 @@ type StackElement = Readonly<{
   node: DataNode;
 }>;
 
-type ExtendedData = FixedSizeNodeData &
+type TreeData = FixedSizeNodeData &
   Readonly<{
     isLeaf: boolean;
     name: string;
@@ -62,7 +62,7 @@ const defaultButtonStyle = {fontFamily: 'Courier New'};
 
 function* treeWalker(
   refresh: boolean,
-): Generator<ExtendedData | string | symbol, void, boolean> {
+): Generator<TreeData | string | symbol, void, boolean> {
   const stack: StackElement[] = [];
 
   stack.push({
@@ -95,9 +95,12 @@ function* treeWalker(
   }
 }
 
-const Node: React.FunctionComponent<FixedSizeNodeComponentProps<
-  ExtendedData
->> = ({data: {isLeaf, name, nestingLevel}, isOpen, style, toggle}) => (
+const Node: FC<FixedSizeNodeComponentProps<TreeData>> = ({
+  data: {isLeaf, name, nestingLevel},
+  isOpen,
+  style,
+  toggle,
+}) => (
   <div
     style={{
       ...style,
@@ -117,13 +120,11 @@ const Node: React.FunctionComponent<FixedSizeNodeComponentProps<
   </div>
 );
 
-type TreePresenterProps = {
-  readonly itemSize: number;
-};
+type TreePresenterProps = Readonly<{
+  itemSize: number;
+}>;
 
-const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
-  itemSize,
-}) => (
+const TreePresenter: FC<TreePresenterProps> = ({itemSize}) => (
   <AutoSizer disableWidth>
     {({height}) => (
       <FixedSizeTree

__stories__/VariableSizeTree.story.tsx

@@ -1,6 +1,6 @@
 import {number, withKnobs} from '@storybook/addon-knobs';
 import {storiesOf} from '@storybook/react';
-import React, {FC} from 'react';
+import React, {FC, useCallback, useEffect, useRef} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
   VariableSizeNodeComponentProps,
@@ -72,7 +72,7 @@ const Node: FC<VariableSizeNodeComponentProps<ExtendedData>> = ({
   const canOpen = height <= itemSize;
   const halfSize = itemSize / 2;
 
-  const toggleNodeSize = React.useCallback(
+  const toggleNodeSize = useCallback(
     () => resize(canOpen ? height + halfSize : height - halfSize, true),
     [height, resize],
   );
@@ -108,12 +108,10 @@ type TreePresenterProps = Readonly<{
   itemSize: number;
 }>;
 
-const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
-  itemSize,
-}) => {
-  const tree = React.useRef<VariableSizeTree<ExtendedData>>(null);
+const TreePresenter: FC<TreePresenterProps> = ({itemSize}) => {
+  const tree = useRef<VariableSizeTree<ExtendedData>>(null);
 
-  const treeWalker = React.useCallback(
+  const treeWalker = useCallback(
     function* treeWalker(
       refresh: boolean,
     ): Generator<ExtendedData | string | symbol, void, boolean> {
@@ -152,7 +150,7 @@ const TreePresenter: React.FunctionComponent<TreePresenterProps> = ({
     [itemSize],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     tree.current?.recomputeTree({
       refreshNodes: true,