Skip to content

Commit fba6f5a

Browse files
shincurryshincurry
authored
Merge pull request #55 from HackPlan/feature/core
New Compoent Utils
2 parents 7bbb4b4 + 5bf8c17 commit fba6f5a

File tree

89 files changed

+1605
-839
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+1605
-839
lines changed

‎docs/PRINCIPLE.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Let's take the component `Button` as an example:
5252
import classNames from 'classnames';
5353
import { omit } from 'lodash-es';
5454
import React from 'react';
55-
import { UUI } from '../../core/uui';
55+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
5656
import { LoadingSpinner } from '../Loading';
5757

5858
export interface ButtonStylingProps {
@@ -69,7 +69,7 @@ export interface ButtonFeatureProps extends React.ButtonHTMLAttributes<HTMLButto
6969
loading?: boolean;
7070
}
7171

72-
export const Button = UUI.FunctionComponent({
72+
export const Button = UUIFunctionComponent({
7373
name: 'Button',
7474
nodes: {
7575
Root: 'button',
@@ -96,7 +96,7 @@ export const Button = UUI.FunctionComponent({
9696
)
9797
})
9898

99-
export type ButtonProps = Parameters<typeof Button>[0]
99+
export type ButtonProps = UUIFunctionComponentProps<typeof Button>
100100
```
101101
102102
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
298298
For example, we can define a component during the development phase:
299299
300300
```tsx
301-
const Test = UUI.FunctionComponent({
301+
const Test = UUIFunctionComponent({
302302
prefix: "XUI",
303303
name: "Test",
304304
separator: "+",

‎docs/PRINCIPLE.zh-CN.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ UUI 的 UI 组件有一些共有通用的功能，为了不重复在每个组件
5252
import classNames from 'classnames';
5353
import { omit } from 'lodash-es';
5454
import React from 'react';
55-
import { UUI } from '../../core/uui';
55+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
5656
import { LoadingSpinner } from '../Loading';
5757

5858
export interface ButtonStylingProps {
@@ -69,7 +69,7 @@ export interface ButtonFeatureProps extends React.ButtonHTMLAttributes<HTMLButto
6969
loading?: boolean;
7070
}
7171

72-
export const Button = UUI.FunctionComponent({
72+
export const Button = UUIFunctionComponent({
7373
name: 'Button',
7474
nodes: {
7575
Root: 'button',
@@ -96,7 +96,7 @@ export const Button = UUI.FunctionComponent({
9696
)
9797
})
9898

99-
export type ButtonProps = Parameters<typeof Button>[0]
99+
export type ButtonProps = UUIFunctionComponentProps<typeof Button>
100100
```
101101
102102
首先是我们定义了两个 Props，分别是 `ButtonStylingProps` 和 `ButtonFeatureProps`。这两个 Props 是作为 `按钮 Button` 这个组件业务功能的属性，所以它们被定义在了 `src/components/Button/Button.tsx` 文件，而不是 `src/core/uui.tsx` 文件里。
@@ -299,7 +299,7 @@ UUI 的组件支持在开发阶段和使用阶段定义组件的前缀和分隔
299299
比如我们可以在开发阶段定义一个组件：
300300
301301
```tsx
302-
const Test = UUI.FunctionComponent({
302+
const Test = UUIFunctionComponent({
303303
prefix: "XUI",
304304
name: "Test",
305305
separator: "+",

‎jest.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ module.exports = {
77
],
88
transform: {
99
"^.+\\.js$": "babel-jest",
10-
"^.+\\.(ts|tsx)$": "ts-jest"
10+
"^.+\\.(ts|tsx)$": "ts-jest",
11+
"^.+\\.svg$": "jest-svg-transformer"
1112
},
1213
transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es|other-es-lib))"]
1314
};

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"scripts": {
2424
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
2525
"test": "jest",
26+
"cleantest": "jest --clearCache && jest",
2627
"build": "NODE_ENV=production rollup -c",
2728
"cleanbuild": "rimraf lib && yarn build",
2829
"pack:uui": "yarn cleanbuild && yarn pack",
@@ -80,6 +81,7 @@
8081
"file-loader": "^6.0.0",
8182
"github-markdown-css": "^4.0.0",
8283
"jest": "^26.1.0",
84+
"jest-svg-transformer": "^1.0.0",
8385
"lodash-es": "^4.17.15",
8486
"netlify-cli": "^2.40.0",
8587
"npm-run-all": "^4.1.5",

‎src/UUIProvider.tsx

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React from 'react';
2+
3+
import { UUIComponentNames } from './components/UUIComponentNames';
4+
import type { AccordionProps } from './components/Accordion/Accordion';
5+
import type { AccordionPaneProps } from './components/Accordion/AccordionPane';
6+
import type { BreadcrumbProps } from './components/Breadcrumb/Breadcrumb';
7+
import type { ButtonProps } from './components/Button/Button';
8+
import type { CascaderProps } from './components/Cascader/Cascader';
9+
import type { CheckboxProps } from './components/Checkbox/Checkbox';
10+
import type { CollapseProps } from './components/Collapse/Collapse';
11+
import type { DatePickerProps } from './components/DatePicker/DatePicker';
12+
import type { DialogProps } from './components/Dialog/Dialog';
13+
import type { DrawerProps } from './components/Drawer/Drawer';
14+
import type { IconProps } from './components/Icon/Icon';
15+
import type { TextFieldProps } from './components/Input/TextField';
16+
import type { NumberFieldProps } from './components/Input/NumberField';
17+
import type { TextAreaProps } from './components/Input/TextArea';
18+
import type { CountdownLabelProps } from './components/Label/CountdownLabel';
19+
import type { DateLabelProps } from './components/Label/DateLabel';
20+
import type { MoneyLabelProps } from './components/Label/MoneyLabel';
21+
import type { NumberAbbrLabelProps } from './components/Label/NumberAbbrLabel';
22+
import type { TimeLabelProps } from './components/Label/TimeLabel';
23+
import type { LayoutProps } from './components/Layout/Layout';
24+
import type { LayoutAsideProps } from './components/Layout/LayoutAside';
25+
import type { LayoutFooterProps } from './components/Layout/LayoutFooter';
26+
import type { LayoutHeaderProps } from './components/Layout/LayoutHeader';
27+
import type { LayoutMainProps } from './components/Layout/LayoutMain';
28+
import type { LayoutNavProps } from './components/Layout/LayoutNav';
29+
import type { ListBoxProps } from './components/ListBox/ListBox';
30+
import type { LoadingCoverProps } from './components/Loading/LoadingCover';
31+
import type { LoadingSpinnerProps } from './components/Loading/LoadingSpinner';
32+
import type { PageProps } from './components/Page/Page';
33+
import type { PageAnnotatedSectionProps } from './components/Page/PageAnnotatedSection';
34+
import type { PageSectionProps } from './components/Page/PageSection';
35+
import type { PaginationProps } from './components/Pagination/Pagination';
36+
import type { PageInfoProps } from './components/Pagination/PageInfo';
37+
import type { PageJumperProps } from './components/Pagination/PageJumper';
38+
import type { PageListProps } from './components/Pagination/PageList';
39+
import type { PageNextButtonProps } from './components/Pagination/PageNextButton';
40+
import type { PagePrevButtonProps } from './components/Pagination/PagePrevButton';
41+
import type { PageSelectorProps } from './components/Pagination/PageSelector';
42+
import type { PageSizeProps } from './components/Pagination/PageSize';
43+
import type { PopoverProps } from './components/Popover/Popover';
44+
import type { ProgressBarProps } from './components/ProgressBar/ProgressBar';
45+
import type { RadioProps } from './components/Radio/Radio';
46+
import type { RadioGroupProps } from './components/Radio/RadioGroup';
47+
import type { SegmentControlProps } from './components/SegmentControl/SegmentControl';
48+
import type { HTMLSelectProps } from './components/Select/HTMLSelect';
49+
import type { SelectProps } from './components/Select/Select';
50+
import type { SkeletonProps } from './components/Skeleton/Skeleton';
51+
import type { SkeletonParagraphProps } from './components/Skeleton/Paragraph';
52+
import type { SkeletonPictureProps } from './components/Skeleton/Picture';
53+
import type { SkeletonTitleProps } from './components/Skeleton/Title';
54+
import type { SliderProps } from './components/Slider/Slider';
55+
import type { StepperProps } from './components/Stepper/Stepper';
56+
import type { SwitchProps } from './components/Switch/Switch';
57+
import type { TableProps } from './components/Table/Table';
58+
import type { TabsProps } from './components/Tabs/Tabs';
59+
import type { TabProps } from './components/Tabs/Tab';
60+
import type { TagProps } from './components/Tag/Tag';
61+
import type { ToastProps } from './components/Toast/Toast';
62+
import type { ToasterProps } from './components/Toast/Toaster';
63+
64+
65+
export interface UUIProviderCustomize {
66+
[UUIComponentNames.Accordion]?: AccordionProps['customize'];
67+
[UUIComponentNames.AccordionPane]?: AccordionPaneProps['customize'];
68+
[UUIComponentNames.Breadcrumb]?: BreadcrumbProps['customize'];
69+
[UUIComponentNames.Button]?: ButtonProps['customize'];
70+
[UUIComponentNames.Cascader]?: CascaderProps['customize'];
71+
[UUIComponentNames.Checkbox]?: CheckboxProps['customize'];
72+
[UUIComponentNames.Collapse]?: CollapseProps['customize'];
73+
[UUIComponentNames.DatePicker]?: DatePickerProps['customize'];
74+
[UUIComponentNames.Dialog]?: DialogProps['customize'];
75+
[UUIComponentNames.Drawer]?: DrawerProps['customize'];
76+
[UUIComponentNames.Icon]?: IconProps['customize'];
77+
[UUIComponentNames.TextField]?: TextFieldProps['customize'];
78+
[UUIComponentNames.NumberField]?: NumberFieldProps['customize'];
79+
[UUIComponentNames.TextArea]?: TextAreaProps['customize'];
80+
[UUIComponentNames.CountdownLabel]?: CountdownLabelProps['customize'];
81+
[UUIComponentNames.DateLabel]?: DateLabelProps['customize'];
82+
[UUIComponentNames.MoneyLabel]?: MoneyLabelProps['customize'];
83+
[UUIComponentNames.NumberAbbrLabel]?: NumberAbbrLabelProps['customize'];
84+
[UUIComponentNames.TimeLabel]?: TimeLabelProps['customize'];
85+
[UUIComponentNames.Layout]?: LayoutProps['customize'];
86+
[UUIComponentNames.LayoutAside]?: LayoutAsideProps['customize'];
87+
[UUIComponentNames.LayoutFooter]?: LayoutFooterProps['customize'];
88+
[UUIComponentNames.LayoutHeader]?: LayoutHeaderProps['customize'];
89+
[UUIComponentNames.LayoutMain]?: LayoutMainProps['customize'];
90+
[UUIComponentNames.LayoutNav]?: LayoutNavProps['customize'];
91+
[UUIComponentNames.ListBox]?: ListBoxProps['customize'];
92+
[UUIComponentNames.LoadingCover]?: LoadingCoverProps['customize'];
93+
[UUIComponentNames.LoadingSpinner]?: LoadingSpinnerProps['customize'];
94+
[UUIComponentNames.Page]?: PageProps['customize'];
95+
[UUIComponentNames.PageAnnotatedSection]?: PageAnnotatedSectionProps['customize'];
96+
[UUIComponentNames.PageSection]?: PageSectionProps['customize'];
97+
[UUIComponentNames.Pagination]?: PaginationProps['customize'];
98+
[UUIComponentNames.PageInfo]?: PageInfoProps['customize'];
99+
[UUIComponentNames.PageJumper]?: PageJumperProps['customize'];
100+
[UUIComponentNames.PageList]?: PageListProps['customize'];
101+
[UUIComponentNames.PageNextButton]?: PageNextButtonProps['customize'];
102+
[UUIComponentNames.PagePrevButton]?: PagePrevButtonProps['customize'];
103+
[UUIComponentNames.PageSelector]?: PageSelectorProps['customize'];
104+
[UUIComponentNames.PageSize]?: PageSizeProps['customize'];
105+
[UUIComponentNames.Popover]?: PopoverProps['customize'];
106+
[UUIComponentNames.ProgressBar]?: ProgressBarProps['customize'];
107+
[UUIComponentNames.Radio]?: RadioProps['customize'];
108+
[UUIComponentNames.RadioGroup]?: RadioGroupProps['customize'];
109+
[UUIComponentNames.SegmentControl]?: SegmentControlProps['customize'];
110+
[UUIComponentNames.HTMLSelect]?: HTMLSelectProps['customize'];
111+
[UUIComponentNames.Select]?: SelectProps['customize'];
112+
[UUIComponentNames.Skeleton]?: SkeletonProps['customize'];
113+
[UUIComponentNames.SkeletonParagraph]?: SkeletonParagraphProps['customize'];
114+
[UUIComponentNames.SkeletonPicture]?: SkeletonPictureProps['customize'];
115+
[UUIComponentNames.SkeletonTitle]?: SkeletonTitleProps['customize'];
116+
[UUIComponentNames.Slider]?: SliderProps['customize'];
117+
[UUIComponentNames.Stepper]?: StepperProps['customize'];
118+
[UUIComponentNames.Switch]?: SwitchProps['customize'];
119+
[UUIComponentNames.Table]?: TableProps['customize'];
120+
[UUIComponentNames.Tabs]?: TabsProps['customize'];
121+
[UUIComponentNames.Tab]?: TabProps['customize'];
122+
[UUIComponentNames.Tag]?: TagProps['customize'];
123+
[UUIComponentNames.Toast]?: ToastProps['customize'];
124+
[UUIComponentNames.Toaster]?: ToasterProps['customize'];
125+
}
126+
127+
export type UUIProviderExtraCustomizeT = { [key: string]: any }
128+
129+
export interface UUIProviderContextValue<C extends UUIProviderExtraCustomizeT> {
130+
customize?: C & UUIProviderCustomize;
131+
options?: {
132+
prefix?: string;
133+
separator?: string;
134+
};
135+
}
136+
export const UUIProviderContext = React.createContext<UUIProviderContextValue<any> | null>(null)
137+
138+
export interface UUIProviderProps<C extends UUIProviderExtraCustomizeT> extends UUIProviderContextValue<C> {
139+
children: React.ReactNode;
140+
}
141+
export function UUIProvider<C extends UUIProviderExtraCustomizeT>(props: UUIProviderProps<C>) {
142+
return (
143+
<UUIProviderContext.Provider value={{
144+
customize: props.customize,
145+
options: props.options,
146+
}}>
147+
{props.children}
148+
</UUIProviderContext.Provider>
149+
);
150+
}

‎src/components/Accordion/Accordion.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { UUI } from '../../core/uui';
2+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
33
import { Collapse } from '../Collapse';
44
import { createGroupedComponent } from '../../utils/createGroupedComponent';
55
import { AccordionPane, AccordionPaneProps } from './AccordionPane';
@@ -11,7 +11,7 @@ export interface AccordionFeatureProps {
1111
children: React.ReactElement<AccordionPaneProps>[];
1212
}
1313

14-
const _Accordion = UUI.FunctionComponent({
14+
const _Accordion = UUIFunctionComponent({
1515
name: 'Accordion',
1616
nodes: {
1717
Root: 'div',
@@ -64,7 +64,7 @@ const _Accordion = UUI.FunctionComponent({
6464
)
6565
})
6666

67-
export type AccordionProps = Parameters<typeof _Accordion>[0]
67+
export type AccordionProps = UUIFunctionComponentProps<typeof _Accordion>
6868

6969
const Accordion = createGroupedComponent(_Accordion, {
7070
Pane: AccordionPane,

‎src/components/Accordion/AccordionPane.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext, useMemo } from 'react';
2-
import { UUI } from '../../core/uui';
2+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
33
import { Collapse } from '../Collapse';
44
import { Icons } from '../../icons/Icons';
55
import classNames from 'classnames';
@@ -13,7 +13,7 @@ export interface AccordionPaneFeatureProps {
1313
disabled?: boolean;
1414
}
1515

16-
export const AccordionPane = UUI.FunctionComponent({
16+
export const AccordionPane = UUIFunctionComponent({
1717
name: 'AccordionPane',
1818
nodes: {
1919
Root: 'div',
@@ -88,4 +88,4 @@ export const AccordionPane = UUI.FunctionComponent({
8888
)
8989
})
9090

91-
export type AccordionPaneProps = Parameters<typeof AccordionPane>[0]
91+
export type AccordionPaneProps = UUIFunctionComponentProps<typeof AccordionPane>

‎src/components/Accordion/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export * from './Accordion'
1+
export * from './Accordion'
2+
export * from './AccordionPane'

‎src/components/Breadcrumb/Breadcrumb.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { UUI } from '../../core/uui';
2+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
33
import ReactHelper from '../../utils/ReactHelper';
44
import classNames from 'classnames';
55

@@ -16,7 +16,7 @@ export interface BreadcrumbFeatureProps {
1616
items: BreadcrumbItem[];
1717
}
1818

19-
export const Breadcrumb = UUI.FunctionComponent({
19+
export const Breadcrumb = UUIFunctionComponent({
2020
name: 'Breadcrumb',
2121
nodes: {
2222
Root: 'nav',
@@ -62,4 +62,4 @@ export const Breadcrumb = UUI.FunctionComponent({
6262
)
6363
})
6464

65-
export type BreadcrumbProps = Parameters<typeof Breadcrumb>[0]
65+
export type BreadcrumbProps = UUIFunctionComponentProps<typeof Breadcrumb>

‎src/components/Button/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import classNames from 'classnames';
22
import { omit } from 'lodash-es';
33
import React, { useRef } from 'react';
4-
import { UUI, UUIFunctionComponentProps } from '../../core/uui';
54
import { LoadingSpinner } from '../Loading';
65
import { KeyCode } from '../../utils/keyboardHelper';
6+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
77

88
export interface ButtonStylingProps {
99
styling?: {
@@ -19,7 +19,7 @@ export interface ButtonFeatureProps extends React.ButtonHTMLAttributes<HTMLButto
1919
loading?: boolean;
2020
}
2121

22-
export const Button = UUI.FunctionComponent({
22+
export const Button = UUIFunctionComponent({
2323
name: 'Button',
2424
nodes: {
2525
Root: 'button',

‎src/components/Cascader/Cascader.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useMemo, useCallback } from 'react';
2-
import { UUI } from '../../core/uui';
2+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
33
import { Popover, PopoverPlacement } from '../Popover';
44
import { ListBox as UUIListBox, ListBoxItem } from '../ListBox';
55
import { TextField as UUITextField } from '../Input';
@@ -91,7 +91,7 @@ export interface CascaderFeatureProps {
9191
portalContainer?: HTMLElement;
9292
}
9393

94-
export const Cascader = UUI.FunctionComponent({
94+
export const Cascader = UUIFunctionComponent({
9595
name: 'Cascader',
9696
nodes: {
9797
Root: 'div',
@@ -375,7 +375,7 @@ export const Cascader = UUI.FunctionComponent({
375375
)
376376
})
377377

378-
export type CascaderProps = Parameters<typeof Cascader>[0]
378+
export type CascaderProps = UUIFunctionComponentProps<typeof Cascader>
379379

380380
function findOneInAllOptions(value: string | null, options: CascaderOption[]): CascaderOption | null {
381381
if (value === null) return null

‎src/components/Checkbox/Checkbox.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef } from 'react';
22
import { omit } from 'lodash-es';
33
import classNames from 'classnames';
4-
import { UUI } from '../../core/uui';
4+
import { UUIFunctionComponent, UUIFunctionComponentProps } from '../../core';
55
import { KeyCode } from '../../utils/keyboardHelper';
66

77
export interface CheckboxFeatureProps {
@@ -34,7 +34,7 @@ export interface CheckboxFeatureProps {
3434
disabled?: boolean;
3535
}
3636

37-
export const Checkbox = UUI.FunctionComponent({
37+
export const Checkbox = UUIFunctionComponent({
3838
name: 'Checkbox',
3939
nodes: {
4040
Root: 'label',
@@ -88,4 +88,4 @@ export const Checkbox = UUI.FunctionComponent({
8888
)
8989
})
9090

91-
export type CheckboxProps = Parameters<typeof Checkbox>[0]
91+
export type CheckboxProps = UUIFunctionComponentProps<typeof Checkbox>

0 commit comments

Comments
 (0)