refactor: move components to src (#1354)

BREAKING CHANGE: change the importing path of components.
Using DesignContext for global configuration.

jest.config.js

@@ -36,6 +36,7 @@ module.exports = {
     '!src/**/__test?(s)__/*',
     '!src/text/Text.tsx',
     '!src/typograhy/Text.tsx',
+    '!src/table/DragTable.tsx',
   ],
   coverageDirectory: './coverage/',
   coveragePathIgnorePatterns: ['list-pro/'],

package.json

@@ -37,7 +37,8 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@gio-design/table": "7.17.1",
+    "@gio-design/table": "7.18.1-patch.1",
+    "@types/react-resizable": "^1.7.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.21.3",
     "lodash": "^4.17.14",
@@ -62,6 +63,8 @@
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^14.0.0",
     "react-lines-ellipsis": "^0.15.0",
+    "react-resizable": "^3.0.4",
+    "react-sortable-hoc": "^2.0.0",
     "react-truncate": "^2.4.0",
     "react-use": "^15.3.3",
     "react-virtualized": "^9.22.2",
@@ -75,8 +78,8 @@
     "@commitlint/config-conventional": "^13.1.0",
     "@formatjs/cli": "^4.2.31",
     "@formatjs/ts-transformer": "^3.4.8",
-    "@gio-design/icons": "^21.4.0",
-    "@gio-design/tokens": "^21.8.0",
+    "@gio-design/icons": "^21.9.1",
+    "@gio-design/tokens": "22.0.0-alpha.0",
     "@gio-design/utils": "21.8.6",
     "@storybook/addon-actions": "^6.3.7",
     "@storybook/addon-controls": "^6.3.7",

src/alert/Alert.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { usePrefixCls, useSize } from '@gio-design/utils';
+
+import _ from 'lodash';
+import {
+  CheckCircleFilled,
+  WarningCircleFilled,
+  InfoCircleFilled,
+  CloseCircleFilled,
+  CloseOutlined,
+} from '@gio-design/icons';
+import { PaletteGreen7, PaletteYellow7, PaletteRed5, PaletteBlue6 } from '@gio-design/tokens';
+import { AlertProps } from './interfaces';
+
+export const Alert: React.FC<AlertProps> = (props: AlertProps) => {
+  const prefixCls = usePrefixCls('alert');
+  const [alertStatus, setAlertStatus] = useState(true);
+  const { message, description, closeable, showIcon = false, onClose, icon, type, size: customizeSize, style } = props;
+
+  const size = useSize();
+  const mergedSize = customizeSize ?? size;
+  const getIcon = () => {
+    switch (type) {
+      case 'success':
+        return <CheckCircleFilled color={PaletteGreen7} />;
+      case 'warning':
+        return <WarningCircleFilled color={PaletteYellow7} />;
+      case 'error':
+        return <CloseCircleFilled color={PaletteRed5} />;
+      case 'info':
+        return <InfoCircleFilled color={PaletteBlue6} />;
+      default:
+        return icon || <InfoCircleFilled color={PaletteBlue6} />;
+    }
+  };
+
+  const closeAlert = () => {
+    setAlertStatus(false);
+    onClose?.();
+  };
+
+  return alertStatus ? (
+    <div style={style} className={classnames(prefixCls, `${prefixCls}-${mergedSize}`, `${prefixCls}-${type}`)}>
+      {showIcon && <div className={classnames(`${prefixCls}-icon`)}>{getIcon()}</div>}
+      <div className={classnames(`${prefixCls}-content`)}>
+        {message && <div className={classnames(`${prefixCls}-content-title`)}>{message}</div>}
+        {description && <div className={classnames(`${prefixCls}-content-description`)}>{description}</div>}
+      </div>
+      {closeable && (
+        <div
+          className={classnames(`${prefixCls}-closeIcon`)}
+          onClick={closeAlert}
+          role="button"
+          tabIndex={0}
+          onKeyPress={_.noop}
+        >
+          <CloseOutlined />
+        </div>
+      )}
+    </div>
+  ) : null;
+};
+
+export default Alert;

src/alert/__test__/alert.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Default } from '../demos/Alert.stories';
+import Alert from '../Alert';
+
+const props = {
+  showIcon: true,
+  closeable: true,
+  message: '标题',
+  description: '提示正文',
+};
+describe('Testing Alert', () => {
+  it('basic', () => {
+    render(<Default {...Default.args} />);
+  });
+
+  it('no description', () => {
+    render(<Alert />);
+  });
+
+  it('show icon', () => {
+    render(<Alert {...props} type="info" />);
+    expect(screen.getByText('提示正文')).toBeTruthy();
+  });
+
+  it('showIcon', () => {
+    render(<Alert showIcon closeable />);
+    fireEvent.click(screen.getByRole('button'));
+  });
+
+  it('showIcon', () => {
+    render(<Alert showIcon closeable icon={11} />);
+    fireEvent.click(screen.getByRole('button'));
+  });
+
+  it('can be close', () => {
+    const mockClick = jest.fn();
+    render(<Alert {...props} onClose={mockClick} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(mockClick).toBeCalled();
+  });
+});

src/alert/demos/Alert.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { action } from '@storybook/addon-actions';
+import Docs from './AlertPage';
+import Alert from '../index';
+import { AlertProps } from '../interfaces';
+import '../style';
+
+export default {
+  title: 'Feedback/Alert',
+  component: Alert,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+} as Meta;
+
+const Template: Story<AlertProps> = (args) => (
+  <div style={{ width: 320 }}>
+    <Alert {...args} type="info" size="small" />
+    <br />
+    <Alert {...args} type="warning" size="small" />
+    <br />
+    <Alert {...args} type="success" size="small" />
+    <br />
+    <Alert {...args} type="error" size="small" onClose={action('我被关闭了')} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  showIcon: true,
+  closeable: true,
+  message: '标题',
+  description: '提示正文',
+};
+
+export const NoDescription = Template.bind({});
+NoDescription.args = {
+  showIcon: true,
+  closeable: true,
+  message: '标题',
+};
+
+export const NoTitle = Template.bind({});
+NoTitle.args = {
+  showIcon: true,
+  closeable: true,
+  description: '提示正文',
+};
+
+export const NoIcon = Template.bind({});
+NoIcon.args = {
+  closeable: true,
+  message: '标题',
+  description: '提示正文',
+};
+
+export const NoClose = Template.bind({});
+NoClose.args = {
+  showIcon: true,
+  message: '标题',
+  description: '提示正文',
+};

src/alert/demos/AlertPage.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs';
+import { useIntl } from 'react-intl';
+import Alert from '../Alert';
+
+export default function ListPage() {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Title>{formatMessage({ defaultMessage: 'Alert 警告信息' })}</Title>
+      <p>
+        {formatMessage({
+          defaultMessage:
+            '当某个页面需要向用户显示警告、提示的信息时使用，这部分信息是用户必须了解的，例如未对公众号进行授权则影响某些功能的使用。通常为页面级提示信息，提示重要性高，通常位置在页面或弹窗顶部。Alert宽度根据不同使用场景，可以设置为固定宽度，内容超长时，换行展示。',
+        })}
+      </p>
+      <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
+      <Subheading>{formatMessage({ defaultMessage: 'Icon、标题、正文、关闭按钮' })}</Subheading>
+      <Canvas>
+        <Story id="feedback-alert--default" />
+      </Canvas>
+
+      <Subheading>{formatMessage({ defaultMessage: 'Icon & 标题 & 关闭' })}</Subheading>
+      <Canvas>
+        <Story id="feedback-alert--no-description" />
+      </Canvas>
+
+      <Subheading>{formatMessage({ defaultMessage: 'Icon & 正文 & 关闭' })}</Subheading>
+      <Canvas>
+        <Story id="feedback-alert--no-title" />
+      </Canvas>
+
+      <Subheading>{formatMessage({ defaultMessage: '标题 & 正文 & 关闭' })}</Subheading>
+      <Canvas>
+        <Story id="feedback-alert--no-icon" />
+      </Canvas>
+
+      <Subheading>{formatMessage({ defaultMessage: 'Icon & 标题 & 正文 ' })}</Subheading>
+      <Canvas>
+        <Story id="feedback-alert--no-close" />
+      </Canvas>
+
+      <Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>
+      <ArgsTable of={Alert} />
+    </>
+  );
+}

src/components/alert/index.tsx → src/alert/index.tsx

@@ -1,4 +1,4 @@
-import Alert from './alert';
+import Alert from './Alert';
 
 export { AlertProps } from './interfaces';
 export default Alert;

src/components/alert/style/index.less → src/alert/style/index.less

@@ -1,4 +1,4 @@
-@import '../../../stylesheet/index.less';
+@import '../../stylesheet/index.less';
 
 @alert-prefix-cls: ~'@{component-prefix}-alert';
 

src/components/avatar/Avatar.tsx → src/avatar/Avatar.tsx

@@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { MoreOutlined, UserOutlined } from '@gio-design/icons';
 import { isNil, isUndefined } from 'lodash';
+import { usePrefixCls } from '@gio-design/utils';
 import Tooltip from '../tooltip';
 import { AvatarProps } from './interfaces';
-import usePrefixCls from '../../utils/hooks/use-prefix-cls';
-import composeRef from '../../utils/composeRef';
+import composeRef from '../utils/composeRef';
 
 const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProps, ref: React.Ref<HTMLSpanElement>) => {
   const {
@@ -72,11 +72,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProp
       return <img alt="avatar" src={src} onError={() => setIsImgExist(false)} />;
     }
     if (icon) {
-      return (
-        <span className={`${prefixCls}-default ${prefixCls}-icon`}>
-          {icon}
-        </span>
-      );
+      return <span className={`${prefixCls}-default ${prefixCls}-icon`}>{icon}</span>;
     }
     if (!userName) {
       return (
@@ -108,7 +104,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>((props: AvatarProp
   return renderTooltip(
     // For Dropdown trigger will set Event on rest
     // eslint-disable-next-line react/jsx-props-no-spreading
-    <span ref={mergedRef} className={classString} {...rest} style={{backgroundColor}}>
+    <span ref={mergedRef} className={classString} {...rest} style={{ backgroundColor }}>
       {renderMore()}
       {renderAvatar()}
     </span>

src/components/avatar/AvatarGroup.tsx → src/avatar/AvatarGroup.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 import _ from 'lodash';
+import { usePrefixCls } from '@gio-design/utils';
 import Avatar from './Avatar';
 import { AvatarGroupProps, UserAvatarType } from './interfaces';
-import usePrefixCls from '../../utils/hooks/use-prefix-cls';
 
 const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
   const { number = 5, users = [], className, placement = 'bottom', style, displayTooltip = true } = props;

src/components/avatar/__tests__/Avatar.test.tsx → src/avatar/__tests__/Avatar.test.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PlusCircleFilled } from '@gio-design/icons';
 import Avatar from '../index';
-import Dropdown from '../../dropdown';
+import Dropdown from '../../components/dropdown';
 import AvatarGroup from '../AvatarGroup';
-import { Default } from '../Avatar.stories';
+import { Default } from '../demos/Avatar.stories';
 
 describe('Testing Avatar', () => {
   const users = [
@@ -76,7 +76,9 @@ describe('Testing Avatar', () => {
   });
 
   it('props users', () => {
-    const { container } = render(<AvatarGroup users={[]} number={4} placement="bottom" displayTooltip />);
+    const { container } = render(
+      <AvatarGroup users={[]} number={4} placement="bottom" className="display-avatar" style={{}} displayTooltip />
+    );
     expect(container.getElementsByClassName('gio-avatar-group')).toBeTruthy();
   });
 

src/components/avatar/Avatar.stories.tsx → src/avatar/demos/Avatar.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { HomeFilled } from '@gio-design/icons';
-import Docs from './Avatar.mdx';
-import Avatar, { AvatarGroup, AvatarGroupProps, AvatarProps } from './index';
-import './style';
-import './style/demo.stories.less';
+import Docs from './AvatarPage';
+import Avatar, { AvatarGroup, AvatarGroupProps, AvatarProps } from '../index';
+import '../style';
+import '../style/demo.stories.less';
 import image from '../../assets/images/Avatar.png';
 
 export default {
-  title: 'Functional Components/Avatar',
+  title: 'Data Display/Avatar',
   component: Avatar,
   parameters: {
     docs: {