@formily-design/react 1.0.0

package/esm/widgets/OutlineWidget/OutlineNode.js

@@ -0,0 +1,139 @@
+import React, { useRef, useContext, useEffect } from 'react';
+import { ClosestPosition, CursorStatus, DragMoveEvent, } from '@formily-design/core';
+import { isFn } from '@formily-design/shared';
+import { autorun } from '@formily/reactive';
+import { observer } from '@formily/reactive-react';
+import { usePrefix, useCursor, useSelection, useMoveHelper, useDesigner, } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { NodeContext } from './context';
+import cls from 'classnames';
+import './styles.less';
+export const OutlineTreeNode = observer(({ node, className, style, workspaceId }) => {
+    var _a, _b;
+    const prefix = usePrefix('outline-tree-node');
+    const engine = useDesigner();
+    const ref = useRef();
+    const ctx = useContext(NodeContext);
+    const request = useRef(null);
+    const cursor = useCursor();
+    const selection = useSelection(workspaceId);
+    const moveHelper = useMoveHelper(workspaceId);
+    useEffect(() => {
+        return engine.subscribeTo(DragMoveEvent, () => {
+            var _a;
+            const closestNodeId = (_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.id;
+            const closestDirection = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.outlineClosestDirection;
+            const id = node.id;
+            if (!ref.current)
+                return;
+            if (closestNodeId === id &&
+                closestDirection === ClosestPosition.Inner) {
+                if (!ref.current.classList.contains('droppable')) {
+                    ref.current.classList.add('droppable');
+                }
+                if (!ref.current.classList.contains('expanded')) {
+                    if (request.current) {
+                        clearTimeout(request.current);
+                        request.current = null;
+                    }
+                    request.current = setTimeout(() => {
+                        ref.current.classList.add('expanded');
+                    }, 600);
+                }
+            }
+            else {
+                if (request.current) {
+                    clearTimeout(request.current);
+                    request.current = null;
+                }
+                if (ref.current.classList.contains('droppable')) {
+                    ref.current.classList.remove('droppable');
+                }
+            }
+        });
+    }, [node, moveHelper, cursor]);
+    useEffect(() => {
+        return autorun(() => {
+            var _a;
+            const selectedIds = (selection === null || selection === void 0 ? void 0 : selection.selected) || [];
+            const id = node.id;
+            if (!ref.current)
+                return;
+            if (selectedIds.includes(id)) {
+                if (!ref.current.classList.contains('selected')) {
+                    ref.current.classList.add('selected');
+                }
+            }
+            else {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+            if (cursor.status === CursorStatus.Dragging &&
+                ((_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.dragNodes) === null || _a === void 0 ? void 0 : _a.length)) {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+        });
+    }, [node, selection, moveHelper]);
+    if (!node)
+        return null;
+    const renderIcon = (node) => {
+        var _a;
+        const icon = node.designerProps.icon;
+        if (icon) {
+            return React.createElement(IconWidget, { infer: icon, size: 12 });
+        }
+        if (node === (node === null || node === void 0 ? void 0 : node.root)) {
+            return React.createElement(IconWidget, { infer: "Page", size: 12 });
+        }
+        else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
+            return React.createElement(IconWidget, { infer: "Container", size: 12 });
+        }
+        return React.createElement(IconWidget, { infer: "Component", size: 12 });
+    };
+    const renderTitle = (node) => {
+        if (isFn(ctx.renderTitle))
+            return ctx.renderTitle(node);
+        return (React.createElement("span", null,
+            React.createElement(NodeTitleWidget, { node: node })));
+    };
+    const renderActions = (node) => {
+        if (isFn(ctx.renderActions))
+            return ctx.renderActions(node);
+    };
+    return (React.createElement("div", { style: style, ref: ref, className: cls(prefix, className, 'expanded'), "data-designer-outline-node-id": node.id },
+        React.createElement("div", { className: prefix + '-header' },
+            React.createElement("div", { className: prefix + '-header-head', style: {
+                    left: -node.depth * 16,
+                    width: node.depth * 16,
+                } }),
+            React.createElement("div", { className: prefix + '-header-content' },
+                React.createElement("div", { className: prefix + '-header-base' },
+                    (((_a = node === null || node === void 0 ? void 0 : node.children) === null || _a === void 0 ? void 0 : _a.length) > 0 || node === node.root) && (React.createElement("div", { className: prefix + '-expand', onClick: (e) => {
+                            var _a, _b, _c, _d;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if ((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('expanded')) {
+                                (_c = ref.current) === null || _c === void 0 ? void 0 : _c.classList.remove('expanded');
+                            }
+                            else {
+                                (_d = ref.current) === null || _d === void 0 ? void 0 : _d.classList.add('expanded');
+                            }
+                        } },
+                        React.createElement(IconWidget, { infer: "Expand", size: 10 }))),
+                    React.createElement("div", { className: prefix + '-icon' }, renderIcon(node)),
+                    React.createElement("div", { className: prefix + '-title' }, renderTitle(node))),
+                React.createElement("div", { className: prefix + '-header-actions', "data-click-stop-propagation": true },
+                    renderActions(node),
+                    node !== node.root && (React.createElement(IconWidget, { className: cls(prefix + '-hidden-icon', {
+                            hidden: node.hidden,
+                        }), infer: node.hidden ? 'EyeClose' : 'Eye', size: 14, onClick: () => {
+                            node.hidden = !node.hidden;
+                        } }))))),
+        React.createElement("div", { className: prefix + '-children' }, (_b = node.children) === null || _b === void 0 ? void 0 : _b.map((child) => {
+            return (React.createElement(OutlineTreeNode, { node: child, key: child.id, workspaceId: workspaceId }));
+        }))));
+});

package/esm/widgets/OutlineWidget/context.d.ts

@@ -0,0 +1,8 @@
+import { TreeNode } from '@formily-design/core';
+import React from 'react';
+interface INodeContext {
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const NodeContext: React.Context<INodeContext>;
+export {};

package/esm/widgets/OutlineWidget/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const NodeContext = createContext(null);

package/esm/widgets/OutlineWidget/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+export interface IOutlineTreeWidgetProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClose?: () => void;
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const OutlineTreeWidget: React.FC<IOutlineTreeWidgetProps>;

package/esm/widgets/OutlineWidget/index.js

@@ -0,0 +1,42 @@
+import React, { useRef, useLayoutEffect } from 'react';
+import cls from 'classnames';
+import { useTree, usePrefix, useOutline, useWorkbench } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { OutlineTreeNode } from './OutlineNode';
+import { Insertion } from './Insertion';
+import { NodeContext } from './context';
+import { globalThisPolyfill } from '@formily-design/shared';
+export const OutlineTreeWidget = observer(({ onClose, style, renderActions, renderTitle, className, ...props }) => {
+    const ref = useRef();
+    const prefix = usePrefix('outline-tree');
+    const workbench = useWorkbench();
+    const current = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    const workspaceId = current === null || current === void 0 ? void 0 : current.id;
+    const tree = useTree(workspaceId);
+    const outline = useOutline(workspaceId);
+    const outlineRef = useRef();
+    useLayoutEffect(() => {
+        if (!workspaceId)
+            return;
+        if (outlineRef.current && outlineRef.current !== outline) {
+            outlineRef.current.onUnmount();
+        }
+        if (ref.current && outline) {
+            outline.onMount(ref.current, globalThisPolyfill);
+        }
+        outlineRef.current = outline;
+        return () => {
+            outline.onUnmount();
+        };
+    }, [workspaceId, outline]);
+    if (!outline || !workspaceId)
+        return null;
+    return (React.createElement(NodeContext.Provider, { value: { renderActions, renderTitle } },
+        React.createElement("div", { ...props, className: cls(prefix + '-container', className), style: style },
+            React.createElement("div", { className: prefix + '-content', ref: ref },
+                React.createElement(OutlineTreeNode, { node: tree, workspaceId: workspaceId }),
+                React.createElement("div", { className: prefix + '-aux', style: {
+                        pointerEvents: 'none',
+                    } },
+                    React.createElement(Insertion, { workspaceId: workspaceId }))))));
+});

package/esm/widgets/OutlineWidget/styles.less

@@ -0,0 +1,195 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-outline-tree {
+  &-container {
+    position: relative;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--dn-outline-tree-bg-color);
+  }
+
+  &-header {
+    display: flex;
+    padding: 8px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--dn-outline-tree-header-border-color);
+    color: var(--dn-outline-tree-color);
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &-close {
+    display: flex;
+    align-items: center;
+    transform: scale(1.6);
+    cursor: pointer;
+  }
+
+  &-content {
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 20px;
+    overflow: overlay;
+  }
+
+  &-aux {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &-insertion {
+    background-color: var(--dn-outline-tree-insertion-bg-color);
+  }
+
+  &-node {
+    position: relative;
+    user-select: none;
+    width: fit-content;
+    min-width: 100%;
+
+    &.expanded {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-expand {
+          transform: rotate(0);
+        }
+      }
+
+      & > .@{prefix-cls}-outline-tree-node-children {
+        display: block;
+      }
+    }
+
+    &.selected {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        background-color: var(--dn-panel-active-bg-color);
+
+        .@{prefix-cls}-outline-tree-node-header-head {
+          background-color: var(--dn-panel-active-bg-color);
+        }
+      }
+    }
+
+    &.droppable {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          .@{prefix-cls}-outline-tree-node-header-base {
+            & > .@{prefix-cls}-outline-tree-node-icon {
+              transform: scale(1.2);
+            }
+          }
+        }
+      }
+    }
+
+    &-hidden-icon:not(.hidden) {
+      display: none;
+    }
+
+    &-header {
+      display: flex;
+      min-height: 32px;
+      width: fit-content;
+      min-width: 100%;
+      align-items: center;
+      color: var(--dn-outline-tree-node-header-color);
+      position: relative;
+      padding-left: 8px;
+
+      &:hover {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          color: var(--dn-outline-tree-node-hover-color);
+        }
+
+        .@{prefix-cls}-outline-tree-node-hidden-icon {
+          display: block;
+        }
+      }
+    }
+
+    &-header-head {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    &-header-content {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-in;
+      transform-origin: left;
+      width: fit-content;
+      min-width: 100%;
+      height: 100%;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+
+    &-header-base {
+      display: flex;
+      align-items: center;
+    }
+
+    &-header-actions {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-expand {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-out;
+      transform: rotate(-90deg);
+      margin-right: 3px;
+      width: 12px;
+    }
+
+    &-icon {
+      margin-right: 5px;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    &-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 100px;
+    }
+
+    &-actions {
+      font-size: 12px;
+      flex-grow: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-children {
+      padding-left: 16px;
+      display: none;
+      width: fit-content;
+      min-width: 100%;
+    }
+  }
+}

package/esm/widgets/ResourceWidget/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IResourceLike, IResource } from '@formily-design/core';
+import './styles.less';
+export type SourceMapper = (resource: IResource) => React.ReactChild;
+export interface IResourceWidgetProps {
+    title: React.ReactNode;
+    sources?: IResourceLike[];
+    className?: string;
+    defaultExpand?: boolean;
+    children?: SourceMapper | React.ReactElement;
+}
+export declare const ResourceWidget: React.FC<IResourceWidgetProps>;

package/esm/widgets/ResourceWidget/index.js

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { isResourceHost, isResourceList, } from '@formily-design/core';
+import { isFn } from '@formily-design/shared';
+import { observer } from '@formily/reactive-react';
+import { usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { TextWidget } from '../TextWidget';
+import cls from 'classnames';
+import './styles.less';
+export const ResourceWidget = observer((props) => {
+    const prefix = usePrefix('resource');
+    const [expand, setExpand] = useState(props.defaultExpand);
+    const renderNode = (source) => {
+        var _a;
+        const { node, icon, title, thumb, span } = source;
+        return (React.createElement("div", { className: prefix + '-item', style: { gridColumnStart: `span ${span || 1}` }, key: node.id, "data-designer-source-id": node.id },
+            thumb && React.createElement("img", { className: prefix + '-item-thumb', src: thumb }),
+            icon && React.isValidElement(icon) ? (React.createElement(React.Fragment, null, icon)) : (React.createElement(IconWidget, { className: prefix + '-item-icon', infer: icon, style: { width: 150, height: 40 } })),
+            React.createElement("span", { className: prefix + '-item-text' }, React.createElement(TextWidget, null, title || ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.getMessage('title'))))));
+    };
+    const sources = props.sources.reduce((buf, source) => {
+        if (isResourceList(source)) {
+            return buf.concat(source);
+        }
+        else if (isResourceHost(source)) {
+            return buf.concat(source.Resource);
+        }
+        return buf;
+    }, []);
+    const remainItems = sources.reduce((length, source) => {
+        var _a;
+        return length + ((_a = source.span) !== null && _a !== void 0 ? _a : 1);
+    }, 0) % 3;
+    return (React.createElement("div", { className: cls(prefix, props.className, {
+            expand,
+        }) },
+        React.createElement("div", { className: prefix + '-header', onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setExpand(!expand);
+            } },
+            React.createElement("div", { className: prefix + '-header-expand' },
+                React.createElement(IconWidget, { infer: "Expand", size: 10 })),
+            React.createElement("div", { className: prefix + '-header-content' },
+                React.createElement(TextWidget, null, props.title))),
+        React.createElement("div", { className: prefix + '-content-wrapper' },
+            React.createElement("div", { className: prefix + '-content' },
+                sources.map(isFn(props.children) ? props.children : renderNode),
+                remainItems ? (React.createElement("div", { className: prefix + '-item-remain', style: { gridColumnStart: `span ${3 - remainItems}` } })) : null))));
+});
+ResourceWidget.defaultProps = {
+    defaultExpand: true,
+};

package/esm/widgets/ResourceWidget/styles.less

@@ -0,0 +1,87 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-resource {
+  flex-wrap: wrap;
+  overflow: hidden;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    color: var(--dn-collapse-header-color);
+    border-bottom: 1px solid var(--dn-panel-border-color);
+    background-color: var(--dn-panel-active-bg-color);
+    cursor: pointer;
+    transition: all 0.25s ease-in-out;
+    font-size: 13px;
+
+    &-expand {
+      transform: rotate(-90deg);
+      font-size: 12px;
+      transition: all 0.15s ease-in-out;
+      margin-right: 3px;
+    }
+  }
+
+  &-content-wrapper {
+    display: flex;
+    justify-content: center;
+    background: var(--dn-resource-content-bg-color);
+  }
+
+  &-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    display: none;
+  }
+
+  &.expand {
+    .@{prefix-cls}-resource-content {
+      display: grid;
+      grid-template-columns: repeat(3, 33.3333%);
+      grid-gap: 1px;
+      background-color: var(--dn-panel-border-color);
+      border-bottom: 1px solid var(--dn-panel-border-color);
+    }
+
+    .@{prefix-cls}-resource-header-expand {
+      transform: rotate(0);
+    }
+  }
+
+  &-item {
+    position: relative;
+    user-select: none;
+    background: var(--dn-resource-content-bg-color);
+    min-height: 40px;
+    color: var(--dn-resource-item-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    cursor: grab;
+    transition: color 0.1s ease-out;
+
+    &:hover {
+      color: var(--dn-resource-item-hover-color);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      z-index: 1;
+    }
+
+    &-icon {
+      margin: 12px 0;
+    }
+
+    &-text {
+      text-align: center;
+      font-size: 12px;
+      line-height: 1;
+      margin-bottom: 12px;
+    }
+
+    &-remain {
+      background: var(--dn-resource-content-bg-color);
+    }
+  }
+}

package/esm/widgets/TextWidget/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDesignerMiniLocales } from '@formily-design/core';
+export interface ITextWidgetProps {
+    children?: React.ReactNode;
+    componentName?: string;
+    sourceName?: string;
+    token?: string | IDesignerMiniLocales;
+    defaultMessage?: string | IDesignerMiniLocales;
+}
+export declare const TextWidget: React.FC<ITextWidgetProps>;

package/esm/widgets/TextWidget/index.js

@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+import { isStr, isPlainObj } from '@formily-design/shared';
+import { GlobalRegistry } from '@formily-design/core';
+import { observer } from '@formily/reactive-react';
+export const TextWidget = observer((props) => {
+    const takeLocale = (message) => {
+        if (isStr(message))
+            return message;
+        if (isPlainObj(message)) {
+            const lang = GlobalRegistry.getDesignerLanguage();
+            for (let key in message) {
+                if (key.toLocaleLowerCase() === lang)
+                    return message[key];
+            }
+            return;
+        }
+        return message;
+    };
+    const takeMessage = (token) => {
+        if (!token)
+            return;
+        const message = isStr(token)
+            ? GlobalRegistry.getDesignerMessage(token)
+            : token;
+        if (message)
+            return takeLocale(message);
+        return token;
+    };
+    return (React.createElement(Fragment, null, takeMessage(props.children) ||
+        takeMessage(props.token) ||
+        takeMessage(props.defaultMessage)));
+});

package/esm/widgets/ViewToolsWidget/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { WorkbenchTypes } from '@formily-design/core';
+export interface IViewToolsWidget {
+    use?: WorkbenchTypes[];
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const ViewToolsWidget: React.FC<IViewToolsWidget>;

package/esm/widgets/ViewToolsWidget/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from 'antd';
+import { observer } from '@formily/reactive-react';
+import { IconWidget } from '../IconWidget';
+import { usePrefix, useWorkbench } from '../../hooks';
+import cls from 'classnames';
+export const ViewToolsWidget = observer(({ use, style, className }) => {
+    const workbench = useWorkbench();
+    const prefix = usePrefix('view-tools');
+    return (React.createElement(Button.Group, { style: style, className: cls(prefix, className) },
+        use.includes('DESIGNABLE') && (React.createElement(Button, { disabled: workbench.type === 'DESIGNABLE', onClick: () => {
+                workbench.type = 'DESIGNABLE';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "Design" }))),
+        use.includes('JSONTREE') && (React.createElement(Button, { disabled: workbench.type === 'JSONTREE', onClick: () => {
+                workbench.type = 'JSONTREE';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "JSON" }))),
+        use.includes('MARKUP') && (React.createElement(Button, { disabled: workbench.type === 'MARKUP', onClick: () => {
+                workbench.type = 'MARKUP';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "Code" }))),
+        use.includes('PREVIEW') && (React.createElement(Button, { disabled: workbench.type === 'PREVIEW', onClick: () => {
+                workbench.type = 'PREVIEW';
+            }, size: "small" },
+            React.createElement(IconWidget, { infer: "Play" })))));
+});
+ViewToolsWidget.defaultProps = {
+    use: ['DESIGNABLE', 'JSONTREE', 'PREVIEW'],
+};

package/esm/widgets/index.d.ts

@@ -0,0 +1,15 @@
+export * from './AuxToolWidget';
+export * from './ComponentTreeWidget';
+export * from './DesignerToolsWidget';
+export * from './ViewToolsWidget';
+export * from './ResourceWidget';
+export * from './GhostWidget';
+export * from './EmptyWidget';
+export * from './OutlineWidget';
+export * from './IconWidget';
+export * from './TextWidget';
+export * from './HistoryWidget';
+export * from './NodePathWidget';
+export * from './NodeTitleWidget';
+export * from './DroppableWidget';
+export * from './NodeActionsWidget';

package/esm/widgets/index.js

@@ -0,0 +1,15 @@
+export * from './AuxToolWidget';
+export * from './ComponentTreeWidget';
+export * from './DesignerToolsWidget';
+export * from './ViewToolsWidget';
+export * from './ResourceWidget';
+export * from './GhostWidget';
+export * from './EmptyWidget';
+export * from './OutlineWidget';
+export * from './IconWidget';
+export * from './TextWidget';
+export * from './HistoryWidget';
+export * from './NodePathWidget';
+export * from './NodeTitleWidget';
+export * from './DroppableWidget';
+export * from './NodeActionsWidget';

package/lib/containers/Designer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IDesignerProps } from '../types';
+export declare const Designer: React.FC<IDesignerProps>;