From fc15a2dc500a3fa406e18eede0a741faa1a871a6 Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Tue, 15 Feb 2022 13:49:36 +0800 Subject: [PATCH 1/2] feat(lib): change properties spec --- packages/chakra-ui-lib/src/components/Box.tsx | 367 ++++++------------ .../chakra-ui-lib/src/components/Button.tsx | 16 +- .../chakra-ui-lib/src/components/Checkbox.tsx | 63 ++- .../src/components/CheckboxGroup.tsx | 13 +- .../chakra-ui-lib/src/components/Dialog.tsx | 39 +- .../src/components/Form/Form.tsx | 6 +- .../src/components/Form/FormControl.tsx | 21 +- .../chakra-ui-lib/src/components/HStack.tsx | 55 ++- .../chakra-ui-lib/src/components/Image.tsx | 102 +++-- .../chakra-ui-lib/src/components/Input.tsx | 79 +++- .../chakra-ui-lib/src/components/Link.tsx | 14 +- .../chakra-ui-lib/src/components/List.tsx | 6 +- .../src/components/MultiSelect.tsx | 56 ++- .../src/components/NumberInput.tsx | 95 ++++- .../chakra-ui-lib/src/components/Radio.tsx | 54 ++- .../src/components/RadioGroup.tsx | 58 +-- .../chakra-ui-lib/src/components/Select.tsx | 69 +++- .../chakra-ui-lib/src/components/Stack.tsx | 66 ++-- .../src/components/Table/TableTypes.ts | 43 +- .../src/components/Table/spec.ts | 5 +- .../chakra-ui-lib/src/components/Tabs.tsx | 21 +- .../chakra-ui-lib/src/components/Tooltip.tsx | 75 ++-- .../src/components/Types/ColorScheme.ts | 4 +- .../chakra-ui-lib/src/components/VStack.tsx | 55 ++- .../src/components/constants/category.ts | 6 + .../runtime/src/components/_internal/Text.tsx | 11 +- .../src/components/core/GridLayout.tsx | 26 +- packages/runtime/src/types/module.ts | 22 +- 28 files changed, 908 insertions(+), 539 deletions(-) create mode 100644 packages/chakra-ui-lib/src/components/constants/category.ts diff --git a/packages/chakra-ui-lib/src/components/Box.tsx b/packages/chakra-ui-lib/src/components/Box.tsx index 246f88a1..939203bb 100644 --- a/packages/chakra-ui-lib/src/components/Box.tsx +++ b/packages/chakra-ui-lib/src/components/Box.tsx @@ -3,268 +3,102 @@ import { Box as BaseBox } from '@chakra-ui/react'; import { implementRuntimeComponent, GRID_HEIGHT } from '@sunmao-ui/runtime'; import { pick } from 'lodash-es'; import { css } from '@emotion/css'; - -const CssGlobals = Type.KeyOf( - Type.Object({ - inherit: Type.String(), - initial: Type.String(), - revert: Type.String(), - unset: Type.String(), - }) -); -const LineStyle = Type.KeyOf( - Type.Object({ - dashed: Type.String(), - dotted: Type.String(), - double: Type.String(), - groove: Type.String(), - hidden: Type.String(), - inset: Type.String(), - none: Type.String(), - outset: Type.String(), - ridge: Type.String(), - solid: Type.String(), - }) -); -const TextAlign = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - center: Type.String(), - end: Type.String(), - justify: Type.String(), - left: Type.String(), - 'match-parent': Type.String(), - right: Type.String(), - start: Type.String(), - }) - ), -]); -const TextTransForm = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - capitalize: Type.String(), - 'full-size-kana': Type.String(), - 'full-width': Type.String(), - lowercase: Type.String(), - none: Type.String(), - uppercase: Type.String(), - }) - ), -]); -const Overflow = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - '-moz-hidden-unscrollable': Type.String(), - auto: Type.String(), - clip: Type.String(), - hidden: Type.String(), - scroll: Type.String(), - visible: Type.String(), - }) - ), -]); -const FlexWrap = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - nowrap: Type.String(), - wrap: Type.String(), - 'wrap-reverse': Type.String(), - }) - ), -]); -const FlexDirection = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - column: Type.String(), - 'column-reverse': Type.String(), - row: Type.String(), - 'row-reverse': Type.String(), - }) - ), -]); -const Position = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - '-webkit-sticky': Type.String(), - absolute: Type.String(), - fixed: Type.String(), - relative: Type.String(), - static: Type.String(), - sticky: Type.String(), - }) - ), -]); -const WordBreak = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - 'break-all': Type.String(), - 'break-word': Type.String(), - 'keep-all': Type.String(), - normal: Type.String(), - }) - ), -]); -const WhiteSpace = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - '-moz-pre-wrap': Type.String(), - 'break-spaces': Type.String(), - normal: Type.String(), - nowrap: Type.String(), - pre: Type.String(), - 'pre-line': Type.String(), - 'pre-wrap': Type.String(), - }) - ), -]); -const BoxSizing = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - 'border-box': Type.String(), - 'content-box': Type.String(), - }) - ), -]); -const PointerEvent = Type.Union([ - CssGlobals, - Type.KeyOf( - Type.Object({ - all: Type.String(), - auto: Type.String(), - fill: Type.String(), - none: Type.String(), - painted: Type.String(), - stroke: Type.String(), - visible: Type.String(), - visibleFill: Type.String(), - visiblePainted: Type.String(), - visibleStroke: Type.String(), - }) - ), -]); +import { LAYOUT, BACKGROUND, BORDER } from './constants/category'; const StyleSchema = Type.Partial( Type.Object({ + // Layout + w: Type.Union([Type.String(), Type.Number()], { + title: 'Width', + category: LAYOUT, + }), + h: Type.Union([Type.String(), Type.Number()], { + title: 'Height', + category: LAYOUT, + }), + minW: Type.Union([Type.String(), Type.Number()], { + title: 'Min Width', + category: LAYOUT, + }), + maxW: Type.Union([Type.String(), Type.Number()], { + title: 'Max Width', + category: LAYOUT, + }), + minH: Type.Union([Type.String(), Type.Number()], { + title: 'Min Height', + category: LAYOUT, + }), + maxH: Type.Union([Type.String(), Type.Number()], { + title: 'Max Height', + category: LAYOUT, + }), // Margin and padding - m: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]), - mt: Type.Union([Type.String(), Type.Number()]), - mr: Type.Union([Type.String(), Type.Number()]), - mb: Type.Union([Type.String(), Type.Number()]), - ml: Type.Union([Type.String(), Type.Number()]), - mx: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]), - my: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]), - p: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]), - pt: Type.Union([Type.String(), Type.Number()]), - pr: Type.Union([Type.String(), Type.Number()]), - pb: Type.Union([Type.String(), Type.Number()]), - pl: Type.Union([Type.String(), Type.Number()]), - px: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]), - py: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())]), - // Color and background color - color: Type.String(), - bgColor: Type.String(), - opacity: Type.Union([Type.String(), Type.Number()]), - // Gradient - bgGradient: Type.String(), - bgClip: Type.String(), - // Typography - fontFamily: Type.String(), - fontSize: Type.Union([Type.String(), Type.Number()]), - fontWeight: Type.Union([Type.String(), Type.Number()]), - lineHeight: Type.Union([Type.String(), Type.Number()]), - letterSpacing: Type.Union([Type.String(), Type.Number()]), - textAlign: TextAlign, - fontStyle: Type.String(), - textTransform: TextTransForm, - textDecoration: Type.Union([Type.String(), Type.Number()]), - // Layout, width and height - w: Type.Union([Type.String(), Type.Number()]), - h: Type.Union([Type.String(), Type.Number()]), - minW: Type.Union([Type.String(), Type.Number()]), - maxW: Type.Union([Type.String(), Type.Number()]), - minH: Type.Union([Type.String(), Type.Number()]), - maxH: Type.Union([Type.String(), Type.Number()]), - display: Type.String(), - verticalAlign: Type.String(), - overflow: Type.String(), - overflowX: Overflow, - overflowY: Overflow, - // Flexbox - alignItems: Type.String(), - alignContent: Type.String(), - justifyItems: Type.String(), - justifyContent: Type.String(), - flexWrap: FlexWrap, - flexDirection: FlexDirection, - flex: Type.Union([Type.String(), Type.Number()]), - flexGrow: Type.Union([CssGlobals, Type.Number()]), - flexShrink: Type.Union([CssGlobals, Type.Number()]), - flexBasis: Type.Union([Type.String(), Type.Number()]), - justifySelf: Type.String(), - alignSelf: Type.String(), - order: Type.Union([CssGlobals, Type.Number()]), + m: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())], { + title: 'Margin', + category: LAYOUT, + }), + p: Type.Union([Type.String(), Type.Number(), Type.Array(Type.Number())], { + title: 'Padding', + category: LAYOUT, + }), + overflow: Type.String({ + title: 'Overflow', + category: LAYOUT, + }), // Background - bg: Type.String(), - bgImage: Type.String(), - bgSize: Type.Union([Type.String(), Type.Number()]), - bgPosition: Type.Union([Type.String(), Type.Number()]), - bgRepeat: Type.String(), - bgAttachment: Type.String(), + bg: Type.String({ + title: 'Background', + category: BACKGROUND, + }), + bgColor: Type.String({ + title: 'Background Color', + category: BACKGROUND, + }), + opacity: Type.Union([Type.String(), Type.Number()], { + title: 'Opacity', + category: BACKGROUND, + }), + bgGradient: Type.String({ + title: 'Background Gradient', + category: BACKGROUND, + }), + bgClip: Type.String({ + title: 'Background Clip', + category: BACKGROUND, + }), + bgImage: Type.String({ + title: 'Background Image', + category: BACKGROUND, + }), + bgSize: Type.Union([Type.String(), Type.Number()], { + title: 'Background Size', + category: BACKGROUND, + }), + bgPosition: Type.Union([Type.String(), Type.Number()], { + title: 'Background Position', + category: BACKGROUND, + }), + bgRepeat: Type.String({ + title: 'Background Repeat', + category: BACKGROUND, + }), + bgAttachment: Type.String({ + title: 'Background Attachment', + category: BACKGROUND, + }), + boxShadow: Type.Union([Type.String(), Type.Number()], { + title: 'Box Shadow', + category: BACKGROUND, + }), // Borders - border: Type.Union([Type.String(), Type.Number()]), - borderWidth: Type.Union([Type.String(), Type.Number()]), - borderStyle: Type.String(), - borderColor: Type.String(), - borderTop: Type.Union([Type.String(), Type.Number()]), - borderTopWidth: Type.Union([Type.String(), Type.Number()]), - borderTopStyle: Type.Union([CssGlobals, LineStyle]), - borderTopColor: Type.String(), - borderRight: Type.Union([Type.String(), Type.Number()]), - borderRightWidth: Type.Union([Type.String(), Type.Number()]), - borderRightStyle: Type.Union([CssGlobals, LineStyle]), - borderRightColor: Type.String(), - borderBottom: Type.Union([Type.String(), Type.Number()]), - borderBottomWidth: Type.Union([Type.String(), Type.Number()]), - borderBottomStyle: Type.Union([CssGlobals, LineStyle]), - borderBottomColor: Type.String(), - borderLeft: Type.Union([Type.String(), Type.Number()]), - borderLeftWidth: Type.Union([Type.String(), Type.Number()]), - borderLeftStyle: Type.Union([CssGlobals, LineStyle]), - borderLeftColor: Type.String(), - borderX: Type.Union([Type.String(), Type.Number()]), - borderY: Type.Union([Type.String(), Type.Number()]), - // Border Radius - borderRadius: Type.Union([Type.String(), Type.Number()]), - borderTopLeftRadius: Type.Union([Type.String(), Type.Number()]), - borderTopRightRadius: Type.Union([Type.String(), Type.Number()]), - borderBottomRightRadius: Type.Union([Type.String(), Type.Number()]), - borderBottomLeftRadius: Type.Union([Type.String(), Type.Number()]), - // Position - pos: Position, - top: Type.Union([Type.String(), Type.Number()]), - right: Type.Union([Type.String(), Type.Number()]), - bottom: Type.Union([Type.String(), Type.Number()]), - left: Type.Union([Type.String(), Type.Number()]), - zIndex: Type.Union([Type.String(), Type.Number()]), - // Shadow - textShadow: Type.Union([Type.String(), Type.Number()]), - boxShadow: Type.Union([Type.String(), Type.Number()]), - // Other - whiteSpace: WhiteSpace, - pointerEvents: PointerEvent, - wordBreak: WordBreak, - textOverflow: Type.String(), - boxSizing: BoxSizing, - cursor: Type.String(), + border: Type.Union([Type.String(), Type.Number()], { + title: 'Border', + category: BORDER, + }), + borderRadius: Type.Union([Type.String(), Type.Number()], { + title: 'Border Radius', + category: BORDER, + }), }) ); const StyleProps = Object.keys(StyleSchema.properties); @@ -280,11 +114,30 @@ export default implementRuntimeComponent({ exampleProperties: { w: GRID_HEIGHT, h: GRID_HEIGHT, + minW: '', + maxW: '', + minH: '', + maxH: '', + m: '', + p: '', + overflow: '', + bg: '', + bgColor: '', + opacity: '', + bgGradient: '', + bgClip: '', + bgImage: '', + bgSize: '', + bgPosition: '', + bgRepeat: '', + bgAttachment: '', + boxShadow: '', border: '1px solid black', + borderRadius: '', }, exampleSize: [6, 6], annotations: { - category: 'Layout', + category: LAYOUT, }, }, spec: { diff --git a/packages/chakra-ui-lib/src/components/Button.tsx b/packages/chakra-ui-lib/src/components/Button.tsx index 99051fc4..afabd3df 100644 --- a/packages/chakra-ui-lib/src/components/Button.tsx +++ b/packages/chakra-ui-lib/src/components/Button.tsx @@ -3,7 +3,8 @@ import { css } from '@emotion/css'; import { Type } from '@sinclair/typebox'; import { Button as BaseButton } from '@chakra-ui/react'; import { Text, TextPropertySchema, implementRuntimeComponent } from '@sunmao-ui/runtime'; -import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { getColorSchemePropertySchema } from './Types/ColorScheme'; +import { BEHAVIOR, APPEARANCE } from './constants/category'; const StateSchema = Type.Object({ value: Type.String(), @@ -11,8 +12,15 @@ const StateSchema = Type.Object({ const PropsSchema = Type.Object({ text: TextPropertySchema, - colorScheme: ColorSchemePropertySchema, - isLoading: Type.Optional(Type.Boolean()), + isLoading: Type.Boolean({ + title: 'Loading', + description: 'Whether the button is in a loading state', + category: BEHAVIOR, + }), + colorScheme: getColorSchemePropertySchema({ + title: 'Color Scheme', + category: APPEARANCE, + }), }); export default implementRuntimeComponent({ @@ -28,8 +36,8 @@ export default implementRuntimeComponent({ raw: 'text', format: 'plain', }, - colorScheme: 'blue', isLoading: false, + colorScheme: 'blue', }, exampleSize: [2, 1], annotations: { diff --git a/packages/chakra-ui-lib/src/components/Checkbox.tsx b/packages/chakra-ui-lib/src/components/Checkbox.tsx index 7b97adcf..8fe43bc1 100644 --- a/packages/chakra-ui-lib/src/components/Checkbox.tsx +++ b/packages/chakra-ui-lib/src/components/Checkbox.tsx @@ -2,16 +2,24 @@ import { useState, useEffect } from 'react'; import { Static, Type } from '@sinclair/typebox'; import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/react'; import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime'; -import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { getColorSchemePropertySchema } from './Types/ColorScheme'; import { css } from '@emotion/css'; +import { BASIC, BEHAVIOR, LAYOUT, APPEARANCE } from './constants/category'; -export const IsDisabledSchema = Type.Optional(Type.Boolean()); +export const IsDisabledSchema = Type.Boolean({ + title: 'Disabled', + category: BEHAVIOR, +}); export const SizePropertySchema = Type.KeyOf( Type.Object({ sm: Type.String(), md: Type.String(), lg: Type.String(), - }) + }), + { + title: 'Size', + category: APPEARANCE, + } ); export const CheckboxStateSchema = Type.Object({ @@ -22,16 +30,41 @@ export const CheckboxStateSchema = Type.Object({ const PropsSchema = Type.Object({ text: TextPropertySchema, - value: Type.Union([Type.String(), Type.Number()]), - defaultIsChecked: Type.Optional(Type.Boolean()), + value: Type.Union([Type.String(), Type.Number()], { + title: 'Value', + description: 'The value of the checkbox which is used by check group.', + category: BASIC, + }), + defaultIsChecked: Type.Boolean({ + title: 'Default Checked', + category: BASIC, + }), isDisabled: IsDisabledSchema, - isFocusable: Type.Optional(Type.Boolean()), - isInValid: Type.Optional(Type.Boolean()), - isReadOnly: Type.Optional(Type.Boolean()), - isRequired: Type.Optional(Type.Boolean()), + isFocusable: Type.Boolean({ + title: 'Focusable', + category: BEHAVIOR, + }), + isInValid: Type.Boolean({ + title: 'Invalid', + category: BEHAVIOR, + }), + isReadOnly: Type.Boolean({ + title: 'Read Only', + category: BEHAVIOR, + }), + isRequired: Type.Boolean({ + title: 'Required', + category: BEHAVIOR, + }), + spacing: Type.String({ + title: 'Spacing', + category: LAYOUT, + }), size: SizePropertySchema, - spacing: Type.Optional(Type.String()), - colorScheme: ColorSchemePropertySchema, + colorScheme: getColorSchemePropertySchema({ + title: 'Color Scheme', + category: APPEARANCE, + }), }); export default implementRuntimeComponent({ @@ -50,7 +83,13 @@ export default implementRuntimeComponent({ value: 'checkbox 1', defaultIsChecked: true, isDisabled: false, + isFocusable: true, + isInValid: false, + isReadOnly: false, + isRequired: false, size: 'md', + spacing: '', + colorScheme: 'blue', }, exampleSize: [3, 1], annotations: { @@ -108,7 +147,7 @@ export default implementRuntimeComponent({ }, [setChecked, defaultIsChecked]); const args: { - colorScheme?: Static; + colorScheme?: Static>; size?: Static; } = {}; diff --git a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx index d18f44e1..6ed609d1 100644 --- a/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx +++ b/packages/chakra-ui-lib/src/components/CheckboxGroup.tsx @@ -3,17 +3,22 @@ import { Type } from '@sinclair/typebox'; import { Box, CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { SizePropertySchema, IsDisabledSchema } from './Checkbox'; +import { BASIC } from './constants/category'; -const DefaultValueSchema = Type.Array(Type.Union([Type.String(), Type.Number()])); +const DefaultValueSchema = Type.Array(Type.Union([Type.String(), Type.Number()]), { + title: 'Default Value', + description: 'The default value of the checkbox group to be checked', + category: BASIC, +}); const StateSchema = Type.Object({ value: DefaultValueSchema, }); const PropsSchema = Type.Object({ - size: SizePropertySchema, + defaultValue: DefaultValueSchema, isDisabled: IsDisabledSchema, - defaultValue: Type.Optional(DefaultValueSchema), + size: SizePropertySchema, }); export default implementRuntimeComponent({ @@ -25,6 +30,8 @@ export default implementRuntimeComponent({ isDraggable: true, isResizable: true, exampleProperties: { + size: '', + isDisabled: false, defaultValue: [], }, exampleSize: [3, 3], diff --git a/packages/chakra-ui-lib/src/components/Dialog.tsx b/packages/chakra-ui-lib/src/components/Dialog.tsx index a298f3f1..5e4ca4d5 100644 --- a/packages/chakra-ui-lib/src/components/Dialog.tsx +++ b/packages/chakra-ui-lib/src/components/Dialog.tsx @@ -12,18 +12,39 @@ import { ModalOverlayProps, } from '@chakra-ui/react'; import { Type } from '@sinclair/typebox'; -import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { getColorSchemePropertySchema } from './Types/ColorScheme'; +import { BASIC, BEHAVIOR } from './constants/category'; -const HandleButtonPropertySchema = Type.Object({ - text: Type.Optional(Type.String()), - colorScheme: ColorSchemePropertySchema, -}); +const getHandleButtonPropertySchema = (options?: Record) => + Type.Object( + { + text: Type.String({ + title: 'Text', + }), + colorScheme: getColorSchemePropertySchema({ + title: 'Color Scheme', + }), + }, + options + ); const PropsSchema = Type.Object({ - title: Type.Optional(Type.String()), - confirmButton: HandleButtonPropertySchema, - cancelButton: HandleButtonPropertySchema, - disableConfirm: Type.Optional(Type.Boolean()), + title: Type.String({ + title: 'Title', + category: BASIC, + }), + confirmButton: getHandleButtonPropertySchema({ + title: 'Confirm Button', + category: BASIC, + }), + cancelButton: getHandleButtonPropertySchema({ + title: 'Cancel Button', + category: BASIC, + }), + disableConfirm: Type.Boolean({ + title: 'Disable Confirm', + category: BEHAVIOR, + }), }); export default implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/Form/Form.tsx b/packages/chakra-ui-lib/src/components/Form/Form.tsx index 2d121a63..b4a63aeb 100644 --- a/packages/chakra-ui-lib/src/components/Form/Form.tsx +++ b/packages/chakra-ui-lib/src/components/Form/Form.tsx @@ -3,9 +3,13 @@ import { css } from '@emotion/css'; import { Type } from '@sinclair/typebox'; import { Button, VStack } from '@chakra-ui/react'; import { implementRuntimeComponent, watch } from '@sunmao-ui/runtime'; +import { BEHAVIOR } from '../constants/category'; const PropsSchema = Type.Object({ - hideSubmit: Type.Boolean(), + hideSubmit: Type.Boolean({ + title: 'Hide Submit', + category: BEHAVIOR, + }), }); export default implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/Form/FormControl.tsx b/packages/chakra-ui-lib/src/components/Form/FormControl.tsx index 6d59dbc0..970605ee 100644 --- a/packages/chakra-ui-lib/src/components/Form/FormControl.tsx +++ b/packages/chakra-ui-lib/src/components/Form/FormControl.tsx @@ -12,6 +12,7 @@ import { import { css } from '@emotion/css'; import { implementRuntimeComponent, watch } from '@sunmao-ui/runtime'; import { CheckboxStateSchema } from '../Checkbox'; +import { BASIC, BEHAVIOR } from '../constants/category'; const FormItemCSS = { flex: '0 0 auto', @@ -19,10 +20,22 @@ const FormItemCSS = { }; const PropsSchema = Type.Object({ - label: Type.String(), - fieldName: Type.String(), - isRequired: Type.Boolean(), - helperText: Type.String(), + label: Type.String({ + title: 'Label', + category: BASIC, + }), + fieldName: Type.String({ + title: 'Field Name', + category: BASIC, + }), + helperText: Type.String({ + title: 'Helper Text', + category: BASIC, + }), + isRequired: Type.Boolean({ + title: 'Required', + category: BEHAVIOR, + }), }); export default implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/HStack.tsx b/packages/chakra-ui-lib/src/components/HStack.tsx index c1868d0c..63a554f1 100644 --- a/packages/chakra-ui-lib/src/components/HStack.tsx +++ b/packages/chakra-ui-lib/src/components/HStack.tsx @@ -25,6 +25,10 @@ export default implementRuntimeComponent({ description: 'chakra-ui hstack', displayName: 'HStack', exampleProperties: { + direction: 'row', + wrap: 'wrap', + align: '', + justify: '', spacing: '24px', }, exampleSize: [6, 6], @@ -42,23 +46,34 @@ export default implementRuntimeComponent({ methods: {}, events: [], }, -})(({ direction, wrap, align, justify, spacing, slotsElements, customStyle, elementRef }) => { - return ( - - {slotsElements.content} - - ); -}); +})( + ({ + direction, + wrap, + align, + justify, + spacing, + slotsElements, + customStyle, + elementRef, + }) => { + return ( + + {slotsElements.content} + + ); + } +); diff --git a/packages/chakra-ui-lib/src/components/Image.tsx b/packages/chakra-ui-lib/src/components/Image.tsx index 444cbd07..a613c65a 100644 --- a/packages/chakra-ui-lib/src/components/Image.tsx +++ b/packages/chakra-ui-lib/src/components/Image.tsx @@ -2,9 +2,10 @@ import { Image as BaseImage } from '@chakra-ui/react'; import { css } from '@emotion/css'; import { Type } from '@sinclair/typebox'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; +import { BASIC, LAYOUT, BEHAVIOR, APPEARANCE } from './constants/category'; -const BoxSizePropertySchema = Type.Optional( - Type.Union([ +const BoxSizePropertySchema = Type.Union( + [ Type.KeyOf( Type.Object({ sm: Type.String(), @@ -14,7 +15,11 @@ const BoxSizePropertySchema = Type.Optional( }) ), Type.String(), - ]) + ], + { + title: 'Box Size', + category: APPEARANCE, + } ); const GlobalCssSchema = Type.KeyOf( @@ -27,8 +32,8 @@ const GlobalCssSchema = Type.KeyOf( }) ); -const ObjectFitSchema = Type.Optional( - Type.Union([ +const ObjectFitSchema = Type.Union( + [ GlobalCssSchema, Type.KeyOf( Type.Object({ @@ -39,11 +44,16 @@ const ObjectFitSchema = Type.Optional( 'scale-down': Type.String(), }) ), - ]) + ], + { + title: 'Object Fit', + description: 'How the image should be scaled to fit the element.', + category: BEHAVIOR, + } ); -const BorderRadiusSchema = Type.Optional( - Type.Union([ +const BorderRadiusSchema = Type.Union( + [ GlobalCssSchema, Type.Number(), Type.String(), @@ -60,7 +70,11 @@ const BorderRadiusSchema = Type.Optional( '3xl': Type.String(), }) ), - ]) + ], + { + title: 'Border Radius', + category: APPEARANCE, + } ); const StateSchema = Type.Object({ @@ -68,23 +82,52 @@ const StateSchema = Type.Object({ }); const PropsSchema = Type.Object({ - src: Type.String(), - fallbackSrc: Type.Optional(Type.String()), - boxSize: BoxSizePropertySchema, + // basic + src: Type.String({ + title: 'Src', + description: 'The source of the image', + category: BASIC, + }), + fallbackSrc: Type.String({ + title: 'Fallback Src', + description: 'The source of the image to use when the src fails to load', + category: BASIC, + }), + alt: Type.String({ + title: 'Alt Text', + description: + 'An accessible description of the image for screen readers. This is also rendered as a fallback if the image fails to load.', + category: BASIC, + }), + ignoreFallback: Type.Boolean({ + title: 'Ignore Fallback', + description: 'Whether to ignore the fallback image when the src fails to load', + category: BEHAVIOR, + }), objectFit: ObjectFitSchema, - borderRadius: BorderRadiusSchema, - ignoreFallback: Type.Optional(Type.Boolean()), - alt: Type.Optional(Type.String()), - htmlHeight: Type.Optional(Type.Union([Type.String(), Type.Number()])), - htmlWidth: Type.Optional(Type.Union([Type.String(), Type.Number()])), - crossOrigin: Type.Optional( - Type.KeyOf( - Type.Object({ - anonymous: Type.String(), - 'use-credentials': Type.String(), - }) - ) + crossOrigin: Type.KeyOf( + Type.Object({ + anonymous: Type.String(), + 'use-credentials': Type.String(), + }), + { + title: 'Cross Origin', + description: 'How the image should be loaded', + category: BEHAVIOR, + } ), + // layout + htmlHeight: Type.Union([Type.String(), Type.Number()], { + title: 'Height', + category: LAYOUT, + }), + htmlWidth: Type.Union([Type.String(), Type.Number()], { + title: 'Width', + category: LAYOUT, + }), + // style + boxSize: BoxSizePropertySchema, + borderRadius: BorderRadiusSchema, }); export default implementRuntimeComponent({ @@ -97,10 +140,15 @@ export default implementRuntimeComponent({ isResizable: true, exampleProperties: { src: 'https://bit.ly/dan-abramov', - alt: 'dan-abramov', - objectFit: 'cover', - borderRadius: 5, fallbackSrc: 'https://via.placeholder.com/150', + alt: 'dan-abramov', + ignoreFallback: false, + objectFit: 'cover', + crossOrigin: 'anonymous', + boxSize: 'md', + htmlHeight: '', + htmlWidth: '', + borderRadius: 5, }, exampleSize: [6, 6], annotations: { diff --git a/packages/chakra-ui-lib/src/components/Input.tsx b/packages/chakra-ui-lib/src/components/Input.tsx index cd5020da..cb2d7110 100644 --- a/packages/chakra-ui-lib/src/components/Input.tsx +++ b/packages/chakra-ui-lib/src/components/Input.tsx @@ -10,48 +10,82 @@ import { import { Type } from '@sinclair/typebox'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; +import { BASIC, APPEARANCE, BEHAVIOR } from './constants/category'; -const AppendElementPropertySchema = Type.Union([ - Type.Object({ - type: Type.KeyOf(Type.Object({ addon: Type.String() })), - children: Type.Optional(Type.String()), // TODO: ReactNode - }), - Type.Object({ - type: Type.KeyOf(Type.Object({ element: Type.String() })), - children: Type.Optional(Type.String()), // TODO: ReactNode - fontSize: Type.Optional(Type.String()), - color: Type.Optional(Type.String()), - }), -]); +const getAppendElementPropertySchema = (options?: Record) => + Type.Union( + [ + Type.Object({ + type: Type.KeyOf(Type.Object({ addon: Type.String() })), + children: Type.Optional(Type.String()), // TODO: ReactNode + }), + Type.Object({ + type: Type.KeyOf(Type.Object({ element: Type.String() })), + children: Type.Optional(Type.String()), // TODO: ReactNode + fontSize: Type.Optional(Type.String()), + color: Type.Optional(Type.String()), + }), + ], + options + ); const StateSchema = Type.Object({ value: Type.String(), }); const PropsSchema = Type.Object({ + defaultValue: Type.String({ + title: 'Default Value', + category: BASIC, + }), + placeholder: Type.String({ + title: 'Placeholder', + category: BASIC, + }), + isDisabled: Type.Boolean({ + title: 'Disabled', + category: BEHAVIOR, + }), + isRequired: Type.Boolean({ + title: 'Required', + category: BEHAVIOR, + }), variant: Type.KeyOf( Type.Object({ outline: Type.String(), unstyled: Type.String(), filled: Type.String(), flushed: Type.String(), - }) + }), + { + title: 'Variant', + category: APPEARANCE, + } ), - placeholder: Type.Optional(Type.String()), size: Type.KeyOf( Type.Object({ sm: Type.String(), md: Type.String(), lg: Type.String(), xs: Type.String(), - }) + }), + { + title: 'Size', + category: APPEARANCE, + } ), - focusBorderColor: Type.Optional(Type.String()), - isDisabled: Type.Optional(Type.Boolean()), - isRequired: Type.Optional(Type.Boolean()), - left: Type.Optional(AppendElementPropertySchema), - right: Type.Optional(AppendElementPropertySchema), - defaultValue: Type.Optional(Type.String()), + left: getAppendElementPropertySchema({ + title: 'Left Append', + category: APPEARANCE, + }), + right: getAppendElementPropertySchema({ + title: 'Right Append', + category: APPEARANCE, + }), + focusBorderColor: Type.String({ + title: 'Border Color Of Focusing', + category: APPEARANCE, + }), }); export default implementRuntimeComponent({ @@ -66,8 +100,11 @@ export default implementRuntimeComponent({ variant: 'outline', placeholder: 'Please input value', size: 'md', + focusBorderColor: '', isDisabled: false, isRequired: false, + left: {}, + right: {}, defaultValue: '', }, exampleSize: [4, 1], diff --git a/packages/chakra-ui-lib/src/components/Link.tsx b/packages/chakra-ui-lib/src/components/Link.tsx index 0ceb5fbc..9089dc62 100644 --- a/packages/chakra-ui-lib/src/components/Link.tsx +++ b/packages/chakra-ui-lib/src/components/Link.tsx @@ -2,11 +2,20 @@ import { Link } from '@chakra-ui/react'; import { css } from '@emotion/css'; import { Type } from '@sinclair/typebox'; import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime'; +import { BASIC, BEHAVIOR } from './constants/category'; const PropsSchema = Type.Object({ text: TextPropertySchema, - href: Type.String(), - isExternal: Type.Optional(Type.Boolean()), + href: Type.String({ + title: 'Href', + description: 'The URL to link to.', + category: BASIC, + }), + isExternal: Type.Boolean({ + title: 'External', + description: 'Whether the link should open in a new tab.', + category: BEHAVIOR, + }), }); export default implementRuntimeComponent({ @@ -23,6 +32,7 @@ export default implementRuntimeComponent({ format: 'plain', }, href: 'https://www.google.com', + isExternal: false, }, exampleSize: [2, 1], annotations: { diff --git a/packages/chakra-ui-lib/src/components/List.tsx b/packages/chakra-ui-lib/src/components/List.tsx index 0844975b..fd10324f 100644 --- a/packages/chakra-ui-lib/src/components/List.tsx +++ b/packages/chakra-ui-lib/src/components/List.tsx @@ -8,9 +8,13 @@ import { ModuleRenderer, } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; +import { BASIC } from './constants/category'; const PropsSchema = Type.Object({ - listData: Type.Array(Type.Record(Type.String(), Type.String())), + listData: Type.Array(Type.Record(Type.String(), Type.String()), { + title: 'Data', + category: BASIC, + }), template: ModuleSchema, }); diff --git a/packages/chakra-ui-lib/src/components/MultiSelect.tsx b/packages/chakra-ui-lib/src/components/MultiSelect.tsx index 8f7ccdaf..4b357d78 100644 --- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx +++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx @@ -4,6 +4,7 @@ import { Select as BaseMultiSelect } from 'chakra-react-select'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { Box } from '@chakra-ui/react'; import { css } from '@emotion/css'; +import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category'; const StateSchema = Type.Object({ value: Type.Array(Type.String()), @@ -13,28 +14,47 @@ const OptionsSchema = Type.Array( Type.Object({ label: Type.String(), value: Type.String(), - }) + }), + { + title: 'Options', + category: BASIC, + } ); const PropsSchema = Type.Object({ options: OptionsSchema, - placeholder: Type.Optional(Type.String()), - defaultValue: Type.Optional( - Type.Array( - Type.Object({ - label: Type.String(), - value: Type.String(), - }) - ) + placeholder: Type.String({ + title: 'Placeholder', + category: BASIC, + }), + defaultValue: Type.Array( + Type.Object({ + label: Type.String(), + value: Type.String(), + }), + { + title: 'Default Value', + category: BASIC, + } ), - isDisabled: Type.Optional(Type.Boolean()), - isRequired: Type.Optional(Type.Boolean()), + isDisabled: Type.Boolean({ + title: 'Disabled', + category: BEHAVIOR, + }), + isRequired: Type.Boolean({ + title: 'Required', + category: BEHAVIOR, + }), size: Type.KeyOf( Type.Object({ sm: Type.String(), md: Type.String(), lg: Type.String(), - }) + }), + { + title: 'Size', + category: APPEARANCE, + } ), variant: Type.KeyOf( Type.Object({ @@ -42,7 +62,11 @@ const PropsSchema = Type.Object({ unstyled: Type.String(), filled: Type.String(), flushed: Type.String(), - }) + }), + { + title: 'Variant', + category: APPEARANCE, + } ), }); @@ -61,6 +85,12 @@ const exampleProperties = { value: 'value3', }, ], + placeholder: '', + defaultValue: [], + isDisabled: false, + isRequired: false, + size: 'md', + variant: 'outline', }; export default implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/NumberInput.tsx b/packages/chakra-ui-lib/src/components/NumberInput.tsx index 54225e63..0fc87eda 100644 --- a/packages/chakra-ui-lib/src/components/NumberInput.tsx +++ b/packages/chakra-ui-lib/src/components/NumberInput.tsx @@ -9,33 +9,81 @@ import { import { Type } from '@sinclair/typebox'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; +import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category'; const PropsSchema = Type.Object({ - defaultValue: Type.Optional(Type.Number()), - min: Type.Optional(Type.Number()), - max: Type.Optional(Type.Number()), - step: Type.Optional(Type.Number()), - precision: Type.Optional(Type.Number()), - clampValueOnBlur: Type.Optional(Type.Boolean()), - allowMouseWheel: Type.Optional(Type.Boolean()), + defaultValue: Type.Number({ + title: 'Default Value', + category: BASIC, + }), + min: Type.Number({ + title: 'Min', + category: BASIC, + }), + max: Type.Number({ + title: 'Max', + category: BASIC, + }), + step: Type.Number({ + title: 'Step', + description: 'The amount to increase or decrease the value by.', + category: BASIC, + }), + precision: Type.Number({ + title: 'Precision', + category: BASIC, + }), + clampValueOnBlur: Type.Boolean({ + title: 'Clamp Value On Blur', + category: BEHAVIOR, + }), + allowMouseWheel: Type.Boolean({ + title: 'Allow Mouse Wheel', + description: 'Whether or not to allow the mouse wheel to control the number input.', + category: BEHAVIOR, + }), size: Type.KeyOf( Type.Object({ sm: Type.String(), md: Type.String(), lg: Type.String(), xs: Type.String(), - }) + }), + { + title: 'Size', + category: APPEARANCE, + } + ), + customerIncrement: Type.Object( + { + bg: Type.String({ + title: 'Background', + }), + children: Type.String({ + title: 'Text', + }), + _active: Type.Object({ bg: Type.String() }), + }, + { + title: 'Increment Button', + category: APPEARANCE, + } + ), + customerDecrement: Type.Object( + { + bg: Type.String({ + title: 'Background', + }), + children: Type.String({ + title: 'Text', + }), + _active: Type.Object({ bg: Type.String() }), + }, + { + title: 'Decrement Button', + category: APPEARANCE, + } ), - customerIncrement: Type.Object({ - bg: Type.Optional(Type.String()), - children: Type.Optional(Type.String()), - _active: Type.Object({ bg: Type.String() }), - }), - customerDecrement: Type.Object({ - bg: Type.Optional(Type.String()), - children: Type.Optional(Type.String()), - _active: Type.Object({ bg: Type.String() }), - }), }); const StateSchema = Type.Object({ @@ -45,13 +93,22 @@ const StateSchema = Type.Object({ export default implementRuntimeComponent({ version: 'chakra_ui/v1', metadata: { - name: 'number_input', + name: 'numberInput', description: 'chakra_ui number input', displayName: 'Number Input', isDraggable: true, isResizable: true, exampleProperties: { defaultValue: 0, + min: Number.MIN_SAFE_INTEGER, + max: Number.MAX_SAFE_INTEGER, + step: 1, + precision: 0, + clampValueOnBlur: false, + allowMouseWheel: false, + size: 'md', + customerIncrement: {}, + customerDecrement: {}, }, exampleSize: [4, 1], annotations: { diff --git a/packages/chakra-ui-lib/src/components/Radio.tsx b/packages/chakra-ui-lib/src/components/Radio.tsx index 996b8522..94c49aad 100644 --- a/packages/chakra-ui-lib/src/components/Radio.tsx +++ b/packages/chakra-ui-lib/src/components/Radio.tsx @@ -2,8 +2,9 @@ import { useEffect } from 'react'; import { Type } from '@sinclair/typebox'; import { Radio as BaseRadio } from '@chakra-ui/react'; import { implementRuntimeComponent, Text, TextPropertySchema } from '@sunmao-ui/runtime'; -import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { getColorSchemePropertySchema } from './Types/ColorScheme'; import { css } from '@emotion/css'; +import { BASIC, BEHAVIOR, APPEARANCE, LAYOUT } from './constants/category'; const StateSchema = Type.Object({ value: Type.Union([Type.String(), Type.Number()]), @@ -11,22 +12,53 @@ const StateSchema = Type.Object({ const PropsSchema = Type.Object({ text: TextPropertySchema, - value: Type.Union([Type.String(), Type.Number()]), - isDisabled: Type.Optional(Type.Boolean()), - isFocusable: Type.Optional(Type.Boolean()), - isInValid: Type.Optional(Type.Boolean()), - isReadOnly: Type.Optional(Type.Boolean()), - isRequired: Type.Optional(Type.Boolean()), - name: Type.Optional(Type.String()), + value: Type.Union([Type.String(), Type.Number()], { + title: 'Value', + category: BASIC, + }), + name: Type.String({ + title: 'Name', + category: BASIC, + }), + isDisabled: Type.Boolean({ + title: 'Disabled', + category: BEHAVIOR, + }), + isFocusable: Type.Boolean({ + title: 'Focusable', + category: BEHAVIOR, + }), + isInValid: Type.Boolean({ + title: 'Invalid', + category: BEHAVIOR, + }), + isReadOnly: Type.Boolean({ + title: 'Read Only', + category: BEHAVIOR, + }), + isRequired: Type.Boolean({ + title: 'Required', + category: BEHAVIOR, + }), + spacing: Type.String({ + title: 'Spacing', + category: LAYOUT, + }), + colorScheme: getColorSchemePropertySchema({ + title: 'Color Scheme', + category: APPEARANCE, + }), size: Type.KeyOf( Type.Object({ sm: Type.String(), md: Type.String(), lg: Type.String(), - }) + }), + { + title: 'Size', + category: APPEARANCE, + } ), - spacing: Type.Optional(Type.String()), - colorScheme: ColorSchemePropertySchema, }); export default implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/RadioGroup.tsx b/packages/chakra-ui-lib/src/components/RadioGroup.tsx index 09dda868..36483c24 100644 --- a/packages/chakra-ui-lib/src/components/RadioGroup.tsx +++ b/packages/chakra-ui-lib/src/components/RadioGroup.tsx @@ -3,20 +3,28 @@ import { Type } from '@sinclair/typebox'; import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; +import { BASIC, BEHAVIOR } from './constants/category'; const StateSchema = Type.Object({ value: Type.Union([Type.String(), Type.Number()]), }); const PropsSchema = Type.Object({ - defaultValue: Type.Union([Type.String(), Type.Number()]), - isNumerical: Type.Optional(Type.Boolean()), + defaultValue: Type.Union([Type.String(), Type.Number()], { + title: 'Default Value', + category: BASIC, + }), + isNumerical: Type.Boolean({ + title: 'Numerical', + description: 'Whether the value is a number', + category: BEHAVIOR, + }), }); export default implementRuntimeComponent({ version: 'chakra_ui/v1', metadata: { - name: 'radio_group', + name: 'radioGroup', displayName: 'RadioGroup', description: 'chakra-ui radio group', isDraggable: true, @@ -38,27 +46,29 @@ export default implementRuntimeComponent({ styleSlots: ['content'], events: [], }, -})(({ defaultValue, isNumerical, slotsElements, mergeState, customStyle, elementRef }) => { - const [value, setValue] = useState(defaultValue); +})( + ({ defaultValue, isNumerical, slotsElements, mergeState, customStyle, elementRef }) => { + const [value, setValue] = useState(defaultValue); - useEffect(() => { - mergeState({ value }); - }, [mergeState, value]); + useEffect(() => { + mergeState({ value }); + }, [mergeState, value]); - useEffect(() => { - setValue(defaultValue); - }, [defaultValue]); + useEffect(() => { + setValue(defaultValue); + }, [defaultValue]); - return ( - setValue(isNumerical ? Number(val) : val)} - className={css` - ${customStyle?.content} - `} - ref={elementRef} - > - {slotsElements.content} - - ); -}); + return ( + setValue(isNumerical ? Number(val) : val)} + className={css` + ${customStyle?.content} + `} + ref={elementRef} + > + {slotsElements.content} + + ); + } +); diff --git a/packages/chakra-ui-lib/src/components/Select.tsx b/packages/chakra-ui-lib/src/components/Select.tsx index 5674c7df..0fa295b2 100644 --- a/packages/chakra-ui-lib/src/components/Select.tsx +++ b/packages/chakra-ui-lib/src/components/Select.tsx @@ -3,6 +3,7 @@ import { Type } from '@sinclair/typebox'; import { Select as BaseSelect } from '@chakra-ui/react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { css } from '@emotion/css'; +import { BASIC, BEHAVIOR, APPEARANCE } from './constants/category'; const StateSchema = Type.Object({ value: Type.String(), @@ -13,23 +14,47 @@ const PropsSchema = Type.Object({ Type.Object({ label: Type.String(), value: Type.String(), - }) + }), + { + title: 'Options', + category: BASIC, + } ), - placeholder: Type.Optional(Type.String()), - defaultValue: Type.Optional(Type.String()), - errorBorderColor: Type.Optional(Type.String()), - focusBorderColor: Type.Optional(Type.String()), - isDisabled: Type.Optional(Type.Boolean()), - isInvalid: Type.Optional(Type.Boolean()), - isReadOnly: Type.Optional(Type.Boolean()), - isRequired: Type.Optional(Type.Boolean()), + placeholder: Type.String({ + title: 'Placeholder', + category: BASIC, + }), + defaultValue: Type.String({ + title: 'Default Value', + category: BASIC, + }), + isDisabled: Type.Boolean({ + title: 'Disabled', + category: BEHAVIOR, + }), + isInvalid: Type.Boolean({ + title: 'Invalid', + category: BEHAVIOR, + }), + isReadOnly: Type.Boolean({ + title: 'Read Only', + category: BEHAVIOR, + }), + isRequired: Type.Boolean({ + title: 'Required', + category: BEHAVIOR, + }), size: Type.KeyOf( Type.Object({ xs: Type.String(), sm: Type.String(), md: Type.String(), lg: Type.String(), - }) + }), + { + title: 'Size', + category: APPEARANCE, + } ), variant: Type.KeyOf( Type.Object({ @@ -37,8 +62,20 @@ const PropsSchema = Type.Object({ unstyled: Type.String(), filled: Type.String(), flushed: Type.String(), - }) + }), + { + title: 'Variant', + category: APPEARANCE, + } ), + errorBorderColor: Type.String({ + title: 'Border Color Of Error', + category: APPEARANCE, + }), + focusBorderColor: Type.String({ + title: 'Border Color Of Focus', + category: APPEARANCE, + }), }); const exampleProperties = { @@ -56,6 +93,16 @@ const exampleProperties = { 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({ diff --git a/packages/chakra-ui-lib/src/components/Stack.tsx b/packages/chakra-ui-lib/src/components/Stack.tsx index 61d6015c..be92983e 100644 --- a/packages/chakra-ui-lib/src/components/Stack.tsx +++ b/packages/chakra-ui-lib/src/components/Stack.tsx @@ -1,18 +1,11 @@ import { Type } from '@sinclair/typebox'; import { Stack as BaseStack } from '@chakra-ui/react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; +import { LAYOUT } from './constants/category'; export const DirectionSchema = Type.Optional( - Type.Union([ - Type.KeyOf( - Type.Object({ - column: Type.String(), - 'column-reverse': Type.String(), - row: Type.String(), - 'row-reverse': Type.String(), - }) - ), - Type.Array( + Type.Union( + [ Type.KeyOf( Type.Object({ column: Type.String(), @@ -20,22 +13,47 @@ export const DirectionSchema = Type.Optional( row: Type.String(), 'row-reverse': Type.String(), }) - ) - ), - ]) -); -export const FlexWrapSchema = Type.Optional( - Type.KeyOf( - Type.Object({ - nowrap: Type.String(), - wrap: Type.String(), - 'wrap-reverse': Type.String(), - }) + ), + Type.Array( + Type.KeyOf( + Type.Object({ + column: Type.String(), + 'column-reverse': Type.String(), + row: Type.String(), + 'row-reverse': Type.String(), + }) + ) + ), + ], + { + title: 'Flex Direction', + category: LAYOUT, + } ) ); -export const AlignItemsSchema = Type.Optional(Type.String()); -export const JustifyContentSchema = Type.Optional(Type.String()); -export const SpacingSchema = Type.Optional(Type.Union([Type.String(), Type.Number()])); +export const FlexWrapSchema = Type.KeyOf( + Type.Object({ + nowrap: Type.String(), + wrap: Type.String(), + 'wrap-reverse': Type.String(), + }), + { + title: 'Flex Wrap', + category: LAYOUT, + } +); +export const AlignItemsSchema = Type.String({ + title: 'Align Items', + category: LAYOUT, +}); +export const JustifyContentSchema = Type.String({ + title: 'Justify Content', + category: LAYOUT, +}); +export const SpacingSchema = Type.Union([Type.String(), Type.Number()], { + title: 'Spacing', + category: LAYOUT, +}); const PropsSchema = Type.Object({ direction: DirectionSchema, diff --git a/packages/chakra-ui-lib/src/components/Table/TableTypes.ts b/packages/chakra-ui-lib/src/components/Table/TableTypes.ts index 41cb544e..b13e8dfa 100644 --- a/packages/chakra-ui-lib/src/components/Table/TableTypes.ts +++ b/packages/chakra-ui-lib/src/components/Table/TableTypes.ts @@ -1,16 +1,30 @@ import { Type } from '@sinclair/typebox'; import { ModuleSchema, EventHandlerSchema } from '@sunmao-ui/runtime'; +import { BASIC, APPEARANCE, BEHAVIOR } from '../constants/category'; -export const MajorKeyPropertySchema = Type.String(); -export const RowsPerPagePropertySchema = Type.Number(); -export const DataPropertySchema = Type.Array(Type.Any()); -export const TableSizePropertySchema = Type.Optional(Type.KeyOf( +export const MajorKeyPropertySchema = Type.String({ + title: 'Major key', + description: 'The key of the data item object to use as the major key', + category: BASIC, +}); +export const RowsPerPagePropertySchema = Type.Number({ + title: '', + category: BEHAVIOR, +}); +export const DataPropertySchema = Type.Array(Type.Any(), { + title: 'Data', + category: BASIC, +}); +export const TableSizePropertySchema = Type.KeyOf( Type.Object({ sm: Type.String(), md: Type.String(), lg: Type.String(), - }) -)); + }), { + title: 'Size', + category: APPEARANCE, + } +); export const TdTypeSchema = Type.KeyOf( Type.Object({ @@ -19,7 +33,10 @@ export const TdTypeSchema = Type.KeyOf( link: Type.String(), button: Type.String(), module: Type.String(), - }) + }), { + title: 'TD Type', + category: APPEARANCE, + } ); export const ColumnSchema = Type.Object({ key: Type.String(), @@ -31,10 +48,18 @@ export const ColumnSchema = Type.Object({ handlers: Type.Array(EventHandlerSchema), }), module: ModuleSchema, +}, { + title: 'Column' }); -export const ColumnsPropertySchema = Type.Array(ColumnSchema); -export const IsMultiSelectPropertySchema = Type.Boolean(); +export const ColumnsPropertySchema = Type.Array(ColumnSchema, { + title: 'Columns', + category: BASIC, +}); +export const IsMultiSelectPropertySchema = Type.Boolean({ + title: 'Enable Multiple Select', + category: BEHAVIOR, +}); export const TableStateSchema = Type.Object({ selectedItem: Type.Optional(Type.Object({})), diff --git a/packages/chakra-ui-lib/src/components/Table/spec.ts b/packages/chakra-ui-lib/src/components/Table/spec.ts index 0aa6d0b0..645989e4 100644 --- a/packages/chakra-ui-lib/src/components/Table/spec.ts +++ b/packages/chakra-ui-lib/src/components/Table/spec.ts @@ -13,10 +13,10 @@ import { const PropsSchema = Type.Object({ data: DataPropertySchema, majorKey: MajorKeyPropertySchema, - rowsPerPage: RowsPerPagePropertySchema, - size: TableSizePropertySchema, columns: ColumnsPropertySchema, isMultiSelect: IsMultiSelectPropertySchema, + rowsPerPage: RowsPerPagePropertySchema, + size: TableSizePropertySchema, }); const exampleProperties = { @@ -36,6 +36,7 @@ const exampleProperties = { majorKey: 'id', rowsPerPage: 5, isMultiSelect: false, + size: 'md', }; export const implementTable = implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/Tabs.tsx b/packages/chakra-ui-lib/src/components/Tabs.tsx index 67e27477..8d2270ed 100644 --- a/packages/chakra-ui-lib/src/components/Tabs.tsx +++ b/packages/chakra-ui-lib/src/components/Tabs.tsx @@ -10,14 +10,21 @@ import { } from '@chakra-ui/react'; import { Type } from '@sinclair/typebox'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; +import { BASIC } from './constants/category'; const StateSchema = Type.Object({ selectedTabIndex: Type.Number(), }); const PropsSchema = Type.Object({ - tabNames: Type.Array(Type.String()), - initialSelectedTabIndex: Type.Optional(Type.Number()), + tabNames: Type.Array(Type.String(), { + title: 'Tab Names', + category: BASIC, + }), + initialSelectedTabIndex: Type.Number({ + title: 'Default Selected Tab Index', + category: BASIC, + }), }); export default implementRuntimeComponent({ @@ -47,8 +54,14 @@ export default implementRuntimeComponent({ events: [], }, })(props => { - const { tabNames, mergeState, initialSelectedTabIndex, customStyle, slotsElements, elementRef } = - props; + const { + tabNames, + mergeState, + initialSelectedTabIndex, + customStyle, + slotsElements, + elementRef, + } = props; const [selectedTabIndex, setSelectedTabIndex] = useState(initialSelectedTabIndex ?? 0); useEffect(() => { diff --git a/packages/chakra-ui-lib/src/components/Tooltip.tsx b/packages/chakra-ui-lib/src/components/Tooltip.tsx index 16881164..d726d529 100644 --- a/packages/chakra-ui-lib/src/components/Tooltip.tsx +++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx @@ -1,37 +1,58 @@ import { Type } from '@sinclair/typebox'; import { Tooltip } from '@chakra-ui/react'; import { implementRuntimeComponent, TextPropertySchema } from '@sunmao-ui/runtime'; -import { ColorSchemePropertySchema } from './Types/ColorScheme'; +import { getColorSchemePropertySchema } from './Types/ColorScheme'; +import { BASIC, LAYOUT, BEHAVIOR, APPEARANCE } from './constants/category'; const PropsSchema = Type.Object({ text: TextPropertySchema, - colorScheme: ColorSchemePropertySchema, - shouldWrapChildren: Type.Boolean(), - defaultIsOpen: Type.Boolean(), - hasArrow: Type.Boolean(), - isDisabled: Type.Boolean(), - isOpen: Type.Boolean(), - placement: Type.Optional( - Type.KeyOf( - Type.Object({ - top: Type.String(), - right: Type.String(), - bottom: Type.String(), - left: Type.String(), - auto: Type.String(), - 'auto-start': Type.String(), - 'auto-end': Type.String(), - 'top-start': Type.String(), - 'top-end': Type.String(), - 'bottom-start': Type.String(), - 'bottom-end': Type.String(), - 'right-start': Type.String(), - 'right-end': Type.String(), - 'left-start': Type.String(), - 'left-end': Type.String(), - }) - ) + defaultIsOpen: Type.Boolean({ + title: 'Default Is Open', + category: BASIC, + }), + placement: Type.KeyOf( + Type.Object({ + top: Type.String(), + right: Type.String(), + bottom: Type.String(), + left: Type.String(), + auto: Type.String(), + 'auto-start': Type.String(), + 'auto-end': Type.String(), + 'top-start': Type.String(), + 'top-end': Type.String(), + 'bottom-start': Type.String(), + 'bottom-end': Type.String(), + 'right-start': Type.String(), + 'right-end': Type.String(), + 'left-start': Type.String(), + 'left-end': Type.String(), + }), + { + title: 'Placement', + category: LAYOUT, + } ), + shouldWrapChildren: Type.Boolean({ + title: 'Should Wrap Children', + category: BEHAVIOR, + }), + isDisabled: Type.Boolean({ + title: 'Disabled', + category: BEHAVIOR, + }), + isOpen: Type.Boolean({ + title: 'Open State', + category: BEHAVIOR, + }), + hasArrow: Type.Boolean({ + title: 'Has Arrow', + category: APPEARANCE, + }), + colorScheme: getColorSchemePropertySchema({ + title: 'Color Scheme', + category: APPEARANCE, + }), }); export default implementRuntimeComponent({ diff --git a/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts b/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts index 5e66efb9..81e36479 100644 --- a/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts +++ b/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts @@ -1,6 +1,6 @@ import { Type } from '@sinclair/typebox'; -export const ColorSchemePropertySchema = Type.Optional( +export const getColorSchemePropertySchema = (options?: Record)=> Type.Optional( Type.KeyOf( Type.Object({ whiteAlpha: Type.String(), @@ -21,6 +21,6 @@ export const ColorSchemePropertySchema = Type.Optional( whatsapp: Type.String(), twitter: Type.String(), telegram: Type.String(), - }) + }), options ) ); diff --git a/packages/chakra-ui-lib/src/components/VStack.tsx b/packages/chakra-ui-lib/src/components/VStack.tsx index ebc00d01..4c3df0e0 100644 --- a/packages/chakra-ui-lib/src/components/VStack.tsx +++ b/packages/chakra-ui-lib/src/components/VStack.tsx @@ -31,6 +31,10 @@ export default implementRuntimeComponent({ isDraggable: true, isResizable: true, annotations: { + direction: 'column', + wrap: 'wrap', + align: '', + justify: '', category: 'Layout', }, }, @@ -42,23 +46,34 @@ export default implementRuntimeComponent({ methods: {}, events: [], }, -})(({ direction, wrap, align, justify, spacing, slotsElements, customStyle, elementRef }) => { - return ( - - {slotsElements.content} - - ); -}); +})( + ({ + direction, + wrap, + align, + justify, + spacing, + slotsElements, + customStyle, + elementRef, + }) => { + return ( + + {slotsElements.content} + + ); + } +); diff --git a/packages/chakra-ui-lib/src/components/constants/category.ts b/packages/chakra-ui-lib/src/components/constants/category.ts new file mode 100644 index 00000000..9320787f --- /dev/null +++ b/packages/chakra-ui-lib/src/components/constants/category.ts @@ -0,0 +1,6 @@ +export const BASIC = 'Basic'; +export const LAYOUT = 'Layout'; +export const BACKGROUND = 'Background'; +export const BORDER = 'Border'; +export const APPEARANCE = 'Appearance'; +export const BEHAVIOR = 'Behavior'; diff --git a/packages/runtime/src/components/_internal/Text.tsx b/packages/runtime/src/components/_internal/Text.tsx index a7d7082e..73bc49d9 100644 --- a/packages/runtime/src/components/_internal/Text.tsx +++ b/packages/runtime/src/components/_internal/Text.tsx @@ -4,13 +4,20 @@ import ReactMarkdown from 'react-markdown'; import { Static, Type } from '@sinclair/typebox'; export const TextPropertySchema = Type.Object({ - raw: Type.String(), + raw: Type.String({ + title: 'Raw', + }), format: Type.KeyOf( Type.Object({ plain: Type.String(), md: Type.String(), - }) + }), { + title: 'Format', + } ), +}, { + title: 'Text', + category: 'Basic', }); export type TextProps = { diff --git a/packages/runtime/src/components/core/GridLayout.tsx b/packages/runtime/src/components/core/GridLayout.tsx index e7023d62..2c2612da 100644 --- a/packages/runtime/src/components/core/GridLayout.tsx +++ b/packages/runtime/src/components/core/GridLayout.tsx @@ -9,13 +9,27 @@ const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout')); const PropsSchema = Type.Object({ layout: Type.Array( Type.Object({ - x: Type.Number(), - y: Type.Number(), - w: Type.Number(), - h: Type.Number(), + x: Type.Number({ + title: 'X', + }), + y: Type.Number({ + title: 'Y', + }), + w: Type.Number({ + title: 'Width', + }), + h: Type.Number({ + title: 'Height', + }), i: Type.String(), - isResizable: Type.Optional(Type.Boolean()), - }) + isResizable: Type.Boolean({ + title: 'Resizable', + }), + }), + { + title: 'Layout', + category: 'Layout', + } ), }); diff --git a/packages/runtime/src/types/module.ts b/packages/runtime/src/types/module.ts index aa7b8543..3153faa4 100644 --- a/packages/runtime/src/types/module.ts +++ b/packages/runtime/src/types/module.ts @@ -3,10 +3,24 @@ import { Type } from '@sinclair/typebox'; import { RuntimeModule } from '@sunmao-ui/core'; export const ModuleSchema = Type.Object({ - id: Type.String(), - type: Type.String(), - properties: Type.Record(Type.String(), Type.Any()), - handlers: Type.Array(EventHandlerSchema), + id: Type.String({ + title: 'ID', + category: 'Basic', + }), + type: Type.String({ + title: 'Type', + category: 'Basic', + }), + properties: Type.Record(Type.String(), Type.Any(), { + title: 'Properties', + category: 'Basic', + }), + handlers: Type.Array(EventHandlerSchema, { + title: 'Handlers', + category: 'Basic', + }), +}, { + category: 'Appearance', }); export type ImplementedRuntimeModule = RuntimeModule; From 79c4c29e95a54b4265ebd5cc439018d4ef40cf14 Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Tue, 15 Feb 2022 15:19:05 +0800 Subject: [PATCH 2/2] chore: fix test cases and change some properties' spec --- .../chakra-ui-lib/src/components/Input.tsx | 44 ++++++++++++------- .../src/components/MultiSelect.tsx | 8 +++- .../src/components/NumberInput.tsx | 29 ++++++++---- .../chakra-ui-lib/src/components/Select.tsx | 8 +++- .../chakra-ui-lib/src/components/Stack.tsx | 38 ++++++++-------- .../src/components/Table/TableTypes.ts | 20 ++++++--- .../src/components/Table/spec.ts | 1 + .../chakra-ui-lib/src/components/Tooltip.tsx | 7 +++ .../src/components/Types/ColorScheme.ts | 8 ++-- packages/editor/__tests__/validator/mock.ts | 8 ++++ 10 files changed, 114 insertions(+), 57 deletions(-) diff --git a/packages/chakra-ui-lib/src/components/Input.tsx b/packages/chakra-ui-lib/src/components/Input.tsx index cb2d7110..489501b3 100644 --- a/packages/chakra-ui-lib/src/components/Input.tsx +++ b/packages/chakra-ui-lib/src/components/Input.tsx @@ -13,20 +13,34 @@ import { css } from '@emotion/css'; import { BASIC, APPEARANCE, BEHAVIOR } from './constants/category'; const getAppendElementPropertySchema = (options?: Record) => - Type.Union( - [ - Type.Object({ - type: Type.KeyOf(Type.Object({ addon: Type.String() })), - children: Type.Optional(Type.String()), // TODO: ReactNode - }), - Type.Object({ - type: Type.KeyOf(Type.Object({ element: Type.String() })), - children: Type.Optional(Type.String()), // TODO: ReactNode - fontSize: Type.Optional(Type.String()), - color: Type.Optional(Type.String()), - }), - ], - options + Type.Optional( + Type.Union( + [ + Type.Object({ + type: Type.KeyOf(Type.Object({ addon: Type.String() }), { + title: 'Type', + }), + children: Type.String({ + title: 'Content', + }), // TODO: ReactNode + }), + Type.Object({ + type: Type.KeyOf(Type.Object({ element: Type.String() }), { + title: 'Type', + }), + children: Type.String({ + title: 'Content', + }), // TODO: ReactNode + fontSize: Type.String({ + title: 'Font Size', + }), + color: Type.String({ + title: 'Color', + }), + }), + ], + options + ) ); const StateSchema = Type.Object({ @@ -103,8 +117,6 @@ export default implementRuntimeComponent({ focusBorderColor: '', isDisabled: false, isRequired: false, - left: {}, - right: {}, defaultValue: '', }, exampleSize: [4, 1], diff --git a/packages/chakra-ui-lib/src/components/MultiSelect.tsx b/packages/chakra-ui-lib/src/components/MultiSelect.tsx index 4b357d78..4bb7cc1e 100644 --- a/packages/chakra-ui-lib/src/components/MultiSelect.tsx +++ b/packages/chakra-ui-lib/src/components/MultiSelect.tsx @@ -12,8 +12,12 @@ const StateSchema = Type.Object({ const OptionsSchema = Type.Array( Type.Object({ - label: Type.String(), - value: Type.String(), + label: Type.String({ + title: 'Label', + }), + value: Type.String({ + title: 'Value', + }), }), { title: 'Options', diff --git a/packages/chakra-ui-lib/src/components/NumberInput.tsx b/packages/chakra-ui-lib/src/components/NumberInput.tsx index 0fc87eda..d1f11a94 100644 --- a/packages/chakra-ui-lib/src/components/NumberInput.tsx +++ b/packages/chakra-ui-lib/src/components/NumberInput.tsx @@ -54,7 +54,7 @@ const PropsSchema = Type.Object({ category: APPEARANCE, } ), - customerIncrement: Type.Object( + customerIncrement: Type.Optional(Type.Object( { bg: Type.String({ title: 'Background', @@ -62,14 +62,20 @@ const PropsSchema = Type.Object({ children: Type.String({ title: 'Text', }), - _active: Type.Object({ bg: Type.String() }), + _active: Type.Object({ + bg: Type.String({ + title: 'Active Background', + }), + }, { + title: 'Active', + }), }, { title: 'Increment Button', category: APPEARANCE, } - ), - customerDecrement: Type.Object( + )), + customerDecrement: Type.Optional(Type.Object( { bg: Type.String({ title: 'Background', @@ -77,13 +83,22 @@ const PropsSchema = Type.Object({ children: Type.String({ title: 'Text', }), - _active: Type.Object({ bg: Type.String() }), + _active: Type.Object( + { + bg: Type.String({ + title: 'Active Background', + }), + }, + { + title: 'Active', + } + ), }, { title: 'Decrement Button', category: APPEARANCE, } - ), + )), }); const StateSchema = Type.Object({ @@ -107,8 +122,6 @@ export default implementRuntimeComponent({ clampValueOnBlur: false, allowMouseWheel: false, size: 'md', - customerIncrement: {}, - customerDecrement: {}, }, exampleSize: [4, 1], annotations: { diff --git a/packages/chakra-ui-lib/src/components/Select.tsx b/packages/chakra-ui-lib/src/components/Select.tsx index 0fa295b2..099135ac 100644 --- a/packages/chakra-ui-lib/src/components/Select.tsx +++ b/packages/chakra-ui-lib/src/components/Select.tsx @@ -12,8 +12,12 @@ const StateSchema = Type.Object({ const PropsSchema = Type.Object({ options: Type.Array( Type.Object({ - label: Type.String(), - value: Type.String(), + label: Type.String({ + title: 'Label', + }), + value: Type.String({ + title: 'Value', + }), }), { title: 'Options', diff --git a/packages/chakra-ui-lib/src/components/Stack.tsx b/packages/chakra-ui-lib/src/components/Stack.tsx index be92983e..f93fe8e0 100644 --- a/packages/chakra-ui-lib/src/components/Stack.tsx +++ b/packages/chakra-ui-lib/src/components/Stack.tsx @@ -3,9 +3,17 @@ import { Stack as BaseStack } from '@chakra-ui/react'; import { implementRuntimeComponent } from '@sunmao-ui/runtime'; import { LAYOUT } from './constants/category'; -export const DirectionSchema = Type.Optional( - Type.Union( - [ +export const DirectionSchema = Type.Union( + [ + Type.KeyOf( + Type.Object({ + column: Type.String(), + 'column-reverse': Type.String(), + row: Type.String(), + 'row-reverse': Type.String(), + }) + ), + Type.Array( Type.KeyOf( Type.Object({ column: Type.String(), @@ -13,23 +21,13 @@ export const DirectionSchema = Type.Optional( row: Type.String(), 'row-reverse': Type.String(), }) - ), - Type.Array( - Type.KeyOf( - Type.Object({ - column: Type.String(), - 'column-reverse': Type.String(), - row: Type.String(), - 'row-reverse': Type.String(), - }) - ) - ), - ], - { - title: 'Flex Direction', - category: LAYOUT, - } - ) + ) + ), + ], + { + title: 'Flex Direction', + category: LAYOUT, + } ); export const FlexWrapSchema = Type.KeyOf( Type.Object({ diff --git a/packages/chakra-ui-lib/src/components/Table/TableTypes.ts b/packages/chakra-ui-lib/src/components/Table/TableTypes.ts index b13e8dfa..2d90af02 100644 --- a/packages/chakra-ui-lib/src/components/Table/TableTypes.ts +++ b/packages/chakra-ui-lib/src/components/Table/TableTypes.ts @@ -8,7 +8,7 @@ export const MajorKeyPropertySchema = Type.String({ category: BASIC, }); export const RowsPerPagePropertySchema = Type.Number({ - title: '', + title: 'Per Page Number', category: BEHAVIOR, }); export const DataPropertySchema = Type.Array(Type.Any(), { @@ -39,13 +39,23 @@ export const TdTypeSchema = Type.KeyOf( } ); export const ColumnSchema = Type.Object({ - key: Type.String(), - title: Type.String(), - displayValue: Type.Optional(Type.String()), + key: Type.String({ + title: 'Key', + }), + title: Type.String({ + title: 'Title', + }), + displayValue: Type.String({ + title: 'Display value', + }), type: TdTypeSchema, buttonConfig: Type.Object({ - text: Type.String(), + text: Type.String({ + title: 'Text', + }), handlers: Type.Array(EventHandlerSchema), + }, { + title: 'Button Config', }), module: ModuleSchema, }, { diff --git a/packages/chakra-ui-lib/src/components/Table/spec.ts b/packages/chakra-ui-lib/src/components/Table/spec.ts index 645989e4..98d75060 100644 --- a/packages/chakra-ui-lib/src/components/Table/spec.ts +++ b/packages/chakra-ui-lib/src/components/Table/spec.ts @@ -31,6 +31,7 @@ const exampleProperties = { key: 'name', title: 'Name', type: 'text', + displayValue: '', }, ], majorKey: 'id', diff --git a/packages/chakra-ui-lib/src/components/Tooltip.tsx b/packages/chakra-ui-lib/src/components/Tooltip.tsx index d726d529..898d2b9d 100644 --- a/packages/chakra-ui-lib/src/components/Tooltip.tsx +++ b/packages/chakra-ui-lib/src/components/Tooltip.tsx @@ -65,6 +65,13 @@ export default implementRuntimeComponent({ isResizable: false, exampleProperties: { text: 'tooltip', + defaultIsOpen: false, + placement: 'top', + shouldWrapChildren: false, + isDisabled: false, + isOpen: false, + hasArrow: true, + colorScheme: 'blue', }, exampleSize: [2, 1], annotations: { diff --git a/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts b/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts index 81e36479..398bdff8 100644 --- a/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts +++ b/packages/chakra-ui-lib/src/components/Types/ColorScheme.ts @@ -1,6 +1,6 @@ import { Type } from '@sinclair/typebox'; -export const getColorSchemePropertySchema = (options?: Record)=> Type.Optional( +export const getColorSchemePropertySchema = (options?: Record) => Type.KeyOf( Type.Object({ whiteAlpha: Type.String(), @@ -21,6 +21,6 @@ export const getColorSchemePropertySchema = (options?: Record)=> Ty whatsapp: Type.String(), twitter: Type.String(), telegram: Type.String(), - }), options - ) -); + }), + options + ); diff --git a/packages/editor/__tests__/validator/mock.ts b/packages/editor/__tests__/validator/mock.ts index 595593c8..956c3a88 100644 --- a/packages/editor/__tests__/validator/mock.ts +++ b/packages/editor/__tests__/validator/mock.ts @@ -74,6 +74,7 @@ export const ComponentWrongPropertyExpressionSchema: ComponentSchema[] = [ properties: { variant: 'outline', placeholder: '{{data.value}}', + focusBorderColor: '', size: 'md', isDisabled: false, isRequired: false, @@ -89,6 +90,8 @@ export const ComponentWrongPropertyExpressionSchema: ComponentSchema[] = [ raw: '{{fetch.data.value}}', format: 'md', }, + isLoading: false, + colorScheme: 'blue', }, traits: [ { @@ -169,6 +172,7 @@ export const EventTraitSchema: ComponentSchema[] = [ isDisabled: false, isRequired: false, defaultValue: '', + focusBorderColor: '', }, traits: [], }, @@ -180,6 +184,8 @@ export const EventTraitSchema: ComponentSchema[] = [ raw: 'hello', format: 'md', }, + isLoading: false, + colorScheme: 'blue', }, traits: [ { @@ -258,6 +264,8 @@ export const EventTraitTraitMethodSchema: ComponentSchema[] = [ raw: 'hello', format: 'md', }, + isLoading: false, + colorScheme: 'blue', }, traits: [ {