bump dev dependencies; rebuild storybook files

Author: based-ghost

.storybook/main.ts

@@ -30,7 +30,7 @@ module.exports = {
       test: /\.(ts|tsx)$/,
       loader: require.resolve('babel-loader'),
       options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
+        presets: [['react-app', { flow: false, typescript: true, runtime: 'automatic' }]],
       },
     });
 

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import { GlobalStyle } from './global-style';
 

__stories__/helpers/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 import { hexToRgba } from '../utils';
 import styled from 'styled-components';
 
@@ -107,7 +107,7 @@ const CheckIcon = styled.i`
   }
 `;
 
-const Checkbox = React.memo<CheckboxProps>(({
+const Checkbox = memo<CheckboxProps>(({
   label,
   onCheck,
   checked,

__stories__/helpers/components/CodeMarkup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 import styled from 'styled-components';
 import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -110,7 +110,7 @@ const PreContainer = styled.div`
   }
 `;
 
-const CodeMarkup = React.memo<CodeMarkupProps>(({
+const CodeMarkup = memo<CodeMarkupProps>(({
   data,
   header,
   language,

__stories__/helpers/components/OptionsCountButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { Button } from '../styled';
 import styled from 'styled-components';
 import { numberWithCommas } from '../utils';
@@ -33,7 +33,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   }
 `;
 
-const OptionsCountButton: React.FC<OptionsCountButtonProps> = ({
+const OptionsCountButton: FC<OptionsCountButtonProps> = ({
   count,
   optionsCount,
   setOptionsCount

__stories__/helpers/components/PackageLink.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo, FC } from 'react';
 import styled from 'styled-components';
 
 type PackageLinkProps = Readonly<{
@@ -27,7 +27,7 @@ const Link = styled.a`
   }
 `;
 
-const PackageLink: React.FC<PackageLinkProps> = React.memo(({ name, href }) => (
+const PackageLink: FC<PackageLinkProps> = memo(({ name, href }) => (
   <Link
     href={href}
     target='_blank'

__stories__/index.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState, useEffect, useCallback, Fragment, ReactNode } from 'react';
+import { useMemo, useRef, useState, useEffect, useCallback, Fragment, ReactNode } from 'react';
 import { toast } from 'react-toastify';
 import { SelectedOption } from '../src/types';
 import { useUpdateEffect } from '../src/hooks';

__tests__/AriaLiveRegion.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { FocusedOption } from '../src';
 import { RfsTheme } from '../src/theme';
 import { ThemeProvider } from 'styled-components';

__tests__/AutosizeInput.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RfsTheme } from '../src/theme';
 import { AutosizeInputProps } from '../src/types';
 import { ThemeProvider } from 'styled-components';

__tests__/IndicatorIcons.test.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { RfsTheme } from '../src/theme';
 import { ThemeProvider } from 'styled-components';
 import { IndicatorIcons } from '../src/components';