chore: move all stories from src directory. (#715)

chore: clean tsconfig.json;

feat: updated webpack config to export a function to achieve full-control mode, instead of deprecated Extend Mode;

Author: xobotyi

.storybook/config.js

@@ -12,7 +12,7 @@ setOptions({
   sidebarAnimations: false,
 });
 
-const req = require.context('../src/', true, /.*\.(stories|story)\.(js|jsx|ts|tsx)?$/);
+const req = require.context('../stories/', true, /\.story\.tsx?$/);
 
 const loadStories = () => {
   req.keys().forEach((filename) => req(filename));

.storybook/webpack.config.js

@@ -1,35 +1,39 @@
 const path = require('path');
-const {compilerOptions} = require('../tsconfig.json');
+const { compilerOptions } = require('../tsconfig.json');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
-const SRC_PATH = path.join(__dirname, '../src');
+const basedir = path.join(__dirname, '..');
 
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.md?$/,
-        loader: "markdown-loader",
-      },
-      {
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        include: [
-          SRC_PATH,
-        ],
-        options: {
-          transpileOnly: true, // use transpileOnly mode to speed-up compilation
-          compilerOptions: {
-            ...compilerOptions,
-            declaration: false,
-          },
+module.exports = async ({ config, mode }) => {
+  config.module.rules.push(
+    {
+      test: /\.md?$/,
+      loader: "markdown-loader",
+    },
+    {
+      test: /\.tsx?$/,
+      loader: 'ts-loader',
+      include: [
+        path.join(basedir, 'src'),
+        path.join(basedir, 'stories'),
+      ],
+      options: {
+        transpileOnly: true, // use transpileOnly mode to speed-up compilation
+        compilerOptions: {
+          ...compilerOptions,
+          declaration: false,
         },
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-    enforceExtension: false
-  },
-  plugins: [new ForkTsCheckerWebpackPlugin()],
+      },
+    },
+  );
+
+  config.plugins.push(new ForkTsCheckerWebpackPlugin());
+
+  config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx'];
+  config.resolve.enforceExtension = false;
+
+  // disable the hint about too big bundle
+  config.performance.hints = false;
+
+  return config;
 };

src/comps/__stories__/UseKey.story.tsx stories/comps/UseKey.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import UseKey from '../UseKey';
+import UseKey from '../../src/comps/UseKey';
 
 storiesOf('Components|<UseKey>', module).add('Demo', () => (
   <div>

src/__stories__/createBreakpoint.story.tsx stories/createBreakpoint.story.tsx

@@ -1,7 +1,7 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { createBreakpoint } from '..';
+import { createBreakpoint } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const useBreakpointA = createBreakpoint();
@@ -23,7 +23,7 @@ const Demo = () => {
 
 storiesOf('sensors|createBreakpoint', module)
   .addDecorator(withKnobs)
-  .add('Docs', () => <ShowDocs md={require('../../docs/createBreakpoint.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/createBreakpoint.md')} />)
   .add('Demo', () => {
     return <Demo />;
   });

src/__stories__/createMemo.story.tsx stories/createMemo.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { createMemo } from '..';
+import { createMemo } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const fibonacci = n => {
@@ -22,5 +22,5 @@ const Demo = () => {
 };
 
 storiesOf('State|createMemo', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/createMemo.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/createMemo.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/createReducer.story.tsx stories/createReducer.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import logger from 'redux-logger';
 import thunk from 'redux-thunk';
 
-import { createReducer } from '..';
+import { createReducer } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const useThunkReducer = createReducer(thunk, logger);
@@ -53,5 +53,5 @@ const Demo = ({ initialCount = 1 }) => {
 };
 
 storiesOf('State|createReducer', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/createReducer.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/createReducer.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useAsync.story.tsx stories/useAsync.story.tsx

@@ -1,7 +1,7 @@
 import { number, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useAsync } from '..';
+import { useAsync } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = ({ delay }) => {
@@ -35,7 +35,7 @@ const Demo = ({ delay }) => {
 
 storiesOf('Side effects|useAsync', module)
   .addDecorator(withKnobs)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useAsync.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useAsync.md')} />)
   .add('Demo', () => {
     const delay = number('delay', 1000, { range: true, min: 100, max: 5000, step: 100 });
     return <Demo delay={delay} />;

src/__stories__/useAsyncFn.story.tsx stories/useAsyncFn.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useAsyncFn } from '..';
+import { useAsyncFn } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -33,5 +33,5 @@ const Demo = () => {
 };
 
 storiesOf('Side effects|useAsyncFn', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useAsyncFn.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useAsyncFn.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useAsyncRetry.story.tsx stories/useAsyncRetry.story.tsx

@@ -1,7 +1,7 @@
 import { number, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useAsyncRetry } from '..';
+import { useAsyncRetry } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = ({ delay }) => {
@@ -36,7 +36,7 @@ const Demo = ({ delay }) => {
 
 storiesOf('Side effects|useAsyncRetry', module)
   .addDecorator(withKnobs)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useAsyncRetry.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useAsyncRetry.md')} />)
   .add('Demo', () => {
     const delay = number('delay', 1000, { range: true, min: 100, max: 5000, step: 100 });
     return <Demo delay={delay} />;

src/__stories__/useAudio.story.tsx stories/useAudio.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useAudio } from '..';
+import { useAudio } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -30,5 +30,5 @@ const Demo = () => {
 };
 
 storiesOf('UI|useAudio', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useAudio.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useAudio.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useBattery.story.tsx stories/useBattery.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useBattery } from '..';
+import { useBattery } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -37,5 +37,5 @@ const Demo = () => {
 };
 
 storiesOf('Sensors|useBattery', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useBattery.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useBattery.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useBeforeUnload.story.tsx stories/useBeforeUnload.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useBeforeUnload, useToggle } from '..';
+import { useBeforeUnload, useToggle } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -16,5 +16,5 @@ const Demo = () => {
 };
 
 storiesOf('Side effects|useBeforeUnload', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useBeforeUnload.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useBeforeUnload.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useBoolean.story.tsx stories/useBoolean.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useBoolean } from '..';
+import { useBoolean } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -17,5 +17,5 @@ const Demo = () => {
 };
 
 storiesOf('State|useBoolean', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useToggle.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useToggle.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useClickAway.story.tsx stories/useClickAway.story.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { useRef } from 'react';
-import { useClickAway } from '..';
+import { useClickAway } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -22,5 +22,5 @@ const Demo = () => {
 };
 
 storiesOf('UI|useClickAway', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useClickAway.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useClickAway.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useCopyToClipboard.story.tsx stories/useCopyToClipboard.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useCopyToClipboard } from '..';
+import { useCopyToClipboard } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -30,5 +30,5 @@ const Demo = () => {
 };
 
 storiesOf('Side-effects|useCopyToClipboard', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useCopyToClipboard.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useCopyToClipboard.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useCounter.story.tsx stories/useCounter.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useCounter } from '..';
+import { useCounter } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -42,5 +42,5 @@ const Demo = () => {
 };
 
 storiesOf('State|useCounter', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useCounter.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useCounter.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useCss.story.tsx stories/useCss.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useCss } from '..';
+import { useCss } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -16,5 +16,5 @@ const Demo = () => {
 };
 
 storiesOf('UI|useCss', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useCss.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useCss.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useDebounce.story.tsx stories/useDebounce.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useDebounce } from '..';
+import { useDebounce } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -38,5 +38,5 @@ const Demo = () => {
 };
 
 storiesOf('Side effects|useDebounce', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useDebounce.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useDebounce.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useDeepCompareEffect.story.tsx stories/useDeepCompareEffect.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useCounter, useDeepCompareEffect } from '..';
+import { useCounter, useDeepCompareEffect } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -29,5 +29,5 @@ const Demo = () => {
 };
 
 storiesOf('Lifecycle|useDeepCompareEffect', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useDeepCompareEffect.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useDeepCompareEffect.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useDefault.story.tsx stories/useDefault.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useDefault } from '..';
+import { useDefault } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -18,5 +18,5 @@ const Demo = () => {
 };
 
 storiesOf('State|useDefault', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useDefault.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useDefault.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useDrop.story.tsx stories/useDrop.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useDrop } from '..';
+import { useDrop } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -50,5 +50,5 @@ const Demo = () => {
 };
 
 storiesOf('UI|useDrop', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useDrop.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useDrop.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useDropArea.story.tsx stories/useDropArea.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useDropArea } from '..';
+import { useDropArea } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
@@ -52,5 +52,5 @@ const Demo = () => {
 };
 
 storiesOf('UI|useDropArea', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useDrop.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useDrop.md')} />)
   .add('Default', () => <Demo />);

src/__stories__/useEffectOnce.story.tsx stories/useEffectOnce.story.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { useEffectOnce } from '..';
+import { useEffectOnce } from '../src';
 import ConsoleStory from './util/ConsoleStory';
 import ShowDocs from './util/ShowDocs';
 
@@ -17,5 +17,5 @@ const Demo = () => {
 };
 
 storiesOf('Lifecycle|useEffectOnce', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useEffectOnce.md')} />)
+  .add('Docs', () => <ShowDocs md={require('../docs/useEffectOnce.md')} />)
   .add('Demo', () => <Demo />);