From 3ef01fa6adce8e62e1a7d0b8c0a422b4f2337e43 Mon Sep 17 00:00:00 2001 From: RoXoM Date: Tue, 28 Nov 2023 23:13:24 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8=20StoryObj=20?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=20Story?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 不再使用废弃的类型 Story --- .../createAMapAPIContainer.stories.tsx | 98 ++++---- .../AMapCircle/stories/AMapCircle.stories.tsx | 81 ++++--- .../stories/AMapControlBar.stories.tsx | 34 +-- .../stories/AMapEllipse.stories.tsx | 79 +++---- .../stories/AMapGeoJSON.stories.tsx | 47 ++-- .../stories/AMapHawkEye.stories.tsx | 53 +++-- .../AMapMap/stories/AMapMap.stories.tsx | 65 +++--- .../stories/AMapMapType.stories.tsx | 34 +-- .../AMapMarker/stories/AMapMarker.stories.tsx | 195 +++++++++------- .../stories/AMapMouseTool.stories.tsx | 27 ++- .../stories/AMapOverlayGroup.stories.tsx | 158 +++++++------ .../stories/AMapPolygon.stories.tsx | 220 +++++++++--------- .../stories/AMapPolygonEditor.stories.tsx | 59 +++-- .../stories/AMapPolyline.stories.tsx | 124 +++++----- .../stories/AMapPolylineEditor.stories.tsx | 41 ++-- .../AMapScale/stories/AMapScale.stories.tsx | 27 ++- .../stories/AMapToolBar.stories.tsx | 19 +- src/storybook-decorators/withAMap.tsx | 4 +- .../withAMapContainer.tsx | 4 +- src/storybook-decorators/withAPIContainer.tsx | 4 +- src/storybook-decorators/withAutoFitView.tsx | 4 +- 21 files changed, 734 insertions(+), 643 deletions(-) diff --git a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx index 0434cc3..77ffe6a 100644 --- a/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx +++ b/src/components/AMapAPIContainer/stories/createAMapAPIContainer.stories.tsx @@ -1,5 +1,5 @@ import React, { useRef, useEffect, Suspense } from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { createAMapAPIContainer, useAMapAPI } from '../../../index'; @@ -11,26 +11,6 @@ const meta: Meta = { export default meta; -const SyncPluginAPIContainer = createAMapAPIContainer({ - key: AMAP_API_KEY, - version: '2.0', - plugins: ['ControlBar', 'ToolBar', 'Scale', 'MapType', 'HawkEye'].map( - (pluginName) => `AMap.${pluginName}`, - ), - AMapUI: { - version: '1.1', - plugins: ['overlay/SimpleMarker'], - }, -}); - -const AsyncPluginAPIContainer = createAMapAPIContainer({ - key: AMAP_API_KEY, - version: '2.0', - AMapUI: { - version: '1.1', - }, -}); - const initPlugin = (AMap: typeof global.AMap, map: AMap.Map) => { new AMap.ControlBar().addTo(map); new AMap.ToolBar({ position: 'LT', offset: [50, 120] }).addTo(map); @@ -46,6 +26,14 @@ const initUIPlugin = (SimpleMarker: typeof AMapUI.SimpleMarker, map: AMap.Map) = }).addTo(map); }; +const AsyncPluginAPIContainer = createAMapAPIContainer({ + key: AMAP_API_KEY, + version: '2.0', + AMapUI: { + version: '1.1', + }, +}); + const AsyncPluginContentDrawer = () => { const { __AMAP__: AMap } = useAMapAPI(); const $container = useRef(null); @@ -80,15 +68,6 @@ const AsyncPluginContentDrawer = () => { return
; }; -export const AsyncPlugin: Story = () => ( - - - - - -); -AsyncPlugin.storyName = '异步加载插件'; - /** * TODO：更好的自动生成 Code */ @@ -139,14 +118,37 @@ const AsyncPluginContentDrawer = () => { return
; }; `; -AsyncPlugin.parameters = { - docs: { - source: { - code: AsyncPluginCode, + +export const AsyncPlugin: StoryObj = { + name: '异步加载插件', + render: () => ( + + + + + + ), + parameters: { + docs: { + source: { + code: AsyncPluginCode, + }, }, }, }; +const SyncPluginAPIContainer = createAMapAPIContainer({ + key: AMAP_API_KEY, + version: '2.0', + plugins: ['ControlBar', 'ToolBar', 'Scale', 'MapType', 'HawkEye'].map( + (pluginName) => `AMap.${pluginName}`, + ), + AMapUI: { + version: '1.1', + plugins: ['overlay/SimpleMarker'], + }, +}); + const SyncPluginContentDrawer = () => { const { __AMAP__: AMap, __AMAP_UI__: AMapUI } = useAMapAPI(); const $container = useRef(null); @@ -172,15 +174,6 @@ const SyncPluginContentDrawer = () => { return
; }; -export const SyncPlugin: Story = () => ( - - - - - -); -SyncPlugin.storyName = '同步加载插件'; - const SyncPluginCode = ` const SyncPluginAPIContainer = createAMapAPIContainer({ version: '2.0', @@ -229,10 +222,21 @@ const SyncPluginContentDrawer = () => { ) `; -SyncPlugin.parameters = { - docs: { - source: { - code: SyncPluginCode, + +export const SyncPlugin: StoryObj = { + name: '同步加载插件', + render: () => ( + + + + + + ), + parameters: { + docs: { + source: { + code: SyncPluginCode, + }, }, }, }; diff --git a/src/components/AMapCircle/stories/AMapCircle.stories.tsx b/src/components/AMapCircle/stories/AMapCircle.stories.tsx index 8e531d7..cb4456f 100644 --- a/src/components/AMapCircle/stories/AMapCircle.stories.tsx +++ b/src/components/AMapCircle/stories/AMapCircle.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapCircle, AMapCircleProps } from '../../../index'; +import { AMapCircle } from '../../../index'; import withAutoFitView from '../../../storybook-decorators/withAutoFitView'; import withAMap from '../../../storybook-decorators/withAMap'; @@ -28,6 +27,7 @@ const presetColors = ['#ff0000', '#00ff00', '#0000ff']; const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapCircle', + component: AMapCircle, decorators: [ withAutoFitView, withAMap(), @@ -38,8 +38,6 @@ const meta: Meta = { center: [116.39, 39.9], radius: 10_000, visible: true, - onShow: eventHandler.onShow, - onHide: eventHandler.onHide, }, argTypes: { center: { @@ -316,48 +314,49 @@ const meta: Meta = { export default meta; -type AMapCircleStory = Story; -const Template: AMapCircleStory = (args) => ( - -); +type AMapCircleStory = StoryObj; -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '基本使用'; -CommonUse.args = {}; +export const CommonUse: AMapCircleStory = { + name: '基本使用', +}; -export const CustomStyle: typeof Template = Template.bind({}); -CustomStyle.storyName = '自定义样式'; -CustomStyle.args = { - fillColor: 'yellow', - fillOpacity: 0.5, - strokeColor: 'red', - strokeStyle: 'dashed', - strokeOpacity: 0.1, - strokeWeight: 20, - strokeDasharray: [10, 40], +export const CustomStyle: AMapCircleStory = { + name: '自定义样式', + args: { + fillColor: 'yellow', + fillOpacity: 0.5, + strokeColor: 'red', + strokeStyle: 'dashed', + strokeOpacity: 0.1, + strokeWeight: 20, + strokeDasharray: [10, 40], + }, }; -export const ClickEvent: typeof Template = Template.bind({}); -ClickEvent.storyName = '点击事件（左单/左双/右单）'; -ClickEvent.args = { - onClick: eventHandler.onClick, - onDBLClick: eventHandler.onDBLClick, - onRightClick: eventHandler.onRightClick, +export const ClickEvent: AMapCircleStory = { + name: '点击事件（左单/左双/右单）', + args: { + onClick: eventHandler.onClick, + onDBLClick: eventHandler.onDBLClick, + onRightClick: eventHandler.onRightClick, + }, }; -export const MouseEvent: typeof Template = Template.bind({}); -MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）'; -MouseEvent.args = { - onMousedown: eventHandler.onMousedown, - onMouseup: eventHandler.onMouseup, - onMouseover: eventHandler.onMouseover, - onMouseout: eventHandler.onMouseout, +export const MouseEvent: AMapCircleStory = { + name: '鼠标事件（按下/抬起/经过/移出）', + args: { + onMousedown: eventHandler.onMousedown, + onMouseup: eventHandler.onMouseup, + onMouseover: eventHandler.onMouseover, + onMouseout: eventHandler.onMouseout, + }, }; -export const TouchEvent: typeof Template = Template.bind({}); -TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）'; -TouchEvent.args = { - onTouchstart: eventHandler.onTouchstart, - onTouchmove: eventHandler.onTouchmove, - onTouchend: eventHandler.onTouchend, +export const TouchEvent: AMapCircleStory = { + name: '触摸事件（触摸开始/触摸移动/触摸结束）', + args: { + onTouchstart: eventHandler.onTouchstart, + onTouchmove: eventHandler.onTouchmove, + onTouchend: eventHandler.onTouchend, + }, }; diff --git a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx index c7fbe92..e7d1938 100644 --- a/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx +++ b/src/components/AMapControlBar/stories/AMapControlBar.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Story, Meta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapControlBar, AMapControlBarProps } from '../../../index'; +import { AMapControlBar } from '../../../index'; import withAMap from '../../../storybook-decorators/withAMap'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; @@ -106,16 +105,25 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ; +type AMapControlBarStory = StoryObj; -export const ChangeOffset: typeof Template = Template.bind({}); -ChangeOffset.storyName = '设置偏移量'; -ChangeOffset.args = { offset: [200, 200] }; +export const ChangeOffset: AMapControlBarStory = { + name: '设置偏移量', + args: { + offset: [200, 200], + }, +}; -export const ChangePosition: typeof Template = Template.bind({}); -ChangePosition.args = { position: 'RT' }; -ChangePosition.storyName = '指定位置'; +export const ChangePosition: AMapControlBarStory = { + name: '指定位置', + args: { + position: 'RT', + }, +}; -export const HideControlButton: typeof Template = Template.bind({}); -HideControlButton.args = { showControlButton: false }; -HideControlButton.storyName = '显示/隐藏控制按钮'; +export const HideControlButton: AMapControlBarStory = { + name: '显示/隐藏控制按钮', + args: { + showControlButton: false, + }, +}; diff --git a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx index 5f24c2b..58bf371 100644 --- a/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx +++ b/src/components/AMapEllipse/stories/AMapEllipse.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapEllipse, AMapEllipseProps } from '../../../index'; +import { AMapEllipse } from '../../../index'; import withAutoFitView from '../../../storybook-decorators/withAutoFitView'; import withAMap from '../../../storybook-decorators/withAMap'; @@ -28,6 +27,7 @@ const presetColors = ['#ff0000', '#00ff00', '#0000ff']; const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapEllipse', + component: AMapEllipse, decorators: [ withAutoFitView, withAMap(), @@ -303,48 +303,49 @@ const meta: Meta = { export default meta; -type AMapEllipseStory = Story; -const Template: AMapEllipseStory = (args) => ( - -); +type AMapEllipseStory = StoryObj; -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '基本使用'; -CommonUse.args = {}; +export const CommonUse: AMapEllipseStory = { + name: '基本使用', +}; -export const CustomStyle: typeof Template = Template.bind({}); -CustomStyle.storyName = '自定义样式'; -CustomStyle.args = { - fillColor: 'yellow', - fillOpacity: 0.5, - strokeColor: 'red', - strokeStyle: 'dashed', - strokeOpacity: 0.1, - strokeWeight: 20, - strokeDasharray: [10, 40], +export const CustomStyle: AMapEllipseStory = { + name: '自定义样式', + args: { + fillColor: 'yellow', + fillOpacity: 0.5, + strokeColor: 'red', + strokeStyle: 'dashed', + strokeOpacity: 0.1, + strokeWeight: 20, + strokeDasharray: [10, 40], + }, }; -export const ClickEvent: typeof Template = Template.bind({}); -ClickEvent.storyName = '点击事件（左单/左双/右单）'; -ClickEvent.args = { - onClick: eventHandler.onClick, - onDBLClick: eventHandler.onDBLClick, - onRightClick: eventHandler.onRightClick, +export const ClickEvent: AMapEllipseStory = { + name: '点击事件（左单/左双/右单）', + args: { + onClick: eventHandler.onClick, + onDBLClick: eventHandler.onDBLClick, + onRightClick: eventHandler.onRightClick, + }, }; -export const MouseEvent: typeof Template = Template.bind({}); -MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）'; -MouseEvent.args = { - onMousedown: eventHandler.onMousedown, - onMouseup: eventHandler.onMouseup, - onMouseover: eventHandler.onMouseover, - onMouseout: eventHandler.onMouseout, +export const MouseEvent: AMapEllipseStory = { + name: '鼠标事件（按下/抬起/经过/移出）', + args: { + onMousedown: eventHandler.onMousedown, + onMouseup: eventHandler.onMouseup, + onMouseover: eventHandler.onMouseover, + onMouseout: eventHandler.onMouseout, + }, }; -export const TouchEvent: typeof Template = Template.bind({}); -TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）'; -TouchEvent.args = { - onTouchstart: eventHandler.onTouchstart, - onTouchmove: eventHandler.onTouchmove, - onTouchend: eventHandler.onTouchend, +export const TouchEvent: AMapEllipseStory = { + name: '触摸事件（触摸开始/触摸移动/触摸结束）', + args: { + onTouchstart: eventHandler.onTouchstart, + onTouchmove: eventHandler.onTouchmove, + onTouchend: eventHandler.onTouchend, + }, }; diff --git a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx index eafed20..18fe7aa 100644 --- a/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx +++ b/src/components/AMapGeoJSON/stories/AMapGeoJSON.stories.tsx @@ -1,7 +1,6 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; -import type { AMapGeoJSONGetOverlayCallback, AMapGeoJSONProps } from '../../../index'; +import type { AMapGeoJSONGetOverlayCallback } from '../../../index'; import { AMapGeoJSON, coordsOfGeoJSON2AMapPolygonPath } from '../../../index'; import withAutoFitView from '../../../storybook-decorators/withAutoFitView'; @@ -100,6 +99,7 @@ const mockData: GeoJSON.FeatureCollection = { const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapGeoJSON', + component: AMapGeoJSON, decorators: [ withAutoFitView, withAMap(), @@ -173,12 +173,11 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ( - -); +type AMapGeoJSONStory = StoryObj; -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '基本使用'; +export const CommonUse: AMapGeoJSONStory = { + name: '基本使用', +}; const getMarker: AMapGeoJSONGetOverlayCallback = (_, lnglat, map, AMap) => { const options = { @@ -212,23 +211,25 @@ const getPolygon: AMapGeoJSONGetOverlayCallback = (_, lnglat, map, AMap) => { return polygon; }; -export const CustomStyle: typeof Template = Template.bind({}); -CustomStyle.storyName = '自定义样式'; -CustomStyle.args = { - options: { - strokeColor: 'red', - strokeWeight: 4, +export const CustomStyle: AMapGeoJSONStory = { + name: '自定义样式', + args: { + options: { + strokeColor: 'red', + strokeWeight: 4, + }, }, }; -export const CustomOverlay: typeof Template = Template.bind({}); -CustomOverlay.storyName = '自定义覆盖物'; -CustomOverlay.args = { - options: { - strokeColor: 'red', - strokeWeight: 4, +export const CustomOverlay: AMapGeoJSONStory = { + name: '自定义覆盖物', + args: { + options: { + strokeColor: 'red', + strokeWeight: 4, + }, + getMarker, + getPolyline, + getPolygon, }, - getMarker, - getPolyline, - getPolygon, }; diff --git a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx index 333ecba..514a157 100644 --- a/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx +++ b/src/components/AMapHawkEye/stories/AMapHawkEye.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Story, Meta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapHawkEye, AMapHawkEyeProps } from '../../../index'; +import { AMapHawkEye } from '../../../index'; import withAMap from '../../../storybook-decorators/withAMap'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; @@ -171,32 +170,36 @@ export default { }, } as Meta; -const Template: Story = (args) => ; +type AMapHawkEyeStory = StoryObj; -export const ChangePosition: typeof Template = Template.bind({}); -ChangePosition.args = { offset: [10, 10] }; -ChangePosition.storyName = '设置偏移量'; +export const ChangePosition: AMapHawkEyeStory = { + name: '设置偏移量', + args: { offset: [10, 10] }, +}; -export const ChangeStyle: typeof Template = Template.bind({}); -ChangeStyle.args = { - height: '200px', - width: '100px', - borderStyle: 'dashed', - borderColor: 'red', - borderRadius: '4px', - borderWidth: '5px', - buttonSize: '10px', +export const ChangeStyle: AMapHawkEyeStory = { + name: '设置样式', + args: { + height: '200px', + width: '100px', + borderStyle: 'dashed', + borderColor: 'red', + borderRadius: '4px', + borderWidth: '5px', + buttonSize: '10px', + }, }; -ChangeStyle.storyName = '设置样式'; -export const ChangeTheme: typeof Template = Template.bind({}); -ChangeTheme.args = { - mapStyle: 'amap://styles/dark', +export const ChangeTheme: AMapHawkEyeStory = { + name: '设置主题', + args: { + mapStyle: 'amap://styles/dark', + }, }; -ChangeTheme.storyName = '设置主题'; -export const NotAutoMove: typeof Template = Template.bind({}); -ChangeTheme.args = { - autoMove: false, +export const NotAutoMove: AMapHawkEyeStory = { + name: '不随主视图变化', + args: { + autoMove: false, + }, }; -NotAutoMove.storyName = '不随主视图变化'; diff --git a/src/components/AMapMap/stories/AMapMap.stories.tsx b/src/components/AMapMap/stories/AMapMap.stories.tsx index 8cae78f..e42a041 100644 --- a/src/components/AMapMap/stories/AMapMap.stories.tsx +++ b/src/components/AMapMap/stories/AMapMap.stories.tsx @@ -1,7 +1,6 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; -import { AMapMap, AMapMapProps } from '../../../index'; +import { AMapMap } from '../../../index'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; import withAPIContainer from '../../../storybook-decorators/withAPIContainer'; @@ -111,42 +110,48 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ; +type AMapMapStory = StoryObj; -export const SetCenter: typeof Template = Template.bind({}); -SetCenter.args = { - center: [114.021769, 22.530421], +export const SetCenter: AMapMapStory = { + name: '设置中心点', + args: { + center: [114.021769, 22.530421], + }, }; -SetCenter.storyName = '设置中心点'; -export const SetCityName: typeof Template = Template.bind({}); -SetCityName.args = { - cityName: '深圳', +export const SetCityName: AMapMapStory = { + name: '设置城市名称', + args: { + cityName: '深圳', + }, }; -SetCityName.storyName = '设置城市名称'; -export const SetZoom: typeof Template = Template.bind({}); -SetZoom.args = { - zoom: 12, +export const SetZoom: AMapMapStory = { + name: '设置缩放比例', + args: { + zoom: 12, + }, }; -SetZoom.storyName = '设置缩放比例'; -export const SetFeatures: typeof Template = Template.bind({}); -SetFeatures.args = { - features: ['bg', 'point'], +export const SetFeatures: AMapMapStory = { + name: '设置地图上显示的元素种类', + args: { + features: ['bg', 'point'], + }, }; -SetFeatures.storyName = '设置地图上显示的元素种类'; -export const SetsMapStyle: typeof Template = Template.bind({}); -SetsMapStyle.args = { - mapStyle: 'amap://styles/grey', +export const SetsMapStyle: AMapMapStory = { + name: '自定义地图样式', + args: { + mapStyle: 'amap://styles/grey', + }, }; -SetsMapStyle.storyName = '自定义地图样式'; -export const ViewModeIs3D: typeof Template = Template.bind({}); -ViewModeIs3D.storyName = '3D 模式'; -ViewModeIs3D.args = { - viewMode: '3D', - pitch: 75, - zoom: 18, +export const ViewModeIs3D: AMapMapStory = { + name: '3D 模式', + args: { + viewMode: '3D', + pitch: 75, + zoom: 18, + }, }; diff --git a/src/components/AMapMapType/stories/AMapMapType.stories.tsx b/src/components/AMapMapType/stories/AMapMapType.stories.tsx index c52824c..b448d24 100644 --- a/src/components/AMapMapType/stories/AMapMapType.stories.tsx +++ b/src/components/AMapMapType/stories/AMapMapType.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Story, Meta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapMapType, AMapMapTypeProps } from '../../../index'; +import { AMapMapType } from '../../../index'; import withAMap from '../../../storybook-decorators/withAMap'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; @@ -88,20 +87,23 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ; +type AMapMapTypeStory = StoryObj; -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '一般使用'; -CommonUse.args = {}; +export const CommonUse: AMapMapTypeStory = { + name: '一般使用', +}; -export const DefaultType: typeof Template = Template.bind({}); -DefaultType.storyName = '默认卫星图'; -DefaultType.args = { defaultType: 1 }; +export const DefaultType: AMapMapTypeStory = { + name: '默认底图', + args: { defaultType: 1 }, +}; -export const DefaultShowTraffic: typeof Template = Template.bind({}); -DefaultShowTraffic.storyName = '默认开启路况'; -DefaultShowTraffic.args = { showTraffic: true }; +export const DefaultShowTraffic: AMapMapTypeStory = { + name: '默认开启路况', + args: { showTraffic: true }, +}; -export const DefaultShowRoad: typeof Template = Template.bind({}); -DefaultShowRoad.storyName = '默认叠加路网图层'; -DefaultShowRoad.args = { showRoad: true }; +export const DefaultShowRoad: AMapMapTypeStory = { + name: '默认开启路网', + args: { showRoad: true }, +}; diff --git a/src/components/AMapMarker/stories/AMapMarker.stories.tsx b/src/components/AMapMarker/stories/AMapMarker.stories.tsx index bb9ef23..11d06a4 100644 --- a/src/components/AMapMarker/stories/AMapMarker.stories.tsx +++ b/src/components/AMapMarker/stories/AMapMarker.stories.tsx @@ -1,12 +1,11 @@ import React from 'react'; import { renderToString } from 'react-dom/server'; -import type { Story, Meta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import { AMapToolBar, AMapMarker, - AMapMarkerProps, } from '../../../index'; import withAutoFitView from '../../../storybook-decorators/withAutoFitView'; @@ -251,7 +250,7 @@ const meta: Meta = { type: { required: false, name: 'number' }, table: { type: { summary: 'number' }, - defaultValue: { summary: 10 }, + defaultValue: { summary: 12 }, }, control: { type: 'number', @@ -445,120 +444,142 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ; +type AMapMarkerStory = StoryObj; -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '一般使用'; -CommonUse.args = {}; - -export const CustomIcon: typeof Template = Template.bind({}); -CustomIcon.storyName = '自定义标记图标'; -CustomIcon.args = { - icon: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png', - size: [38, 60], +export const CommonUse: AMapMarkerStory = { + name: '一般使用', }; -export const CustomContent: typeof Template = Template.bind({}); -CustomContent.storyName = '自定义标记内容'; -CustomContent.args = { - content: renderToString( - 点, - ), - icon: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png', - size: [38, 60], +export const CustomIcon: AMapMarkerStory = { + name: '自定义标记图标', + args: { + icon: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png', + size: [38, 60], + }, }; -export const CustomLabel: typeof Template = Template.bind({}); -CustomLabel.storyName = '自定义标签内容'; -CustomLabel.args = { - label: { +export const CustomContent: AMapMarkerStory = { + name: '自定义标记内容', + args: { content: renderToString( - 标签内容, + 点, ), - offset: [0, 10], - direction: 'bottom', + icon: '//webapi.amap.com/theme/v1.3/markers/b/mark_r.png', + size: [38, 60], }, }; -export const CustomZooms: Story = (args) => ( - <> - - - -); -CustomZooms.storyName = '自定义可显示层级'; -CustomZooms.args = { - zooms: [10, 14], +export const CustomLabel: AMapMarkerStory = { + name: '自定义标签内容', + args: { + label: { + content: renderToString( + 标签内容, + ), + offset: [0, 10], + direction: 'bottom', + }, + }, }; -export const Draggable: typeof Template = Template.bind({}); -Draggable.storyName = '可拖拽'; -Draggable.args = { - draggable: true, - onDragstart: eventHandler.onDragstart, - onDragging: eventHandler.onDragging, - onDragend: eventHandler.onDragend, +export const CustomZooms: AMapMarkerStory = { + name: '自定义可显示层级', + args: { + zooms: [14, 18], + }, + render: (args) => ( + <> + + + + ), }; -export const CustomAnchor: typeof Template = Template.bind({}); -CustomAnchor.storyName = '自定义点标记锚点'; -CustomAnchor.args = { - anchor: 'bottom-center', +export const Draggable: AMapMarkerStory = { + name: '可拖拽', + args: { + draggable: true, + onDragstart: eventHandler.onDragstart, + onDragging: eventHandler.onDragging, + onDragend: eventHandler.onDragend, + }, }; -export const CustomOffset: typeof Template = Template.bind({}); +export const CustomAnchor: AMapMarkerStory = { + name: '自定义点标记锚点', + args: { + anchor: 'bottom-center', + }, +}; + +export const CustomOffset: AMapMarkerStory = { + name: '自定义偏移量', + args: { + offset: [300, 300], + }, +}; CustomOffset.storyName = '自定义偏移量'; CustomOffset.args = { offset: [300, 300], }; -export const CustomAngle: typeof Template = Template.bind({}); +export const CustomAngle: AMapMarkerStory = { + name: '自定义旋转角度', + args: { + angle: 45, + }, +}; CustomAngle.storyName = '自定义旋转角度'; CustomAngle.args = { angle: 45, }; -export const SameZIndex: Story = ({ - // eslint-disable-next-line react/prop-types - zIndex, - ...args -}) => ( - <> - - - -); -SameZIndex.storyName = '自定义 Marker 层级'; -SameZIndex.args = { - zIndex: 13, +export const SameZIndex: AMapMarkerStory = { + name: '自定义 Marker 层级', + args: { + zIndex: 13, + }, + render: (args) => ( + <> + + + + ), }; -export const ClickEvent: typeof Template = Template.bind({}); -ClickEvent.storyName = '点击事件（左单/左双/右单）'; -ClickEvent.args = { - onClick: eventHandler.onClick, - onDBLClick: eventHandler.onDBLClick, - onRightClick: eventHandler.onRightClick, +export const ClickEvent: AMapMarkerStory = { + name: '点击事件（左单/左双/右单）', + args: { + onClick: eventHandler.onClick, + onDBLClick: eventHandler.onDBLClick, + onRightClick: eventHandler.onRightClick, + }, }; -export const MouseEvent: typeof Template = Template.bind({}); -MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）'; -MouseEvent.args = { - onMousedown: eventHandler.onMousedown, - onMouseup: eventHandler.onMouseup, - onMouseover: eventHandler.onMouseover, - onMouseout: eventHandler.onMouseout, +export const MouseEvent: AMapMarkerStory = { + name: '鼠标事件（按下/抬起/经过/移出）', + args: { + onMousedown: eventHandler.onMousedown, + onMouseup: eventHandler.onMouseup, + onMouseover: eventHandler.onMouseover, + onMouseout: eventHandler.onMouseout, + }, }; -export const TouchEvent: typeof Template = Template.bind({}); -TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）'; -TouchEvent.args = { - onTouchstart: eventHandler.onTouchstart, - onTouchmove: eventHandler.onTouchmove, - onTouchend: eventHandler.onTouchend, +export const TouchEvent: AMapMarkerStory = { + name: '触摸事件（触摸开始/触摸移动/触摸结束）', + args: { + onTouchstart: eventHandler.onTouchstart, + onTouchmove: eventHandler.onTouchmove, + onTouchend: eventHandler.onTouchend, + }, }; diff --git a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx index 9397eb5..1245a17 100644 --- a/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx +++ b/src/components/AMapMouseTool/stories/AMapMouseTool.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapMouseTool, AMapMouseToolProps } from '../../../index'; +import { AMapMouseTool } from '../../../index'; import withAMap from '../../../storybook-decorators/withAMap'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; @@ -12,6 +11,7 @@ const eventHandler = actions('onCompleted'); const meta: Meta = { title: '组件(Components)/工具(Tools)/AMapMouseTool', + component: AMapMouseTool, decorators: [ withAMap(), withAMapContainer, @@ -94,17 +94,16 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ( - -); +type AMapMouseToolStory = StoryObj; -export const CommonUse = Template.bind({}); -CommonUse.storyName = '基本使用'; -CommonUse.args = { - type: 'polygon', - options: { - strokeColor: 'red', - strokeWeight: 4, +export const CommonUse: AMapMouseToolStory = { + name: '基本使用', + args: { + type: 'polygon', + options: { + strokeColor: 'red', + strokeWeight: 4, + }, + onCompleted: eventHandler.onCompleted, }, - onCompleted: eventHandler.onCompleted, }; diff --git a/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx b/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx index 1d337c6..f24b65a 100644 --- a/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx +++ b/src/components/AMapOverlayGroup/stories/AMapOverlayGroup.stories.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import { AMapOverlayGroup, - AMapOverlayGroupProps, AMapGeoJSON, AMapCircle, AMapEllipse, @@ -33,6 +32,36 @@ const eventHandler = actions( const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapOverlayGroup', + component: AMapOverlayGroup, + render: (args) => ( + + + + + + + ), decorators: [ withAutoFitView, withAMap(), @@ -177,90 +206,67 @@ const meta: Meta = { export default meta; -type AMapOverlayGroupStory = Story; -const Template: AMapOverlayGroupStory = (args) => ( - - - - - - -); +type AMapOverlayGroupStory = StoryObj; -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '基本使用'; -CommonUse.args = {}; +export const CommonUse: AMapOverlayGroupStory = { + name: '基本使用', +}; -export const CustomStyle: typeof Template = Template.bind({}); -CustomStyle.storyName = '自定义样式'; -CustomStyle.args = { - options: { - fillColor: 'yellow', - fillOpacity: 0.5, - strokeColor: 'red', - strokeStyle: 'dashed', - strokeOpacity: 0.1, - strokeWeight: 20, - strokeDasharray: [10, 40], +export const CustomStyle: AMapOverlayGroupStory = { + name: '自定义样式', + args: { + options: { + fillColor: 'yellow', + fillOpacity: 0.5, + strokeColor: 'red', + strokeStyle: 'dashed', + strokeOpacity: 0.1, + strokeWeight: 20, + strokeDasharray: [10, 40], + }, }, }; -export const NestedUse: typeof Template = (args) => ( - - - +export const NestedUse: AMapOverlayGroupStory = { + name: '嵌套使用', + args: { + options: CustomStyle.args!.options, + }, + render: (args) => ( + + + + + + - - - -); -NestedUse.storyName = '嵌套使用'; -NestedUse.args = { - options: CustomStyle.args.options, + ), }; -export const ClickEvent: typeof Template = Template.bind({}); -ClickEvent.storyName = '点击事件（左单/左双/右单）'; -ClickEvent.args = { - onClick: eventHandler.onClick, - onDBLClick: eventHandler.onDBLClick, - onRightClick: eventHandler.onRightClick, +export const ClickEvent: AMapOverlayGroupStory = { + name: '点击事件（左单/左双/右单）', + args: { + onClick: eventHandler.onClick, + onDBLClick: eventHandler.onDBLClick, + onRightClick: eventHandler.onRightClick, + }, }; -export const MouseEvent: typeof Template = Template.bind({}); -MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）'; -MouseEvent.args = { - onMousedown: eventHandler.onMousedown, - onMouseup: eventHandler.onMouseup, - onMouseover: eventHandler.onMouseover, - onMouseout: eventHandler.onMouseout, +export const MouseEvent: AMapOverlayGroupStory = { + name: '鼠标事件（按下/抬起/经过/移出）', + args: { + onMousedown: eventHandler.onMousedown, + onMouseup: eventHandler.onMouseup, + onMouseover: eventHandler.onMouseover, + onMouseout: eventHandler.onMouseout, + }, }; -export const TouchEvent: typeof Template = Template.bind({}); -TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）'; -TouchEvent.args = { - onTouchstart: eventHandler.onTouchstart, - onTouchmove: eventHandler.onTouchmove, - onTouchend: eventHandler.onTouchend, +export const TouchEvent: AMapOverlayGroupStory = { + name: '触摸事件（触摸开始/触摸移动/触摸结束）', + args: { + onTouchstart: eventHandler.onTouchstart, + onTouchmove: eventHandler.onTouchmove, + onTouchend: eventHandler.onTouchend, + }, }; diff --git a/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx b/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx index 2cef4d7..6717450 100644 --- a/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx +++ b/src/components/AMapPolygon/stories/AMapPolygon.stories.tsx @@ -1,12 +1,11 @@ import React, { createRef, } from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import { AMapPolygon, - AMapPolygonProps, AMapPolygonEditor, AMapPolygonEditorProps, } from '../../../index'; @@ -38,6 +37,7 @@ const presetColors = ['#ff0000', '#00ff00', '#0000ff']; const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapPolygon', + component: AMapPolygon, decorators: [ withAutoFitView, withAMap({ viewMode: '3D', pitch: 30 }), @@ -398,60 +398,60 @@ const meta: Meta = { export default meta; -type AMapPolygonStory = Story; +type AMapPolygonStory = StoryObj; -const Template: AMapPolygonStory = (args) => ; - -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '一般多边形'; -CommonUse.args = {}; - -export const PolygonWithHole: typeof Template = Template.bind({}); -PolygonWithHole.storyName = '带洞多边形'; -PolygonWithHole.args = { - path: [ - [ - [116.384595, 39.901321], - [116.383526, 39.899865], - [116.386284, 39.900917], - // [116.384595, 39.901321], - ], - [ - [116.384594, 39.901], - [116.384, 39.9003], - [116.3861, 39.900917], - // [116.384594, 39.901], - ], - ], +export const CommonUse: AMapPolygonStory = { + name: '一般多边形（Polygon）', }; -export const MultiPolygon: typeof Template = Template.bind({}); -MultiPolygon.storyName = '复合多边形（MultiPolygon）'; -MultiPolygon.args = { - path: [ - [ +export const PolygonWithHole: AMapPolygonStory = { + name: '带洞多边形（PolygonWithHole）', + args: { + path: [ [ - [116.388624, 39.900055], - [116.390452, 39.898583], - [116.391294, 39.900003], - // [116.388624, 39.900055], + [116.384595, 39.901321], + [116.383526, 39.899865], + [116.386284, 39.900917], + // [116.384595, 39.901321], ], [ - [116.389113, 39.899924], - [116.390251, 39.898962], - [116.391055, 39.899899], - // [116.389113, 39.899924], + [116.384594, 39.901], + [116.384, 39.9003], + [116.3861, 39.900917], + // [116.384594, 39.901], ], ], - [ + }, +}; + +export const MultiPolygon: AMapPolygonStory = { + name: '复合多边形（MultiPolygon）', + args: { + path: [ + [ + [ + [116.388624, 39.900055], + [116.390452, 39.898583], + [116.391294, 39.900003], + // [116.388624, 39.900055], + ], + [ + [116.389113, 39.899924], + [116.390251, 39.898962], + [116.391055, 39.899899], + // [116.389113, 39.899924], + ], + ], [ - [116.387884, 39.899645], - [116.38796, 39.898347], - [116.390175, 39.898394], - // [116.387884, 39.899645], + [ + [116.387884, 39.899645], + [116.38796, 39.898347], + [116.390175, 39.898394], + // [116.387884, 39.899645], + ], ], ], - ], + }, }; const { onChange } = actions('onChange'); @@ -460,78 +460,71 @@ const computeTarget: AMapPolygonEditorProps['computeTarget'] = (polygons) => pol (polygon) => polygon === $polygon.current, ); -export const Editable: AMapPolygonStory = (args) => ( - <> - - - -); -Editable.storyName = '支持编辑'; -Editable.args = { - path: [ - [ - [ - [116.388624, 39.900055], - [116.390452, 39.898583], - [116.391294, 39.900003], - // [116.388624, 39.900055], - ], - [ - [116.389113, 39.899924], - [116.390251, 39.898962], - [116.391055, 39.899899], - // [116.389113, 39.899924], - ], - ], - [ - [ - [116.387884, 39.899645], - [116.38796, 39.898347], - [116.390175, 39.898394], - // [116.387884, 39.899645], - ], - ], - ], +export const Editable: AMapPolygonStory = { + name: '支持编辑', + args: { + path: MultiPolygon.args!.path, + }, + render: (args) => ( + <> + + + + ), }; -export const Draggable: typeof Template = Template.bind({}); -Draggable.storyName = '可拖拽'; -Draggable.args = { - draggable: true, - onDragstart: eventHandler.onDragstart, - onDragging: eventHandler.onDragging, - onDragend: eventHandler.onDragend, +export const Draggable: AMapPolygonStory = { + name: '可拖拽', + args: { + path: MultiPolygon.args!.path, + draggable: true, + onDragstart: eventHandler.onDragstart, + onDragging: eventHandler.onDragging, + onDragend: eventHandler.onDragend, + }, }; -export const CustomStyle: typeof Template = Template.bind({}); -CustomStyle.storyName = '自定义样式'; -CustomStyle.args = { - fillColor: 'yellow', - fillOpacity: 0.5, - strokeColor: 'red', - strokeStyle: 'dashed', - strokeOpacity: 0.1, - strokeWeight: 20, - strokeDasharray: [10, 40], +export const CustomStyle: AMapPolygonStory = { + name: '自定义样式', + args: { + fillColor: 'yellow', + fillOpacity: 0.5, + strokeColor: 'red', + strokeStyle: 'dashed', + strokeOpacity: 0.1, + strokeWeight: 20, + strokeDasharray: [10, 40], + }, }; -export const In3DMode: typeof Template = Template.bind({}); -In3DMode.storyName = '3D 模式'; -In3DMode.args = { - extrusionHeight: 300, - roofColor: 'red', - wallColor: 'yellow', +export const In3DMode: AMapPolygonStory = { + name: '3D 模式', + args: { + path: MultiPolygon.args!.path, + extrusionHeight: 300, + roofColor: 'red', + wallColor: 'yellow', + }, }; -export const ClickEvent: typeof Template = Template.bind({}); -ClickEvent.storyName = '点击事件（左单/左双/右单）'; -ClickEvent.args = { - onClick: eventHandler.onClick, - onDBLClick: eventHandler.onDBLClick, - onRightClick: eventHandler.onRightClick, +export const ClickEvent: AMapPolygonStory = { + name: '点击事件（左单/左双/右单）', + args: { + onClick: eventHandler.onClick, + onDBLClick: eventHandler.onDBLClick, + onRightClick: eventHandler.onRightClick, + }, }; -export const MouseEvent: typeof Template = Template.bind({}); +export const MouseEvent: AMapPolygonStory = { + name: '鼠标事件（按下/抬起/经过/移出）', + args: { + onMousedown: eventHandler.onMousedown, + onMouseup: eventHandler.onMouseup, + onMouseover: eventHandler.onMouseover, + onMouseout: eventHandler.onMouseout, + }, +}; MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）'; MouseEvent.args = { onMousedown: eventHandler.onMousedown, @@ -540,10 +533,11 @@ MouseEvent.args = { onMouseout: eventHandler.onMouseout, }; -export const TouchEvent: typeof Template = Template.bind({}); -TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）'; -TouchEvent.args = { - onTouchstart: eventHandler.onTouchstart, - onTouchmove: eventHandler.onTouchmove, - onTouchend: eventHandler.onTouchend, +export const TouchEvent: AMapPolygonStory = { + name: '触摸事件（触摸开始/触摸移动/触摸结束）', + args: { + onTouchstart: eventHandler.onTouchstart, + onTouchmove: eventHandler.onTouchmove, + onTouchend: eventHandler.onTouchend, + }, }; diff --git a/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx b/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx index 4e1b350..7898c3d 100644 --- a/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx +++ b/src/components/AMapPolygonEditor/stories/AMapPolygonEditor.stories.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import { AMapGeoJSON, + AMapPolygon, AMapPolygonEditor, AMapPolygonEditorProps, + coordsOfGeoJSON2AMapPolygonPath, } from '../../../index'; import withAutoFitView from '../../../storybook-decorators/withAutoFitView'; @@ -97,6 +99,21 @@ const mockData: GeoJSON.FeatureCollection = { const meta: Meta = { title: '组件(Components)/工具(Tools)/AMapPolygonEditor', + component: AMapPolygonEditor, + render: (args) => ( + <> + + + + + + ), decorators: [ withAutoFitView, withAMap(), @@ -149,27 +166,31 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ( - <> - - - -); +type AMapPolygonEditorStory = StoryObj; -export const WithGeoJSON: typeof Template = Template.bind({}); -WithGeoJSON.storyName = '与AMapGeoJSON一同使用'; -WithGeoJSON.args = { - computeTarget: (polygons) => polygons[1], +export const WithGeoJSON: AMapPolygonEditorStory = { + name: '与AMapGeoJSON一同使用', + args: { + computeTarget: (polygons) => polygons[1], + }, + render: (args) => ( + <> + + + + ), }; -export const SetAdsorbPolygons: typeof Template = Template.bind({}); -SetAdsorbPolygons.storyName = '自定义磁吸围栏'; -SetAdsorbPolygons.args = { - computeAdsorbPolygons: (polygons) => polygons.filter((_, index) => index === 1), +export const SetAdsorbPolygons: AMapPolygonEditorStory = { + name: '自定义磁吸围栏', + args: { + computeAdsorbPolygons: (polygons) => polygons.filter((_, index) => index === 1), + }, }; -export const DisablePolygonEditor: typeof Template = Template.bind({}); -DisablePolygonEditor.storyName = '禁用编辑器'; -DisablePolygonEditor.args = { - disabled: true, +export const DisablePolygonEditor: AMapPolygonEditorStory = { + name: '禁用编辑器', + args: { + disabled: true, + }, }; diff --git a/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx b/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx index dc4f05a..52644f6 100644 --- a/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx +++ b/src/components/AMapPolyline/stories/AMapPolyline.stories.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import { AMapPolyline, - AMapPolylineProps, AMapPolylineEditor, AMapPolylineEditorProps, } from '../../../index'; @@ -36,6 +35,7 @@ const presetColors = ['#ff0000', '#00ff00', '#0000ff']; const meta: Meta = { title: '组件(Components)/覆盖物(Overlay)/AMapPolyline', + component: AMapPolyline, decorators: [ withAutoFitView, withAMap(), @@ -406,13 +406,11 @@ const meta: Meta = { export default meta; -type AMapPolylineStory = Story; +type AMapPolylineStory = StoryObj; -const Template: AMapPolylineStory = (args) => ; - -export const CommonUse: typeof Template = Template.bind({}); -CommonUse.storyName = '一般使用'; -CommonUse.args = {}; +export const CommonUse: AMapPolylineStory = { + name: '一般使用', +}; const { onChange } = actions('onChange'); const $polyline = React.createRef(); @@ -420,47 +418,57 @@ const computeTarget: AMapPolylineEditorProps['computeTarget'] = (polygons) => po (polygon) => polygon === $polyline.current, ); -export const Editable: Story = (args) => ( - <> - - - -); -Editable.storyName = '支持编辑'; -Editable.args = {}; +export const Editable: AMapPolylineStory = { + name: '支持编辑', + render: (args) => ( + <> + + + + ), +}; -export const Draggable: typeof Template = Template.bind({}); -Draggable.storyName = '可拖拽'; -Draggable.args = { - draggable: true, - strokeWeight: 40, - cursor: 'move', - onDragstart: eventHandler.onDragstart, - onDragging: eventHandler.onDragging, - onDragend: eventHandler.onDragend, +export const Draggable: AMapPolylineStory = { + name: '可拖拽', + args: { + draggable: true, + strokeWeight: 40, + cursor: 'move', + onDragstart: eventHandler.onDragstart, + onDragging: eventHandler.onDragging, + onDragend: eventHandler.onDragend, + }, }; -export const CustomStyle: typeof Template = Template.bind({}); -CustomStyle.storyName = '自定义样式'; -CustomStyle.args = { - zIndex: 10, - strokeColor: 'red', - strokeStyle: 'dashed', - strokeOpacity: 0.8, - strokeWeight: 20, - strokeDasharray: [1, 4], - borderWeight: 10, - lineJoin: 'bevel', - showDir: true, - dirColor: '#000', - lineCap: 'round', - // dirImg, - isOutline: true, - outlineColor: 'yellow', - geodesic: true, +export const CustomStyle: AMapPolylineStory = { + name: '自定义样式', + args: { + zIndex: 10, + strokeColor: 'red', + strokeStyle: 'dashed', + strokeOpacity: 0.8, + strokeWeight: 20, + strokeDasharray: [1, 4], + borderWeight: 10, + lineJoin: 'bevel', + showDir: true, + dirColor: '#000', + lineCap: 'round', + // dirImg, + isOutline: true, + outlineColor: 'yellow', + geodesic: true, + }, }; -export const ClickEvent: typeof Template = Template.bind({}); +export const ClickEvent: AMapPolylineStory = { + name: '点击事件（左单/左双/右单）', + args: { + onClick: eventHandler.onClick, + onDBLClick: eventHandler.onDBLClick, + onRightClick: eventHandler.onRightClick, + }, +}; ClickEvent.storyName = '点击事件（左单/左双/右单）'; ClickEvent.args = { onClick: eventHandler.onClick, @@ -468,19 +476,21 @@ ClickEvent.args = { onRightClick: eventHandler.onRightClick, }; -export const MouseEvent: typeof Template = Template.bind({}); -MouseEvent.storyName = '鼠标事件（按下/抬起/经过/移出）'; -MouseEvent.args = { - onMousedown: eventHandler.onMousedown, - onMouseup: eventHandler.onMouseup, - onMouseover: eventHandler.onMouseover, - onMouseout: eventHandler.onMouseout, +export const MouseEvent : AMapPolylineStory = { + name: '鼠标事件（按下/抬起/经过/移出）', + args: { + onMousedown: eventHandler.onMousedown, + onMouseup: eventHandler.onMouseup, + onMouseover: eventHandler.onMouseover, + onMouseout: eventHandler.onMouseout, + }, }; -export const TouchEvent: typeof Template = Template.bind({}); -TouchEvent.storyName = '触摸事件（触摸开始/触摸移动/触摸结束）'; -TouchEvent.args = { - onTouchstart: eventHandler.onTouchstart, - onTouchmove: eventHandler.onTouchmove, - onTouchend: eventHandler.onTouchend, +export const TouchEvent: AMapPolylineStory = { + name: '触摸事件（触摸开始/触摸移动/触摸结束）', + args: { + onTouchstart: eventHandler.onTouchstart, + onTouchmove: eventHandler.onTouchmove, + onTouchend: eventHandler.onTouchend, + }, }; diff --git a/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx b/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx index b82c476..210a279 100644 --- a/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx +++ b/src/components/AMapPolylineEditor/stories/AMapPolylineEditor.stories.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import type { Meta, Story } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; import { + AMapPolyline, AMapGeoJSON, AMapPolylineEditor, AMapPolylineEditorProps, @@ -39,6 +40,13 @@ const mockData: GeoJSON.FeatureCollection = { const meta: Meta = { title: '组件(Components)/工具(Tools)/AMapPolylineEditor', + component: AMapPolylineEditor, + render: (args) => ( + <> + + + + ), decorators: [ withAutoFitView, withAMap(), @@ -80,21 +88,24 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ( - <> - - - -); +type AMapPolylineEditorStory = StoryObj; -export const WithGeoJSON: typeof Template = Template.bind({}); -WithGeoJSON.storyName = '与AMapGeoJSON一同使用'; -WithGeoJSON.args = { - computeTarget: (polylineList) => polylineList[0], +export const WithGeoJSON: AMapPolylineEditorStory = { + name: '与AMapGeoJSON一同使用', + args: { + computeTarget: (polylineList) => polylineList[0], + }, + render: (args) => ( + <> + + + + ), }; -export const DisablePolylineEditor: typeof Template = Template.bind({}); -DisablePolylineEditor.storyName = '禁用编辑器'; -DisablePolylineEditor.args = { - disabled: true, +export const DisablePolylineEditor: AMapPolylineEditorStory = { + name: '禁用编辑器', + args: { + disabled: true, + }, }; diff --git a/src/components/AMapScale/stories/AMapScale.stories.tsx b/src/components/AMapScale/stories/AMapScale.stories.tsx index 799c69d..48fd388 100644 --- a/src/components/AMapScale/stories/AMapScale.stories.tsx +++ b/src/components/AMapScale/stories/AMapScale.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Story, Meta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapScale, AMapScaleProps } from '../../../index'; +import { AMapScale } from '../../../index'; import withAMap from '../../../storybook-decorators/withAMap'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; @@ -96,14 +95,18 @@ const meta: Meta = { export default meta; -type AMapScaleStory = Story; +type AMapScaleStory = StoryObj; -const Template: AMapScaleStory = (args) => ; - -export const ChangeOffset: AMapScaleStory = Template.bind({}); -ChangeOffset.storyName = '设置偏移量'; -ChangeOffset.args = { offset: [100, 100] }; +export const ChangeOffset: AMapScaleStory = { + name: '设置偏移量', + args: { + offset: [100, 100], + }, +}; -export const ChangePosition: AMapScaleStory = Template.bind({}); -ChangePosition.storyName = '指定位置'; -ChangePosition.args = { position: 'LT' }; +export const ChangePosition: AMapScaleStory = { + name: '指定位置', + args: { + position: 'LT', + }, +}; diff --git a/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx b/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx index 461e8e8..2e982f0 100644 --- a/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx +++ b/src/components/AMapToolBar/stories/AMapToolBar.stories.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import type { Story, Meta } from '@storybook/react'; +import type { StoryObj, Meta } from '@storybook/react'; import { actions } from '@storybook/addon-actions'; -import { AMapToolBar, AMapToolBarProps } from '../../../index'; +import { AMapToolBar } from '../../../index'; import withAMap from '../../../storybook-decorators/withAMap'; import withAMapContainer from '../../../storybook-decorators/withAMapContainer'; @@ -96,12 +95,16 @@ const meta: Meta = { export default meta; -const Template: Story = (args) => ; +type AMapToolBarStory = StoryObj; -export const ChangeOffset: typeof Template = Template.bind({}); +export const ChangeOffset: AMapToolBarStory = { + name: '设置偏移量', + args: { offset: [20, 20] }, +}; ChangeOffset.storyName = '设置偏移量'; ChangeOffset.args = { offset: [20, 20] }; -export const ChangePosition: typeof Template = Template.bind({}); -ChangePosition.storyName = '指定位置'; -ChangePosition.args = { position: 'RT' }; +export const ChangePosition: AMapToolBarStory = { + name: '指定位置', + args: { position: 'RT' }, +}; diff --git a/src/storybook-decorators/withAMap.tsx b/src/storybook-decorators/withAMap.tsx index 83b0e47..e4af771 100644 --- a/src/storybook-decorators/withAMap.tsx +++ b/src/storybook-decorators/withAMap.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { AMapMap, AMapMapProps } from '../index'; -const withAMap = (mapProps: AMapMapProps = {}) => (renderStory: Story, context: any) => ( +const withAMap = (mapProps: AMapMapProps = {}) => (renderStory: StoryFn, context: any) => ( // eslint-disable-next-line react/jsx-props-no-spreading {renderStory({}, context)} ); diff --git a/src/storybook-decorators/withAMapContainer.tsx b/src/storybook-decorators/withAMapContainer.tsx index 9360e79..6b74340 100644 --- a/src/storybook-decorators/withAMapContainer.tsx +++ b/src/storybook-decorators/withAMapContainer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { FC } from 'react'; import { useRef } from 'react'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; // eslint-disable-next-line import/no-extraneous-dependencies import { useInView } from 'react-intersection-observer'; @@ -26,7 +26,7 @@ const AMapContainer: FC = ({ children }) => { ); }; -const withAMapContainer = (renderStory: Story, context: any) => ( +const withAMapContainer = (renderStory: StoryFn, context: any) => ( {renderStory({}, context)} diff --git a/src/storybook-decorators/withAPIContainer.tsx b/src/storybook-decorators/withAPIContainer.tsx index dd00aff..1c1a82c 100644 --- a/src/storybook-decorators/withAPIContainer.tsx +++ b/src/storybook-decorators/withAPIContainer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { createAMapAPIContainer } from '../index'; @@ -13,7 +13,7 @@ const APIContainer = createAMapAPIContainer({ }, }); -const withAPIContainer = (renderStory: Story, context: any) => ( +const withAPIContainer = (renderStory: StoryFn, context: any) => ( {renderStory({}, context)} diff --git a/src/storybook-decorators/withAutoFitView.tsx b/src/storybook-decorators/withAutoFitView.tsx index c0f3948..cbe1847 100644 --- a/src/storybook-decorators/withAutoFitView.tsx +++ b/src/storybook-decorators/withAutoFitView.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import type { Story } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import AMapAutoFitView from '../components/AMapAutoFitView'; -const withAutoFitView = (renderStory: Story, context: any) => ( +const withAutoFitView = (renderStory: StoryFn, context: any) => ( <> {renderStory({}, context)}