新的组件工具 New Compoent Utils

docs/PRINCIPLE.md

@@ -52,7 +52,7 @@ Let's take the component `Button` as an example:
 import classNames from 'classnames';
 import { omit } from 'lodash-es';
 import React from 'react';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import { LoadingSpinner } from '../Loading';
 
 export interface ButtonStylingProps {
@@ -69,7 +69,7 @@ export interface ButtonFeatureProps extends React.ButtonHTMLAttributes<HTMLButto
   loading?: boolean;
 }
 
-export const Button = UUI.FunctionComponent({
+export const Button = UUIFunctionComponent({
   name: 'Button',
   nodes: {
     Root: 'button',
@@ -96,7 +96,7 @@ export const Button = UUI.FunctionComponent({
   )
 })
 
-export type ButtonProps = Parameters<typeof Button>[0]
+export type ButtonProps = UUIFunctionComponentProps<typeof Button>
 ```
 
 The first is that we define two Props, namely `ButtonStylingProps` and `ButtonFeatureProps`. These two Props are used as attributes of the feature function of the component `Button`, so they are defined in the `src/components/Button/Button.tsx` file instead of the `src/core/uui.tsx` file.
@@ -298,7 +298,7 @@ UUI's components support defining the `prefix` and `separator` of the component
 For example, we can define a component during the development phase:
 
 ```tsx
-const Test = UUI.FunctionComponent({
+const Test = UUIFunctionComponent({
   prefix: "XUI",
   name: "Test",
   separator: "+",

docs/PRINCIPLE.zh-CN.md

@@ -52,7 +52,7 @@ UUI 的 UI 组件有一些共有通用的功能，为了不重复在每个组件
 import classNames from 'classnames';
 import { omit } from 'lodash-es';
 import React from 'react';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import { LoadingSpinner } from '../Loading';
 
 export interface ButtonStylingProps {
@@ -69,7 +69,7 @@ export interface ButtonFeatureProps extends React.ButtonHTMLAttributes<HTMLButto
   loading?: boolean;
 }
 
-export const Button = UUI.FunctionComponent({
+export const Button = UUIFunctionComponent({
   name: 'Button',
   nodes: {
     Root: 'button',
@@ -96,7 +96,7 @@ export const Button = UUI.FunctionComponent({
   )
 })
 
-export type ButtonProps = Parameters<typeof Button>[0]
+export type ButtonProps = UUIFunctionComponentProps<typeof Button>
 ```
 
 首先是我们定义了两个 Props，分别是 `ButtonStylingProps` 和 `ButtonFeatureProps`。这两个 Props 是作为 `按钮 Button` 这个组件业务功能的属性，所以它们被定义在了 `src/components/Button/Button.tsx` 文件，而不是 `src/core/uui.tsx` 文件里。
@@ -299,7 +299,7 @@ UUI 的组件支持在开发阶段和使用阶段定义组件的前缀和分隔
 比如我们可以在开发阶段定义一个组件：
 
 ```tsx
-const Test = UUI.FunctionComponent({
+const Test = UUIFunctionComponent({
   prefix: "XUI",
   name: "Test",
   separator: "+",

jest.config.js

@@ -7,7 +7,8 @@ module.exports = {
   ],
   transform: {
     "^.+\\.js$": "babel-jest",
-    "^.+\\.(ts|tsx)$": "ts-jest"
+    "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.svg$": "jest-svg-transformer"
   },
   transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es|other-es-lib))"]
 };

package.json

@@ -23,6 +23,7 @@
   "scripts": {
     "lint": "eslint 'src/**/*.{js,ts,tsx}'",
     "test": "jest",
+    "cleantest": "jest --clearCache && jest",
     "build": "NODE_ENV=production rollup -c",
     "cleanbuild": "rimraf lib && yarn build",
     "pack:uui": "yarn cleanbuild && yarn pack",
@@ -80,6 +81,7 @@
     "file-loader": "^6.0.0",
     "github-markdown-css": "^4.0.0",
     "jest": "^26.1.0",
+    "jest-svg-transformer": "^1.0.0",
     "lodash-es": "^4.17.15",
     "netlify-cli": "^2.40.0",
     "npm-run-all": "^4.1.5",

src/UUIProvider.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { UUIComponentNames } from './components/UUIComponentNames';
+import type { AccordionProps } from './components/Accordion/Accordion';
+import type { AccordionPaneProps } from './components/Accordion/AccordionPane';
+import type { BreadcrumbProps } from './components/Breadcrumb/Breadcrumb';
+import type { ButtonProps } from './components/Button/Button';
+import type { CascaderProps } from './components/Cascader/Cascader';
+import type { CheckboxProps } from './components/Checkbox/Checkbox';
+import type { CollapseProps } from './components/Collapse/Collapse';
+import type { DatePickerProps } from './components/DatePicker/DatePicker';
+import type { DialogProps } from './components/Dialog/Dialog';
+import type { DrawerProps } from './components/Drawer/Drawer';
+import type { IconProps } from './components/Icon/Icon';
+import type { TextFieldProps } from './components/Input/TextField';
+import type { NumberFieldProps } from './components/Input/NumberField';
+import type { TextAreaProps } from './components/Input/TextArea';
+import type { CountdownLabelProps } from './components/Label/CountdownLabel';
+import type { DateLabelProps } from './components/Label/DateLabel';
+import type { MoneyLabelProps } from './components/Label/MoneyLabel';
+import type { NumberAbbrLabelProps } from './components/Label/NumberAbbrLabel';
+import type { TimeLabelProps } from './components/Label/TimeLabel';
+import type { LayoutProps } from './components/Layout/Layout';
+import type { LayoutAsideProps } from './components/Layout/LayoutAside';
+import type { LayoutFooterProps } from './components/Layout/LayoutFooter';
+import type { LayoutHeaderProps } from './components/Layout/LayoutHeader';
+import type { LayoutMainProps } from './components/Layout/LayoutMain';
+import type { LayoutNavProps } from './components/Layout/LayoutNav';
+import type { ListBoxProps } from './components/ListBox/ListBox';
+import type { LoadingCoverProps } from './components/Loading/LoadingCover';
+import type { LoadingSpinnerProps } from './components/Loading/LoadingSpinner';
+import type { PageProps } from './components/Page/Page';
+import type { PageAnnotatedSectionProps } from './components/Page/PageAnnotatedSection';
+import type { PageSectionProps } from './components/Page/PageSection';
+import type { PaginationProps } from './components/Pagination/Pagination';
+import type { PageInfoProps } from './components/Pagination/PageInfo';
+import type { PageJumperProps } from './components/Pagination/PageJumper';
+import type { PageListProps } from './components/Pagination/PageList';
+import type { PageNextButtonProps } from './components/Pagination/PageNextButton';
+import type { PagePrevButtonProps } from './components/Pagination/PagePrevButton';
+import type { PageSelectorProps } from './components/Pagination/PageSelector';
+import type { PageSizeProps } from './components/Pagination/PageSize';
+import type { PopoverProps } from './components/Popover/Popover';
+import type { ProgressBarProps } from './components/ProgressBar/ProgressBar';
+import type { RadioProps } from './components/Radio/Radio';
+import type { RadioGroupProps } from './components/Radio/RadioGroup';
+import type { SegmentControlProps } from './components/SegmentControl/SegmentControl';
+import type { HTMLSelectProps } from './components/Select/HTMLSelect';
+import type { SelectProps } from './components/Select/Select';
+import type { SkeletonProps } from './components/Skeleton/Skeleton';
+import type { SkeletonParagraphProps } from './components/Skeleton/Paragraph';
+import type { SkeletonPictureProps } from './components/Skeleton/Picture';
+import type { SkeletonTitleProps } from './components/Skeleton/Title';
+import type { SliderProps } from './components/Slider/Slider';
+import type { StepperProps } from './components/Stepper/Stepper';
+import type { SwitchProps } from './components/Switch/Switch';
+import type { TableProps } from './components/Table/Table';
+import type { TabsProps } from './components/Tabs/Tabs';
+import type { TabProps } from './components/Tabs/Tab';
+import type { TagProps } from './components/Tag/Tag';
+import type { ToastProps } from './components/Toast/Toast';
+import type { ToasterProps } from './components/Toast/Toaster';
+
+
+export interface UUIProviderCustomize {
+  [UUIComponentNames.Accordion]?: AccordionProps['customize'];
+  [UUIComponentNames.AccordionPane]?: AccordionPaneProps['customize'];
+  [UUIComponentNames.Breadcrumb]?: BreadcrumbProps['customize'];
+  [UUIComponentNames.Button]?: ButtonProps['customize'];
+  [UUIComponentNames.Cascader]?: CascaderProps['customize'];
+  [UUIComponentNames.Checkbox]?: CheckboxProps['customize'];
+  [UUIComponentNames.Collapse]?: CollapseProps['customize'];
+  [UUIComponentNames.DatePicker]?: DatePickerProps['customize'];
+  [UUIComponentNames.Dialog]?: DialogProps['customize'];
+  [UUIComponentNames.Drawer]?: DrawerProps['customize'];
+  [UUIComponentNames.Icon]?: IconProps['customize'];
+  [UUIComponentNames.TextField]?: TextFieldProps['customize'];
+  [UUIComponentNames.NumberField]?: NumberFieldProps['customize'];
+  [UUIComponentNames.TextArea]?: TextAreaProps['customize'];
+  [UUIComponentNames.CountdownLabel]?: CountdownLabelProps['customize'];
+  [UUIComponentNames.DateLabel]?: DateLabelProps['customize'];
+  [UUIComponentNames.MoneyLabel]?: MoneyLabelProps['customize'];
+  [UUIComponentNames.NumberAbbrLabel]?: NumberAbbrLabelProps['customize'];
+  [UUIComponentNames.TimeLabel]?: TimeLabelProps['customize'];
+  [UUIComponentNames.Layout]?: LayoutProps['customize'];
+  [UUIComponentNames.LayoutAside]?: LayoutAsideProps['customize'];
+  [UUIComponentNames.LayoutFooter]?: LayoutFooterProps['customize'];
+  [UUIComponentNames.LayoutHeader]?: LayoutHeaderProps['customize'];
+  [UUIComponentNames.LayoutMain]?: LayoutMainProps['customize'];
+  [UUIComponentNames.LayoutNav]?: LayoutNavProps['customize'];
+  [UUIComponentNames.ListBox]?: ListBoxProps['customize'];
+  [UUIComponentNames.LoadingCover]?: LoadingCoverProps['customize'];
+  [UUIComponentNames.LoadingSpinner]?: LoadingSpinnerProps['customize'];
+  [UUIComponentNames.Page]?: PageProps['customize'];
+  [UUIComponentNames.PageAnnotatedSection]?: PageAnnotatedSectionProps['customize'];
+  [UUIComponentNames.PageSection]?: PageSectionProps['customize'];
+  [UUIComponentNames.Pagination]?: PaginationProps['customize'];
+  [UUIComponentNames.PageInfo]?: PageInfoProps['customize'];
+  [UUIComponentNames.PageJumper]?: PageJumperProps['customize'];
+  [UUIComponentNames.PageList]?: PageListProps['customize'];
+  [UUIComponentNames.PageNextButton]?: PageNextButtonProps['customize'];
+  [UUIComponentNames.PagePrevButton]?: PagePrevButtonProps['customize'];
+  [UUIComponentNames.PageSelector]?: PageSelectorProps['customize'];
+  [UUIComponentNames.PageSize]?: PageSizeProps['customize'];
+  [UUIComponentNames.Popover]?: PopoverProps['customize'];
+  [UUIComponentNames.ProgressBar]?: ProgressBarProps['customize'];
+  [UUIComponentNames.Radio]?: RadioProps['customize'];
+  [UUIComponentNames.RadioGroup]?: RadioGroupProps['customize'];
+  [UUIComponentNames.SegmentControl]?: SegmentControlProps['customize'];
+  [UUIComponentNames.HTMLSelect]?: HTMLSelectProps['customize'];
+  [UUIComponentNames.Select]?: SelectProps['customize'];
+  [UUIComponentNames.Skeleton]?: SkeletonProps['customize'];
+  [UUIComponentNames.SkeletonParagraph]?: SkeletonParagraphProps['customize'];
+  [UUIComponentNames.SkeletonPicture]?: SkeletonPictureProps['customize'];
+  [UUIComponentNames.SkeletonTitle]?: SkeletonTitleProps['customize'];
+  [UUIComponentNames.Slider]?: SliderProps['customize'];
+  [UUIComponentNames.Stepper]?: StepperProps['customize'];
+  [UUIComponentNames.Switch]?: SwitchProps['customize'];
+  [UUIComponentNames.Table]?: TableProps['customize'];
+  [UUIComponentNames.Tabs]?: TabsProps['customize'];
+  [UUIComponentNames.Tab]?: TabProps['customize'];
+  [UUIComponentNames.Tag]?: TagProps['customize'];
+  [UUIComponentNames.Toast]?: ToastProps['customize'];
+  [UUIComponentNames.Toaster]?: ToasterProps['customize'];
+}
+
+export type UUIProviderExtraCustomizeT = { [key: string]: any }
+
+export interface UUIProviderContextValue<C extends UUIProviderExtraCustomizeT> {
+  customize?: C & UUIProviderCustomize;
+  options?: {
+    prefix?: string;
+    separator?: string;
+  };
+}
+export const UUIProviderContext = React.createContext<UUIProviderContextValue<any> | null>(null)
+
+export interface UUIProviderProps<C extends UUIProviderExtraCustomizeT> extends UUIProviderContextValue<C> {
+  children: React.ReactNode;
+}
+export function UUIProvider<C extends UUIProviderExtraCustomizeT>(props: UUIProviderProps<C>) {
+  return (
+    <UUIProviderContext.Provider value={{
+      customize: props.customize,
+      options: props.options,
+    }}>
+      {props.children}
+    </UUIProviderContext.Provider>
+  );
+}

src/components/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import { Collapse } from '../Collapse';
 import { createGroupedComponent } from '../../utils/createGroupedComponent';
 import { AccordionPane, AccordionPaneProps } from './AccordionPane';
@@ -11,7 +11,7 @@ export interface AccordionFeatureProps {
   children: React.ReactElement<AccordionPaneProps>[];
 }
 
-const _Accordion = UUI.FunctionComponent({
+const _Accordion = UUIFunctionComponent({
   name: 'Accordion',
   nodes: {
     Root: 'div',
@@ -64,7 +64,7 @@ const _Accordion = UUI.FunctionComponent({
   )
 })
 
-export type AccordionProps = Parameters<typeof _Accordion>[0]
+export type AccordionProps = UUIFunctionComponentProps<typeof _Accordion>
 
 const Accordion = createGroupedComponent(_Accordion, {
   Pane: AccordionPane,

src/components/Accordion/AccordionPane.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import { Collapse } from '../Collapse';
 import { Icons } from '../../icons/Icons';
 import classNames from 'classnames';
@@ -13,7 +13,7 @@ export interface AccordionPaneFeatureProps {
   disabled?: boolean;
 }
 
-export const AccordionPane = UUI.FunctionComponent({
+export const AccordionPane = UUIFunctionComponent({
   name: 'AccordionPane',
   nodes: {
     Root: 'div',
@@ -88,4 +88,4 @@ export const AccordionPane = UUI.FunctionComponent({
   )
 })
 
-export type AccordionPaneProps = Parameters<typeof AccordionPane>[0]
+export type AccordionPaneProps = UUIFunctionComponentProps<typeof AccordionPane>

src/components/Accordion/index.ts

@@ -1 +1,2 @@
-export * from './Accordion'
+export * from './Accordion'
+export * from './AccordionPane'

src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import ReactHelper from '../../utils/ReactHelper';
 import classNames from 'classnames';
 
@@ -16,7 +16,7 @@ export interface BreadcrumbFeatureProps {
   items: BreadcrumbItem[];
 }
 
-export const Breadcrumb = UUI.FunctionComponent({
+export const Breadcrumb = UUIFunctionComponent({
   name: 'Breadcrumb',
   nodes: {
     Root: 'nav',
@@ -62,4 +62,4 @@ export const Breadcrumb = UUI.FunctionComponent({
   )
 })
 
-export type BreadcrumbProps = Parameters<typeof Breadcrumb>[0]
+export type BreadcrumbProps = UUIFunctionComponentProps<typeof Breadcrumb>

src/components/Button/Button.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { omit } from 'lodash-es';
 import React, { useRef } from 'react';
-import { UUI, UUIFunctionComponentProps } from '../../core/uui';
 import { LoadingSpinner } from '../Loading';
 import { KeyCode } from '../../utils/keyboardHelper';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 
 export interface ButtonStylingProps {
   styling?: {
@@ -19,7 +19,7 @@ export interface ButtonFeatureProps extends React.ButtonHTMLAttributes<HTMLButto
   loading?: boolean;
 }
 
-export const Button = UUI.FunctionComponent({
+export const Button = UUIFunctionComponent({
   name: 'Button',
   nodes: {
     Root: 'button',

src/components/Cascader/Cascader.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useCallback } from 'react';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import { Popover, PopoverPlacement } from '../Popover';
 import { ListBox as UUIListBox, ListBoxItem } from '../ListBox';
 import { TextField as UUITextField } from '../Input';
@@ -91,7 +91,7 @@ export interface CascaderFeatureProps {
   portalContainer?: HTMLElement;
 }
 
-export const Cascader = UUI.FunctionComponent({
+export const Cascader = UUIFunctionComponent({
   name: 'Cascader',
   nodes: {
     Root: 'div',
@@ -375,7 +375,7 @@ export const Cascader = UUI.FunctionComponent({
   )
 })
 
-export type CascaderProps = Parameters<typeof Cascader>[0]
+export type CascaderProps = UUIFunctionComponentProps<typeof Cascader>
 
 function findOneInAllOptions(value: string | null, options: CascaderOption[]): CascaderOption | null {
   if (value === null) return null

src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { omit } from 'lodash-es';
 import classNames from 'classnames';
-import { UUI } from '../../core/uui';
+import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
 import { KeyCode } from '../../utils/keyboardHelper';
 
 export interface CheckboxFeatureProps {
@@ -34,7 +34,7 @@ export interface CheckboxFeatureProps {
   disabled?: boolean;
 }
 
-export const Checkbox = UUI.FunctionComponent({
+export const Checkbox = UUIFunctionComponent({
   name: 'Checkbox',
   nodes: {
     Root: 'label',
@@ -88,4 +88,4 @@ export const Checkbox = UUI.FunctionComponent({
   )
 })
 
-export type CheckboxProps = Parameters<typeof Checkbox>[0]
+export type CheckboxProps = UUIFunctionComponentProps<typeof Checkbox>