refactor: 调整 stories 实现

懒渲染 amap 实例，避免 docs 下示例过多导致卡顿；不再使用基于根目录引用的方式，ide 插件兼容性参差不齐；使用单独目录放置storybook装饰器；
xyy94813 · Oct 24, 2023 · 2cf80ad · 2cf80ad
1 parent ef8dee9
commit 2cf80ad
Show file tree

Hide file tree

Showing 23 changed files with 281 additions and 100 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,9 +1,9 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-  logLevel: 'debug',
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials'],
+  logLevel: "debug",
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: ["@storybook/addon-essentials"],
   /**
    * storybook with typescript
    * see https://storybook.js.org/docs/configurations/typescript-config/
@@ -13,19 +13,19 @@ module.exports = {
       test: /\.(ts|tsx)$/,
       use: [
         {
-          loader: require.resolve('ts-loader'),
+          loader: require.resolve("ts-loader"),
         },
         // Optional
         {
-          loader: require.resolve('react-docgen-typescript-loader'),
+          loader: require.resolve("react-docgen-typescript-loader"),
         },
       ],
     });
-    config.resolve.extensions.unshift('.ts', '.tsx', '.mdx');
-    config.resolve.modules = [...config.resolve.modules, path.resolve(__dirname, '..', 'src')];
+    config.resolve.extensions.unshift(".ts", ".tsx", ".mdx");
+    // config.resolve.modules = [...config.resolve.modules, path.resolve(__dirname, '..', 'src')];
     config.resolve.alias = {
       ...config.resolve.alias,
-      '@': path.resolve(__dirname, '..', 'src'),
+      // '@': path.resolve(__dirname, '..', 'src'),
     };
     return config;
   },

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,10 +1,11 @@
 import React, { Suspense } from "react";
 
-export const decorators = [
-  (renderStory, context) => (
-    <Suspense fallback="loading">{renderStory({}, context)}</Suspense>
-  ),
-];
+const withSuspense = (renderStory, context) => (
+  <Suspense fallback="loading">{renderStory({}, context)}</Suspense>
+);
+
+export const decorators = [withSuspense];
+
 export const parameters = {
   options: {
     storySort: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.0.5",
     "react-docgen-typescript-loader": "^3.7.2",
+    "react-intersection-observer": "^9.5.2",
     "rollup": "^2.40.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-terser": "^7.0.2",

diff --git a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx
@@ -1,13 +1,12 @@
 import React, { useRef, useEffect, Suspense } from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 
-import { createAMapAPIContainer, useAMapAPI } from 'index';
+import { createAMapAPIContainer, useAMapAPI } from '../../../index';
 
 const AMAP_API_KEY: string = process.env.STORYBOOK_AMAP_API_KEY || '';
 
 export default {
   title: '组件(Components)/基础组件(Basic)/AMapAPIContainer',
-  excludeStories: ['AsyncPluginAPIContainer'],
 } as Meta;
 
 const SyncPluginAPIContainer = createAMapAPIContainer({
@@ -22,7 +21,7 @@ const SyncPluginAPIContainer = createAMapAPIContainer({
   },
 });
 
-export const AsyncPluginAPIContainer = createAMapAPIContainer({
+const AsyncPluginAPIContainer = createAMapAPIContainer({
   key: AMAP_API_KEY,
   version: '2.0',
   AMapUI: {

diff --git a/src/components/AMapCircle/stories/AMapCircle.stories.tsx b/src/components/AMapCircle/stories/AMapCircle.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapCircle, AMapCircleProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+import { AMapCircle, AMapCircleProps } from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onShow',
@@ -23,7 +26,12 @@ const eventHandler = actions(
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapCircle',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     center: [116.39, 39.9],
     radius: 10_000,

diff --git a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapControlBar, AMapControlBarProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapControlBar, AMapControlBarProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapControlBar',
   component: AMapControlBar,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     position: 'LT',
     offset: [10, 10],

diff --git a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapEllipse, AMapEllipseProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+import { AMapEllipse, AMapEllipseProps } from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onShow',
@@ -23,7 +26,12 @@ const eventHandler = actions(
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapEllipse',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     center: [116.39, 39.9],
     radius: [10_000, 5_000],

diff --git a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 
-import type { AMapGeoJSONGetOverlayCallback, AMapGeoJSONProps } from 'index';
-import { AMapGeoJSON, coordsOfGeoJSON2AMapPolygonPath } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
-import withAutoFitView from '../../AMapAutoFitView/stories/withAutoFitView';
+import type { AMapGeoJSONGetOverlayCallback, AMapGeoJSONProps } from '../../../index';
+import { AMapGeoJSON, coordsOfGeoJSON2AMapPolygonPath } from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const point: GeoJSON.Point = {
   type: 'Point',
@@ -97,7 +100,12 @@ const mockData: GeoJSON.FeatureCollection = {
 
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapGeoJSON',
-  decorators: [withAutoFitView, withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     geoJSON: mockData,
     visible: true,

diff --git a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapHawkEye, AMapHawkEyeProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapHawkEye, AMapHawkEyeProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide', 'onOpen', 'onClose');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapHawkEye',
   component: AMapHawkEye,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     autoMove: true,
     showRectangle: true,

diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 
-import { AMapMap, AMapMapProps } from 'index';
+import { AMapMap, AMapMapProps } from '../../../index';
 
-import { AsyncPluginAPIContainer as APIContainer } from '../../AMapAPIContainer/stories/createAMapAPIContainer.stories';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 AMapMap.displayName = 'AMapMap';
 
-const withAPIContainer = (renderStory: Story, context: any) => (
-  <APIContainer>
-    <div style={{ height: '400px' }}>{renderStory({}, context)}</div>
-  </APIContainer>
-);
-
 export default {
   title: '组件(Components)/基础组件(Basic)/AMapMap',
   component: AMapMap,
-  decorators: [withAPIContainer],
+  decorators: [
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     center: undefined,
     cityName: undefined,
@@ -46,7 +44,6 @@ export default {
       },
     },
   },
-  excludeStories: ['withAMapContainer'],
 } as Meta;
 
 const Template: Story<AMapMapProps> = (args) => <AMapMap {...args} />;
@@ -68,11 +65,3 @@ SetZoom.args = {
   zoom: 12,
 };
 SetZoom.storyName = '设置缩放比例';
-
-export const withAMapContainer = (renderStory: Story, context: any) => (
-  <APIContainer>
-    <div style={{ height: 'calc(100vh - 70px)' }}>
-      <AMapMap>{renderStory({}, context)}</AMapMap>
-    </div>
-  </APIContainer>
-);
diff --git a/src/components/AMapMapType/stories/AMapMapType.stories.tsx b/src/components/AMapMapType/stories/AMapMapType.stories.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapMapType, AMapMapTypeProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import { AMapMapType, AMapMapTypeProps } from '../../../index';
+
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions('onShow', 'onHide');
 
 export default {
   title: '组件(Components)/地图控件(Control)/AMapMapType',
   component: AMapMapType,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     defaultType: 0,
     visible: true,

diff --git a/src/components/AMapMarker/stories/AMapMarker.stories.tsx b/src/components/AMapMarker/stories/AMapMarker.stories.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { Story, Meta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 import { actions } from '@storybook/addon-actions';
 
-import { AMapToolBar, AMapMarker, AMapMarkerProps } from 'index';
-import { withAMapContainer } from '../../AMapMap/stories/AMapMap.stories';
+import {
+  AMapToolBar,
+  AMapMarker,
+  AMapMarkerProps,
+} from '../../../index';
+
+import withAutoFitView from '../../../storybook-decorators/withAutoFitView';
+import withAMap from '../../../storybook-decorators/withAMap';
+import withAMapContainer from '../../../storybook-decorators/withAMapContainer';
+import withAPIContainer from '../../../storybook-decorators/withAPIContainer';
 
 const eventHandler = actions(
   'onHide',
@@ -31,7 +39,12 @@ const eventHandler = actions(
 export default {
   title: '组件(Components)/覆盖物(Overlay)/AMapMarker',
   component: AMapMarker,
-  decorators: [withAMapContainer],
+  decorators: [
+    withAutoFitView,
+    withAMap,
+    withAMapContainer,
+    withAPIContainer,
+  ],
   args: {
     position: [116.39, 39.9],
     title: '自定义的 Title',