refactor(api): refactor the molecule API and interfaces

1. Re design the molecule API for development, 2. rename the component props name

BREAKING CHANGE: different invoke methods based on molecule API

fix #143, fix #153

Author: wewoor

CHANGELOG.md

@@ -24,7 +24,7 @@ All notable changes to this project will be documented in this file. See [standa
 -   explorer service add ([9963180](https://github.com/DTStack/molecule/commit/9963180e4007f5182ebf4f305e505ef79e54d864))
 -   export the shadowClassName of contextView ([7875f19](https://github.com/DTStack/molecule/commit/7875f19107ba0c63fc81fd62c86fbcefe2cca82e))
 -   extract editor modified logic to extensions ([#138](https://github.com/DTStack/molecule/issues/138)) ([70aafcf](https://github.com/DTStack/molecule/commit/70aafcf30ccb9af536babdb5fbb7c5961050de68))
--   extract ITab interface to tabComponent ([3645f46](https://github.com/DTStack/molecule/commit/3645f466bb4cd05647140e1eb16c780bb0f7e3d3))
+-   extract ITabProps interface to tabComponent ([3645f46](https://github.com/DTStack/molecule/commit/3645f466bb4cd05647140e1eb16c780bb0f7e3d3))
 -   extract logic to extensions ([cd47341](https://github.com/DTStack/molecule/commit/cd473417a31870132bee8add434ebb2e0631b545))
 -   extract overside tabDataInterface ([c7a6857](https://github.com/DTStack/molecule/commit/c7a6857be5f5a02812b1913b365dbfb645a1bcc1))
 -   extract TreeViewUtil to help file ([883de0f](https://github.com/DTStack/molecule/commit/883de0fba6241c1378a399608cd251cc710149ab))

package.json

@@ -18,7 +18,7 @@
         "prettier": "prettier --ignore-unknown .",
         "pretty-quick": "pretty-quick",
         "release": "standard-version",
-        "docs": "typedoc --entryPoints src/index.ts --out docs/api",
+        "docs": "typedoc --entryPoints src/index.ts --out docs/api --name 'Molecule API'",
         "web": "webpack serve --env prod --config ./build/web.js"
     },
     "keywords": [

src/components/actionBar/__tests__/actionBar.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 
-import ActionBar from '../index';
+import { ActionBar } from '../index';
 
 const mockData = [
     {

src/components/actionBar/index.tsx

@@ -8,34 +8,34 @@ import {
 } from 'mo/common/className';
 import { useContextMenu } from 'mo/components/contextMenu';
 import { select } from 'mo/common/dom';
-import { IMenuItem, Menu } from 'mo/components/menu';
+import { IMenuItemProps, Menu } from 'mo/components/menu';
 import { mergeFunctions } from 'mo/common/utils';
 
-export interface IActionBarItem<T = any> {
+export interface IActionBarItemProps<T = any> {
     id?: string;
     name?: string;
     title?: string;
     iconName?: string;
     disabled?: boolean;
     checked?: boolean;
     data?: T;
-    contextMenu?: IMenuItem[];
+    contextMenu?: IMenuItemProps[];
     className?: string;
     onContextMenuClick?: (
         e: React.MouseEvent,
-        item: IMenuItem | undefined
+        item: IMenuItemProps | undefined
     ) => void;
-    onClick?(event: React.MouseEvent, item: IActionBarItem): void;
+    onClick?(event: React.MouseEvent, item: IActionBarItemProps): void;
 }
 
-export interface IActionBar<T = any> {
-    data: IActionBarItem<T>[];
+export interface IActionBarProps<T = any> {
+    data: IActionBarItemProps<T>[];
     className?: string;
     onContextMenuClick?: (
         e: React.MouseEvent,
-        item: IMenuItem | undefined
+        item: IMenuItemProps | undefined
     ) => void;
-    onClick?(event: React.MouseEvent, item: IActionBarItem): void;
+    onClick?(event: React.MouseEvent, item: IActionBarItemProps): void;
 }
 
 const defaultActionBarClassName = prefixClaName('action-bar');
@@ -48,7 +48,7 @@ const itemDisabledClassName = getBEMModifier(itemClassName, 'disabled');
 const itemCheckedClassName = getBEMModifier(itemClassName, 'checked');
 const labelClassName = getBEMElement(defaultActionBarClassName, 'label');
 
-export function ActionBarItem(props: IActionBarItem) {
+export function ActionBarItem(props: IActionBarItemProps) {
     const {
         id,
         title,
@@ -71,7 +71,7 @@ export function ActionBarItem(props: IActionBarItem) {
     let contextViewMenu;
 
     const onClickMenuItem = useCallback(
-        (e: React.MouseEvent, item: IMenuItem | undefined) => {
+        (e: React.MouseEvent, item: IMenuItemProps | undefined) => {
             onContextMenuClick?.(e, item);
             contextViewMenu?.dispose();
         },
@@ -118,7 +118,7 @@ export function ActionBarItem(props: IActionBarItem) {
     );
 }
 
-export default function ActionBar<T = any>(props: IActionBar<T>) {
+export function ActionBar<T = any>(props: IActionBarProps<T>) {
     const {
         data = [],
         onClick,
@@ -129,7 +129,7 @@ export default function ActionBar<T = any>(props: IActionBar<T>) {
 
     const claNames = classNames(defaultActionBarClassName, className);
 
-    const items = data.map((item: IActionBarItem<T>, index) => (
+    const items = data.map((item: IActionBarItemProps<T>, index) => (
         <ActionBarItem
             key={item.id}
             {...item}

src/components/breadcrumb/index.tsx

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
 import { ComponentProps } from 'react';
-import { Icon } from '../icon';
-
-export interface IBreadcrumbItem {
+import { Icon } from 'mo/components';
+export interface IBreadcrumbItemProps {
     id: string;
     href?: string;
     name?: string;
-    icon?: typeof Icon;
+    icon?: ReactNode;
     className?: string;
-    render?(item: IBreadcrumbItem): ReactNode;
+    render?(item: IBreadcrumbItemProps): ReactNode;
 }
 
-export interface IBreadcrumb extends ComponentProps<'div'> {
-    routes: IBreadcrumbItem[];
-    separator?: typeof Icon;
-    onClick?(event: React.MouseEvent, item?: IBreadcrumbItem): void;
+export interface IBreadcrumbProps extends ComponentProps<'div'> {
+    routes: IBreadcrumbItemProps[];
+    separator?: ReactNode;
+    onClick?(event: React.MouseEvent, item?: IBreadcrumbItemProps): void;
 }
 
 export const defaultBreadcrumbClassName = prefixClaName('breadcrumb');
@@ -30,10 +29,10 @@ export const breadcrumbLabelClassName = getBEMElement(
     'label'
 );
 
-export function Breadcrumb(props: IBreadcrumb) {
+export function Breadcrumb(props: IBreadcrumbProps) {
     const { onClick, className, separator, routes = [], ...extra } = props;
 
-    const getEvents = (item: IBreadcrumbItem) => {
+    const getEvents = (item: IBreadcrumbItemProps) => {
         return {
             onClick: function (e: React.MouseEvent) {
                 onClick?.(e, item);
@@ -46,7 +45,7 @@ export function Breadcrumb(props: IBreadcrumb) {
     const sep = separator || <Icon type="chevron-right" />;
     return (
         <div className={claNames} {...extra}>
-            {routes.map((route: IBreadcrumbItem, index: number) => (
+            {routes.map((route: IBreadcrumbItemProps, index: number) => (
                 <a
                     key={route.id}
                     className={classNames(

src/components/button/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
 
 type BtnSizeType = 'normal' | 'large';
-export interface IButton extends React.ComponentProps<'a'> {
+export interface IButtonProps extends React.ComponentProps<'a'> {
     disabled?: boolean;
     size?: BtnSizeType;
     onClick?(event: React.MouseEvent): void;
@@ -16,7 +16,7 @@ const disableButtonClassName = getBEMModifier(
     'disabled'
 );
 
-export function Button(props: React.PropsWithChildren<IButton>) {
+export function Button(props: React.PropsWithChildren<IButtonProps>) {
     const { className, children, size = 'normal', ...custom } = props;
 
     const disabled = props.disabled ? disableButtonClassName : null;

src/components/checkbox/checkbox.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import { ComponentProps } from 'react';
 import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
 
-export interface ICheckbox extends ComponentProps<any> {
+export interface ICheckboxProps extends ComponentProps<any> {
     id: string;
     value?: string;
     children?: ReactNode;
-    onChange?(e: React.ChangeEvent, options?: ICheckbox): void;
+    onChange?(e: React.ChangeEvent, options?: ICheckboxProps): void;
 }
 
 export const checkboxClassName = prefixClaName('checkbox');
 const checkboxLabelClassName = getBEMElement(checkboxClassName, 'label');
 const checkboxInputClassName = getBEMElement(checkboxClassName, 'input');
 
-export function Checkbox(props: ICheckbox) {
+export function Checkbox(props: ICheckboxProps) {
     const { className, id, children, value, onChange, ...custom } = props;
 
     const claNames = classNames(checkboxClassName, className);

src/components/collapse/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
-import RcCollapse, { Panel } from 'rc-collapse';
-import Toolbar from 'mo/components/toolbar';
+import RcCollapse, { Panel as CollapsePanel } from 'rc-collapse';
+import { Toolbar } from 'mo/components/toolbar';
 import { Icon } from 'mo/components/icon';
 import {
     prefixClaName,
@@ -32,9 +32,8 @@ export const contentPaddingClassName = getBEMModifier(
 const initState = {
     activePanelKeys: [],
 };
-const Collapse: React.FunctionComponent<ICollapseProps> = (
-    props: ICollapseProps
-) => {
+
+export function Collapse(props: ICollapseProps) {
     const [state, setState] = useState<IState>(initState);
     const {
         className,
@@ -76,7 +75,7 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
                 )}
             >
                 {data.map((panel) => (
-                    <Panel
+                    <CollapsePanel
                         key={panel.id}
                         header={panel.name}
                         className={panel.className}
@@ -91,12 +90,11 @@ const Collapse: React.FunctionComponent<ICollapseProps> = (
                         }
                     >
                         {render(panel.renderPanel)}
-                    </Panel>
+                    </CollapsePanel>
                 ))}
             </RcCollapse>
         </div>
     );
-};
+}
 
-export { Panel };
-export default Collapse;
+export { CollapsePanel };

src/components/contextMenu/index.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { HTMLElementType } from 'mo/common/dom';
 import { useContextView } from 'mo/components/contextView';
 
-export interface IContextMenu {
+export interface IContextMenuProps {
     anchor: HTMLElementType;
     render: () => React.ReactNode;
 }
 
-export function useContextMenu(props: IContextMenu) {
+export function useContextMenu(props: IContextMenuProps) {
     const { anchor, render } = props;
 
     if (!anchor) {

src/components/dialog/actionButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Button, IButton } from 'mo/components/button';
-export interface ActionButtonProps extends IButton {
+import { Button, IButtonProps } from 'mo/components/button';
+export interface ActionButtonProps extends IButtonProps {
     actionFn?: (...args: any[]) => any | PromiseLike<any>;
     closeModal: Function;
 }

src/components/dialog/confirmDialog.tsx

@@ -5,7 +5,7 @@ import {
     getBEMModifier,
     prefixClaName,
 } from 'mo/common/className';
-import Dialog, { IModalFuncProps } from './modal';
+import { Modal as Dialog, IModalFuncProps } from './modal';
 import ActionButton from './actionButton';
 
 interface ConfirmDialogProps extends IModalFuncProps {

src/components/dialog/index.tsx

@@ -1,4 +1,9 @@
-import OriginModal, { IModalFuncProps, destroyFns } from './modal';
+import {
+    Modal as OriginModal,
+    IModalProps,
+    IModalFuncProps,
+    destroyFns,
+} from './modal';
 import confirm, {
     withWarn,
     withConfirm,
@@ -31,4 +36,4 @@ Modal.destroyAll = function destroyAllFn() {
     }
 };
 
-export default Modal;
+export { Modal, IModalFuncProps, IModalProps };

src/components/dialog/modal.tsx

@@ -9,15 +9,15 @@ import {
     getBEMModifier,
 } from 'mo/common/className';
 import { Icon } from 'mo/components/icon';
-import { Button, IButton } from 'mo/components/button';
+import { Button, IButtonProps } from 'mo/components/button';
 export interface IModalProps extends IDialogPropTypes {
     onOk?: (e: React.MouseEvent<HTMLElement>) => void;
     onCancel?: (e: React.SyntheticEvent<Element, Event>) => void;
     centered?: boolean;
     cancelText?: React.ReactNode;
     okText?: React.ReactNode;
-    okButtonProps?: IButton;
-    cancelButtonProps?: IButton;
+    okButtonProps?: IButtonProps;
+    cancelButtonProps?: IButtonProps;
     okCancel?: boolean;
 }
 export interface IModalFuncProps extends IDialogPropTypes {
@@ -27,8 +27,8 @@ export interface IModalFuncProps extends IDialogPropTypes {
     content?: React.ReactNode;
     onOk?: (...args: any[]) => any;
     onCancel?: (...args: any[]) => void;
-    okButtonProps?: IButton;
-    cancelButtonProps?: IButton;
+    okButtonProps?: IButtonProps;
+    cancelButtonProps?: IButtonProps;
     centered?: boolean;
     okCancel?: boolean;
     type?: string;
@@ -61,7 +61,7 @@ const closeIconToRender = (
     </span>
 );
 
-const Modal: React.FC<IModalProps> = (props) => {
+export const Modal: React.FC<IModalProps> = (props: IModalProps) => {
     const handleCancel = (e: React.SyntheticEvent<Element, Event>) => {
         const { onCancel } = props;
         onCancel?.(e);
@@ -115,5 +115,3 @@ const Modal: React.FC<IModalProps> = (props) => {
         />
     );
 };
-
-export default Modal;

src/components/dropdown/index.tsx

@@ -8,7 +8,7 @@ import {
     getPositionByPlacement,
 } from 'mo/common/dom';
 
-export interface IDropDown extends React.ComponentProps<'div'> {
+export interface IDropDownProps extends React.ComponentProps<'div'> {
     overlay: ReactNode;
     trigger?: TriggerEvent;
     placement?: PlacementType;
@@ -18,7 +18,7 @@ export interface IDropDown extends React.ComponentProps<'div'> {
 const defaultDropDownClassName = prefixClaName('drop-down');
 
 export const DropDown = React.forwardRef(
-    (props: React.PropsWithChildren<IDropDown>, ref) => {
+    (props: React.PropsWithChildren<IDropDownProps>, ref) => {
         const {
             className,
             overlay,

src/components/icon/index.tsx

@@ -1,13 +1,14 @@
-import { classNames, prefixClaName } from 'mo/common/className';
 import * as React from 'react';
+import { classNames, prefixClaName } from 'mo/common/className';
 import 'vscode-codicons/dist/codicon.css';
+import { ComponentProps } from 'react';
 
-export interface IIcon extends HTMLElementProps {
+export interface IIconProps extends ComponentProps<'span'> {
     type: string;
     onClick?: (e: React.MouseEvent) => void;
 }
 
-export function Icon(props: IIcon): React.ReactElement {
+export function Icon(props: IIconProps) {
     const { className, type, ...restProps } = props;
     return (
         <span