diff --git a/package.json b/package.json index 8389b96..01fb035 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ } ], "dependencies": { + "@asany/icons": "^0.1.3", "@asany/library-manager": "^0.1.4", "@daybrush/drag": "^0.19.3", "@scena/react-guides": "^0.16.0", diff --git a/src/AsanyContext.tsx b/src/AsanyContext.tsx index d549ffe..6a62169 100644 --- a/src/AsanyContext.tsx +++ b/src/AsanyContext.tsx @@ -1,4 +1,4 @@ -import { debounce } from 'lodash'; +import { debounce } from 'lodash-es'; import React, { useCallback, useEffect, diff --git a/src/components/InfiniteViewer.tsx b/src/components/InfiniteViewer.tsx index cc3bebb..cb81328 100644 --- a/src/components/InfiniteViewer.tsx +++ b/src/components/InfiniteViewer.tsx @@ -6,7 +6,7 @@ import React, { CSSProperties, } from 'react'; import classnames from 'classnames'; -import { throttle } from 'lodash'; +import { throttle } from 'lodash-es'; import { drag, OnDrag, OnDragStart } from '@daybrush/drag'; import { calculateScaling } from '../reducers/ui.reducer/scena.reducer'; import { useDragDropManager, useDrop } from 'react-dnd'; diff --git a/src/components/aside/Aside.tsx b/src/components/aside/Aside.tsx index b61acc9..231c219 100644 --- a/src/components/aside/Aside.tsx +++ b/src/components/aside/Aside.tsx @@ -1,5 +1,5 @@ // import { Cascader } from 'antd'; -import { assign, isEqual } from 'lodash'; +import { assign, isEqual } from 'lodash-es'; import React, { useCallback, useEffect, useRef, useState } from 'react'; // import { visibleFilter } from '../../../library-manager/ConfigurationPanel'; diff --git a/src/components/aside/PropertiesPanel.tsx b/src/components/aside/PropertiesPanel.tsx index 2ad49cb..999b8b2 100644 --- a/src/components/aside/PropertiesPanel.tsx +++ b/src/components/aside/PropertiesPanel.tsx @@ -1,4 +1,5 @@ // import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'; +import Icon from '@asany/icons'; import { Tabs } from 'antd'; import classnames from 'classnames'; import React, { @@ -10,7 +11,6 @@ import React, { useRef, useState, } from 'react'; -import Icon from '../../icon'; import { sleep, useDeepCompareEffect } from '../../utils'; diff --git a/src/components/aside/components/AlignPanel.tsx b/src/components/aside/components/AlignPanel.tsx index 2e1168d..12a8186 100644 --- a/src/components/aside/components/AlignPanel.tsx +++ b/src/components/aside/components/AlignPanel.tsx @@ -1,7 +1,8 @@ +import Icon from '@asany/icons'; import React from 'react'; -import IconButton from './IconButton'; import styled from 'styled-components'; -import Icon from '../../../icon'; + +import IconButton from './IconButton'; const aligns = [ { icon: 'AlignLeft', title: '左对齐' }, diff --git a/src/components/aside/components/IconButton.tsx b/src/components/aside/components/IconButton.tsx index b91da91..91582df 100644 --- a/src/components/aside/components/IconButton.tsx +++ b/src/components/aside/components/IconButton.tsx @@ -1,9 +1,8 @@ +import Icon from '@asany/icons'; import { Tooltip } from 'antd'; import classnames from 'classnames'; import React, { forwardRef, MutableRefObject, useRef } from 'react'; -import Icon from '../../../icon'; - interface IconButtonProps { tooltip?: string; className?: string; diff --git a/src/components/aside/components/ListTree.tsx b/src/components/aside/components/ListTree.tsx index c1e0364..eafa80c 100644 --- a/src/components/aside/components/ListTree.tsx +++ b/src/components/aside/components/ListTree.tsx @@ -1,9 +1,8 @@ +import Icon from '@asany/icons'; import classnames from 'classnames'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import React, { useCallback, useEffect, useState } from 'react'; -import Icon from '../../../icon'; - export interface ListTreeNode { id: string; name?: string; diff --git a/src/components/aside/components/OptionButton.tsx b/src/components/aside/components/OptionButton.tsx index 968a0ef..9c0d8c6 100644 --- a/src/components/aside/components/OptionButton.tsx +++ b/src/components/aside/components/OptionButton.tsx @@ -1,8 +1,8 @@ +import Icon from '@asany/icons'; import { Tooltip } from 'antd'; import classnames from 'classnames'; import React, { CSSProperties, useEffect, useRef, useState } from 'react'; -import Icon from '../../../icon'; export interface OptionButtonProps { onChange?: (value: boolean) => void; value?: boolean; diff --git a/src/components/aside/components/RadiusAllSetting.tsx b/src/components/aside/components/RadiusAllSetting.tsx index 0f18ce2..8bb0328 100644 --- a/src/components/aside/components/RadiusAllSetting.tsx +++ b/src/components/aside/components/RadiusAllSetting.tsx @@ -1,15 +1,16 @@ +import Icon from '@asany/icons'; +import { Input } from 'antd'; +import { isEqual } from 'lodash-es'; import React, { - useState, - memo, ChangeEvent, - useEffect, + memo, useCallback, + useEffect, + useState, } from 'react'; -import { Input } from 'antd'; -import Icon from '../../../icon'; -import { isEqual } from 'lodash'; -import { onlyNumber } from './utils'; + import { RadiusAllSettingProps } from './typings'; +import { onlyNumber } from './utils'; const icons = [ 'TopLeftCornerRadius', diff --git a/src/components/aside/components/data-entry/ScrubbableControl.tsx b/src/components/aside/components/data-entry/ScrubbableControl.tsx index 05464ce..ec41e21 100644 --- a/src/components/aside/components/data-entry/ScrubbableControl.tsx +++ b/src/components/aside/components/data-entry/ScrubbableControl.tsx @@ -1,6 +1,6 @@ import { Input, InputNumber, Tooltip } from 'antd'; import classnames from 'classnames'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import React, { ChangeEvent, CSSProperties, @@ -10,7 +10,7 @@ import React, { useState, } from 'react'; -import Icon from '../../../../icon'; +import Icon from '@asany/icons'; import { useDeepCompareEffect } from '../../../../utils'; import { InputFormat, InputText } from '../typings'; diff --git a/src/components/aside/components/data-entry/SegmentedControl.tsx b/src/components/aside/components/data-entry/SegmentedControl.tsx index 2736538..aaeb81b 100644 --- a/src/components/aside/components/data-entry/SegmentedControl.tsx +++ b/src/components/aside/components/data-entry/SegmentedControl.tsx @@ -1,7 +1,8 @@ -import React, { CSSProperties, useEffect, useState } from 'react'; -import classnames from 'classnames'; -import Icon from '../../../../icon'; +import Icon from '@asany/icons'; import { Tooltip } from 'antd'; +import classnames from 'classnames'; +import React, { CSSProperties, useEffect, useState } from 'react'; + export interface SegmentedControlOption { label: string; value: string; diff --git a/src/components/aside/components/data-entry/Select.tsx b/src/components/aside/components/data-entry/Select.tsx index 016d4ac..17ebd54 100644 --- a/src/components/aside/components/data-entry/Select.tsx +++ b/src/components/aside/components/data-entry/Select.tsx @@ -1,3 +1,5 @@ +import Icon from '@asany/icons'; +import { registerComponent } from '@asany/library-manager'; import { Popover } from 'antd'; import classnames from 'classnames'; import React, { @@ -10,9 +12,6 @@ import React, { } from 'react'; import { useClickAway } from 'react-use'; -import Icon from '../../../../icon'; -import { registerComponent } from '@asany/library-manager'; - export interface SelectOption { label: string | React.ReactElement; value: string; diff --git a/src/components/scena/Toolbar.tsx b/src/components/scena/Toolbar.tsx index 8b5619e..fc4f483 100644 --- a/src/components/scena/Toolbar.tsx +++ b/src/components/scena/Toolbar.tsx @@ -1,7 +1,8 @@ -import { isEqual } from 'lodash'; -import React from 'react'; +import Icon from '@asany/icons'; import classnames from 'classnames'; -import Icon from '../../icon'; +import { isEqual } from 'lodash-es'; +import React from 'react'; + import { useSelector } from '../../hooks'; import useTools from '../../hooks/useTools'; diff --git a/src/components/scena/viewport/ScreenViewport.tsx b/src/components/scena/viewport/ScreenViewport.tsx index d37778d..d2f91b2 100644 --- a/src/components/scena/viewport/ScreenViewport.tsx +++ b/src/components/scena/viewport/ScreenViewport.tsx @@ -1,7 +1,7 @@ import { CheckOutlined, DownOutlined } from '@ant-design/icons'; import { InputNumber, Popover } from 'antd'; import classnames from 'classnames'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import React, { useCallback, useState } from 'react'; import devices from '../../../assets/devices'; diff --git a/src/components/sidebar/Toolbar.tsx b/src/components/sidebar/Toolbar.tsx index cf53645..796219f 100644 --- a/src/components/sidebar/Toolbar.tsx +++ b/src/components/sidebar/Toolbar.tsx @@ -1,8 +1,8 @@ +import Icon from '@asany/icons'; import classnames from 'classnames'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import React from 'react'; -import Icon from '../../icon'; import { useSelector } from '../../hooks'; import useTools from '../../hooks/useTools'; import { AsanyTool } from '../../typings'; diff --git a/src/components/sidebar/Toolboard.tsx b/src/components/sidebar/Toolboard.tsx index a978300..b9b3e01 100644 --- a/src/components/sidebar/Toolboard.tsx +++ b/src/components/sidebar/Toolboard.tsx @@ -1,3 +1,4 @@ +import Icon from '@asany/icons'; import classnames from 'classnames'; import React, { ComponentType, @@ -10,12 +11,11 @@ import React, { useState, } from 'react'; -import Icon from '../../icon'; -import Resizer from '../resizer'; -import { sleep } from '../../utils'; import { useDispatch, useSelector } from '../../hooks'; -import { IAsanyEditor, IToolboard } from '../../typings'; import { ActionType, UISidebarActionType } from '../../reducers/actions'; +import { IAsanyEditor, IToolboard } from '../../typings'; +import { sleep } from '../../utils'; +import Resizer from '../resizer'; interface Panel { title: string; diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx index 207e47d..93f7341 100644 --- a/src/components/toolbar/Toolbar.tsx +++ b/src/components/toolbar/Toolbar.tsx @@ -1,8 +1,8 @@ import classnames from 'classnames'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import React, { useCallback } from 'react'; import { AsanyTool } from '../..'; -import Icon from '../../icon'; +import Icon from '@asany/icons'; import { useSelector } from '../../hooks'; import useTools from '../../hooks/useTools'; diff --git a/src/hooks/useBlock.tsx b/src/hooks/useBlock.tsx index 26ac671..8e034e6 100644 --- a/src/hooks/useBlock.tsx +++ b/src/hooks/useBlock.tsx @@ -1,7 +1,7 @@ // import { ApolloClient, useApolloClient } from '@apollo/client'; import classnames from 'classnames'; import { EventEmitter } from 'events'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import React, { DependencyList, MouseEventHandler, diff --git a/src/hooks/useTools.tsx b/src/hooks/useTools.tsx index 9c9e18a..e360995 100644 --- a/src/hooks/useTools.tsx +++ b/src/hooks/useTools.tsx @@ -1,4 +1,4 @@ -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; import { useEffect, useReducer, useRef } from 'react'; import { AsanyTool, IAsanyEditor, ToolClick } from '../typings'; import useEditor from './useEditor'; diff --git a/src/icon/index.tsx b/src/icon/index.tsx deleted file mode 100644 index ac21a6c..0000000 --- a/src/icon/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { ComponentType } from 'react'; -import { upperFirst } from 'lodash'; - -export enum IconThemeType { - Line = 'Line', - Solid = 'Solid', -} -interface SortType { - id: string; - name: string; -} - -const allIcons: { - [key: string]: any; -} = {}; - -export interface IconProps { - name: string; - theme?: IconThemeType; - onClick?: (e: React.MouseEvent) => void; - className?: string; - style?: object; - type?: string; -} - -function Icon(props: IconProps) { - let { name, theme = 'Line', onClick, className, style, type } = props; - if (type) { - name = type; - } - if (!name) { - return null; - } - let fullname = upperFirst(name); - if (!fullname.endsWith(theme) || allIcons[fullname + theme]) { - fullname += theme; - } - const icon = allIcons[name] || allIcons[fullname]; - if (!icon) { - return null; - } - return React.createElement(icon, { className, onClick, style: { ...style } }); -} - -export const renderIcon = (id: string) => { - return Icon({ name: id }); -}; - -Icon.register = (key: string, icon: ComponentType, _?: SortType) => { - allIcons[key] = icon; - if (key.startsWith('global')) { - allIcons[key.substr(7)] = icon; - } - // if (sort) { - // let found = false; - // for (let i = 0; i < categories.length; i++) { - // if (categories[i].id === sort.id) { - // found = true; - // categories[i].icons.push(key); - // break; - // } - // } - // if (!found) { - // categories.push({ ...sort, icons: [key] }); - // } - // } - // }; -}; - -export default Icon; diff --git a/src/icons.tsx b/src/icons.tsx index 8aa3e9e..5e506ce 100644 --- a/src/icons.tsx +++ b/src/icons.tsx @@ -1,28 +1,21 @@ -import classnames from 'classnames'; -import React from 'react'; +import { store } from '@asany/icons'; -import Icon, { IconProps } from './icon'; - -Icon.register('Cross', function Cross() { - return ( - - - - - ); -}); -Icon.register('HandTouchSolid', function HandTouchSolid() { - return ( - - `, + }, + { + name: 'HandTouchSolid', + svg: ` hand-touch - - - ); -}); - -Icon.register('FieldsetExpand', function IconHand() { - return ( - + `, + }, + { + name: 'FieldsetExpand', + svg: ` - - - ); -}); + `, + }, -Icon.register('FieldsetCollapsed', function IconHand() { - return ( - - - - - - ); -}); + + `, + }, -Icon.register('ArrowBottom', function IconHand() { - return ( - - - - - ); -}); + `, + }, -Icon.register('VectorAlign', function IconHand() { - return ( - - - - - ); -}); + `, + }, -Icon.register('AlignBottom', function AlignBottom() { - return ( - - - - - ); -}); + `, + }, -Icon.register('AlignHorizontalCenters', function AlignHorizontalCenters() { - return ( - - - - - ); -}); + `, + }, -Icon.register('AlignLeft', function AlignLeft() { - return ( - - - - - ); -}); + `, + }, -Icon.register('AlignVerticalCenters', function AlignVerticalCenters() { - return ( - - - - - ); -}); -Icon.register('ConstrainProportionsOff', function ConstrainProportionsOff() { - return ( - - `, + }, + { + name: 'ConstrainProportionsOff', + svg: ` - - - ); -}); -Icon.register('ConstrainProportionsOn', function ConstrainProportionsOn() { - return ( - - `, + }, + { + name: 'ConstrainProportionsOn', + svg: ` - - - ); -}); -Icon.register('TopLeftCornerRadius', function IconHand() { - return ( - - `, + }, + { + name: 'TopLeftCornerRadius', + svg: ` - - - ); -}); -Icon.register('TopRightCornerRadius', function IconHand() { - return ( - - `, + }, + { + name: 'TopRightCornerRadius', + svg: ` - - - ); -}); -Icon.register('BottomRightCornerRadius', function IconHand() { - return ( - - `, + }, + { + name: 'BottomRightCornerRadius', + svg: ` - - - ); -}); -Icon.register('BottomLeftCornerRadius', function IconHand() { - return ( - - `, + }, + { + name: 'BottomLeftCornerRadius', + svg: ` - - - ); -}); -Icon.register('Landscape', function Landscape() { - return ( - - `, + }, + { + name: 'Landscape', + svg: ` - - - ); -}); -Icon.register('VectorRetract', function IconHand() { - return ( - - `, + }, + { + name: 'VectorRetract', + svg: ` - - - ); -}); -Icon.register('AlignRight', function IconHand() { - return ( - - `, + }, + { + name: 'AlignRight', + svg: ` - - - ); -}); -Icon.register('VectorRotate', function IconHand() { - return ( - - `, + }, + { + name: 'VectorRotate', + svg: ` - - - ); -}); -Icon.register('VectorSemicircle', function IconHand() { - return ( - - `, + }, + { + name: 'VectorSemicircle', + svg: ` - - - ); -}); -Icon.register('AlignTop', function IconHand() { - return ( - - `, + }, + { + name: 'AlignTop', + svg: ` - - - ); -}); -Icon.register('Portrait', function Portrait() { - return ( - - `, + }, + { + name: 'Portrait', + svg: ` - - - ); -}); + `, + }, -Icon.register('VectorCorrect', function IconHand() { - return ( - - - ); -}); -Icon.register('VectorArrowButtom', function IconHand() { - return ( - `, + }, + { + name: 'VectorArrowButtom', + svg: ` - - ); -}); -Icon.register('VectorArrowRight', function IconHand() { - return ( + `, + }, + { + name: 'VectorArrowRight', + svg: ` - - ); -}); -Icon.register('AlignmentAndPadding', function AlignmentAndPadding() { - return ( - - `, + }, + { + name: 'AlignmentAndPadding', + svg: ` - - - ); -}); -Icon.register('ResizeToFit', function ResizeToFit() { - return ( - - `, + }, + { + name: 'ResizeToFit', + svg: ` - - - ); -}); -Icon.register('VectorSpacing', function IconHand() { - return ( - `, + }, + { + name: 'VectorSpacing', + svg: ` - - ); -}); -Icon.register('VectorPadding', function IconHand() { - return ( - `, + }, + { + name: 'VectorPadding', + svg: ` - - ); -}); -Icon.register('VectorRadiusLT', function IconHand() { - return ( - `, + }, + { + name: 'VectorRadiusLT', + svg: ` - - - ); -}); -Icon.register('VectorRadiusRT', function IconHand() { - return ( - - `, + }, + { + name: 'VectorRadiusRT', + svg: ` - - - ); -}); -Icon.register('VectorRadiusLB', function IconHand() { - return ( - - `, + }, + { + name: 'VectorRadiusLB', + svg: ` - - - ); -}); -Icon.register('VectorRadiusRB', function IconHand() { - return ( - - `, + }, + { + name: 'VectorRadiusRB', + svg: ` - - - ); -}); -Icon.register('VectorSubtraction', function IconHand() { - return ( - - `, + }, + { + name: 'VectorSubtraction', + svg: ` - - - ); -}); -Icon.register('VectorEyes', function IconHand() { - return ( - - `, + }, + { + name: 'VectorEyes', + svg: ` - - - ); -}); + `, + }, -Icon.register( - 'ComponentInstance', - function ComponentInstance(props: IconProps) { - const { className } = props; - return ( - - - - - ); - } -); -Icon.register('DownArrow', function DownArrow() { - return ( - - `, + }, + { + name: 'DownArrow', + svg: ` - - - ); -}); -Icon.register('Arrow', function Arrow({ onClick, className }: IconProps) { - return ( - - `, + }, + { + name: 'Arrow', + svg: ` - - ); -}); -Icon.register('SelectFilled', function SelectFilled() { - return ( - - + `, + }, + { + name: 'SelectFilled', + svg: ` - - - ); -}); -Icon.register( - 'ToolbarBack', - function ToolbarBack({ onClick, className }: IconProps) { - return ( - - `, + }, + { + name: 'ToolbarBack', + svg: ` - - ); - } -); + `, + }, + + { + name: 'IconHand', + svg: ` + + `, + }, + + { + name: 'LayersFilled', + svg: ` + + `, + }, + + { + name: 'SketchFrame', + svg: ` + + `, + }, + + { + name: 'SketchImage', + svg: ` + + `, + }, +]; + +store.addIcons(icons); diff --git a/src/index.tsx b/src/index.tsx index 12ddd43..20d3414 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,3 @@ -import './icons'; - export { default } from './AsanyEditor'; export { AsanyProvider } from './AsanyContext'; export { default as useBlock } from './hooks/useBlock'; diff --git a/src/library/components/ObjectCombiner.tsx b/src/library/components/ObjectCombiner.tsx index 441b0bf..fc77f8f 100644 --- a/src/library/components/ObjectCombiner.tsx +++ b/src/library/components/ObjectCombiner.tsx @@ -7,7 +7,7 @@ import { import { getRenderer } from '../renderers'; import { visibleFilter, FormItemWrapper } from '../ConfigurationPanel'; import { Form } from 'antd'; -import { isEqual } from 'lodash'; +import { isEqual } from 'lodash-es'; interface ObjectCombinerProps { value?: any; diff --git a/src/library/components/WrapperItem.tsx b/src/library/components/WrapperItem.tsx index f97b24f..0eb858c 100644 --- a/src/library/components/WrapperItem.tsx +++ b/src/library/components/WrapperItem.tsx @@ -1,8 +1,10 @@ -import React, { memo, MutableRefObject } from 'react'; import { CloseOutlined, EditOutlined } from '@ant-design/icons'; +import Icon from '@asany/icons'; import { Checkbox, Input } from 'antd'; +import React, { memo, MutableRefObject } from 'react'; + import { IMultipleWrapperData } from './MultipleWrapper'; -import Icon from '../../icon'; + // import { SortableItemContentProps } from '../../sortable'; export const SortableHandler = () => { diff --git a/src/library/index.tsx b/src/library/index.tsx index d42127d..30f4a54 100644 --- a/src/library/index.tsx +++ b/src/library/index.tsx @@ -1,4 +1,4 @@ -import { cloneDeepWith } from 'lodash'; +import { cloneDeepWith } from 'lodash-es'; import LibraryManager from '@asany/library-manager'; diff --git a/src/style/aside.less b/src/style/aside.less index 41f80a5..38e2ac8 100644 --- a/src/style/aside.less +++ b/src/style/aside.less @@ -87,7 +87,6 @@ } } .close { - font-size: 8px; display: flex; align-items: center; justify-content: center; diff --git a/src/typings.ts b/src/typings.ts index f47c3f8..845707b 100644 --- a/src/typings.ts +++ b/src/typings.ts @@ -311,6 +311,7 @@ export interface IScena { tools?: AsanyTool[]; visible?: boolean; }; + workspace: ComponentType; onClick(editor: IAsanyEditor, block?: IUseBlockState): void; } diff --git a/stories/Icon.stories.tsx b/stories/Icon.stories.tsx new file mode 100644 index 0000000..34baf0b --- /dev/null +++ b/stories/Icon.stories.tsx @@ -0,0 +1,95 @@ +import '../src/icons'; +import 'antd/dist/antd.css'; + +import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'; +import Icon, { IconProvider, useStore } from '@asany/icons'; +import { Meta, Story } from '@storybook/react'; +import React from 'react'; +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; + +import AsanyEditor from '../src'; +import DemoPlugin from './editors/demo'; +import { useEffect } from 'react'; +import { useState } from 'react'; +import { IconLibrary } from '@asany/icons/dist/store/IconDatabase'; + +const meta: Meta = { + title: '编辑器/图标', + parameters: { + options: { showPanel: false }, + }, +}; + +const client = new ApolloClient({ + uri: 'http://api.asany.cn/graphql', + cache: new InMemoryCache(), +}); + +export default meta; + +const Template: Story = (_args) => { + DemoPlugin.scena.workspace = () => { + const store = useStore(); + const [lib, setLib] = useState(); + useEffect(() => { + store.local().then((lib) => { + setLib(lib); + }); + }, []); + + if (!lib) { + return <>; + } + + return ( +
+

{lib.description}

+
+
+ {lib.icons.map((item) => ( + + ))} +
+
+ ); + }; + return ( + + + + console.log(data)} + project={{ + id: 'test', + name: ( +
+ 项目名称展示区域 +
+ ) as any, + type: 'demo', + data: { + id: '111', + props: [], + }, + }} + /> + + + + ); +}; + +// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test +// https://storybook.js.org/docs/react/workflows/unit-testing +export const Default = Template.bind({}); + +Default.storyName = '图标'; + +Default.args = {}; diff --git a/stories/editors/demo/icons.tsx b/stories/editors/demo/icons.tsx deleted file mode 100644 index f9a4e8a..0000000 --- a/stories/editors/demo/icons.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import Icon from '../../../src/icon'; - -Icon.register('IconHand', function IconHand() { - return ( - - - - - - - - ); -}); - -Icon.register('SelectFilled', function SelectFilled() { - return ( - - - - - - ); -}); - -Icon.register('LayersFilled', function LayersFilled() { - return ( - - - - - - - - ); -}); - -Icon.register('SketchFrame', function LayersFilled() { - return ( - - - - - - ); -}); - -Icon.register('SketchImage', function LayersFilled() { - return ( - - - - - - ); -}); - -// Icon.register('SketchImage', function LayersFilled() { -// return ( -// -// -// -// ); -// }); diff --git a/stories/editors/demo/index.tsx b/stories/editors/demo/index.tsx index eae065b..8daf065 100644 --- a/stories/editors/demo/index.tsx +++ b/stories/editors/demo/index.tsx @@ -4,10 +4,8 @@ import { useSelector } from '../../../src/hooks'; import { EditorPlugin } from '../../../src/typings'; import reducer, { SketchActionType } from './reducer'; -import './icons'; // import BlockLayers from '../../../sketch/components/BlockLayers'; - export default { id: 'demo', description: '', diff --git a/yarn.lock b/yarn.lock index e7895dc..a13b2ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,6 +36,39 @@ lodash "^4.17.21" resize-observer-polyfill "^1.5.0" +"@apollo/client@^3.3.20": + version "3.3.21" + resolved "https://registry.npmjs.org/@apollo/client/-/client-3.3.21.tgz#2862baa4e1ced8c5e89ebe6fc52877fc64a726aa" + integrity sha512-RAmZReFuKCKx0Rs5C0nVJwKomAHUHn+gGP/YvbEsXQWu0sXoncEUZa71UqlfCPVXa/0MkYOIbCXSQdOcuRrHgw== + dependencies: + "@graphql-typed-document-node/core" "^3.0.0" + "@types/zen-observable" "^0.8.0" + "@wry/context" "^0.6.0" + "@wry/equality" "^0.5.0" + fast-json-stable-stringify "^2.0.0" + graphql-tag "^2.12.0" + hoist-non-react-statics "^3.3.2" + optimism "^0.16.0" + prop-types "^15.7.2" + symbol-observable "^4.0.0" + ts-invariant "^0.8.0" + tslib "^1.10.0" + zen-observable "^0.8.14" + +"@asany/icons@^0.1.3": + version "0.1.3" + resolved "https://registry.npmjs.org/@asany/icons/-/icons-0.1.3.tgz#5b8432703cb6b6a3062cdb187361271df909cdd0" + integrity sha512-cEdFd3f5fY2UwwggcrBhcHFj7MgUrw3EA1mftzsGKFi9odtt2E3syVI4shgw4n144/3q1z/BjIvZeW74ykGuxA== + dependencies: + "@apollo/client" "^3.3.20" + classnames "^2.3.1" + dexie "^3.0.3" + fonteditor-core "^2.1.7" + graphql "^15.5.1" + inflate "0.0.7" + lodash-es "^4.17.21" + moment "^2.29.1" + "@asany/library-manager@^0.1.4": version "0.1.4" resolved "https://registry.npmjs.org/@asany/library-manager/-/library-manager-0.1.4.tgz#a5859519a5c377b89b0481c111bf31f1d48a682e" @@ -1448,6 +1481,11 @@ resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@graphql-typed-document-node/core@^3.0.0": + version "3.1.0" + resolved "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz#0eee6373e11418bfe0b5638f654df7a4ca6a3950" + integrity sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg== + "@hutson/parse-repository-url@^3.0.0": version "3.0.2" resolved "https://registry.npmjs.org/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340" @@ -3230,6 +3268,11 @@ dependencies: "@types/yargs-parser" "*" +"@types/zen-observable@^0.8.0": + version "0.8.3" + resolved "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz#781d360c282436494b32fe7d9f7f8e64b3118aa3" + integrity sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw== + "@typescript-eslint/eslint-plugin@^2.12.0", "@typescript-eslint/eslint-plugin@^4.1.1": version "4.28.4" resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.4.tgz#e73c8cabbf3f08dee0e1bda65ed4e622ae8f8921" @@ -3444,6 +3487,27 @@ "@webassemblyjs/wast-parser" "1.9.0" "@xtuc/long" "4.2.2" +"@wry/context@^0.6.0": + version "0.6.0" + resolved "https://registry.npmjs.org/@wry/context/-/context-0.6.0.tgz#f903eceb89d238ef7e8168ed30f4511f92d83e06" + integrity sha512-sAgendOXR8dM7stJw3FusRxFHF/ZinU0lffsA2YTyyIOfic86JX02qlPqPVqJNZJPAxFt+2EE8bvq6ZlS0Kf+Q== + dependencies: + tslib "^2.1.0" + +"@wry/equality@^0.5.0": + version "0.5.1" + resolved "https://registry.npmjs.org/@wry/equality/-/equality-0.5.1.tgz#b22e4e1674d7bf1439f8ccdccfd6a785f6de68b0" + integrity sha512-FZKbdpbcVcbDxQrKcaBClNsQaMg9nof1RKM7mReJe5DKUzM5u8S7T+PqwNqvib5O2j2xxF1R4p5O3+b6baTrbw== + dependencies: + tslib "^2.1.0" + +"@wry/trie@^0.3.0": + version "0.3.0" + resolved "https://registry.npmjs.org/@wry/trie/-/trie-0.3.0.tgz#3245e74988c4e3033299e479a1bf004430752463" + integrity sha512-Yw1akIogPhAT6XPYsRHlZZIS0tIGmAl9EYXHi2scf7LPKKqdqmow/Hu4kEqP2cJR3EjaU/9L0ZlAjFf3hFxmug== + dependencies: + tslib "^2.1.0" + "@xobotyi/scrollbar-width@^1.9.5": version "1.9.5" resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d" @@ -4236,6 +4300,11 @@ balanced-match@^1.0.0: resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== +base64-js@0.0.2: + version "0.0.2" + resolved "https://registry.npmjs.org/base64-js/-/base64-js-0.0.2.tgz#024f0f72afa25b75f9c0ee73cd4f55ec1bed9784" + integrity sha1-Ak8Pcq+iW3X5wO5zzU9V7Bvtl4Q= + base64-js@^1.0.2: version "1.5.1" resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" @@ -4331,6 +4400,14 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bops@~0.0.6: + version "0.0.7" + resolved "https://registry.npmjs.org/bops/-/bops-0.0.7.tgz#b4a0a5a839a406454af0fe05a8b91a7a766a54e2" + integrity sha1-tKClqDmkBkVK8P4FqLkaenZqVOI= + dependencies: + base64-js "0.0.2" + to-utf8 "0.0.1" + boxen@^4.2.0: version "4.2.0" resolved "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz#e411b62357d6d6d36587c8ac3d5d974daa070e64" @@ -4848,7 +4925,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6: +classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1: version "2.3.1" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -6061,6 +6138,11 @@ detect-port@^1.3.0: address "^1.0.1" debug "^2.6.0" +dexie@^3.0.3: + version "3.0.3" + resolved "https://registry.npmjs.org/dexie/-/dexie-3.0.3.tgz#ede63849dfe5f07e13e99bb72a040e8ac1d29dab" + integrity sha512-BSFhGpngnCl1DOr+8YNwBDobRMH0ziJs2vts69VilwetHYOtEDcLqo7d/XiIphM0tJZ2rPPyAGd31lgH2Ln3nw== + diff-sequences@^25.2.6: version "25.2.6" resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd" @@ -7229,6 +7311,13 @@ focus-lock@^0.9.1: dependencies: tslib "^2.0.3" +fonteditor-core@^2.1.7: + version "2.1.8" + resolved "https://registry.npmjs.org/fonteditor-core/-/fonteditor-core-2.1.8.tgz#50a2af8133c3536da9b911ec2616abaf0d22931a" + integrity sha512-cBPTY+TTLSB74HCxMQdvezfb60La4+a3+iwaG9BzkttbALFlC5V+Y8M66BPmCn2H9cyiCAd5DSMBaZXR+SC4LA== + dependencies: + xmldom "^0.5.0" + for-in@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -7746,6 +7835,18 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee" integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ== +graphql-tag@^2.12.0: + version "2.12.5" + resolved "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.5.tgz#5cff974a67b417747d05c8d9f5f3cb4495d0db8f" + integrity sha512-5xNhP4063d16Pz3HBtKprutsPrmHZi5IdUGOWRxA2B6VF7BIRGOHZ5WQvDmJXZuPcBg7rYwaFxvQYjqkSdR3TQ== + dependencies: + tslib "^2.1.0" + +graphql@^15.5.1: + version "15.5.1" + resolved "https://registry.npmjs.org/graphql/-/graphql-15.5.1.tgz#f2f84415d8985e7b84731e7f3536f8bb9d383aad" + integrity sha512-FeTRX67T3LoE3LWAxxOlW2K3Bz+rMYAC18rRguK4wgXaTZMiJwSUwDmPFo3UadAKbzirKIg5Qy+sNJXbpPRnQw== + growly@^1.3.0: version "1.3.0" resolved "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -8264,6 +8365,14 @@ infer-owner@^1.0.3, infer-owner@^1.0.4: resolved "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467" integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A== +inflate@0.0.7: + version "0.0.7" + resolved "https://registry.npmjs.org/inflate/-/inflate-0.0.7.tgz#f8ef2774d5f6e063e2c3803ed3a31f820331ed36" + integrity sha1-+O8ndNX24GPiw4A+06MfggMx7TY= + dependencies: + bops "~0.0.6" + through "~2.2.7" + inflight@^1.0.4: version "1.0.6" resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" @@ -10259,7 +10368,7 @@ modify-values@^1.0.0: resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022" integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw== -moment@^2.24.0, moment@^2.25.3: +moment@^2.24.0, moment@^2.25.3, moment@^2.29.1: version "2.29.1" resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== @@ -10733,6 +10842,14 @@ opener@^1.5.2: resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598" integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A== +optimism@^0.16.0: + version "0.16.1" + resolved "https://registry.npmjs.org/optimism/-/optimism-0.16.1.tgz#7c8efc1f3179f18307b887e18c15c5b7133f6e7d" + integrity sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg== + dependencies: + "@wry/context" "^0.6.0" + "@wry/trie" "^0.3.0" + optimize-css-assets-webpack-plugin@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-6.0.1.tgz#7719bceabba1f3891ec3ae04efb81a1cc99cd793" @@ -14454,6 +14571,11 @@ svgo@^2.3.0: csso "^4.2.0" stable "^0.1.8" +symbol-observable@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205" + integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ== + symbol-tree@^3.2.2: version "3.2.4" resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -14647,6 +14769,11 @@ through@2, "through@>=2.2.7 <3", through@^2.3.6: resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= +through@~2.2.7: + version "2.2.7" + resolved "https://registry.npmjs.org/through/-/through-2.2.7.tgz#6e8e21200191d4eb6a99f6f010df46aa1c6eb2bd" + integrity sha1-bo4hIAGR1OtqmfbwEN9Gqhxusr0= + timers-browserify@^2.0.4: version "2.0.12" resolved "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee" @@ -14726,6 +14853,11 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +to-utf8@0.0.1: + version "0.0.1" + resolved "https://registry.npmjs.org/to-utf8/-/to-utf8-0.0.1.tgz#d17aea72ff2fba39b9e43601be7b3ff72e089852" + integrity sha1-0Xrqcv8vujm55DYBvns/9y4ImFI= + toggle-selection@^1.0.6: version "1.0.6" resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" @@ -14810,6 +14942,13 @@ ts-essentials@^2.0.3: resolved "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745" integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w== +ts-invariant@^0.8.0: + version "0.8.2" + resolved "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.8.2.tgz#62af654ebfb8b1eeb55bc9adc2f40c6b93b0ff7e" + integrity sha512-VI1ZSMW8soizP5dU8DsMbj/TncHf7bIUqavuE7FTeYeQat454HHurJ8wbfCnVWcDOMkyiBUWOW2ytew3xUxlRw== + dependencies: + tslib "^2.1.0" + ts-jest@^25.3.1: version "25.5.1" resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-25.5.1.tgz#2913afd08f28385d54f2f4e828be4d261f4337c7" @@ -15722,6 +15861,11 @@ xmlchars@^2.1.1: resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== +xmldom@^0.5.0: + version "0.5.0" + resolved "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz#193cb96b84aa3486127ea6272c4596354cb4962e" + integrity sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA== + xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1: version "4.0.2" resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" @@ -15800,6 +15944,11 @@ yocto-queue@^0.1.0: resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== +zen-observable@^0.8.14: + version "0.8.15" + resolved "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15" + integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ== + zwitch@^1.0.0: version "1.0.5" resolved "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"