diff --git a/packages/react-component-manifests/src/manifests/Accordion/Accordion.manifest.ts b/packages/react-component-manifests/src/manifests/Accordion/Accordion.manifest.ts index 0ece9c3f1..98e933695 100644 --- a/packages/react-component-manifests/src/manifests/Accordion/Accordion.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Accordion/Accordion.manifest.ts @@ -67,6 +67,7 @@ const compManifest: ReactComponentManifestSchema = { custom: { treeId: CustomTreeId, initialValue: { + bordered : true, items: [ { title: `One`, diff --git a/packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx b/packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx index 0923f3e42..51c5a658f 100644 --- a/packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx +++ b/packages/react-component-manifests/src/manifests/Accordion/Accordion.tsx @@ -60,7 +60,11 @@ const Accordion = forwardRef< {props.custom?.items?.map((item, index) => ( diff --git a/packages/react-component-manifests/src/manifests/Accordion/Chevron.tsx b/packages/react-component-manifests/src/manifests/Accordion/Chevron.tsx deleted file mode 100644 index bdeac4eb8..000000000 --- a/packages/react-component-manifests/src/manifests/Accordion/Chevron.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -export type ChevronTypes = { - className: string; - fill: string; -}; - -const Chevron: React.FC = ({ className, fill }) => { - return ( - - - - ); -}; - -export default Chevron; diff --git a/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.manifest.ts b/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.manifest.ts index 3a1a5b003..a889055bd 100644 --- a/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.manifest.ts @@ -5,6 +5,7 @@ import CSSTreeId from "@atrilabs/app-design-forest/src/cssTree?id"; import { CSSTreeOptions } from "@atrilabs/app-design-forest/src/cssTree"; import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest/src/customPropsTree"; import CustomTreeId from "@atrilabs/app-design-forest/src/customPropsTree?id"; +import Joi from "joi"; const cssTreeOptions: CSSTreeOptions = { boxShadowOptions: true, @@ -24,25 +25,20 @@ const customTreeOptions: CustomPropsTreeOptions = { separator: { type: "text", }, - items: { - type: "array_map", - singleObjectName: "item", - attributes: [ - { - fieldName: "title", - type: "text", - }, - { - fieldName: "href", - type: "text", - }, - { - fieldName: "icon", - type: "static_asset", - }, - - ], + type: "json", + schema: Joi.array() + .unique() + .items( + Joi.object({ + title: Joi.string().required(), + href: Joi.string().optional(), + menu: Joi.object({ + items: Joi.link("#breadcrumbData").optional() + }), + }) + ) + .id("breadcrumbData"), }, }, }; @@ -65,19 +61,20 @@ const compManifest: ReactComponentManifestSchema = { items: [ { title: "Home", - href: "", + href: "/index", }, { title: "Application Center", - href: "", + href: "home", }, { title: "Application List", - href: "", + href: "a", }, { - title: "An Application", - href: "", + title: "Menu", + href: "a", + menu: { items: [{title: 'Sub-Menu'}], }, }, ], }, diff --git a/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.tsx b/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.tsx index 09943ab82..fe368ac26 100644 --- a/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.tsx +++ b/packages/react-component-manifests/src/manifests/Breadcrumb/Breadcrumb.tsx @@ -1,42 +1,55 @@ -import React, { forwardRef } from "react"; +import React, { forwardRef, useMemo } from "react"; import { Breadcrumb as AntdBreadcrumb } from "antd"; +interface item { + title: string; + href?: string; + icon: string; + menu?: { + items: item[]; + }; +} + const Breadcrumb = forwardRef< HTMLDivElement, { styles: React.CSSProperties; custom: { separator?: string; - items: { - title?: string; - href?: string; - icon: string; - }[]; + items: item[]; }; className?: string; onClick?: React.MouseEventHandler; } >((props, ref) => { + const breadcrumbItems = useMemo(() => { + return props.custom.items.map((item) => { + if (item.menu) { + return { + title: {item.title}, + menu: { + items: item.menu.items.map((subItem: item) => ({ + title: subItem.title, + })), + }, + }; + } + if (item.href) { + return { + title: {item.title}, + }; + } + return item; + }); + }, [props.custom.items]); return (
- {props.custom.items.map((item, index: number) => ( - -
- {item.icon ? {item.icon} : undefined} - {item.title} -
- - ))} - + items={breadcrumbItems} + />
); }); diff --git a/packages/react-component-manifests/src/manifests/Card/Card.manifest.ts b/packages/react-component-manifests/src/manifests/Card/Card.manifest.ts index a08d13152..bf76b42f5 100644 --- a/packages/react-component-manifests/src/manifests/Card/Card.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Card/Card.manifest.ts @@ -32,6 +32,7 @@ const customTreeOptions: CustomPropsTreeOptions = { type: "enum", options: ["default", "small"], }, + loading: { type: "boolean" }, hoverable: { type: "boolean" }, bordered: { type: "boolean" }, cover: { type: "static_asset" }, diff --git a/packages/react-component-manifests/src/manifests/Card/Card.tsx b/packages/react-component-manifests/src/manifests/Card/Card.tsx index eb25a79a3..477a42dd7 100644 --- a/packages/react-component-manifests/src/manifests/Card/Card.tsx +++ b/packages/react-component-manifests/src/manifests/Card/Card.tsx @@ -19,6 +19,7 @@ const Card = forwardRef< avatar: string; description: ReactNode; size?: Size; + loading?: boolean; }; className?: string; onTabChange?: (key: string) => void; @@ -34,6 +35,7 @@ const Card = forwardRef< size={props.custom.size} cover={{props.custom.cover}} onTabChange={props.onTabChange} + loading={props.custom.loading} > {props.custom.type === "card" &&

{props.custom.description}

} {props.custom.type === "meta" && ( diff --git a/packages/react-component-manifests/src/manifests/Carousel/Carousel.manifest.ts b/packages/react-component-manifests/src/manifests/Carousel/Carousel.manifest.ts index 1cdc1e14b..2e2b6be69 100644 --- a/packages/react-component-manifests/src/manifests/Carousel/Carousel.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Carousel/Carousel.manifest.ts @@ -26,7 +26,7 @@ const customTreeOptions: CustomPropsTreeOptions = { dots: { type: "boolean" }, dotPosition: { type: "enum", - options: ["Bottom", "top", "left", "right"], + options: ["bottom", "top", "left", "right"], }, effect: { type: "enum", diff --git a/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.dev.tsx b/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.dev.tsx new file mode 100644 index 000000000..2f107b052 --- /dev/null +++ b/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.dev.tsx @@ -0,0 +1,8 @@ +import { forwardRef } from "react"; +import Checkbox from "./Checkbox"; + +const DevCheckbox: typeof Checkbox = forwardRef((props, ref) => { + props.custom.disabled = true; + return ; +}); +export default DevCheckbox; diff --git a/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.manifest.ts b/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.manifest.ts index a76f9c2c3..8651055ca 100644 --- a/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.manifest.ts @@ -22,8 +22,28 @@ const cssTreeOptions: CSSTreeOptions = { const customTreeOptions: CustomPropsTreeOptions = { dataTypes: { - checked: { type: "boolean" }, - text:{type:"text"} + defaultValue: { type: "array" }, + disabled: { type: "boolean" }, + name: { type: "text" }, + value: { type: "array" }, + options: { + type: "array_map", + singleObjectName: "item", + attributes: [ + { + fieldName: "label", + type: "text", + }, + { + fieldName: "value", + type: "text", + }, + { + fieldName: "disabled", + type: "boolean", + }, + ], + }, }, }; @@ -41,8 +61,11 @@ const compManifest: ReactComponentManifestSchema = { custom: { treeId: CustomTreeId, initialValue: { - checked: false, - text:"Checkbox" + options: [ + { value: "one", label: "One" }, + { value: "two", label: "Two" }, + { value: "three", label: "Three" }, + ], }, treeOptions: customTreeOptions, canvasOptions: { groupByBreakpoint: false }, diff --git a/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.tsx b/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.tsx index 791c7346f..877bb0287 100644 --- a/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.tsx +++ b/packages/react-component-manifests/src/manifests/Checkbox/Checkbox.tsx @@ -1,27 +1,38 @@ import React, { forwardRef } from "react"; import { Checkbox as AntdCheckbox } from "antd"; -import { CheckboxChangeEvent } from "antd/es/checkbox"; +import type { CheckboxValueType } from "antd/es/checkbox/Group"; + +interface Option { + label: string; + value: string; + disabled?: boolean; +} const Checkbox = forwardRef< HTMLInputElement, { styles: React.CSSProperties; - custom: { checked: boolean; text: string[] }; - onChange: (event: CheckboxChangeEvent) => void + custom: { + defaultValue: (string | number)[]; + disabled?: boolean; + options: Option[]; + name?: string; + value?: (string | number | boolean)[]; + }; + onChange?: (checkedValue: Array) => void; className?: string; } >((props, ref) => { + const { custom } = props; // moved ref to div, as the Antd Checkbox doesnt provide ref for Checkbox return ( -
- + - {props.custom.text} - + />
); }); diff --git a/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.manifest.ts b/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.manifest.ts index eb46e94bd..6fccf7513 100644 --- a/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.manifest.ts +++ b/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.manifest.ts @@ -29,12 +29,14 @@ const customTreeOptions: CustomPropsTreeOptions = { "html", "java", "javascript", - "php", "json", - "rust", + "jsx", + "php", "python", - "xml", + "rust", "sql", + "typescript", + "xml", ], }, value: { type: "large_text" }, diff --git a/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.tsx b/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.tsx index cd07eb54e..690b65e88 100644 --- a/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.tsx +++ b/packages/react-component-manifests/src/manifests/CodeMirror/CodeMirror.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useCallback } from "react"; +import React, { forwardRef, useCallback, useState } from "react"; import ReactCodeMirror from "@uiw/react-codemirror"; import { javascript } from "@codemirror/lang-javascript"; import { css } from "@codemirror/lang-css"; @@ -10,6 +10,8 @@ import { python } from "@codemirror/lang-python"; import { rust } from "@codemirror/lang-rust"; import { sql } from "@codemirror/lang-sql"; import { xml } from "@codemirror/lang-xml"; +import { CopyOutlined } from "@ant-design/icons"; +import { ViewUpdate } from "@codemirror/view"; export type ExtensionType = | "css" @@ -21,7 +23,8 @@ export type ExtensionType = | "rust" | "python" | "xml" - | "sql"; + | "sql" + | "typescript"; export type ThemeType = "light" | "dark"; const CodeMirror = forwardRef< @@ -35,7 +38,6 @@ const CodeMirror = forwardRef< placeholder?: string | HTMLElement; editable?: boolean; extensions: ExtensionType; - lineNumbers?: boolean; highlightActiveLineGutter?: boolean; highlightSpecialChars?: boolean; @@ -69,20 +71,26 @@ const CodeMirror = forwardRef< width: number; height: number; }) => void; + onChange?(value: string, viewUpdate: ViewUpdate): void; className?: string; } >((props, ref) => { + const [isCopied, setIsCopied] = useState(false); + const [codeMirrorCode, setCodeMirrorValue] = useState(""); + const languageExtensions = { - javascript: javascript(), - java: java(), - rust: rust(), - html: html(), - xml: xml(), css: css(), + html: html(), + java: java(), + javascript: javascript(), + json: json(), + jsx: javascript({ jsx: true }), + php: php(), python: python(), + rust: rust(), sql: sql(), - php: php(), - json: json(), + typescript: javascript({ typescript: true }), + xml: xml(), }; const onClick = useCallback( @@ -101,49 +109,90 @@ const CodeMirror = forwardRef< }, [props] ); + const copyToClipboard = async () => { + try { + await navigator.clipboard.writeText(codeMirrorCode); + setIsCopied(true); + setTimeout(() => setIsCopied(false), 1000); // Remove "Copied!" after 1 seconds + } catch (err) { + setIsCopied(false); + } + }; + + const handleChange = (value: string, viewUpdate: ViewUpdate) => { + setCodeMirrorValue(value); + if (props.onChange) { + props.onChange(value, viewUpdate); + } + }; return ( -
- -
+ <> + +
+ + +
+ ); }); diff --git a/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.manifest.ts b/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.manifest.ts index b53221c16..4df317959 100644 --- a/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.manifest.ts +++ b/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.manifest.ts @@ -24,14 +24,31 @@ const customTreeOptions: CustomPropsTreeOptions = { dataTypes: { picker: { type: "enum", - options: ["", "week", "month", "quarter", "year"], + options: ["date", "week", "month", "quarter", "year"], }, showTime: { type: "boolean", }, - disabled: { - type: "boolean", + size: { + type: "enum", + options: ["small", "middle", "large"], + }, + placement: { + type: "enum", + options: ["bottomLeft", "bottomRight", "topLeft", "topRight"], + }, + format: { + type: "enum", + options: ["YYYY-MM-DD", "MM-DD-YYYY", "DD-MM-YYYY"], + }, + placeholder: { type: "array" }, + bordered: { type: "boolean" }, + disabled: { type: "boolean" }, + status: { + type: "enum", + options: ["none", "error", "warning"], }, + range: { type: "boolean" }, }, }; @@ -48,9 +65,7 @@ const compManifest: ReactComponentManifestSchema = { }, custom: { treeId: CustomTreeId, - initialValue: { - content: "I am Text", - }, + initialValue: { bordered: true }, treeOptions: customTreeOptions, canvasOptions: { groupByBreakpoint: false }, }, @@ -59,7 +74,7 @@ const compManifest: ReactComponentManifestSchema = { onClick: [{ type: "controlled", selector: ["custom", "open"] }], }, defaultCallbackHandlers: { - onOpenChange :[{ sendEventData: true }], + onOpenChange: [{ sendEventData: true }], }, }, }; diff --git a/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.tsx b/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.tsx index c682a1eac..5f1155dfd 100644 --- a/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.tsx +++ b/packages/react-component-manifests/src/manifests/DatePicker/DatePicker.tsx @@ -1,28 +1,65 @@ -import React, { forwardRef } from "react"; +import React, { forwardRef, useMemo } from "react"; import { DatePicker as AntdDatePicker } from "antd"; +const { RangePicker } = AntdDatePicker; export type PickerType = "week" | "month" | "quarter" | "year"; +export interface BasePickerProps { + allowClear?: boolean; + picker?: PickerType; + showTime?: boolean; + disabled?: boolean; + format?: "YYYY-MM-DD" | "MM-DD-YYYY" | "DD-MM-YYYY"; + bordered?: boolean; + status?: "error" | "warning"; + placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight"; + range?: boolean; +} +export interface RangePickerProps extends BasePickerProps { + placeholder?: [string, string]; +} +export interface DatePickerProps extends BasePickerProps { + placeholder?: string; +} + const DatePicker = forwardRef< HTMLDivElement, { styles: React.CSSProperties; className?: string; - custom: { picker?: PickerType; showTime?: boolean; disabled?: boolean }; + custom: RangePickerProps | DatePickerProps; onOpenChange?: (open: boolean) => void; } >((props, ref) => { - // moved ref to div, as the Antd DatePicker doesnt provide ref for DatePicker + const { custom } = props; + const { range, ...restprops } = custom; + const key = useMemo(() => { + if (range) { + return Math.random(); + } + }, [range]); + return ( + // moved ref to div, as the Antd DatePicker doesnt provide ref for DatePicker
- + {range ? ( + + ) : ( + + )}
); }); diff --git a/packages/react-component-manifests/src/manifests/Drawer/Drawer.dev.tsx b/packages/react-component-manifests/src/manifests/Drawer/Drawer.dev.tsx new file mode 100644 index 000000000..c715d4b07 --- /dev/null +++ b/packages/react-component-manifests/src/manifests/Drawer/Drawer.dev.tsx @@ -0,0 +1,24 @@ +import React, { forwardRef } from "react"; +import Drawer from "./Drawer"; + +const DevDrawer: typeof Drawer = forwardRef((props, ref) => { + const divStyleProps: React.CSSProperties = + props.custom.open === true + ? { + height: "20vh", + width: "100vw", + borderWidth: `2px`, + borderColor: `gray`, + borderStyle: `dashed`, + boxSizing: "border-box", + display: "inline-block", + } + : {}; + + return ( +
+ +
+ ); +}); +export default DevDrawer; diff --git a/packages/react-component-manifests/src/manifests/Drawer/Drawer.manifest.ts b/packages/react-component-manifests/src/manifests/Drawer/Drawer.manifest.ts new file mode 100644 index 000000000..6db9a7197 --- /dev/null +++ b/packages/react-component-manifests/src/manifests/Drawer/Drawer.manifest.ts @@ -0,0 +1,124 @@ +import reactSchemaId from "@atrilabs/react-component-manifest-schema?id"; +import type { + ReactComponentManifestSchema, + AcceptsChildFunction, +} from "@atrilabs/react-component-manifest-schema"; +import iconSchemaId from "@atrilabs/component-icon-manifest-schema?id"; +import CSSTreeId from "@atrilabs/app-design-forest/src/cssTree?id"; +import { CSSTreeOptions } from "@atrilabs/app-design-forest"; +import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest"; +import CustomTreeId from "@atrilabs/app-design-forest/src/customPropsTree?id"; +import { + flexRowSort, + flexColSort, + flexRowReverseSort, + flexColReverseSort, +} from "@atrilabs/react-component-manifest-schema"; + +const acceptsChild: AcceptsChildFunction = (info: any) => { + if (info.childCoordinates.length === 0) { + return 0; + } + const flexDirection: "row" | "column" | "row-reverse" | "column-reverse" = + info.props.styles["flexDirection"] || "row"; + let index = 0; + switch (flexDirection) { + case "row": + index = flexRowSort(info.loc, info.childCoordinates) || 0; + break; + case "column": + index = flexColSort(info.loc, info.childCoordinates) || 0; + break; + case "row-reverse": + index = flexRowReverseSort(info.loc, info.childCoordinates) || 0; + break; + case "column-reverse": + index = flexColReverseSort(info.loc, info.childCoordinates) || 0; + break; + } + return index; +}; +const cssTreeOptions: CSSTreeOptions = { + boxShadowOptions: true, + flexContainerOptions: true, + flexChildOptions: true, + positionOptions: true, + typographyOptions: true, + spacingOptions: true, + sizeOptions: true, + borderOptions: true, + outlineOptions: true, + backgroundOptions: true, + miscellaneousOptions: true, +}; + +const customTreeOptions: CustomPropsTreeOptions = { + dataTypes: { + open: { type: "boolean" }, + title: { type: "text" }, + placement: { type: "enum", options: ["left", "top", "right", "bottom"] }, + size: { type: "enum", options: ["default", "large"] }, + closable: { type: "boolean" }, + destroyOnClose: { type: "boolean" }, + forceRender: { type: "boolean" }, + autoFocus: { type: "boolean" }, + keyboard: { type: "boolean" }, + mask: { type: "boolean" }, + maskClosable: { type: "boolean" }, + zIndex: { type: "number" }, + }, +}; + +const compManifest: ReactComponentManifestSchema = { + meta: { key: "Drawer", category: "Basics" }, + dev: { + decorators: [], + attachProps: { + styles: { + treeId: CSSTreeId, + initialValue: {}, + treeOptions: cssTreeOptions, + canvasOptions: { groupByBreakpoint: true }, + }, + custom: { + treeId: CustomTreeId, + initialValue: { + title: "Title", + placement: "right", + autoFocus: true, + keyboard: true, + mask: true, + maskClosable: true, + closable: true, + }, + treeOptions: customTreeOptions, + canvasOptions: { groupByBreakpoint: false }, + }, + }, + attachCallbacks: { + onClick: [{ type: "do_nothing" }], + onClose: [{ type: "do_nothing" }], + afterOpenChange: [{ type: "do_nothing" }], + }, + defaultCallbackHandlers: { + onClick: [{ sendEventData: true }], + }, + acceptsChild, + }, +}; + +const iconManifest = { + panel: { comp: "CommonIcon", props: { name: "Drawer" } }, + drag: { + comp: "CommonIcon", + props: { name: "Drawer", containerStyle: { padding: "1rem" } }, + }, + renderSchema: compManifest, +}; + +export default { + manifests: { + [reactSchemaId]: compManifest, + [iconSchemaId]: iconManifest, + }, +}; diff --git a/packages/react-component-manifests/src/manifests/Drawer/Drawer.tsx b/packages/react-component-manifests/src/manifests/Drawer/Drawer.tsx new file mode 100644 index 000000000..0fbeb98e7 --- /dev/null +++ b/packages/react-component-manifests/src/manifests/Drawer/Drawer.tsx @@ -0,0 +1,57 @@ +import React, { forwardRef } from "react"; +import { Drawer as AntdDrawer } from "antd"; + +const Drawer = forwardRef< + HTMLDivElement, + { + styles: React.CSSProperties; + children?: React.ReactNode[]; + custom: { + open?: boolean; + placement?: "left" | "top" | "right" | "bottom"; + content?: string; + closable?: boolean; + size?: "default" | "large"; + destroyOnClose?: boolean; + forceRender?: boolean; + autoFocus?: boolean; + keyboard?: boolean; + mask?: boolean; + maskClosable?: boolean; + zIndex?: number; + }; + onClose?: Function; + afterOpenChange: Function; + className?: string; + } +>((props, ref) => { + const { custom } = props; + + const handleClose = () => { + if (props.onClose) { + props.onClose(); + } + }; + + const handleAfterOpenChange = () => { + if (props.afterOpenChange) { + props.afterOpenChange(); + } + }; + + return ( +
+ + {props.children} + +
+ ); +}); +export default Drawer; diff --git a/packages/react-component-manifests/src/manifests/Modal/Modal.dev.tsx b/packages/react-component-manifests/src/manifests/Modal/Modal.dev.tsx deleted file mode 100644 index 43cf7ede8..000000000 --- a/packages/react-component-manifests/src/manifests/Modal/Modal.dev.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import Modal from "./Modal"; -import React, { useState } from "react"; -import { Button } from "antd"; - -const DevModal: typeof Modal = React.forwardRef((props, ref) => { - const [isModalOpen, setIsModalOpen] = useState(false); - - const showModal = () => { - setIsModalOpen(true); - }; - - const handleOk = () => { - setIsModalOpen(false); - }; - - const handleCancel = () => { - setIsModalOpen(false); - }; - - return ( -
- - -
- ); -}); - -export default DevModal; diff --git a/packages/react-component-manifests/src/manifests/Modal/Modal.manifest.ts b/packages/react-component-manifests/src/manifests/Modal/Modal.manifest.ts index c6ba283f6..519357e7f 100644 --- a/packages/react-component-manifests/src/manifests/Modal/Modal.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Modal/Modal.manifest.ts @@ -22,10 +22,9 @@ const cssTreeOptions: CSSTreeOptions = { const customTreeOptions: CustomPropsTreeOptions = { dataTypes: { + open: { type: "boolean" }, text: { type: "text" }, content: { type: "large_text" }, - cancelText: { type: "text" }, - okText: { type: "text" }, centered: { type: "boolean" }, icon: { type: "static_asset" }, closable: { type: "boolean" }, @@ -35,7 +34,7 @@ const customTreeOptions: CustomPropsTreeOptions = { mask: { type: "boolean" }, maskClosable: { type: "boolean" }, zIndex: { type: "number" }, - open: { type: "boolean" }, + confirmLoading: { type: "boolean" }, }, }; @@ -66,6 +65,8 @@ const compManifest: ReactComponentManifestSchema = { }, attachCallbacks: { onClick: [{ type: "do_nothing" }], + onCancel: [{ type: "do_nothing" }], + afterClose: [{ type: "do_nothing" }], }, defaultCallbackHandlers: { onClick: [{ sendEventData: true }], diff --git a/packages/react-component-manifests/src/manifests/Modal/Modal.tsx b/packages/react-component-manifests/src/manifests/Modal/Modal.tsx index 3e4d9b147..3a4850166 100644 --- a/packages/react-component-manifests/src/manifests/Modal/Modal.tsx +++ b/packages/react-component-manifests/src/manifests/Modal/Modal.tsx @@ -5,6 +5,7 @@ const Modal = forwardRef< HTMLDivElement, { styles: React.CSSProperties; + children?: React.ReactNode[]; custom: { text?: string; content?: string; @@ -21,30 +22,25 @@ const Modal = forwardRef< icon?: string; closeIcon?: string; open?: boolean; + confirmLoading?: boolean; }; onCancel?: Function; - onOk?: Function; afterClose: Function; className?: string; } >((props, ref) => { - const handleOk = () => { - if (props.onOk) { - props.onOk(); - } - }; - const handleCancel = () => { if (props.onCancel) { props.onCancel(); } }; - + const { custom } = props; return (
{props.custom.icon && ( @@ -53,23 +49,13 @@ const Modal = forwardRef< {props.custom.text}
} - open={props.custom.open} - onOk={handleOk} onCancel={handleCancel} - cancelText={props.custom.cancelText} - okText={props.custom.okText} - centered={props.custom.centered} - closable={props.custom.closable} - destroyOnClose={props.custom.destroyOnClose} - keyboard={props.custom.keyboard} - mask={props.custom.mask} - maskClosable={props.custom.maskClosable} - zIndex={props.custom.zIndex} closeIcon={ props.custom.closeIcon && ( {props.custom.closeIcon} ) } + footer={null} > {props.custom.icon !== undefined || "" ? (
{props.custom.content}
diff --git a/packages/react-component-manifests/src/manifests/Radio/Radio.dev.tsx b/packages/react-component-manifests/src/manifests/Radio/Radio.dev.tsx new file mode 100644 index 000000000..8bd47855a --- /dev/null +++ b/packages/react-component-manifests/src/manifests/Radio/Radio.dev.tsx @@ -0,0 +1,8 @@ +import { forwardRef } from "react"; +import Radio from "./Radio"; + +const DevRadio: typeof Radio = forwardRef((props, ref) => { + props.custom.disabled = true; + return ; +}); +export default DevRadio; diff --git a/packages/react-component-manifests/src/manifests/Radio/Radio.manifest.ts b/packages/react-component-manifests/src/manifests/Radio/Radio.manifest.ts index c1fa430b0..82fba675d 100644 --- a/packages/react-component-manifests/src/manifests/Radio/Radio.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Radio/Radio.manifest.ts @@ -22,10 +22,34 @@ const cssTreeOptions: CSSTreeOptions = { const customTreeOptions: CustomPropsTreeOptions = { dataTypes: { + defaultValue: { type: "text" }, + disabled: { type: "boolean" }, name: { type: "text" }, - label: { type: "text" }, - checked: { type: "boolean" }, - radius: { type: "number" }, + value: { type: "array" }, + optionType: { type: "enum", options: ["default", "button"] }, + buttonStyle: { type: "enum", options: ["outline", "solid"] }, + size: { + type: "enum", + options: ["middle", "large", "small"], + }, + options: { + type: "array_map", + singleObjectName: "option", + attributes: [ + { + fieldName: "label", + type: "text", + }, + { + fieldName: "value", + type: "text", + }, + { + fieldName: "disabled", + type: "boolean", + }, + ], + }, }, }; @@ -36,21 +60,19 @@ const compManifest: ReactComponentManifestSchema = { attachProps: { styles: { treeId: CSSTreeId, - initialValue: { - cursor: "pointer", - display: "inline-flex", - columnGap: "10px", - alignItems: "center", - }, + initialValue: {}, treeOptions: cssTreeOptions, canvasOptions: { groupByBreakpoint: true }, }, custom: { treeId: CustomTreeId, initialValue: { - name: "", - label: "Radio", - checked: false, + options: [ + { value: "one", label: "One" }, + { value: "two", label: "Two" }, + { value: "three", label: "Three" }, + ], + size: "middle", }, treeOptions: customTreeOptions, canvasOptions: { groupByBreakpoint: false }, diff --git a/packages/react-component-manifests/src/manifests/Radio/Radio.tsx b/packages/react-component-manifests/src/manifests/Radio/Radio.tsx index 4d9d8ffbf..4187596e7 100644 --- a/packages/react-component-manifests/src/manifests/Radio/Radio.tsx +++ b/packages/react-component-manifests/src/manifests/Radio/Radio.tsx @@ -6,33 +6,35 @@ const Radio = forwardRef< { styles: React.CSSProperties; custom: { - name: string; - text: string[]; - checked: boolean; - radius?: string; - options?: any; + disabled: boolean; + options?: + | string[] + | number[] + | Array<{ label: React.ReactNode; value: string; disabled?: boolean }>; + defaultValue?: + | string + | number + | Array<{ label: React.ReactNode; value: string; disabled?: boolean }>; + value?: string | number; + optionType?: "default" | "button"; + size?: "large" | "middle" | "small"; + name?: string; + buttonStyle?: "outline" | "solid"; }; onChange: (event: RadioChangeEvent) => void; className?: string; } >((props, ref) => { - // moved ref to div, as the Antd Radio doesnt provide ref for Radio + const { custom } = props; + // moved ref to div, as the Antd Radio doesn't provide ref for Radio return (
- - {props.custom.text ? props.custom.text : "label"} - + {...custom} + />
); }); diff --git a/packages/react-component-manifests/src/manifests/Step/Step.manifest.ts b/packages/react-component-manifests/src/manifests/Step/Step.manifest.ts index 157b6ab14..f4c8f54c8 100644 --- a/packages/react-component-manifests/src/manifests/Step/Step.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Step/Step.manifest.ts @@ -26,7 +26,6 @@ const customTreeOptions: CustomPropsTreeOptions = { size : {type : "enum",options: ["default","small"]}, direction : {type : "enum",options: ["horizontal" , "vertical"]}, dotStyle :{type : "enum",options: ["","dot","withHover"]}, - clickable:{ type: "boolean" } , type: {type : "enum",options: ["default" , "navigation" , "inline"]}, percent: {type : "number"}, labelPlacement:{type : "enum",options: ["horizontal" , "vertical" ]}, @@ -86,7 +85,6 @@ const compManifest: ReactComponentManifestSchema = { size : "default", current : 1, direction : "horizontal", - clickable: false, }, treeOptions: customTreeOptions, canvasOptions: { groupByBreakpoint: false }, diff --git a/packages/react-component-manifests/src/manifests/Step/Step.tsx b/packages/react-component-manifests/src/manifests/Step/Step.tsx index e5cae5872..c010a7592 100644 --- a/packages/react-component-manifests/src/manifests/Step/Step.tsx +++ b/packages/react-component-manifests/src/manifests/Step/Step.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useMemo, useState } from "react"; +import React, { forwardRef, useMemo } from "react"; import { Steps, Popover } from "antd"; import type { StepProps, StepsProps } from "antd"; import type { ProgressDotRender } from "rc-steps/lib/Steps"; @@ -18,22 +18,12 @@ const Step = forwardRef< type?: "default" | "navigation" | "inline"; percent?: number; labelPlacement?: "horizontal" | "vertical"; + onChange?: (current: number) => void; }; onClick: (event: { pageX: number; pageY: number }) => void; className?: string; } >((props, ref) => { - const [currentStep, setCurrentStep] = useState(0); - const onChange = (value: number) => { - if ( - props.custom.clickable === false || - props.custom.clickable === undefined - ) { - return; - } else { - setCurrentStep(value); - } - }; const customDot: StepsProps["progressDot"] = (dot, { status, index }) => ( - {item.icon} + {item.icon} ), }; @@ -73,7 +63,7 @@ const Step = forwardRef< diff --git a/packages/react-component-manifests/src/manifests/Tabs/Tabs.tsx b/packages/react-component-manifests/src/manifests/Tabs/Tabs.tsx index c74ec96a8..94de33847 100644 --- a/packages/react-component-manifests/src/manifests/Tabs/Tabs.tsx +++ b/packages/react-component-manifests/src/manifests/Tabs/Tabs.tsx @@ -29,15 +29,11 @@ const Tabs = forwardRef< const { items } = custom; const tabItems = useMemo(() => { - if (children?.length) { - return items.map((item, index) => ({ - ...item, - children: children[index] || "", - })); - } else { - return items; - } - }, [items, children]); + return items.map((item, index) => ({ + ...item, + children: props.children, + })); + }, [items, props.children]); return (
diff --git a/packages/react-component-manifests/src/manifests/Tag/Tag.manifest.ts b/packages/react-component-manifests/src/manifests/Tag/Tag.manifest.ts index 5b371c43f..4b09f41a7 100644 --- a/packages/react-component-manifests/src/manifests/Tag/Tag.manifest.ts +++ b/packages/react-component-manifests/src/manifests/Tag/Tag.manifest.ts @@ -23,9 +23,6 @@ const cssTreeOptions: CSSTreeOptions = { const customTreeOptions: CustomPropsTreeOptions = { dataTypes: { text: { type: "text" }, - closable: { type: "boolean" }, - link: { type: "text" }, - color: { type: "color" }, variant: { type: "enum", options: ["default", "success", "processing", "error", "warning"], @@ -42,7 +39,10 @@ const customTreeOptions: CustomPropsTreeOptions = { "processing", ], }, + closable: { type: "boolean" }, closeIcon: { type: "static_asset" }, + link: { type: "text" }, + color: { type: "color" }, }, }; diff --git a/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.dev.tsx b/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.dev.tsx index ddd6125a9..9901c8ddf 100644 --- a/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.dev.tsx +++ b/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.dev.tsx @@ -2,7 +2,7 @@ import { forwardRef } from "react"; import TimePicker from "./TimePicker"; const DevTimePicker: typeof TimePicker = forwardRef((props, ref) => { - //props.custom.disabled = true; + props.custom.disabled = true; return ; }); diff --git a/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.manifest.ts b/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.manifest.ts index c625ce215..d6d499787 100644 --- a/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.manifest.ts +++ b/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.manifest.ts @@ -27,17 +27,29 @@ const customTreeOptions: CustomPropsTreeOptions = { type: "enum", options: ["small", "middle", "large"], }, + placement: { + type: "enum", + options: ["bottomLeft", "bottomRight", "topLeft", "topRight"], + }, format: { type: "enum", - options: ["HH:mm:ss", "HH:mm" ,"HH:mm:ss A","HH:mm:ss a","hh:mm A","hh:mm a"], + options: [ + "HH:mm:ss", + "HH:mm", + "HH:mm:ss A", + "HH:mm:ss a", + "hh:mm A", + "hh:mm a", + ], }, + placeholder: { type: "array" }, bordered: { type: "boolean" }, disabled: { type: "boolean" }, - status:{ + status: { type: "enum", - options: ["none","error", "warning"], + options: ["none", "error", "warning"], }, - range:{ type: "boolean" }, + range: { type: "boolean" }, }, }; @@ -54,7 +66,7 @@ const compManifest: ReactComponentManifestSchema = { }, custom: { treeId: CustomTreeId, - initialValue: { size: "middle" , bordered : true }, + initialValue: { size: "middle", bordered: true }, treeOptions: customTreeOptions, canvasOptions: { groupByBreakpoint: false }, }, diff --git a/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.tsx b/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.tsx index 40d83ef3e..e6f6f4727 100644 --- a/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.tsx +++ b/packages/react-component-manifests/src/manifests/TimePicker/TimePicker.tsx @@ -19,6 +19,12 @@ const TimePicker = forwardRef< use12Hours?: boolean; bordered?: boolean; status?: "error" | "warning"; + placement?: + | "bottomLeft" + | "bottomRight" + | "topLeft" + | "topRight" + | undefined; onOpenChange?: (open: boolean) => void; range?: boolean; }; @@ -35,7 +41,7 @@ const TimePicker = forwardRef< // moved ref to div, as the Antd TimePicker doesnt provide ref for TimePicker return (
- {range === true ? ( + {range ? (