From 2b74ce4848e16cffe16a99a7eecccb7d5e0f6ae2 Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Thu, 14 Jul 2022 14:29:25 +0800 Subject: [PATCH] feat: check the `exampleProperties` type --- packages/arco-lib/src/components/Checkbox.tsx | 46 ++++++++-------- packages/arco-lib/src/components/Select.tsx | 46 ++++++++-------- packages/arco-lib/src/components/Tooltip.tsx | 24 ++++----- .../src/components/CheckboxGroup.tsx | 1 - .../chakra-ui-lib/src/components/Dialog.tsx | 8 ++- .../src/components/MultiSelect.tsx | 46 ++++++++-------- .../chakra-ui-lib/src/components/Select.tsx | 54 +++++++++---------- .../src/components/Table/spec.ts | 48 ++++++++--------- .../chakra-ui-lib/src/components/Tooltip.tsx | 4 +- packages/runtime/src/utils/buildKit.ts | 5 +- packages/shared/src/types/index.ts | 1 + packages/shared/src/types/utils.ts | 5 ++ 12 files changed, 145 insertions(+), 143 deletions(-) create mode 100644 packages/shared/src/types/utils.ts diff --git a/packages/arco-lib/src/components/Checkbox.tsx b/packages/arco-lib/src/components/Checkbox.tsx index fb66b872..0b666f0f 100644 --- a/packages/arco-lib/src/components/Checkbox.tsx +++ b/packages/arco-lib/src/components/Checkbox.tsx @@ -18,36 +18,34 @@ const CheckboxStateSpec = Type.Object({ isCheckAll: Type.Boolean(), }); -const exampleProperties = { - options: [ - { - label: 'checkbox1', - value: 'checkbox1', - }, - { - label: 'checkbox2', - value: 'checkbox2', - }, - { - label: 'checkbox3', - value: 'checkbox3', - }, - ], - disabled: false, - direction: 'horizontal', - defaultCheckedValues: ['checkbox1'], - showCheckAll: false, - checkAllText: 'Check all', - updateWhenDefaultValueChanges: false, -}; - export const Checkbox = implementRuntimeComponent({ version: 'arco/v1', metadata: { ...FALLBACK_METADATA, name: 'checkbox', displayName: 'Checkbox', - exampleProperties, + exampleProperties: { + options: [ + { + label: 'checkbox1', + value: 'checkbox1', + }, + { + label: 'checkbox2', + value: 'checkbox2', + }, + { + label: 'checkbox3', + value: 'checkbox3', + }, + ], + disabled: false, + direction: 'horizontal', + defaultCheckedValues: ['checkbox1'], + showCheckAll: false, + checkAllText: 'Check all', + updateWhenDefaultValueChanges: false, + }, annotations: { category: 'Data Entry', }, diff --git a/packages/arco-lib/src/components/Select.tsx b/packages/arco-lib/src/components/Select.tsx index f0083f0e..07b93c6e 100644 --- a/packages/arco-lib/src/components/Select.tsx +++ b/packages/arco-lib/src/components/Select.tsx @@ -1,7 +1,7 @@ import { Select as BaseSelect } from '@arco-design/web-react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; -import { Type, Static } from '@sinclair/typebox'; +import { Type } from '@sinclair/typebox'; import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper'; import { SelectPropsSpec as BaseSelectPropsSpec } from '../generated/types/Select'; import { useEffect, useRef } from 'react'; @@ -15,35 +15,33 @@ const SelectStateSpec = Type.Object({ value: Type.String(), }); -const exampleProperties: Static = { - allowClear: false, - multiple: false, - allowCreate: false, - bordered: true, - defaultValue: 'Beijing', - disabled: false, - labelInValue: false, - loading: false, - showSearch: false, - unmountOnExit: false, - options: [ - { value: 'Beijing', text: 'Beijing' }, - { value: 'London', text: 'London' }, - { value: 'NewYork', text: 'NewYork' }, - ], - placeholder: 'Select city', - size: 'default', - error: false, - updateWhenDefaultValueChanges: false, -}; - export const Select = implementRuntimeComponent({ version: 'arco/v1', metadata: { ...FALLBACK_METADATA, name: 'select', displayName: 'Select', - exampleProperties, + exampleProperties: { + allowClear: false, + multiple: false, + allowCreate: false, + bordered: true, + defaultValue: 'Beijing', + disabled: false, + labelInValue: false, + loading: false, + showSearch: false, + unmountOnExit: false, + options: [ + { value: 'Beijing', text: 'Beijing' }, + { value: 'London', text: 'London' }, + { value: 'NewYork', text: 'NewYork' }, + ], + placeholder: 'Select city', + size: 'default', + error: false, + updateWhenDefaultValueChanges: false, + }, annotations: { category: 'Data Entry', }, diff --git a/packages/arco-lib/src/components/Tooltip.tsx b/packages/arco-lib/src/components/Tooltip.tsx index 27ce2db2..fb9ed067 100644 --- a/packages/arco-lib/src/components/Tooltip.tsx +++ b/packages/arco-lib/src/components/Tooltip.tsx @@ -1,7 +1,7 @@ import { Tooltip as BaseTooltip, Button } from '@arco-design/web-react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; -import { Type, Static } from '@sinclair/typebox'; +import { Type } from '@sinclair/typebox'; import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper'; import { TooltipPropsSpec as BaseTooltipPropsSpec } from '../generated/types/Tooltip'; import { useState, useEffect } from 'react'; @@ -9,24 +9,22 @@ import { useState, useEffect } from 'react'; const TooltipPropsSpec = Type.Object(BaseTooltipPropsSpec); const TooltipStateSpec = Type.Object({}); -const exampleProperties: Static = { - color: '#bbb', - position: 'bottom', - mini: false, - disabled: false, - content: 'This is tooltip', - trigger: 'hover', - controlled: false, - unmountOnExit: true, -}; - export const Tooltip = implementRuntimeComponent({ version: 'arco/v1', metadata: { ...FALLBACK_METADATA, name: 'tooltip', displayName: 'Tooltip', - exampleProperties, + exampleProperties: { + color: '#bbb', + position: 'bottom', + mini: false, + disabled: false, + content: 'This is tooltip', + trigger: 'hover', + controlled: false, + unmountOnExit: true, + }, annotations: { category: 'Data Display', }, diff --git a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx index 4d8df495..33ac376a 100644 --- a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx +++ b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx @@ -28,7 +28,6 @@ export default implementRuntimeComponent({ displayName: 'Checkbox Group', description: 'chakra-ui checkbox group', exampleProperties: { - size: '', isDisabled: false, defaultValue: [], }, diff --git a/packages/chakra-ui-lib/src/components/Dialog.tsx b/packages/chakra-ui-lib/src/components/Dialog.tsx index 1744f9ae..35bdc25e 100644 --- a/packages/chakra-ui-lib/src/components/Dialog.tsx +++ b/packages/chakra-ui-lib/src/components/Dialog.tsx @@ -55,8 +55,12 @@ export default implementRuntimeComponent({ description: 'chakra_ui dialog', exampleProperties: { title: 'Dialog', - confirmButton: 'Confirm', - cancelButton: 'Cancel', + confirmButton: { + text: 'Confirm', + }, + cancelButton: { + text: 'Cancel', + }, disableConfirm: false, }, annotations: { diff --git a/packages/chakra-ui-lib/src/components/MultiSelect.tsx b/packages/chakra-ui-lib/src/components/MultiSelect.tsx index a444ffe1..33538f46 100644 --- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx +++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx @@ -74,36 +74,34 @@ const PropsSpec = Type.Object({ ), }); -const exampleProperties = { - options: [ - { - label: 'value1', - value: 'value1', - }, - { - label: 'value2', - value: 'value2', - }, - { - label: 'value3', - value: 'value3', - }, - ], - placeholder: '', - defaultValue: [], - isDisabled: false, - isRequired: false, - size: 'md', - variant: 'outline', -}; - export default implementRuntimeComponent({ version: 'chakra_ui/v1', metadata: { name: 'multiSelect', displayName: 'MultiSelect', description: 'chakra-ui MultiSelect', - exampleProperties, + exampleProperties: { + options: [ + { + label: 'value1', + value: 'value1', + }, + { + label: 'value2', + value: 'value2', + }, + { + label: 'value3', + value: 'value3', + }, + ], + placeholder: '', + defaultValue: [], + isDisabled: false, + isRequired: false, + size: 'md', + variant: 'outline', + }, annotations: { category: 'Input', }, diff --git a/packages/chakra-ui-lib/src/components/Select.tsx b/packages/chakra-ui-lib/src/components/Select.tsx index 434e86eb..e5461857 100644 --- a/packages/chakra-ui-lib/src/components/Select.tsx +++ b/packages/chakra-ui-lib/src/components/Select.tsx @@ -82,40 +82,38 @@ const PropsSpec = Type.Object({ }), }); -const exampleProperties = { - options: [ - { - label: 'value1', - value: 'value1', - }, - { - label: 'value2', - value: 'value2', - }, - { - label: 'value3', - value: 'value3', - }, - ], - placeholder: 'Select an option', - defaultValue: '', - isDisabled: false, - isInvalid: false, - isReadOnly: false, - isRequired: false, - size: 'md', - variant: 'outline', - errorBorderColor: 'red', - focusBorderColor: 'blue', -}; - export default implementRuntimeComponent({ version: 'chakra_ui/v1', metadata: { name: 'select', displayName: 'Select', description: 'chakra-ui select', - exampleProperties, + exampleProperties: { + options: [ + { + label: 'value1', + value: 'value1', + }, + { + label: 'value2', + value: 'value2', + }, + { + label: 'value3', + value: 'value3', + }, + ], + placeholder: 'Select an option', + defaultValue: '', + isDisabled: false, + isInvalid: false, + isReadOnly: false, + isRequired: false, + size: 'md', + variant: 'outline', + errorBorderColor: 'red', + focusBorderColor: 'blue', + }, annotations: { category: 'Input', }, diff --git a/packages/chakra-ui-lib/src/components/Table/spec.ts b/packages/chakra-ui-lib/src/components/Table/spec.ts index 4aded834..6b7929af 100644 --- a/packages/chakra-ui-lib/src/components/Table/spec.ts +++ b/packages/chakra-ui-lib/src/components/Table/spec.ts @@ -23,30 +23,6 @@ const PropsSpec = Type.Object({ size: TableSizePropertySpec, }); -const exampleProperties = { - data: [ - { - id: '1', - name: 'Bowen Tan', - }, - ], - columns: [ - { - key: 'name', - title: 'Name', - type: 'text', - displayValue: '', - buttonConfig: { - handlers: [], - }, - }, - ], - majorKey: 'id', - rowsPerPage: 5, - isMultiSelect: false, - size: 'md', -}; - export const implementTable = implementRuntimeComponent({ kind: 'Component', version: 'chakra_ui/v1', @@ -54,7 +30,29 @@ export const implementTable = implementRuntimeComponent({ name: 'table', displayName: 'Table', description: 'chakra-ui table', - exampleProperties, + exampleProperties: { + data: [ + { + id: '1', + name: 'Bowen Tan', + }, + ], + columns: [ + { + key: 'name', + title: 'Name', + type: 'text', + displayValue: '', + buttonConfig: { + handlers: [], + }, + }, + ], + majorKey: 'id', + rowsPerPage: 5, + isMultiSelect: false, + size: 'md', + }, annotations: { category: 'Display', }, diff --git a/packages/chakra-ui-lib/src/components/Tooltip.tsx b/packages/chakra-ui-lib/src/components/Tooltip.tsx index 0cf3e64a..5c90a41e 100644 --- a/packages/chakra-ui-lib/src/components/Tooltip.tsx +++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx @@ -62,7 +62,9 @@ export default implementRuntimeComponent({ description: 'chakra-ui tooltip', displayName: 'Tooltip', exampleProperties: { - text: 'tooltip', + text: { + raw: 'tooltip', + }, defaultIsOpen: false, placement: 'top', shouldWrapChildren: false, diff --git a/packages/runtime/src/utils/buildKit.ts b/packages/runtime/src/utils/buildKit.ts index 7e595c9a..cc96886d 100644 --- a/packages/runtime/src/utils/buildKit.ts +++ b/packages/runtime/src/utils/buildKit.ts @@ -8,6 +8,7 @@ import { createUtilMethod, CreateUtilMethodOptions, } from '@sunmao-ui/core'; +import { type DeepPartial } from '@sunmao-ui/shared'; import { ComponentImpl, ImplementedRuntimeComponent, @@ -30,7 +31,9 @@ export function implementRuntimeComponent< KEvent extends string, T extends CreateComponentOptions >( - options: T + options: T & { + metadata: { exampleProperties: DeepPartial> }; + } ): ( impl: ComponentImpl< Static extends Record diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts index 5cb12fe8..ba925341 100644 --- a/packages/shared/src/types/index.ts +++ b/packages/shared/src/types/index.ts @@ -1 +1,2 @@ export * from './condition'; +export * from './utils'; diff --git a/packages/shared/src/types/utils.ts b/packages/shared/src/types/utils.ts new file mode 100644 index 00000000..9b75c724 --- /dev/null +++ b/packages/shared/src/types/utils.ts @@ -0,0 +1,5 @@ +export type DeepPartial = T extends Record + ? Partial<{ + [K in keyof T]: DeepPartial; + }> + : T;