diff --git a/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties.tsx b/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties.tsx deleted file mode 100644 index a931bead711..00000000000 --- a/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/** - * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import Stack from "@oxygen-ui/react/Stack"; -import Typography from "@oxygen-ui/react/Typography"; -import { IdentifiableComponentInterface } from "@wso2is/core/models"; -import isEmpty from "lodash-es/isEmpty"; -import React, { FunctionComponent, HTMLAttributes, ReactElement } from "react"; -import useAuthenticationFlowBuilderCore from "../../hooks/use-authentication-flow-builder-core-context"; -import { FieldKey, FieldValue } from "../../models/base"; -import { Element } from "../../models/elements"; - -/** - * Props interface of {@link ElementProperties} - */ -export type ElementPropertiesPropsInterface = IdentifiableComponentInterface & HTMLAttributes; - -/** - * Component to generate the properties panel for the selected element. - * - * @param props - Props injected to the component. - * @returns The ElementProperties component. - */ -const ElementProperties: FunctionComponent = ({ - "data-componentid": componentId = "authentication-flow-builder-element-properties", - ...rest -}: ElementPropertiesPropsInterface): ReactElement => { - const { lastInteractedElement, ElementPropertiesFactory } = useAuthenticationFlowBuilderCore(); - - const hasVariants: boolean = !isEmpty(lastInteractedElement?.variants); - - return ( -
- { lastInteractedElement ? ( - - { hasVariants - ? lastInteractedElement.variants.map((variant: Element) => { - return Object.entries( - variant?.config?.field - ).map(([ key, value ]: [FieldKey, FieldValue]) => ( - - )); - }) - : Object.entries( - lastInteractedElement?.config?.field - ).map(([ key, value ]: [FieldKey, FieldValue]) => ( - - )) } - - ) : ( - - No properties available. - - ) } -
- ); -}; - -export default ElementProperties; diff --git a/features/admin.authentication-flow-builder-core.v1/components/nodes/common-node-factory.tsx b/features/admin.authentication-flow-builder-core.v1/components/nodes/common-node-factory.tsx deleted file mode 100644 index d744fa7e159..00000000000 --- a/features/admin.authentication-flow-builder-core.v1/components/nodes/common-node-factory.tsx +++ /dev/null @@ -1,171 +0,0 @@ -/** - * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import Box from "@oxygen-ui/react/Box"; -import Button from "@oxygen-ui/react/Button"; -import Checkbox from "@oxygen-ui/react/Checkbox"; -import Divider from "@oxygen-ui/react/Divider"; -import FormControl from "@oxygen-ui/react/FormControl"; -import FormControlLabel from "@oxygen-ui/react/FormControlLabel"; -import FormLabel from "@oxygen-ui/react/FormLabel"; -import PhoneNumberInput from "@oxygen-ui/react/PhoneNumberInput"; -import Radio from "@oxygen-ui/react/Radio"; -import RadioGroup from "@oxygen-ui/react/RadioGroup"; -import TextField from "@oxygen-ui/react/TextField"; -import Typography from "@oxygen-ui/react/Typography"; -import { IdentifiableComponentInterface } from "@wso2is/core/models"; -import { Node } from "@xyflow/react"; -import React, { FunctionComponent, ReactElement } from "react"; -import { FieldOption } from "../../models/base"; -import { Component, ComponentTypes } from "../../models/component"; -import { ElementCategories } from "../../models/elements"; - -/** - * Props interface of {@link CommonNodeFactory} - */ -export interface CommonNodeFactoryPropsInterface extends IdentifiableComponentInterface { - /** - * The flow id of the node. - */ - nodeId: string; - /** - * The node properties. - */ - node: Component; -} - -/** - * Node for representing an empty step in the authentication flow. - * - * @param props - Props injected to the component. - * @returns Step Node component. - */ -export const CommonNodeFactory: FunctionComponent = ({ - node -}: CommonNodeFactoryPropsInterface & Node): ReactElement => { - if (node.category === ElementCategories.Component) { - if ( - node.type === ComponentTypes.Text || - node.type === ComponentTypes.Password || - node.type === ComponentTypes.Number || - node.type === ComponentTypes.Email - ) { - return ( - - ); - } else if (node.type === ComponentTypes.Telephone) { - return ( - - ); - } else if (node.type === ComponentTypes.Checkbox) { - return ( - } - className={ node.config?.field?.className } - defaultValue={ - node.config?.field?.defaultValue?.i18nKey || node.config?.field?.defaultValue?.fallback - } - label={ node.config?.field?.label?.i18nKey || node.config?.field?.label?.fallback } - placeholder={ - node.config?.field?.placeholder?.i18nKey || node.config?.field?.placeholder?.fallback || "" - } - required={ node.config?.field?.required } - style={ node.config?.styles } - /> - ); - } else if (node.type === ComponentTypes.Choice) { - return ( - - - { node.config?.field?.label?.i18nKey || node.config?.field?.label?.fallback } - - - { node.config?.field?.options?.map((option: FieldOption) => ( - } - label={ option?.label?.i18nKey || option?.label?.fallback } - /> - )) } - - - ); - } else if (node.type === ComponentTypes.Button) { - return ( - - ); - } else if (node.type === ComponentTypes.Typography) { - return ( - - Text - - ); - } else if (node.type === ComponentTypes.Divider) { - return ; - } else if (node.type === ComponentTypes.Image) { - return ( - - { - - ); - } - } - - return null; -}; - -export default CommonNodeFactory; diff --git a/features/admin.authentication-flow-builder-core.v1/components/nodes/step-node.tsx b/features/admin.authentication-flow-builder-core.v1/components/nodes/step-node.tsx deleted file mode 100644 index 0470d1e5a57..00000000000 --- a/features/admin.authentication-flow-builder-core.v1/components/nodes/step-node.tsx +++ /dev/null @@ -1,171 +0,0 @@ -/** - * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). - * - * WSO2 LLC. licenses this file to you under the Apache License, - * Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import Box from "@oxygen-ui/react/Box"; -import FormGroup from "@oxygen-ui/react/FormGroup"; -import IconButton from "@oxygen-ui/react/IconButton"; -import Paper from "@oxygen-ui/react/Paper"; -import Tooltip from "@oxygen-ui/react/Tooltip"; -import Typography from "@oxygen-ui/react/Typography"; -import { XMarkIcon } from "@oxygen-ui/react-icons"; -import { IdentifiableComponentInterface } from "@wso2is/core/models"; -import { Handle, Node, Position, useNodeId, useReactFlow } from "@xyflow/react"; -import React, { - DragEvent, - FunctionComponent, - MouseEvent, - MutableRefObject, - ReactElement, - SVGProps, - useCallback, - useRef, - useState -} from "react"; -import useAuthenticationFlowBuilderCore from "../../hooks/use-authentication-flow-builder-core-context"; -import { Component } from "../../models/component"; -import "./step-node.scss"; - -/** - * Props interface of {@link StepNode} - */ -export interface StepNodePropsInterface extends IdentifiableComponentInterface { - /** - * Index of the step. - */ - stepIndex: number; -} - -// TODO: Move this to Oxygen UI. -/* eslint-disable max-len */ -const GridDotsVerticalIcon = ({ ...rest }: SVGProps): ReactElement => ( - - - - - - - -); - -/** - * Node for representing an empty step in the authentication flow. - * - * @param props - Props injected to the component. - * @returns Step Node component. - */ -export const StepNode: FunctionComponent = ({ - stepIndex, - data, - "data-componentid": componentId = "step-node" -}: StepNodePropsInterface & Node): ReactElement => { - const nodeId: string = useNodeId(); - const { deleteElements } = useReactFlow(); - const { onElementDropOnCanvas, NodeFactory, setLastInteractedElement } = useAuthenticationFlowBuilderCore(); - - const ref: MutableRefObject = useRef(null); - - const [ droppedElements, setDroppedElements ] = useState([]); - - const onDragOver: (event: DragEvent) => void = useCallback((event: DragEvent) => { - event.preventDefault(); - event.dataTransfer.dropEffect = "move"; - }, []); - - const onDrop: (e: DragEvent) => void = useCallback( - (event: DragEvent) => { - event.preventDefault(); - - const droppedData: string = event.dataTransfer.getData("application/json"); - - if (droppedData) { - const newComponent: Component = JSON.parse(droppedData); - - setDroppedElements((prevDroppedElements: Component[]) => [ ...prevDroppedElements, newComponent ]); - - onElementDropOnCanvas(newComponent, nodeId); - } - }, - [ data?.type ] - ); - - return ( -
- - - Step { stepIndex && stepIndex + 1 } - - - ) => { - deleteElements({ nodes: [ { id: nodeId } ] }); - } } - className="authentication-flow-builder-step-remove-button" - > - - - - - { stepIndex !== 0 && } - - - - - { droppedElements.map((component: Component, index: number) => ( - setLastInteractedElement(component) } - > -
- -
-
- -
- - )) } - - - - - -
- ); -}; - -export default StepNode; diff --git a/features/admin.authentication-flow-builder-core.v1/data/components.json b/features/admin.authentication-flow-builder-core.v1/data/components.json deleted file mode 100644 index 7147fa8443a..00000000000 --- a/features/admin.authentication-flow-builder-core.v1/data/components.json +++ /dev/null @@ -1,692 +0,0 @@ -[ - { - "category": "COMPONENT", - "type": "TEXT", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Text", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/437311/textbox.svg" - }, - "config": { - "field": { - "type": "text", - "className": "wso2is-text-input", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Text", - "i18nKey": null - }, - "required": false, - "multiline": false, - "placeholder": { - "fallback": "Enter text", - "i18nKey": null - }, - "defaultValue": { - "fallback": null, - "i18nKey": null - }, - "minLength": null, - "maxLength": null - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "PASSWORD", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Password", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/529125/password.svg" - }, - "config": { - "field": { - "type": "password", - "className": "wso2is-password-input", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Password", - "i18nKey": null - }, - "required": false, - "multiline": false, - "placeholder": { - "fallback": "Enter password", - "i18nKey": null - }, - "defaultValue": { - "fallback": null, - "i18nKey": null - }, - "minLength": null, - "maxLength": null - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "EMAIL", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Email", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/488920/email.svg" - }, - "config": { - "field": { - "type": "email", - "className": "wso2is-email-input", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Email", - "i18nKey": null - }, - "required": false, - "multiline": false, - "placeholder": { - "fallback": "Enter email", - "i18nKey": null - }, - "defaultValue": { - "fallback": null, - "i18nKey": null - }, - "minLength": null, - "maxLength": null - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "TELEPHONE", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Phone", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/533285/phone.svg" - }, - "config": { - "field": { - "type": "tel", - "className": "wso2is-phone-input", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Phone", - "i18nKey": null - }, - "required": false, - "placeholder": { - "fallback": "Enter phone number", - "i18nKey": null - }, - "defaultValue": { - "fallback": null, - "i18nKey": null - }, - "minLength": null, - "maxLength": null - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "NUMBER", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Number", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/374740/number-input.svg" - }, - "config": { - "field": { - "type": "number", - "className": "wso2is-number-input", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Number", - "i18nKey": null - }, - "required": false, - "multiline": false, - "placeholder": { - "fallback": "Enter number", - "i18nKey": null - }, - "defaultValue": { - "fallback": null, - "i18nKey": null - }, - "minLength": null, - "maxLength": null - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "CHECKBOX", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Checkbox", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/510900/checkbox-check.svg" - }, - "config": { - "field": { - "className": "wso2is-checkbox", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Checkbox", - "i18nKey": null - }, - "required": false, - "defaultValue": { - "fallback": null, - "i18nKey": null - } - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "CHOICE", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Choice", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/339836/boolean.svg" - }, - "config": { - "field": { - "className": "wso2is-choice", - "hint": { - "fallback": null, - "i18nKey": null - }, - "label": { - "fallback": "Choice", - "i18nKey": null - }, - "required": false, - "defaultValue": { - "fallback": "option1", - "i18nKey": null - }, - "options": [ - { - "label": { - "fallback": "Option 1", - "i18nKey": null - }, - "key": "option1", - "value": "option1" - }, - { - "label": { - "fallback": "Option 2", - "i18nKey": null - }, - "key": "option2", - "value": "option2" - }, - { - "label": { - "fallback": "Option 3", - "i18nKey": null - }, - "key": "option3", - "value": "option3" - } - ] - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "BUTTON", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Button", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/450681/button.svg" - }, - "config": { - "field": { - "fullWidth": true, - "className": "wso2is-button", - "variant": "contained", - "color": "primary", - "label": { - "fallback": "Button", - "i18nKey": null - } - }, - "styles": {} - } - }, - { - "category": "COMPONENT", - "type": "TYPOGRAPHY", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Typography", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/532231/text-size.svg" - }, - "variants": [ - { - "category": "TYPOGRAPHY", - "type": "H1", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "H1", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "variant": "h1", - "className": "wso2is-typography-h1" - }, - "styles": { - "fontSize": "24px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "H2", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "H2", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "variant": "h2", - "className": "wso2is-typography-h2" - }, - "styles": { - "fontSize": "20px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "H3", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "H3", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "variant": "h3", - "className": "wso2is-typography-h3" - }, - "styles": { - "fontSize": "16px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "H4", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "H4", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "variant": "h4", - "className": "wso2is-typography-h4" - }, - "styles": { - "fontSize": "14px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "H5", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "H5", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "variant": "h5", - "className": "wso2is-typography-h5" - }, - "styles": { - "fontSize": "12px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "H6", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "H6", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "variant": "h6", - "className": "wso2is-typography-h6" - }, - "styles": { - "fontSize": "10px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "BODY1", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Body1", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "type": "body1", - "className": "wso2is-typography-body1" - }, - "styles": { - "fontSize": "14px", - "color": "#333333", - "fontWeight": "400", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "BODY2", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Body2", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "type": "body2", - "className": "wso2is-typography-body2" - }, - "styles": { - "fontSize": "12px", - "color": "#333333", - "fontWeight": "400", - "textAlign": "center" - } - } - }, - { - "category": "TYPOGRAPHY", - "type": "CAPTION", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Caption", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "type": "caption", - "className": "wso2is-typography-caption" - }, - "styles": { - "fontSize": "10px", - "color": "#333333", - "fontWeight": "400", - "textAlign": "center" - } - } - } - ] - }, - { - "category": "COMPONENT", - "type": "DIVIDER", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Divider", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/471336/divider.svg" - }, - "variants": [ - { - "category": "DIVIDER", - "type": "HORIZONTAL_DIVIDER", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Horizontal Divider", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "className": "wso2is-divider-horizontal", - "label": { - "fallback": "", - "i18nKey": null - }, - "orientation": "horizontal" - }, - "styles": { - "fontSize": "24px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - }, - { - "category": "DIVIDER", - "type": "VERTICAL_DIVIDER", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Vertical Divider", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "className": "wso2is-divider-vertical", - "label": { - "fallback": "", - "i18nKey": null - }, - "orientation": "vertical" - }, - "styles": { - "fontSize": "24px", - "color": "#333333", - "fontWeight": "600", - "textAlign": "center" - } - } - } - ] - }, - { - "category": "COMPONENT", - "type": "IMAGE", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Image", - "i18nKey": null - }, - "image": "https://www.svgrepo.com/show/532576/image-square.svg" - }, - "variants": [ - { - "category": "IMAGE", - "type": "LOGO", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Logo", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "src": "https://www.svgrepo.com/show/508699/landscape-placeholder.svg", - "className": "wso2is-image-logo" - }, - "styles": { - "borderRadius": "0", - "width": "inherit", - "height": "40px" - } - } - }, - { - "category": "IMAGE", - "type": "AVATAR", - "version": "0.1.0", - "deprecated": false, - "display": { - "label": { - "fallback": "Avatar", - "i18nKey": null - }, - "image": null - }, - "config": { - "field": { - "className": "wso2is-image-avatar" - }, - "styles": { - "borderRadius": "50%", - "width": "40px", - "height": "40px" - } - } - } - ] - } -] diff --git a/features/admin.authentication-flow-builder-core.v1/api/use-get-authentication-flow-builder-core-elements.ts b/features/admin.flow-builder-core.v1/api/use-get-flow-builder-core-elements.ts similarity index 86% rename from features/admin.authentication-flow-builder-core.v1/api/use-get-authentication-flow-builder-core-elements.ts rename to features/admin.flow-builder-core.v1/api/use-get-flow-builder-core-elements.ts index f8607c5ade0..dbee108ee0e 100644 --- a/features/admin.authentication-flow-builder-core.v1/api/use-get-authentication-flow-builder-core-elements.ts +++ b/features/admin.flow-builder-core.v1/api/use-get-flow-builder-core-elements.ts @@ -23,7 +23,7 @@ import widgets from "../data/widgets.json"; import { Elements } from "../models/elements"; /** - * Hook to get the elements supported by the authentication flow builder. + * Hook to get the elements supported by the flow builder. * * This function calls the GET method of the following endpoint to get the elements. * - TODO: Fill this @@ -32,7 +32,7 @@ import { Elements } from "../models/elements"; * * @returns SWR response object containing the data, error, isLoading, isValidating, mutate. */ -const useGetAuthenticationFlowBuilderCoreElements = ( +const useGetFlowBuilderCoreElements = ( _shouldFetch: boolean = true ): RequestResultInterface => { return { @@ -48,4 +48,4 @@ const useGetAuthenticationFlowBuilderCoreElements = > - + - + diff --git a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/element-panel-draggable-node.scss b/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.scss similarity index 88% rename from features/admin.authentication-flow-builder-core.v1/components/elements-panel/element-panel-draggable-node.scss rename to features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.scss index e467f32dba3..b7ae425b17b 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/element-panel-draggable-node.scss +++ b/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.scss @@ -16,7 +16,7 @@ * under the License. */ -.authentication-flow-builder-element-panel-draggable-node { +.flow-builder-element-panel-draggable-node { // TODO: `@oxygen-ui/react/Card` declares a default padding which is a bug. // Remove this once it is handled. // Tracker: https://github.com/wso2/oxygen-ui/issues/300 @@ -26,7 +26,7 @@ padding-bottom: var(--oxygen-spacing-2); } - .authentication-flow-builder-element-panel-draggable-node-avatar { + .flow-builder-element-panel-draggable-node-avatar { width: 20px; height: 20px; } diff --git a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/element-panel-draggable-node.tsx b/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx similarity index 82% rename from features/admin.authentication-flow-builder-core.v1/components/elements-panel/element-panel-draggable-node.tsx rename to features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx index 8dd97e73e5e..4034984db8d 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/element-panel-draggable-node.tsx +++ b/features/admin.flow-builder-core.v1/components/element-panel/element-panel-draggable-node.tsx @@ -22,9 +22,9 @@ import CardContent from "@oxygen-ui/react/CardContent"; import Stack from "@oxygen-ui/react/Stack"; import Typography from "@oxygen-ui/react/Typography"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { DraggableNode } from "@wso2is/dnd"; import React, { FunctionComponent, HTMLAttributes, ReactElement } from "react"; import { SupportedCanvasNodes } from "../../models/visual-editor"; -import DraggableNode from "../draggable-node"; import "./element-panel-draggable-node.scss"; /** @@ -43,25 +43,25 @@ export interface ElementPanelDraggableNodePropsInterface * Draggable node for the visual editor element panel. * * @param props - Props injected to the component. - * @returns Draggable Visual Editor node component. + * @returns The ElementPanelDraggableNode component. */ const ElementPanelDraggableNode: FunctionComponent = ({ - "data-componentid": componentId = "authentication-flow-visual-editor-draggable-node", + "data-componentid": componentId = "element-panel-draggable-node", id, node, ...rest }: ElementPanelDraggableNodePropsInterface): ReactElement => { return ( - + - { node?.display?.label?.fallback } + { node?.display?.label } diff --git a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/elements-panel.scss b/features/admin.flow-builder-core.v1/components/element-panel/element-panel.scss similarity index 59% rename from features/admin.authentication-flow-builder-core.v1/components/elements-panel/elements-panel.scss rename to features/admin.flow-builder-core.v1/components/element-panel/element-panel.scss index 1cd5a911e02..993d9ccb78e 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/elements-panel.scss +++ b/features/admin.flow-builder-core.v1/components/element-panel/element-panel.scss @@ -17,32 +17,32 @@ */ :root { - --wso2is-authentication-flow-builder-elements-drawer-background: #f4f4f4; - --wso2is-authentication-flow-builder-elements-drawer-width: 350px; - --wso2is-authentication-flow-builder-elements-drawer-mini-width: 350px; + --wso2is-flow-builder-element-panel-background: #f4f4f4; + --wso2is-flow-builder-element-panel-width: 350px; + --wso2is-flow-builder-element-panel-mini-width: 350px; } -.authentication-flow-builder-elements-drawer { - .authentication-flow-builder-elements-panel { +.flow-builder-element-panel { + .flow-builder-element-panel { position: absolute; - width: var(--wso2is-authentication-flow-builder-elements-drawer-width); - background: var(--wso2is-authentication-flow-builder-elements-drawer-background); + width: var(--wso2is-flow-builder-element-panel-width); + background: var(--wso2is-flow-builder-element-panel-background); box-shadow: 8px 0 18px 0 rgba(0, 0, 0, 0.06); border-right: 1px solid #E8E8E8; border-left: 1px solid #E8E8E8; } &.mini { - .authentication-flow-builder-elements-panel { - width: var(--wso2is-authentication-flow-builder-elements-drawer-mini-width) + .flow-builder-element-panel { + width: var(--wso2is-flow-builder-element-panel-mini-width) } } } -.authentication-flow-builder-elements-drawer { - .authentication-flow-builder-elements-panel { +.flow-builder-element-panel { + .flow-builder-element-panel { - .authentication-flow-builder-elements-panel-content { + .flow-builder-element-panel-content { padding: var(--oxygen-spacing-1) var(--oxygen-spacing-2); &.full-height { @@ -50,13 +50,13 @@ } } - .authentication-flow-builder-elements-panel-categories { + .flow-builder-element-panel-categories { box-shadow: none; - background-color: var(--asg-auth-flow-builder-flows-side-panel-drawer-content-background); + background-color: transparent; overflow: hidden; transition: height 0.3s ease-in-out; - .authentication-flow-builder-elements-panel-category-heading { + .flow-builder-element-panel-category-heading { .MuiAccordionSummary-content { display: flex; flex-direction: row; @@ -71,8 +71,8 @@ } } - .authentication-flow-builder-elements-panel-category-details { - background: var(--wso2is-authentication-flow-builder-elements-drawer-background); + .flow-builder-element-panel-category-details { + background: var(--wso2is-flow-builder-element-panel-background); > .OxygenStack-root { margin-top: var(--oxygen-spacing-2); @@ -80,7 +80,7 @@ } &:not(:first-child) { - .authentication-flow-builder-elements-panel-category-heading { + .flow-builder-element-panel-category-heading { border-top: 1px solid var(--oxygen-palette-divider); } } diff --git a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/elements-panel.tsx b/features/admin.flow-builder-core.v1/components/element-panel/element-panel.tsx similarity index 89% rename from features/admin.authentication-flow-builder-core.v1/components/elements-panel/elements-panel.tsx rename to features/admin.flow-builder-core.v1/components/element-panel/element-panel.tsx index 16e60c1c9a6..669dc2c5c62 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/elements-panel/elements-panel.tsx +++ b/features/admin.flow-builder-core.v1/components/element-panel/element-panel.tsx @@ -32,12 +32,12 @@ import ElementPanelDraggableNode from "./element-panel-draggable-node"; import { Component } from "../../models/component"; import { Elements } from "../../models/elements"; import { Widget } from "../../models/widget"; -import "./elements-panel.scss"; +import "./element-panel.scss"; /** - * Props interface of {@link ElementsPanel} + * Props interface of {@link ElementPanel} */ -export interface ElementsPanelPropsInterface +export interface ElementPanelPropsInterface extends DrawerProps, IdentifiableComponentInterface, HTMLAttributes { @@ -113,18 +113,18 @@ const WidgetsIcon = ({ ...rest }: SVGProps): ReactElement => ( /* eslint-enable max-len */ /** - * Visual editor elements drawer panel. + * Flow builder element panel that contains draggable components. * * @param props - Props injected to the component. - * @returns Visual editor elements panel. + * @returns The ElementPanel component. */ -const ElementsPanel: FunctionComponent = ({ - "data-componentid": componentId = "authentication-flow-builder-elements-panel", +const ElementPanel: FunctionComponent = ({ + "data-componentid": componentId = "element-panel", children, open, elements, ...rest -}: ElementsPanelPropsInterface): ReactElement => { +}: ElementPanelPropsInterface): ReactElement => { const { components, widgets, nodes } = elements; return ( @@ -143,7 +143,7 @@ const ElementsPanel: FunctionComponent = ({ open={ open } onClose={ () => {} } elevation={ 5 } - PaperProps={ { className: "authentication-flow-builder-elements-panel" } } + PaperProps={ { className: "flow-builder-element-panel" } } BackdropProps={ { style: { position: "absolute" } } } ModalProps={ { container: document.getElementById("drawer-container"), @@ -158,11 +158,11 @@ const ElementsPanel: FunctionComponent = ({ } } } hideBackdrop={ true } - className={ classNames("authentication-flow-builder-elements-drawer", { mini: !open }) } + className={ classNames("flow-builder-element-panel", { mini: !open }) } variant={ open ? "permanent" : "temporary" } >
@@ -170,10 +170,10 @@ const ElementsPanel: FunctionComponent = ({ square disableGutters defaultExpanded - className={ classNames("authentication-flow-builder-elements-panel-categories") } + className={ classNames("flow-builder-element-panel-categories") } > } aria-controls="panel1-content" id="panel1-header" @@ -183,7 +183,7 @@ const ElementsPanel: FunctionComponent = ({ Nodes - + Use these nodes as building blocks of your flow { nodes.map((node: Component) => ( @@ -195,10 +195,10 @@ const ElementsPanel: FunctionComponent = ({ } aria-controls="panel1-content" id="panel1-header" @@ -208,7 +208,7 @@ const ElementsPanel: FunctionComponent = ({ Components - + Use these components to build up custom UI blocks { components.map((node: Component) => ( @@ -220,10 +220,10 @@ const ElementsPanel: FunctionComponent = ({ } aria-controls="panel1-content" id="panel1-header" @@ -233,7 +233,7 @@ const ElementsPanel: FunctionComponent = ({ Widgets - + Use these widgets to build up custom UI prompts and collect data @@ -250,4 +250,4 @@ const ElementsPanel: FunctionComponent = ({ ); }; -export default ElementsPanel; +export default ElementPanel; diff --git a/features/admin.authentication-flow-builder-core.v1/components/element-properties/common-component-property-factory.tsx b/features/admin.flow-builder-core.v1/components/element-property-panel/common-component-property-factory.tsx similarity index 57% rename from features/admin.authentication-flow-builder-core.v1/components/element-properties/common-component-property-factory.tsx rename to features/admin.flow-builder-core.v1/components/element-property-panel/common-component-property-factory.tsx index 565aa470733..1875d811fe5 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/element-properties/common-component-property-factory.tsx +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/common-component-property-factory.tsx @@ -17,17 +17,14 @@ */ import Checkbox from "@oxygen-ui/react/Checkbox"; -import FormControl from "@oxygen-ui/react/FormControl"; import FormControlLabel from "@oxygen-ui/react/FormControlLabel"; -import MenuItem from "@oxygen-ui/react/MenuItem"; -import Select from "@oxygen-ui/react/Select"; import TextField from "@oxygen-ui/react/TextField"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; import startCase from "lodash-es/startCase"; -import React, { FunctionComponent, ReactElement } from "react"; +import React, { ChangeEvent, FunctionComponent, ReactElement } from "react"; +import RichText from "./rich-text/rich-text"; +import { ComponentTypes } from "../../models/component"; import { Element } from "../../models/elements"; -import getKnownElementProperties from "../../utils/get-known-element-properties"; -import isTextValueWithFallback from "../../utils/is-text-value-with-fallback"; /** * Props interface of {@link CommonComponentPropertyFactory} @@ -45,6 +42,14 @@ export interface CommonComponentPropertyFactoryPropsInterface extends Identifiab * The value of the property. */ propertyValue: any; + /** + * The event handler for the property change. + * @param propertyKey - The key of the property. + * @param previousValue - The previous value of the property. + * @param newValue - The new value of the property. + * @param element - The element associated with the property. + */ + onChange: (propertyKey: string, previousValue: any, newValue: any, element: Element) => void; } /** @@ -54,53 +59,45 @@ export interface CommonComponentPropertyFactoryPropsInterface extends Identifiab * @returns The CommonComponentPropertyFactory component. */ const CommonComponentPropertyFactory: FunctionComponent = ({ - "data-componentid": componentId = "authentication-flow-builder-component-property-factory", + "data-componentid": componentId = "common-component-property-factory", element, propertyKey, - propertyValue + propertyValue, + onChange }: CommonComponentPropertyFactoryPropsInterface): ReactElement | null => { + if (propertyKey === "text") { + if (element.type === ComponentTypes.RichText) { + return ; + } + } + if (typeof propertyValue === "boolean") { return ( } + control={ } label={ startCase(propertyKey) } - data-componentid={ `${ componentId }-${propertyKey}` } + onChange={ (e: ChangeEvent) => + onChange(propertyKey, propertyValue, e.target.checked, element) + } + data-componentid={ `${componentId}-${propertyKey}` } /> ); } - if (isTextValueWithFallback(propertyValue)) { + if (typeof propertyValue === "string") { return ( ) => + onChange(propertyKey, propertyValue, e.target.value, element) + } + data-componentid={ `${componentId}-${propertyKey}` } /> ); } - if (propertyKey === "variant" || propertyKey === "color") { - return ( - - - - ); - } - return null; }; diff --git a/features/admin.authentication-flow-builder-core.v1/components/element-properties/common-widget-property-factory.tsx b/features/admin.flow-builder-core.v1/components/element-property-panel/common-widget-property-factory.tsx similarity index 81% rename from features/admin.authentication-flow-builder-core.v1/components/element-properties/common-widget-property-factory.tsx rename to features/admin.flow-builder-core.v1/components/element-property-panel/common-widget-property-factory.tsx index 9af6f1eacbc..12d575d3615 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/element-properties/common-widget-property-factory.tsx +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/common-widget-property-factory.tsx @@ -36,6 +36,14 @@ export interface CommonWidgetPropertyFactoryPropsInterface extends IdentifiableC * The value of the property. */ propertyValue: any; + /** + * The event handler for the property change. + * @param propertyKey - The key of the property. + * @param previousValue - The previous value of the property. + * @param newValue - The new value of the property. + * @param element - The element associated with the property. + */ + onChange: (propertyKey: string, previousValue: any, newValue: any, element: Element) => void; } /** diff --git a/features/admin.flow-builder-core.v1/components/element-property-panel/element-properties.tsx b/features/admin.flow-builder-core.v1/components/element-property-panel/element-properties.tsx new file mode 100644 index 00000000000..58cbda17d83 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/element-properties.tsx @@ -0,0 +1,143 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import FormControl from "@oxygen-ui/react/FormControl"; +import MenuItem from "@oxygen-ui/react/MenuItem"; +import Select from "@oxygen-ui/react/Select"; +import Stack from "@oxygen-ui/react/Stack"; +import Typography from "@oxygen-ui/react/Typography"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { useReactFlow } from "@xyflow/react"; +import capitalize from "lodash-es/capitalize"; +import isEmpty from "lodash-es/isEmpty"; +import React, { ChangeEvent, FunctionComponent, HTMLAttributes, ReactElement } from "react"; +import useAuthenticationFlowBuilderCore from "../../hooks/use-authentication-flow-builder-core-context"; +import { Base } from "../../models/base"; +import { Component } from "../../models/component"; +import { Element } from "../../models/elements"; + +/** + * Props interface of {@link ElementProperties} + */ +export type ElementPropertiesPropsInterface = IdentifiableComponentInterface & HTMLAttributes; + +/** + * Component to generate the properties panel for the selected element. + * + * @param props - Props injected to the component. + * @returns The ElementProperties component. + */ +const ElementProperties: FunctionComponent = ({ + "data-componentid": componentId = "element-properties", + ...rest +}: ElementPropertiesPropsInterface): ReactElement => { + const { updateNodeData } = useReactFlow(); + const { + lastInteractedElement, + setLastInteractedElement, + ElementProperties, + lastInteractedNodeId + } = useAuthenticationFlowBuilderCore(); + + const hasVariants: boolean = !isEmpty(lastInteractedElement?.variants); + + const changeSelectedVariant = (selected: string) => { + const selectedVariant: Component = lastInteractedElement?.variants?.find( + (element: Component) => element.variant === selected + ); + + updateNodeData(lastInteractedNodeId, (node: any) => { + const components: Component = node?.data?.components?.map((component: any) => { + if (component.id === lastInteractedElement.id) { + return { + ...component, + ...selectedVariant + }; + } + + return component; + }); + + setLastInteractedElement({ + ...lastInteractedElement, + ...selectedVariant + }); + + return { + components + }; + }); + }; + + const handlePropertyChange = (propertyKey: string, previousValue: any, newValue: any, element: Element) => { + updateNodeData(lastInteractedNodeId, (node: any) => { + const components: Component = node?.data?.components?.map((component: any) => { + if (component.id === element.id) { + component.config.field[propertyKey] = newValue; + } + + return component; + }); + + return { + components + }; + }); + }; + + return ( +
+ { lastInteractedElement ? ( + + { hasVariants && ( + + + + ) } + { lastInteractedElement && ( + + ) } + + ) : ( + + No properties available. + + ) } +
+ ); +}; + +export default ElementProperties; diff --git a/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties-panel.scss b/features/admin.flow-builder-core.v1/components/element-property-panel/element-property-panel.scss similarity index 59% rename from features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties-panel.scss rename to features/admin.flow-builder-core.v1/components/element-property-panel/element-property-panel.scss index 91f0f9eedd8..d85b91960cf 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties-panel.scss +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/element-property-panel.scss @@ -17,32 +17,32 @@ */ :root { - --wso2is-authentication-flow-builder-element-properties-drawer-background: #f4f4f4; - --wso2is-authentication-flow-builder-element-properties-drawer-width: 350px; - --wso2is-authentication-flow-builder-element-properties-drawer-mini-width: 350px; + --wso2is-flow-builder-element-property-panel-background: #f4f4f4; + --wso2is-flow-builder-element-property-panel-width: 350px; + --wso2is-flow-builder-element-property-panel-mini-width: 350px; } -.authentication-flow-builder-element-properties-drawer { - .authentication-flow-builder-element-properties-panel { +.flow-builder-element-property-panel { + .flow-builder-element-property-panel { position: absolute; - width: var(--wso2is-authentication-flow-builder-element-properties-drawer-width); - background: var(--wso2is-authentication-flow-builder-element-properties-drawer-background); + width: var(--wso2is-flow-builder-element-property-panel-width); + background: var(--wso2is-flow-builder-element-property-panel-background); box-shadow: 8px 0 18px 0 rgba(0, 0, 0, 0.06); border-right: 1px solid #E8E8E8; border-left: 1px solid #E8E8E8; } &.mini { - .authentication-flow-builder-element-properties-panel { - width: var(--wso2is-authentication-flow-builder-element-properties-drawer-mini-width) + .flow-builder-element-property-panel { + width: var(--wso2is-flow-builder-element-property-panel-mini-width) } } } -.authentication-flow-builder-element-properties-drawer { - .authentication-flow-builder-element-properties-panel { +.flow-builder-element-property-panel { + .flow-builder-element-property-panel { - .authentication-flow-builder-element-properties-panel-header { + .flow-builder-element-property-panel-header { padding: var(--oxygen-spacing-1) var(--oxygen-spacing-2); border-bottom: 1px solid var(--oxygen-palette-divider); @@ -57,7 +57,7 @@ } } - .authentication-flow-builder-element-properties-panel-content { + .flow-builder-element-property-panel-content { padding: var(--oxygen-spacing-1) var(--oxygen-spacing-2); &.full-height { @@ -65,13 +65,13 @@ } } - .authentication-flow-builder-element-properties-panel-categories { + .flow-builder-element-property-panel-categories { box-shadow: none; - background-color: var(--asg-auth-flow-builder-flows-side-panel-drawer-content-background); + background-color: transparent; overflow: hidden; transition: height 0.3s ease-in-out; - .authentication-flow-builder-element-properties-panel-category-heading { + .flow-builder-element-property-panel-category-heading { .MuiAccordionSummary-content { display: flex; flex-direction: row; @@ -86,8 +86,8 @@ } } - .authentication-flow-builder-element-properties-panel-category-details { - background: var(--wso2is-authentication-flow-builder-element-properties-drawer-background); + .flow-builder-element-property-panel-category-details { + background: var(--wso2is-flow-builder-element-property-panel-background); > .OxygenStack-root { margin-top: var(--oxygen-spacing-2); @@ -95,7 +95,7 @@ } &:not(:first-child) { - .authentication-flow-builder-element-properties-panel-category-heading { + .flow-builder-element-property-panel-category-heading { border-top: 1px solid var(--oxygen-palette-divider); } } diff --git a/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties-panel.tsx b/features/admin.flow-builder-core.v1/components/element-property-panel/element-property-panel.tsx similarity index 81% rename from features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties-panel.tsx rename to features/admin.flow-builder-core.v1/components/element-property-panel/element-property-panel.tsx index 8dd9fecf2e0..61a2dea678b 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/element-properties/element-properties-panel.tsx +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/element-property-panel.tsx @@ -24,16 +24,16 @@ import classNames from "classnames"; import React, { FunctionComponent, HTMLAttributes, ReactElement } from "react"; import ElementProperties from "./element-properties"; import useAuthenticationFlowBuilderCore from "../../hooks/use-authentication-flow-builder-core-context"; -import "./element-properties-panel.scss"; +import "./element-property-panel.scss"; /** - * Props interface of {@link ElementPropertiesPanel} + * Props interface of {@link ElementPropertyPanel} */ -export type ElementPropertiesPanelPropsInterface = DrawerProps & +export type ElementPropertyPanelPropsInterface = DrawerProps & IdentifiableComponentInterface & HTMLAttributes; -// TODO: Move this to Oxygen UI once https://github.com/wso2/oxygen-ui/issues/158 is fixed. +// TODO: Move this to Oxygen UI. const ChevronsRight = ({ width = 16, height = 16 }: { width: number; height: number }): ReactElement => ( = ({ - "data-componentid": componentId = "authentication-flow-builder-elements-panel", +const ElementPropertyPanel: FunctionComponent = ({ + "data-componentid": componentId = "flow-builder-property-panel", children, open, anchor = "right", ...rest -}: ElementPropertiesPanelPropsInterface): ReactElement => { +}: ElementPropertyPanelPropsInterface): ReactElement => { const { elementPropertiesPanelHeading, setIsOpenElementPropertiesPanel } = useAuthenticationFlowBuilderCore(); return ( @@ -76,7 +76,7 @@ const ElementPropertiesPanel: FunctionComponent {} } elevation={ 5 } - PaperProps={ { className: "authentication-flow-builder-element-properties-panel" } } + PaperProps={ { className: "flow-builder-element-property-panel" } } BackdropProps={ { style: { position: "absolute" } } } ModalProps={ { container: document.getElementById("drawer-container"), @@ -91,14 +91,14 @@ const ElementPropertiesPanel: FunctionComponent { elementPropertiesPanelHeading } setIsOpenElementPropertiesPanel(false) }> @@ -106,7 +106,7 @@ const ElementPropertiesPanel: FunctionComponent
@@ -117,4 +117,4 @@ const ElementPropertiesPanel: FunctionComponent): ReactElement => ( + + + + +); + +// TODO: Move this to Oxygen UI. +const ArrowClockwiseIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + + +); + +const BoldIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const ItalicIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const UnderlineIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const StrikethroughIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const LeftAlignIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const RightAlignIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const CenterAlignIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); + +const JustifyAlignIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + +); +export interface ToolbarPluginProps extends IdentifiableComponentInterface, HTMLAttributes { + history?: boolean; + bold?: boolean; + italic?: boolean; + underline?: boolean; + strikeThrough?: boolean; + alignment?: boolean; + typography?: boolean; +} + +const ToolbarPlugin: FunctionComponent = ({ + "data-componentid": componentId = "toolbar-plugin", + history = true, + bold = true, + italic = true, + underline = true, + strikeThrough = true, + alignment = true, + typography = true, + className +}: ToolbarPluginProps): ReactElement => { + const [editor] = useLexicalComposerContext(); + const toolbarRef = useRef(null); + const [canUndo, setCanUndo] = useState(false); + const [canRedo, setCanRedo] = useState(false); + const [isBold, setIsBold] = useState(false); + const [isItalic, setIsItalic] = useState(false); + const [isUnderline, setIsUnderline] = useState(false); + const [isStrikethrough, setIsStrikethrough] = useState(false); + const [typographyMenu, setTypographyMenu] = useState(null); + + const openTypographyMenu: boolean = Boolean(typographyMenu); + + const handleTypographyMenuOpen = (event: { currentTarget: React.SetStateAction }) => { + setTypographyMenu(event.currentTarget); + }; + + const handleTypographyMenuClose = (): void => { + setTypographyMenu(null); + }; + + const $updateToolbar = useCallback(() => { + const selection = $getSelection(); + if ($isRangeSelection(selection)) { + setIsBold(selection.hasFormat("bold")); + setIsItalic(selection.hasFormat("italic")); + setIsUnderline(selection.hasFormat("underline")); + setIsStrikethrough(selection.hasFormat("strikethrough")); + } + }, []); + + useEffect(() => { + return mergeRegister( + editor.registerUpdateListener(({ editorState }) => { + editorState.read(() => { + $updateToolbar(); + }); + }), + editor.registerCommand( + SELECTION_CHANGE_COMMAND, + (_payload, _newEditor) => { + $updateToolbar(); + return false; + }, + LowPriority + ), + editor.registerCommand( + CAN_UNDO_COMMAND, + payload => { + setCanUndo(payload); + return false; + }, + LowPriority + ), + editor.registerCommand( + CAN_REDO_COMMAND, + payload => { + setCanRedo(payload); + return false; + }, + LowPriority + ) + ); + }, [editor, $updateToolbar]); + + return ( + + + {history && ( + <> + { + editor.dispatchCommand(UNDO_COMMAND, undefined); + }} + aria-label="Undo" + > + + + { + editor.dispatchCommand(REDO_COMMAND, undefined); + }} + aria-label="Redo" + > + + + + + )} + {typography && ( + <> + + + <> + + + + + + + + )} + {bold && ( + { + editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"); + }} + className={classNames({ active: isBold })} + aria-label="Format Bold" + > + + + )} + {italic && ( + { + editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"); + }} + className={classNames({ active: isItalic })} + aria-label="Format Italics" + > + + + )} + {underline && ( + { + editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"); + }} + className={classNames({ active: isUnderline })} + aria-label="Format Underline" + > + + + )} + {strikeThrough && ( + { + editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"); + }} + className={classNames({ active: isStrikethrough })} + aria-label="Format Strikethrough" + > + + + )} + {alignment && ( + <> + + { + editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left"); + }} + aria-label="Left Align" + > + + + { + editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center"); + }} + aria-label="Center Align" + > + + + { + editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right"); + }} + aria-label="Right Align" + > + + + { + editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify"); + }} + aria-label="Justify Align" + > + + + + )} + + + ); +}; + +export default ToolbarPlugin; diff --git a/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/rich-text.scss b/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/rich-text.scss new file mode 100644 index 00000000000..864c10b7779 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/rich-text.scss @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.OxygenRichText-root { + .OxygenRichText-editor-root { + position: relative; + + .OxygenRichText-editor-input { + min-height: 150px; + resize: none; + font-size: 15px; + caret-color: rgb(5, 5, 5); + position: relative; + tab-size: 1; + outline: 0; + padding: 15px 10px; + caret-color: #444; + } + + .OxygenRichText-editor-input-placeholder { + color: #999; + overflow: hidden; + position: absolute; + text-overflow: ellipsis; + top: 15px; + left: 10px; + font-size: 15px; + user-select: none; + display: inline-block; + pointer-events: none; + } + } +} diff --git a/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/rich-text.tsx b/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/rich-text.tsx new file mode 100644 index 00000000000..1b10c1d7867 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/rich-text.tsx @@ -0,0 +1,192 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin"; +import { InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer"; +import { ContentEditable } from "@lexical/react/LexicalContentEditable"; +import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"; +import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"; +import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"; +import Paper from "@oxygen-ui/react/Paper"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import classNames from "classnames"; +import { + $isTextNode, + DOMConversionMap, + DOMExportOutput, + DOMExportOutputMap, + Klass, + LexicalEditor, + LexicalNode, + ParagraphNode, + TextNode +} from "lexical"; +import React, { FunctionComponent, HTMLAttributes, ReactElement, useEffect } from "react"; +import ToolbarPlugin, { ToolbarPluginProps } from "./plugins/toolbar-plugin"; +import { parseAllowedColor, parseAllowedFontSize } from "./style-config"; +import "./rich-text.scss"; + +const removeStylesExportDOM = (editor: LexicalEditor, target: LexicalNode): DOMExportOutput => { + const output = target.exportDOM(editor); + + if (output && output.element instanceof HTMLElement) { + // Remove all inline styles and classes if the element is an HTMLElement + // Children are checked as well since TextNode can be nested + // in i, b, and strong tags. + for (const el of [ output.element, ...output.element.querySelectorAll("[style],[class],[dir=\"ltr\"]") ]) { + el.removeAttribute("class"); + el.removeAttribute("style"); + if (el.getAttribute("dir") === "ltr") { + el.removeAttribute("dir"); + } + } + } + + return output; +}; + +const exportMap: DOMExportOutputMap = new Map< + Klass, + (editor: LexicalEditor, target: LexicalNode) => DOMExportOutput + >([ + [ ParagraphNode, removeStylesExportDOM ], + [ TextNode, removeStylesExportDOM ] + ]); + +const getExtraStyles = (element: HTMLElement): string => { + // Parse styles from pasted input, but only if they match exactly the + // sort of styles that would be produced by exportDOM + let extraStyles = ""; + const fontSize = parseAllowedFontSize(element.style.fontSize); + const backgroundColor = parseAllowedColor(element.style.backgroundColor); + const color = parseAllowedColor(element.style.color); + + if (fontSize !== "" && fontSize !== "15px") { + extraStyles += `font-size: ${fontSize};`; + } + if (backgroundColor !== "" && backgroundColor !== "rgb(255, 255, 255)") { + extraStyles += `background-color: ${backgroundColor};`; + } + if (color !== "" && color !== "rgb(0, 0, 0)") { + extraStyles += `color: ${color};`; + } + + return extraStyles; +}; + +const constructImportMap = (): DOMConversionMap => { + const importMap: DOMConversionMap = {}; + + // Wrap all TextNode importers with a function that also imports + // the custom styles implemented by the playground + for (const [ tag, fn ] of Object.entries(TextNode.importDOM() || {})) { + importMap[tag] = importNode => { + const importer = fn(importNode); + + if (!importer) { + return null; + } + + return { + ...importer, + conversion: element => { + const output = importer.conversion(element); + + if ( + output === null || + output.forChild === undefined || + output.after !== undefined || + output.node !== null + ) { + return output; + } + const extraStyles = getExtraStyles(element); + + if (extraStyles) { + const { forChild } = output; + + return { + ...output, + forChild: (child, parent) => { + const textNode = forChild(child, parent); + + if ($isTextNode(textNode)) { + textNode.setStyle(textNode.getStyle() + extraStyles); + } + + return textNode; + } + }; + } + + return output; + } + }; + }; + } + + return importMap; +}; + +const editorConfig: InitialConfigType = { + html: { + export: exportMap, + import: constructImportMap() + }, + namespace: "Rich Text", + nodes: [ ParagraphNode, TextNode ], + onError(error: Error) { + throw error; + } +}; + +export interface RichTextProps extends IdentifiableComponentInterface, HTMLAttributes { + ToolbarProps?: ToolbarPluginProps; +} + +const RichText: FunctionComponent = ({ + "data-componentid": componentId = "rich-text", + ToolbarProps, + className +}: RichTextProps): ReactElement => { + return ( + +
+ + + Enter some rich text.
+ } + />) + } + ErrorBoundary={ LexicalErrorBoundary } + /> + + + +
+ + ); +}; + +export default RichText; diff --git a/features/admin.authentication-flow-builder-core.v1/utils/is-text-value-with-fallback.ts b/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/style-config.ts similarity index 50% rename from features/admin.authentication-flow-builder-core.v1/utils/is-text-value-with-fallback.ts rename to features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/style-config.ts index d699bd4c8fe..15fff596045 100644 --- a/features/admin.authentication-flow-builder-core.v1/utils/is-text-value-with-fallback.ts +++ b/features/admin.flow-builder-core.v1/components/element-property-panel/rich-text/style-config.ts @@ -16,22 +16,23 @@ * under the License. */ -import { ValueWithFallback } from "../models/base"; +const MIN_ALLOWED_FONT_SIZE: number = 8; +const MAX_ALLOWED_FONT_SIZE: number = 72; -/** - * Type-guard to check if the given value is of type `ValueWithFallback`. - * @param value - Value to be checked. - * @returns `true` if the value is of type `ValueWithFallback`, else `false`. - */ -const isTextValueWithFallback = (value: any): value is ValueWithFallback => { - return ( - value !== null && - typeof value === "object" && - "fallback" in value && - "i18nKey" in value && - (value.fallback === null || typeof value.fallback === "string") && - (value.i18nKey === null || typeof value.i18nKey === "string") - ); +export const parseAllowedFontSize = (input: string): string => { + const match: RegExpMatchArray = input.match(/^(\d+(?:\.\d+)?)px$/); + + if (match) { + const n: number = Number(match[1]); + + if (n >= MIN_ALLOWED_FONT_SIZE && n <= MAX_ALLOWED_FONT_SIZE) { + return input; + } + } + + return ""; }; -export default isTextValueWithFallback; +export function parseAllowedColor(input: string) { + return /^rgb\(\d+, \d+, \d+\)$/.test(input) ? input : ""; +} diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx new file mode 100644 index 00000000000..2988429c512 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/button-adapter.tsx @@ -0,0 +1,75 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Button, { ButtonProps } from "@oxygen-ui/react/Button"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { ButtonVariants, Component } from "../../../../models/component"; + +/** + * Props interface of {@link ButtonAdapter} + */ +export interface ButtonAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Button component. + * + * @param props - Props injected to the component. + * @returns The ButtonAdapter component. + */ +export const ButtonAdapter: FunctionComponent = ({ + node +}: ButtonAdapterPropsInterface): ReactElement => { + let config: ButtonProps = {}; + + if (node.variant === ButtonVariants.Primary) { + config = { + ...config, + color: "primary", + variant: "contained" + }; + } else if (node.variant === ButtonVariants.Secondary) { + config = { + ...config, + color: "secondary", + variant: "contained" + }; + } else if (node.variant === ButtonVariants.Text) { + config = { + ...config, + variant: "text" + }; + } + + return ( + + ); +}; + +export default ButtonAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/choice-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/choice-adapter.tsx new file mode 100644 index 00000000000..1d05c2b65c4 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/choice-adapter.tsx @@ -0,0 +1,67 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import FormControl from "@oxygen-ui/react/FormControl"; +import FormControlLabel from "@oxygen-ui/react/FormControlLabel"; +import FormLabel from "@oxygen-ui/react/FormLabel"; +import Radio from "@oxygen-ui/react/Radio"; +import RadioGroup from "@oxygen-ui/react/RadioGroup"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { FieldOption } from "../../../../models/base"; +import { Component } from "../../../../models/component"; + +/** + * Props interface of {@link ChoiceAdapter} + */ +export interface ChoiceAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Choice component that renders a radio group. + * + * @param props - Props injected to the component. + * @returns The ChoiceAdapter component. + */ +export const ChoiceAdapter: FunctionComponent = ({ + node +}: ChoiceAdapterPropsInterface): ReactElement => ( + + { node.config?.field?.label } + + { node.config?.field?.options?.map((option: FieldOption) => ( + } + label={ option?.label } + /> + )) } + + +); + +export default ChoiceAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/divider-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/divider-adapter.tsx new file mode 100644 index 00000000000..7e2c85324e8 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/divider-adapter.tsx @@ -0,0 +1,64 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Divider, { DividerProps } from "@oxygen-ui/react/Divider"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component, DividerVariants } from "../../../../models/component"; + +/** + * Props interface of {@link DividerAdapter} + */ +export interface DividerAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Divider component. + * + * @param props - Props injected to the component. + * @returns The DividerAdapter component. + */ +export const DividerAdapter: FunctionComponent = ({ + node +}: DividerAdapterPropsInterface): ReactElement => { + let config: DividerProps = {}; + + if (node?.variant === DividerVariants.Horizontal || node?.variant === DividerVariants.Vertical) { + config = { + ...config, + orientation: node?.variant?.toLowerCase() + }; + } else { + config = { + ...config, + variant: node?.variant?.toLowerCase() + }; + } + + return { node?.config?.field?.text }; +}; + +export default DividerAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/image-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/image-adapter.tsx new file mode 100644 index 00000000000..eb1eb8da32c --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/image-adapter.tsx @@ -0,0 +1,56 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Box from "@oxygen-ui/react/Box"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component } from "../../../../models/component"; + +/** + * Props interface of {@link ImageAdapter} + */ +export interface ImageAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for displaying images. + * + * @param props - Props injected to the component. + * @returns The ImageAdapter component. + */ +export const ImageAdapter: FunctionComponent = ({ + node +}: ImageAdapterPropsInterface): ReactElement => ( + + { + +); + +export default ImageAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/checkbox-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/checkbox-adapter.tsx new file mode 100644 index 00000000000..86813dbcb67 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/checkbox-adapter.tsx @@ -0,0 +1,59 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Checkbox from "@oxygen-ui/react/Checkbox"; +import FormControlLabel from "@oxygen-ui/react/FormControlLabel"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component } from "../../../../../models/component"; + +/** + * Props interface of {@link CheckboxAdapter} + */ +export interface CheckboxAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Checkbox component. + * + * @param props - Props injected to the component. + * @returns The CheckboxAdapter component. + */ +export const CheckboxAdapter: FunctionComponent = ({ + node +}: CheckboxAdapterPropsInterface): ReactElement => ( + } + className={ node.config?.field?.className } + defaultValue={ node.config?.field?.defaultValue } + label={ node.config?.field?.label } + placeholder={ node.config?.field?.placeholder || "" } + required={ node.config?.field?.required } + style={ node.config?.styles } + /> +); + +export default CheckboxAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/default-input-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/default-input-adapter.tsx new file mode 100644 index 00000000000..b157fe8079c --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/default-input-adapter.tsx @@ -0,0 +1,65 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import TextField from "@oxygen-ui/react/TextField"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component } from "../../../../../models/component"; + +/** + * Props interface of {@link DefaultInputAdapter} + */ +export interface DefaultInputAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Fallback adapter for the inputs. + * + * @param props - Props injected to the component. + * @returns The DefaultInputAdapter component. + */ +export const DefaultInputAdapter: FunctionComponent = ({ + node +}: DefaultInputAdapterPropsInterface): ReactElement => ( + +); + +export default DefaultInputAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/phone-number-input-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/phone-number-input-adapter.tsx new file mode 100644 index 00000000000..d25e42a48b6 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/input/phone-number-input-adapter.tsx @@ -0,0 +1,54 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import PhoneNumberInput from "@oxygen-ui/react/PhoneNumberInput"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component } from "../../../../../models/component"; + +/** + * Props interface of {@link PhoneNumberInputAdapter} + */ +export interface PhoneNumberInputAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Phone Number input component. + * + * @param props - Props injected to the component. + * @returns The PhoneNumberInputAdapter component. + */ +export const PhoneNumberInputAdapter: FunctionComponent = ({ + node +}: PhoneNumberInputAdapterPropsInterface): ReactElement => ( + +); + +export default PhoneNumberInputAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/rich-text-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/rich-text-adapter.tsx new file mode 100644 index 00000000000..306c1d81b71 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/rich-text-adapter.tsx @@ -0,0 +1,60 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Typography from "@oxygen-ui/react/Typography"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { Encode } from "@wso2is/core/utils"; +import parse, { domToReact } from "html-react-parser"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component } from "../../../../models/component"; + +/** + * Props interface of {@link RichTextAdapter} + */ +export interface RichTextAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Rich Text component. + * + * @param props - Props injected to the component. + * @returns The RichTextAdapter component. + */ +export const RichTextAdapter: FunctionComponent = ({ + node +}: RichTextAdapterPropsInterface): ReactElement => ( + <> + { parse(Encode.forHtml(node?.config?.field?.text), { + replace(domNode: any) { + if (((domNode as unknown) as any).name === "h1") { + { domToReact(((domNode as unknown) as any).children) }; + } + } + }) } + +); + +export default RichTextAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/adapters/typography-adapter.tsx b/features/admin.flow-builder-core.v1/components/elements/components/adapters/typography-adapter.tsx new file mode 100644 index 00000000000..4aa4955a958 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/adapters/typography-adapter.tsx @@ -0,0 +1,55 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Typography from "@oxygen-ui/react/Typography"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import { Component } from "../../../../models/component"; + +/** + * Props interface of {@link TypographyAdapter} + */ +export interface TypographyAdapterPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Adapter for the Typography component. + * + * @param props - Props injected to the component. + * @returns The TypographyAdapter component. + */ +export const TypographyAdapter: FunctionComponent = ({ + node +}: TypographyAdapterPropsInterface): ReactElement => ( + + { node?.config?.field?.text } + +); + +export default TypographyAdapter; diff --git a/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx b/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx new file mode 100644 index 00000000000..6c2df9105ec --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/components/common-component-factory.tsx @@ -0,0 +1,84 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { Node } from "@xyflow/react"; +import React, { FunctionComponent, ReactElement } from "react"; +import ButtonAdapter from "./adapters/button-adapter"; +import ChoiceAdapter from "./adapters/choice-adapter"; +import DividerAdapter from "./adapters/divider-adapter"; +import ImageAdapter from "./adapters/image-adapter"; +import CheckboxAdapter from "./adapters/input/checkbox-adapter"; +import DefaultInputAdapter from "./adapters/input/default-input-adapter"; +import PhoneNumberInputAdapter from "./adapters/input/phone-number-input-adapter"; +import RichTextAdapter from "./adapters/rich-text-adapter"; +import TypographyAdapter from "./adapters/typography-adapter"; +import { Component, ComponentTypes, InputVariants } from "../../../models/component"; + +/** + * Props interface of {@link CommonComponentFactory} + */ +export interface CommonComponentFactoryPropsInterface extends IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Component; +} + +/** + * Factory for creating common components. + * + * @param props - Props injected to the component. + * @returns The CommonComponentFactory component. + */ +export const CommonComponentFactory: FunctionComponent = ({ + nodeId, + node +}: CommonComponentFactoryPropsInterface & Node): ReactElement => { + if (node.type === ComponentTypes.Input) { + if (node.variant === InputVariants.Checkbox) { + return ; + } + + if (node.variant === InputVariants.Telephone) { + return ; + } + + return ; + } else if (node.type === ComponentTypes.Choice) { + return ; + } else if (node.type === ComponentTypes.Button) { + return ; + } else if (node.type === ComponentTypes.Typography) { + return ; + } else if (node.type === ComponentTypes.RichText) { + return ; + } else if (node.type === ComponentTypes.Divider) { + return ; + } else if (node.type === ComponentTypes.Image) { + return ; + } + + return null; +}; + +export default CommonComponentFactory; diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/node-factory.tsx b/features/admin.flow-builder-core.v1/components/elements/nodes/node-factory.tsx new file mode 100644 index 00000000000..39942011b1a --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/node-factory.tsx @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { Node as XYFlowNode } from "@xyflow/react"; +import React, { FunctionComponent, ReactElement } from "react"; +import Rule from "./rule/rule"; +import Step from "./step/step"; +import { Node, NodeTypes } from "../../../models/node"; + +/** + * Props interface of {@link NodeFactory} + */ +export interface NodeFactoryPropsInterface extends XYFlowNode, IdentifiableComponentInterface { + /** + * The flow id of the node. + */ + nodeId: string; + /** + * The node properties. + */ + node: Node; +} + +/** + * Factory for creating common components. + * + * @param props - Props injected to the component. + * @returns The NodeFactory component. + */ +export const NodeFactory: FunctionComponent = ({ + node, + "data-componentid": componentId = "node-factory", + ...rest +}: NodeFactoryPropsInterface): ReactElement => { + if (node.type === NodeTypes.Step) { + return ; + } + + if (node.type === NodeTypes.Rule) { + return ; + } + + return null; +}; + +export default NodeFactory; diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.scss b/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.scss new file mode 100644 index 00000000000..4a83ab204c5 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.scss @@ -0,0 +1,65 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +:root { + --wso2is-flow-builder-rule-background-color: #002e58; + --wso2is-flow-builder-rule-action-panel-height: 44px; + --wso2is-flow-builder-rule-remove-button-color: var(--oxygen-palette-grey-500); + --wso2is-flow-builder-rule-remove-button-hover-color: var(--oxygen-palette-primary-contrastText); + --wso2is-flow-builder-rule-content-box-width: 150px; +} + +.flow-builder-rule { + background-color: var(--wso2is-flow-builder-rule-background-color); + border-radius: var(--oxygen-shape-borderRadius); + + .flow-builder-rule-content { + display: flex; + flex-flow: column nowrap; + align-content: center; + justify-content: center; + align-items: center; + text-align: left; + + .flow-builder-rule-content-box { + padding: 32px; + width: var(--wso2is-flow-builder-rule-content-box-width); + cursor: auto; + } + } + + .flow-builder-rule-action-panel { + padding: 10px 14px; + height: var(--wso2is-flow-builder-rule-action-panel-height); + + .flow-builder-rule-id { + color: var(--oxygen-palette-primary-contrastText); + } + + .flow-builder-rule-remove-button { + border: 2px solid var(--wso2is-flow-builder-rule-remove-button-color); + padding: 2px; + color: var(--wso2is-flow-builder-rule-remove-button-color); + + &:hover { + border-color: var(--wso2is-flow-builder-rule-remove-button-hover-color); + color: var(--wso2is-flow-builder-rule-remove-button-hover-color); + } + } + } +} diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.tsx b/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.tsx new file mode 100644 index 00000000000..cae8bbe668b --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/rule/rule.tsx @@ -0,0 +1,107 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Box from "@oxygen-ui/react/Box"; +import IconButton from "@oxygen-ui/react/IconButton"; +import Paper from "@oxygen-ui/react/Paper"; +import Tooltip from "@oxygen-ui/react/Tooltip"; +import Typography from "@oxygen-ui/react/Typography"; +import { XMarkIcon } from "@oxygen-ui/react-icons"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { Handle, Node, Position, useNodeId, useReactFlow } from "@xyflow/react"; +import React, { + DragEvent, + FunctionComponent, + MouseEvent, + MutableRefObject, + ReactElement, + useCallback, + useRef +} from "react"; +import "./rule.scss"; + +/** + * Props interface of {@link Rule} + */ +export interface RulePropsInterface extends Node, IdentifiableComponentInterface {} + +/** + * Node for representing an empty step in the flow builder. + * + * @param props - Props injected to the component. + * @returns Rule Node component. + */ +export const Rule: FunctionComponent = ({ + data, + "data-componentid": componentId = "rule" +}: RulePropsInterface): ReactElement => { + const nodeId: string = useNodeId(); + const { deleteElements } = useReactFlow(); + + const ref: MutableRefObject = useRef(null); + + const handleDragOver: (event: DragEvent) => void = useCallback((event: DragEvent) => { + event.preventDefault(); + event.dataTransfer.dropEffect = "move"; + }, []); + + const handleDrop: (e: DragEvent) => void = useCallback( + (event: DragEvent) => { + event.preventDefault(); + }, + [ data?.type ] + ); + + return ( +
+ + + Rule + + + ) => { + deleteElements({ nodes: [ { id: nodeId } ] }); + } } + className="flow-builder-rule-remove-button" + > + + + + + + + + + +
+ ); +}; + +export default Rule; diff --git a/features/admin.authentication-flow-builder-core.v1/components/nodes/step-node.scss b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss similarity index 50% rename from features/admin.authentication-flow-builder-core.v1/components/nodes/step-node.scss rename to features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss index 966bc87668d..9445bad46ae 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/nodes/step-node.scss +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.scss @@ -17,18 +17,19 @@ */ :root { - --wso2is-authentication-flow-builder-step-background-color: #252525; - --wso2is-authentication-flow-builder-step-action-panel-height: 44px; - --wso2is-authentication-flow-builder-step-remove-button-color: var(--oxygen-palette-grey-500); - --wso2is-authentication-flow-builder-step-remove-button-hover-color: var(--oxygen-palette-primary-contrastText); - --wso2is-authentication-flow-builder-step-content-form-field-drag-handle-width: 25px; + --wso2is-flow-builder-step-background-color: #252525; + --wso2is-flow-builder-step-action-panel-height: 44px; + --wso2is-flow-builder-step-remove-button-color: var(--oxygen-palette-grey-500); + --wso2is-flow-builder-step-remove-button-hover-color: var(--oxygen-palette-primary-contrastText); + --wso2is-flow-builder-step-content-box-width: 350px; + --wso2is-flow-builder-step-content-form-field-drag-handle-width: 25px; } -.authentication-flow-builder-step { - background-color: var(--wso2is-authentication-flow-builder-step-background-color); +.flow-builder-step { + background-color: var(--wso2is-flow-builder-step-background-color); border-radius: var(--oxygen-shape-borderRadius); - .authentication-flow-builder-step-content { + .flow-builder-step-content { display: flex; flex-flow: column nowrap; align-content: center; @@ -36,22 +37,23 @@ align-items: center; text-align: left; - .authentication-flow-builder-step-content-box { + .flow-builder-step-content-box { padding: 32px; - width: 350px; + width: var(--wso2is-flow-builder-step-content-box-width); + cursor: auto; } - .authentication-flow-builder-step-content-form { + .flow-builder-step-content-form { .oxygen-form-group { - .authentication-flow-builder-step-content-form-field { + .flow-builder-step-content-form-field { border: 2px dashed transparent; - margin-left: calc(-1 * (var(--wso2is-authentication-flow-builder-step-content-form-field-drag-handle-width))); + margin-left: calc(-1 * (var(--wso2is-flow-builder-step-content-form-field-drag-handle-width))); - .authentication-flow-builder-step-content-form-field-drag-handle { + .flow-builder-step-content-form-field-drag-handle { display: flex; visibility: hidden; justify-content: center; - width: var(--wso2is-authentication-flow-builder-step-content-form-field-drag-handle-width); + width: var(--wso2is-flow-builder-step-content-form-field-drag-handle-width); border-right: 2px dashed transparent; margin-right: 5px; @@ -60,7 +62,7 @@ } } - .authentication-flow-builder-step-content-form-field-content { + .flow-builder-step-content-form-field-content { width: 100%; } @@ -68,7 +70,7 @@ border-color: var(--oxygen-palette-grey-200); cursor: move; - .authentication-flow-builder-step-content-form-field-drag-handle { + .flow-builder-step-content-form-field-drag-handle { visibility: visible; border-right: 2px dashed var(--oxygen-palette-grey-200); } @@ -78,22 +80,22 @@ } } - .authentication-flow-builder-step-action-panel { + .flow-builder-step-action-panel { padding: 10px 14px; - height: var(--wso2is-authentication-flow-builder-step-action-panel-height); + height: var(--wso2is-flow-builder-step-action-panel-height); - .authentication-flow-builder-step-id { + .flow-builder-step-id { color: var(--oxygen-palette-primary-contrastText); } - .authentication-flow-builder-step-remove-button { - border: 2px solid var(--wso2is-authentication-flow-builder-step-remove-button-color); + .flow-builder-step-remove-button { + border: 2px solid var(--wso2is-flow-builder-step-remove-button-color); padding: 2px; - color: var(--wso2is-authentication-flow-builder-step-remove-button-color); + color: var(--wso2is-flow-builder-step-remove-button-color); &:hover { - border-color: var(--wso2is-authentication-flow-builder-step-remove-button-hover-color); - color: var(--wso2is-authentication-flow-builder-step-remove-button-hover-color); + border-color: var(--wso2is-flow-builder-step-remove-button-hover-color); + color: var(--wso2is-flow-builder-step-remove-button-hover-color); } } } diff --git a/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx new file mode 100644 index 00000000000..41376103963 --- /dev/null +++ b/features/admin.flow-builder-core.v1/components/elements/nodes/step/step.tsx @@ -0,0 +1,217 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import Box from "@oxygen-ui/react/Box"; +import FormGroup from "@oxygen-ui/react/FormGroup"; +import IconButton from "@oxygen-ui/react/IconButton"; +import Paper from "@oxygen-ui/react/Paper"; +import Tooltip from "@oxygen-ui/react/Tooltip"; +import Typography from "@oxygen-ui/react/Typography"; +import { XMarkIcon } from "@oxygen-ui/react-icons"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { DroppableContainer, GetDragItemProps, useDnD } from "@wso2is/dnd"; +import { Handle, Node, Position, useNodeId, useNodesData, useReactFlow } from "@xyflow/react"; +import classNames from "classnames"; +import isEmpty from "lodash-es/isEmpty"; +import React, { + DragEvent, + FunctionComponent, + MouseEvent, + MutableRefObject, + ReactElement, + SVGProps, + useCallback, + useRef +} from "react"; +import useAuthenticationFlowBuilderCore from "../../../../hooks/use-authentication-flow-builder-core-context"; +import { Component } from "../../../../models/component"; +import "./step.scss"; + +/** + * Props interface of {@link Step} + */ +export interface StepPropsInterface extends Node, IdentifiableComponentInterface {} + +// TODO: Move this to Oxygen UI. +/* eslint-disable max-len */ +const GridDotsVerticalIcon = ({ ...rest }: SVGProps): ReactElement => ( + + + + + + + +); + +/** + * Node for representing an empty step in the flow builder. + * + * @param props - Props injected to the component. + * @returns Step Node component. + */ +export const Step: FunctionComponent = ({ + data, + "data-componentid": componentId = "step" +}: StepPropsInterface): ReactElement => { + const nodeId: string = useNodeId(); + const node: Pick = useNodesData(nodeId); + const { deleteElements, updateNodeData } = useReactFlow(); + const { onElementDropOnCanvas, ComponentFactory, setLastInteractedElement } = useAuthenticationFlowBuilderCore(); + const { generateComponentId } = useDnD(); + + const ref: MutableRefObject = useRef(null); + + const handleDragOver: (event: DragEvent) => void = useCallback((event: DragEvent) => { + event.preventDefault(); + event.dataTransfer.dropEffect = "move"; + }, []); + + const handleDrop: (e: DragEvent) => void = useCallback( + (event: DragEvent) => { + event.preventDefault(); + + const droppedData: string = event.dataTransfer.getData("application/json"); + + if (droppedData) { + let newComponent: Component = { + ...JSON.parse(droppedData), + id: generateComponentId("element") + }; + + // If the component has variants, add the default variant to the root. + if (!isEmpty(newComponent?.variants)) { + const defaultVariantType: string = newComponent?.display?.defaultVariant ?? newComponent?.variants[0]?.variant; + const defaultVariant: Component = newComponent.variants.find((variant: Component) => variant.variant === defaultVariantType); + + newComponent = { + ...newComponent, + ...defaultVariant + }; + } + + updateNodeData(nodeId, (node: any) => { + return { + components: [ ...(node?.data?.components || []), newComponent ] + }; + }); + + onElementDropOnCanvas(newComponent, nodeId); + } + }, + [ data?.type ] + ); + + const handleOrderChange = (orderedNodes: Component[]) => { + updateNodeData(nodeId, () => { + return { + components: orderedNodes + }; + }); + }; + + return ( +
+ + + Step + + + ) => { + deleteElements({ nodes: [ { id: nodeId } ] }); + } } + className="flow-builder-step-remove-button" + > + + + + + + + + + + + nodes={ (node?.data?.components || []) as Component[] } + onOrderChange={ handleOrderChange } + > + { ({ + nodes, + getDragItemProps + }: { + nodes: Component[]; + getDragItemProps: GetDragItemProps; + }) => + nodes.map((component: Component, index: number) => { + const { + className: dragItemClassName, + ...otherDragItemProps + } = getDragItemProps(index); + + return ( + setLastInteractedElement(component) } + { ...otherDragItemProps } + > +
+ +
+
+ +
+ + ); + }) + } + + + + + + +
+ ); +}; + +export default Step; diff --git a/features/admin.authentication-flow-builder-core.v1/components/visual-flow.scss b/features/admin.flow-builder-core.v1/components/visual-flow.scss similarity index 95% rename from features/admin.authentication-flow-builder-core.v1/components/visual-flow.scss rename to features/admin.flow-builder-core.v1/components/visual-flow.scss index 57181f14394..6e4c525fcb1 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/visual-flow.scss +++ b/features/admin.flow-builder-core.v1/components/visual-flow.scss @@ -22,7 +22,7 @@ --xy-handle-height: 15px; --xy-handle-width: 15px; --xy-handle-top-default: 50%; - --xy-handle-top-offset: var(--wso2is-authentication-flow-builder-step-action-panel-height); + --xy-handle-top-offset: var(--wso2is-flow-builder-step-action-panel-height); } .react-flow.dark { diff --git a/features/admin.authentication-flow-builder-core.v1/components/visual-flow.tsx b/features/admin.flow-builder-core.v1/components/visual-flow.tsx similarity index 58% rename from features/admin.authentication-flow-builder-core.v1/components/visual-flow.tsx rename to features/admin.flow-builder-core.v1/components/visual-flow.tsx index dd1a6f7cc53..65ea39fd6f7 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/visual-flow.tsx +++ b/features/admin.flow-builder-core.v1/components/visual-flow.tsx @@ -16,17 +16,20 @@ * under the License. */ +import Box from "@oxygen-ui/react/Box"; +import Button from "@oxygen-ui/react/Button"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import { useDnD } from "@wso2is/dnd"; import { Background, BackgroundVariant, Controls, Edge, - Node, OnConnect, OnNodesDelete, ReactFlow, ReactFlowProps, + Node as XYFlowNode, XYPosition, addEdge, getConnectedEdges, @@ -36,11 +39,12 @@ import { useNodesState, useReactFlow } from "@xyflow/react"; -import React, { DragEvent, FC, FunctionComponent, ReactElement, useCallback } from "react"; -import StepNode, { StepNodePropsInterface } from "./nodes/step-node"; +import React, { DragEvent, FC, FunctionComponent, ReactElement, useCallback, useMemo } from "react"; +import NodeFactory from "./elements/nodes/node-factory"; +import useGetFlowBuilderCoreElements from "../api/use-get-flow-builder-core-elements"; import useAuthenticationFlowBuilderCore from "../hooks/use-authentication-flow-builder-core-context"; -import useDnD from "../hooks/use-dnd"; import { ElementCategories } from "../models/elements"; +import { Node } from "../models/node"; import "@xyflow/react/dist/style.css"; import "./visual-flow.scss"; @@ -49,11 +53,6 @@ import "./visual-flow.scss"; */ export type VisualFlowPropsInterface = IdentifiableComponentInterface & ReactFlowProps; -// NOTE: `nodeTypes` are defined outside of the component to prevent re-renderings. -const nodeTypes: { - STEP: FC; -} = { STEP: StepNode }; - /** * Wrapper component for React Flow used in the Visual Editor. * @@ -66,9 +65,10 @@ const VisualFlow: FunctionComponent = ({ }: VisualFlowPropsInterface): ReactElement => { const [ nodes, setNodes, onNodesChange ] = useNodesState([]); const [ edges, setEdges, onEdgesChange ] = useEdgesState([]); - const { screenToFlowPosition } = useReactFlow(); + const { screenToFlowPosition, toObject } = useReactFlow(); const { node, generateComponentId } = useDnD(); const { onElementDropOnCanvas } = useAuthenticationFlowBuilderCore(); + const { data: coreElements } = useGetFlowBuilderCoreElements(); const onDragOver: (event: DragEvent) => void = useCallback((event: DragEvent) => { event.preventDefault(); @@ -92,7 +92,7 @@ const VisualFlow: FunctionComponent = ({ y: event.clientY }); - const newNode: Node = { + const newNode: XYFlowNode = { data: { label: `${node.type} node`, ...node @@ -102,7 +102,7 @@ const VisualFlow: FunctionComponent = ({ type: node.type as string }; - setNodes((nodes: Node[]) => nodes.concat(newNode)); + setNodes((nodes: XYFlowNode[]) => nodes.concat(newNode)); onElementDropOnCanvas(node, null); }, @@ -111,17 +111,15 @@ const VisualFlow: FunctionComponent = ({ const onConnect: OnConnect = useCallback((params: any) => setEdges((edges: Edge[]) => addEdge(params, edges)), []); - const onNodesDelete: OnNodesDelete = useCallback( - (deleted: Node[]) => { + const onNodesDelete: OnNodesDelete = useCallback( + (deleted: XYFlowNode[]) => { setEdges( - deleted.reduce((acc: Edge[], node: Node) => { - const incomers: Node[] = getIncomers(node, nodes, edges); - const outgoers: Node[] = getOutgoers(node, nodes, edges); + deleted.reduce((acc: Edge[], node: XYFlowNode) => { + const incomers: XYFlowNode[] = getIncomers(node, nodes, edges); + const outgoers: XYFlowNode[] = getOutgoers(node, nodes, edges); const connectedEdges: Edge[] = getConnectedEdges([ node ], edges); - const remainingEdges: Edge[] = acc.filter( - (edge: Edge) => !connectedEdges.includes(edge) - ); + const remainingEdges: Edge[] = acc.filter((edge: Edge) => !connectedEdges.includes(edge)); const createdEdges: Edge[] = incomers.flatMap(({ id: source }: { id: string }) => outgoers.map(({ id: target }: { id: string }) => ({ @@ -138,26 +136,58 @@ const VisualFlow: FunctionComponent = ({ [ nodes, edges ] ); + // TODO: Handle the submit + const handlePublish = (): void => { + const _flow: any = toObject(); + }; + + const generateNodeTypes = () => { + if (!coreElements?.nodes) { + return {}; + } + + return coreElements.nodes.reduce((acc: Record>, node: Node) => { + acc[node.type] = (props: any) => ; + + return acc; + }, {} as Record>); + }; + + const nodeTypes: { [key: string]: FC } = useMemo(() => generateNodeTypes(), []); + return ( - - - - + <> + + + + + + + + ); }; diff --git a/features/admin.authentication-flow-builder-core.v1/context/authentication-flow-builder-core-context.tsx b/features/admin.flow-builder-core.v1/context/authentication-flow-builder-core-context.tsx similarity index 93% rename from features/admin.authentication-flow-builder-core.v1/context/authentication-flow-builder-core-context.tsx rename to features/admin.flow-builder-core.v1/context/authentication-flow-builder-core-context.tsx index 981bb824d76..a90706dc30a 100644 --- a/features/admin.authentication-flow-builder-core.v1/context/authentication-flow-builder-core-context.tsx +++ b/features/admin.flow-builder-core.v1/context/authentication-flow-builder-core-context.tsx @@ -33,9 +33,9 @@ export interface AuthenticationFlowBuilderCoreContextProps { */ lastInteractedNodeId: string; /** - * The factory for creating element properties. + * The wrapper for the element properties factory. */ - ElementPropertiesFactory: FunctionComponent; + ElementProperties: FunctionComponent; /** * The heading for the element properties panel. */ @@ -49,9 +49,9 @@ export interface AuthenticationFlowBuilderCoreContextProps { */ isElementPropertiesPanelOpen: boolean; /** - * The factory for creating nodes. + * The factory for creating components. */ - NodeFactory: FunctionComponent; + ComponentFactory: FunctionComponent; /** * Function to be called when an element is dropped on the canvas. * @param element - The element that was dropped on the canvas. @@ -103,8 +103,8 @@ const AuthenticationFlowBuilderCoreContext: Context( { - ElementPropertiesFactory: () => null, - NodeFactory: () => null, + ComponentFactory: () => null, + ElementProperties: () => null, elementPropertiesPanelHeading: null, isElementPanelOpen: true, isElementPropertiesPanelOpen: false, diff --git a/features/admin.flow-builder-core.v1/data/components.json b/features/admin.flow-builder-core.v1/data/components.json new file mode 100644 index 00000000000..1a71ddfc4bf --- /dev/null +++ b/features/admin.flow-builder-core.v1/data/components.json @@ -0,0 +1,561 @@ +[ + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "TEXT", + "display": { + "label": "Text Input", + "image": "https://www.svgrepo.com/show/437311/textbox.svg" + }, + "config": { + "field": { + "type": "text", + "className": "wso2is-input text", + "hint": "", + "label": "Text", + "required": false, + "multiline": false, + "placeholder": "Enter your text", + "defaultValue": "", + "minLength": 3, + "maxLength": 50 + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "PASSWORD", + "display": { + "label": "Password Input", + "image": "https://www.svgrepo.com/show/529125/password.svg" + }, + "config": { + "field": { + "type": "password", + "className": "wso2is-input password", + "hint": "", + "label": "Password", + "required": false, + "multiline": false, + "placeholder": "Enter your password", + "defaultValue": "" + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "EMAIL", + "display": { + "label": "Email Input", + "image": "https://www.svgrepo.com/show/488920/email.svg" + }, + "config": { + "field": { + "type": "email", + "className": "wso2is-input email", + "hint": "", + "label": "Email", + "required": false, + "multiline": false, + "placeholder": "Enter your email address", + "defaultValue": "" + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "TELEPHONE", + "display": { + "label": "Phone Input", + "image": "https://www.svgrepo.com/show/533285/phone.svg" + }, + "config": { + "field": { + "type": "tel", + "className": "wso2is-input phone", + "hint": "", + "label": "Phone", + "required": false, + "multiline": false, + "placeholder": "Enter your phone number", + "defaultValue": "" + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "NUMBER", + "display": { + "label": "Number Input", + "image": "https://www.svgrepo.com/show/374740/number-input.svg" + }, + "config": { + "field": { + "type": "number", + "className": "wso2is-input number", + "hint": "", + "label": "Number", + "required": false, + "multiline": false, + "placeholder": "Enter a number", + "defaultValue": "" + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "DATE", + "display": { + "label": "Date Input", + "image": "https://www.svgrepo.com/show/488144/date.svg" + }, + "config": { + "field": { + "type": "date", + "className": "wso2is-input date", + "hint": "", + "label": "Date", + "required": false, + "multiline": false, + "placeholder": "Enter a date", + "defaultValue": "" + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "INPUT", + "version": "0.1.0", + "deprecated": false, + "variant": "CHECKBOX", + "display": { + "label": "Checkbox", + "image": "https://www.svgrepo.com/show/510900/checkbox-check.svg" + }, + "config": { + "field": { + "className": "wso2is-input checkbox", + "hint": "", + "label": "Checkbox", + "required": false, + "defaultValue": "" + }, + "styles": {} + } + }, + { + "category": "FIELD", + "type": "CHOICE", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "Choice", + "image": "https://www.svgrepo.com/show/339836/boolean.svg" + }, + "config": { + "field": { + "className": "wso2is-input choice", + "hint": "", + "label": "Choice", + "required": false, + "defaultValue": "option1", + "options": [ + { + "label": "Option 1", + "key": "option1", + "value": "option1" + }, + { + "label": "Option 2", + "key": "option2", + "value": "option2" + }, + { + "label": "Option 3", + "key": "option3", + "value": "option3" + } + ] + }, + "styles": {} + } + }, + { + "category": "ACTION", + "type": "BUTTON", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "Button", + "image": "https://www.svgrepo.com/show/450681/button.svg", + "defaultVariant": "PRIMARY" + }, + "variants": [ + { + "category": "ACTION", + "type": "BUTTON", + "version": "0.1.0", + "variant": "PRIMARY", + "deprecated": false, + "display": { + "label": "Primary", + "image": null + }, + "config": { + "field": { + "type": "submit", + "className": "wso2is-button primary", + "text": "Primary Button" + }, + "styles": { + "width": "100%" + } + } + }, + { + "category": "ACTION", + "type": "BUTTON", + "version": "0.1.0", + "variant": "SECONDARY", + "deprecated": false, + "display": { + "label": "Secondary", + "image": null + }, + "config": { + "field": { + "type": "button", + "className": "wso2is-button secondary", + "text": "Secondary Button" + }, + "styles": { + "width": "100%" + } + } + }, + { + "category": "ACTION", + "type": "BUTTON", + "version": "0.1.0", + "variant": "TEXT", + "deprecated": false, + "display": { + "label": "Text", + "image": null + }, + "config": { + "field": { + "type": "button", + "className": "wso2is-button text", + "text": "Text Button" + }, + "styles": { + "width": "100%" + } + } + } + ] + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "Text", + "image": "https://www.svgrepo.com/show/532231/text-size.svg", + "defaultVariant": "H3" + }, + "variants": [ + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "H1", + "deprecated": false, + "display": { + "label": "H1", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography h1", + "text": "Heading - H1" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "H2", + "deprecated": false, + "display": { + "label": "H2", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography h2", + "text": "Heading - H2" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "H3", + "deprecated": false, + "display": { + "label": "H3", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography h3", + "text": "Heading - H3" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "H4", + "deprecated": false, + "display": { + "label": "H4", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography h4", + "text": "Heading - H4" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "H5", + "deprecated": false, + "display": { + "label": "H5", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography h5", + "text": "Heading - H5" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "H6", + "deprecated": false, + "display": { + "label": "H6", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography h6", + "text": "Heading - H6" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "BODY1", + "deprecated": false, + "display": { + "label": "Body1", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography body1", + "text": "Body Text" + }, + "styles": { + "fontSize": "14px", + "fontWeight": "400", + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "TYPOGRAPHY", + "version": "0.1.0", + "variant": "BODY2", + "deprecated": false, + "display": { + "label": "Body2", + "image": null + }, + "config": { + "field": { + "className": "wso2is-typography body2", + "text": "Body Text - Muted" + }, + "styles": { + "fontSize": "12px", + "fontWeight": "400", + "textAlign": "center" + } + } + } + ] + }, + { + "category": "DISPLAY", + "type": "RICH_TEXT", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "Rich Text", + "image": "https://www.svgrepo.com/show/374852/display-rich-text.svg" + }, + "config": { + "field": { + "className": "wso2is-rich-text", + "text": "

Rich Text

" + }, + "styles": { + "textAlign": "center" + } + } + }, + { + "category": "DISPLAY", + "type": "DIVIDER", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "Divider", + "image": "https://www.svgrepo.com/show/471336/divider.svg", + "defaultVariant": "HORIZONTAL" + }, + "variants": [ + { + "category": "DISPLAY", + "type": "DIVIDER", + "version": "0.1.0", + "deprecated": false, + "variant": "HORIZONTAL", + "display": { + "label": "Horizontal Divider", + "image": null + }, + "config": { + "field": { + "className": "wso2is-divider horizontal", + "text": "Or" + }, + "styles": {} + } + }, + { + "category": "DISPLAY", + "type": "DIVIDER", + "version": "0.1.0", + "deprecated": false, + "variant": "VERTICAL", + "display": { + "label": "Vertical Divider", + "image": null + }, + "config": { + "field": { + "className": "wso2is-divider vertical", + "text": "Or" + }, + "styles": {} + } + } + ] + }, + { + "category": "DISPLAY", + "type": "IMAGE", + "version": "0.1.0", + "deprecated": false, + "display": { + "label": "Image", + "image": "https://www.svgrepo.com/show/532576/image-square.svg", + "defaultVariant": "IMAGE_BLOCK" + }, + "variants": [ + { + "category": "DISPLAY", + "type": "IMAGE", + "version": "0.1.0", + "deprecated": false, + "variant": "IMAGE_BLOCK", + "display": { + "label": "Image Block", + "image": null + }, + "config": { + "field": { + "src": "https://www.svgrepo.com/show/508699/landscape-placeholder.svg", + "className": "wso2is-image image-block" + }, + "styles": { + "width": "inherit", + "height": "40px" + } + } + } + ] + } +] diff --git a/features/admin.authentication-flow-builder-core.v1/data/nodes.json b/features/admin.flow-builder-core.v1/data/nodes.json similarity index 77% rename from features/admin.authentication-flow-builder-core.v1/data/nodes.json rename to features/admin.flow-builder-core.v1/data/nodes.json index 387dbf40474..1d454458203 100644 --- a/features/admin.authentication-flow-builder-core.v1/data/nodes.json +++ b/features/admin.flow-builder-core.v1/data/nodes.json @@ -5,10 +5,7 @@ "version": "0.1.0", "deprecated": false, "display": { - "label": { - "fallback": "Step", - "i18nKey": null - }, + "label": "Step", "image": "https://www.svgrepo.com/show/448632/step.svg" }, "config": { @@ -24,10 +21,7 @@ "version": "0.1.0", "deprecated": false, "display": { - "label": { - "fallback": "Rule", - "i18nKey": null - }, + "label": "Rule", "image": "https://www.svgrepo.com/show/413199/decide.svg" }, "config": { diff --git a/features/admin.authentication-flow-builder-core.v1/data/payload.json b/features/admin.flow-builder-core.v1/data/payload.json similarity index 88% rename from features/admin.authentication-flow-builder-core.v1/data/payload.json rename to features/admin.flow-builder-core.v1/data/payload.json index d787a631d83..1ce60150c66 100644 --- a/features/admin.authentication-flow-builder-core.v1/data/payload.json +++ b/features/admin.flow-builder-core.v1/data/payload.json @@ -29,20 +29,14 @@ "elements": [ "flow-display-header-8uJ6t4D3", "flow-block-attributes-g55dfGuK", - "flow-action-password-onboarder-p563u9Yn", - "flow-display-horizontal-divider-67f8uJ6D3", - "flow-action-email-otp-verifier-5t8uJ6D3", "flow-display-horizontal-divider-G6d3t8uJ", "flow-action-google-sign-up-Rt8uJ6D3" ], "actions": [ { "id": "flow-action-password-onboarder-p563u9Yn", - "type": "BUTTON", "action": { - "type": "EXECUTOR", - "boundTo": "flow-block-attributes-g55dfGuK", - "name": "PasswordOnboarder" + "type": "NEXT" }, "next": [ "flow-node-2" @@ -50,11 +44,8 @@ }, { "id": "flow-action-email-otp-verifier-5t8uJ6D3", - "type": "BUTTON", "action": { - "type": "EXECUTOR", - "boundTo": "flow-block-attributes-g55dfGuK", - "name": "EmailOTPVerifier" + "type": "NEXT" }, "next": [ "flow-node-3" @@ -62,11 +53,13 @@ }, { "id": "flow-action-google-sign-up-Rt8uJ6D3", - "type": "BUTTON", "action": { "type": "EXECUTOR", "name": "GoogleSignUp" - } + }, + "next": [ + "flow-node-5" + ] } ] }, @@ -75,19 +68,27 @@ "elements": [ "flow-display-header-hj6t4D3", "flow-block-attributes-osld3343", - "flow-action-next-ggh688op" + "flow-action-go-back-rtessdf3" ], "actions": [ { "id": "flow-action-next-ggh688op", - "type": "submit", "action": { - "type": "RULE", - "name": "flow-rule-age-validator-Fg5Ye54p" + "type": "EXECUTOR", + "name": "PasswordOnboarder" }, "next": [ "flow-node-5" ] + }, + { + "id": "flow-action-go-back-rtessdf3", + "action": { + "type": "PREVIOUS" + }, + "previous": [ + "flow-node-1" + ] } ] }, @@ -96,16 +97,14 @@ "elements": [ "flow-display-header-rg6pwt0", "flow-block-attributes-53fdsfsp", - "flow-action-next-tyG3hp31", "flow-action-go-back-er212kfl" ], "actions": [ { "id": "flow-action-next-tyG3hp31", - "type": "submit", "action": { - "type": "NEXT", - "ref": "flow-node-4" + "type": "EXECUTOR", + "name": "EmailOTPVerifier" }, "next": [ "flow-node-4" @@ -113,10 +112,8 @@ }, { "id": "flow-action-go-back-er212kfl", - "type": "button", "action": { - "type": "PREVIOUS", - "ref": "flow-page-1" + "type": "PREVIOUS" }, "previous": [ "flow-node-1" @@ -129,17 +126,16 @@ "elements": [ "flow-display-header-GG456y7", "flow-block-attributes-45owsew2", - "flow-action-verify-otp-ssd5g6h", "flow-action-go-back-yt5g5t" ], "actions": [ { "id": "flow-action-verify-otp-ssd5g6h", - "type": "submit", "action": { - "type": "RULE", - "ref": "flow-rule-age-validator-Fg5Ye54p", - "boundTo": "flow-block-attributes-45owsew2" + "type": "NEXT", + "meta": { + "actionType": "VERIFICATION" + } }, "next": [ "flow-node-5" @@ -147,10 +143,8 @@ }, { "id": "flow-action-go-back-yt5g5t", - "type": "button", "action": { - "type": "PREVIOUS", - "ref": "flow-node-3" + "type": "PREVIOUS" }, "previous": [ "flow-node-3" @@ -162,15 +156,13 @@ "id": "flow-node-5", "elements": [ "flow-display-header-45wTrU", - "flow-block-attributes-er203owe", - "flow-action-done-5t8uJ6D3" + "flow-block-attributes-er203owe" ], "actions": [ { "id": "flow-action-done-5t8uJ6D3", - "type": "submit", "action": { - "boundTo": "flow-block-attributes-er203owe" + "type": "DONE" } } ] @@ -184,32 +176,39 @@ "flow-field-username-F6D3t8uJ", "flow-field-first-name-r7u4F1GG", "flow-field-last-name-r7u4F1GG", - "flow-field-dob-G6D3t8uJ" + "flow-field-dob-G6D3t8uJ", + "flow-action-password-onboarder-p563u9Yn", + "flow-display-horizontal-divider-67f8uJ6D3", + "flow-action-email-otp-verifier-5t8uJ6D3" ] }, { "id": "flow-block-attributes-53fdsfsp", "nodes": [ - "flow-field-email-Rt8uJ6D3" + "flow-field-email-Rt8uJ6D3", + "flow-action-next-tyG3hp31" ] }, { "id": "flow-block-attributes-45owsew2", "nodes": [ - "flow-field-otp-mn44gh0j" + "flow-field-otp-mn44gh0j", + "flow-action-verify-otp-ssd5g6h" ] }, { "id": "flow-block-attributes-osld3343", "nodes": [ "flow-field-password-HK8uJ903", - "flow-field-confirm-password-GH63t78g" + "flow-field-confirm-password-GH63t78g", + "flow-action-next-ggh688op" ] }, { "id": "flow-block-attributes-er203owe", "nodes": [ - "flow-field-nic-RR342gr" + "flow-field-nic-RR342gr", + "flow-action-done-5t8uJ6D3" ] } ], @@ -222,7 +221,7 @@ "variant": "H3", "config": { "field": { - "className": "wso2is-typography-h3", + "className": "wso2is-typography h3", "text": "Register Account" }, "styles": { @@ -240,7 +239,7 @@ "field": { "type": "text", "name": "username", - "className": "wso2is-text-input", + "className": "wso2is-input text", "hint": "", "label": "Username", "required": true, @@ -263,7 +262,7 @@ "field": { "type": "text", "name": "firstName", - "className": "wso2is-text-input", + "className": "wso2is-input text", "hint": "", "label": "First Name", "required": true, @@ -286,7 +285,7 @@ "field": { "type": "text", "name": "lastName", - "className": "wso2is-text-input", + "className": "wso2is-input text", "hint": "", "label": "Last Name", "required": true, @@ -309,7 +308,7 @@ "field": { "type": "date", "name": "dob", - "className": "wso2is-date-input", + "className": "wso2is-input date", "hint": "", "label": "Birth Date", "required": false, @@ -411,7 +410,7 @@ "variant": "H3", "config": { "field": { - "className": "wso2is-typography-h3", + "className": "wso2is-typography h3", "text": "Enter Password" }, "styles": { @@ -429,7 +428,7 @@ "field": { "type": "password", "name": "password", - "className": "wso2is-password-input", + "className": "wso2is-input password", "hint": "", "label": "Password", "required": true, @@ -450,7 +449,7 @@ "field": { "type": "password", "name": "confirmPassword", - "className": "wso2is-confirm-password-input", + "className": "wso2is-input password", "hint": "", "label": "Confirm Password", "required": true, @@ -479,14 +478,14 @@ } }, { - "id": "flow-display-header-rg6pwt0", + "id": "flow-display-header-hj6t4D3", "category": "DISPLAY", "type": "TYPOGRAPHY", "version": "0.1.0", "variant": "H3", "config": { "field": { - "className": "wso2is-typography-h3", + "className": "wso2is-typography h3", "text": "Enter Email" }, "styles": { @@ -504,7 +503,7 @@ "field": { "type": "email", "name": "email", - "className": "wso2is-email-input", + "className": "wso2is-input email", "hint": "", "label": "Email", "required": true, @@ -557,7 +556,7 @@ "variant": "H3", "config": { "field": { - "className": "wso2is-typography-h3", + "className": "wso2is-typography h3", "text": "OTP Verification" }, "styles": { @@ -575,7 +574,7 @@ "field": { "type": "text", "name": "otp", - "className": "wso2is-otp-input", + "className": "wso2is-input otp", "hint": "", "label": "OTP", "required": true, @@ -628,7 +627,7 @@ "variant": "H3", "config": { "field": { - "className": "wso2is-typography-h3", + "className": "wso2is-typography h3", "text": "Enter Personal Details" }, "styles": { @@ -675,15 +674,5 @@ } } } - ], - "rules": [ - { - "id": "flow-rule-age-validator-Fg5Ye54p", - "properties": { - "field": "dob", - "operator": "greaterThan", - "value": 18 - } - } ] } diff --git a/features/admin.authentication-flow-builder-core.v1/data/widgets.json b/features/admin.flow-builder-core.v1/data/widgets.json similarity index 77% rename from features/admin.authentication-flow-builder-core.v1/data/widgets.json rename to features/admin.flow-builder-core.v1/data/widgets.json index 276db3bbd18..4c4a7df8997 100644 --- a/features/admin.authentication-flow-builder-core.v1/data/widgets.json +++ b/features/admin.flow-builder-core.v1/data/widgets.json @@ -5,10 +5,7 @@ "version": "0.1.0", "deprecated": false, "display": { - "label": { - "fallback": "reCAPTCHA", - "i18nKey": null - }, + "label": "reCAPTCHA", "image": "https://www.gstatic.com/recaptcha/api2/logo_48.png" }, "config": { @@ -23,10 +20,7 @@ "version": "0.1.0", "deprecated": false, "display": { - "label": { - "fallback": "Email OTP", - "i18nKey": null - }, + "label": "Email OTP", "image": "https://www.svgrepo.com/show/368868/otp.svg" }, "config": { @@ -42,10 +36,7 @@ "version": "0.1.0", "deprecated": false, "display": { - "label": { - "fallback": "SMS OTP", - "i18nKey": null - }, + "label": "SMS OTP", "image": "https://www.svgrepo.com/show/381137/transaction-password-otp-verification-code-security.svg" }, "config": { diff --git a/features/admin.authentication-flow-builder-core.v1/hooks/use-authentication-flow-builder-core-context.ts b/features/admin.flow-builder-core.v1/hooks/use-authentication-flow-builder-core-context.ts similarity index 100% rename from features/admin.authentication-flow-builder-core.v1/hooks/use-authentication-flow-builder-core-context.ts rename to features/admin.flow-builder-core.v1/hooks/use-authentication-flow-builder-core-context.ts diff --git a/features/admin.flow-builder-core.v1/models/actions.ts b/features/admin.flow-builder-core.v1/models/actions.ts new file mode 100644 index 00000000000..40a58e12b01 --- /dev/null +++ b/features/admin.flow-builder-core.v1/models/actions.ts @@ -0,0 +1,23 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export enum ActionTypes { + Next = "NEXT", + Previous = "PREVIOUS", + Submit = "SUBMIT" +} diff --git a/features/admin.authentication-flow-builder-core.v1/models/base.ts b/features/admin.flow-builder-core.v1/models/base.ts similarity index 81% rename from features/admin.authentication-flow-builder-core.v1/models/base.ts rename to features/admin.flow-builder-core.v1/models/base.ts index bb0913c014f..66c9c55080d 100644 --- a/features/admin.authentication-flow-builder-core.v1/models/base.ts +++ b/features/admin.flow-builder-core.v1/models/base.ts @@ -22,7 +22,11 @@ import { ComponentTypes } from "./component"; /** * Base interface for a component or a primitive. */ -export interface Base { +export interface StrictBase { + /** + * ID of the component or the primitive. + */ + id: string; /** * Category of the component or the primitive. */ @@ -47,32 +51,39 @@ export interface Base { * Configuration of the component or the primitive. */ config: BaseConfig & T; + /** + * Base variant of the component or the primitive + */ + variant: any; /** * Variants of the component or the primitive. */ variants: Base[]; } -export interface ValueWithFallback { - /** - * Fallback value of the label. - */ - fallback: string; +/** + * Interface representing a base component or a primitive. + */ +export interface Base extends StrictBase { /** - * i18n key of the label. + * Data added to the component by the flow builder. */ - i18nKey: string; + data?: any; } export interface BaseDisplay { /** * Fallback & i18n key value of the label. */ - label: ValueWithFallback; + label: string; /** * Image URL of the component or the primitive. */ image: string; + /** + * The default variant of the component or the primitive. + */ + defaultVariant?: string; } /** @@ -92,7 +103,7 @@ export interface FieldOption { /** * The label of the field option. */ - label: ValueWithFallback; + label: string; } /** @@ -119,6 +130,8 @@ export type FieldValue = any; export type Field = StrictField & Record; +export type Properties = Field | CSSProperties; + export interface BaseConfig { /** * Field properties. diff --git a/features/admin.authentication-flow-builder-core.v1/models/component.ts b/features/admin.flow-builder-core.v1/models/component.ts similarity index 68% rename from features/admin.authentication-flow-builder-core.v1/models/component.ts rename to features/admin.flow-builder-core.v1/models/component.ts index 5a3ae9d85af..176fce7d9dd 100644 --- a/features/admin.authentication-flow-builder-core.v1/models/component.ts +++ b/features/admin.flow-builder-core.v1/models/component.ts @@ -24,15 +24,42 @@ import { Base } from "./base"; export type Component = Base; export enum ComponentTypes { + Input = "INPUT", Button = "BUTTON", Divider = "DIVIDER", - Email = "EMAIL", + Choice = "CHOICE", + Image = "IMAGE", + RichText = "RICH_TEXT", + Typography = "TYPOGRAPHY", +} + +export enum InputVariants { Text = "TEXT", - Number = "NUMBER", Password = "PASSWORD", + Email = "EMAIL", Telephone = "TELEPHONE", - Choice = "CHOICE", + Number = "NUMBER", Checkbox = "CHECKBOX", - Image = "IMAGE", - Typography = "TYPOGRAPHY" +} + +export enum ButtonVariants { + Primary = "PRIMARY", + Secondary = "SECONDARY", + Text = "TEXT" +} + +export enum TypographyVariants { + H1 = "H1", + H2 = "H2", + H3 = "H3", + H4 = "H4", + H5 = "H5", + H6 = "H6", + Body1 = "BODY1", + Body2 = "BODY2" +} + +export enum DividerVariants { + Horizontal = "HORIZONTAL", + Vertical = "VERTICAL" } diff --git a/features/admin.authentication-flow-builder-core.v1/models/elements.ts b/features/admin.flow-builder-core.v1/models/elements.ts similarity index 94% rename from features/admin.authentication-flow-builder-core.v1/models/elements.ts rename to features/admin.flow-builder-core.v1/models/elements.ts index f28f59aceec..18a50e71b94 100644 --- a/features/admin.authentication-flow-builder-core.v1/models/elements.ts +++ b/features/admin.flow-builder-core.v1/models/elements.ts @@ -41,7 +41,9 @@ export interface Elements { } export enum ElementCategories { - Component = "COMPONENT", + Action = "ACTION", + Display = "DISPLAY", + Field = "FIELD", Nodes = "NODE", Widget = "WIDGET" } diff --git a/features/admin.authentication-flow-builder-core.v1/models/node.ts b/features/admin.flow-builder-core.v1/models/node.ts similarity index 100% rename from features/admin.authentication-flow-builder-core.v1/models/node.ts rename to features/admin.flow-builder-core.v1/models/node.ts diff --git a/features/admin.authentication-flow-builder-core.v1/models/visual-editor.ts b/features/admin.flow-builder-core.v1/models/visual-editor.ts similarity index 100% rename from features/admin.authentication-flow-builder-core.v1/models/visual-editor.ts rename to features/admin.flow-builder-core.v1/models/visual-editor.ts diff --git a/features/admin.authentication-flow-builder-core.v1/models/widget.ts b/features/admin.flow-builder-core.v1/models/widget.ts similarity index 100% rename from features/admin.authentication-flow-builder-core.v1/models/widget.ts rename to features/admin.flow-builder-core.v1/models/widget.ts diff --git a/features/admin.authentication-flow-builder-core.v1/package.json b/features/admin.flow-builder-core.v1/package.json similarity index 91% rename from features/admin.authentication-flow-builder-core.v1/package.json rename to features/admin.flow-builder-core.v1/package.json index 6b25c3adbdd..05263664b4a 100644 --- a/features/admin.authentication-flow-builder-core.v1/package.json +++ b/features/admin.flow-builder-core.v1/package.json @@ -1,6 +1,6 @@ { "private": true, - "name": "@wso2is/admin.authentication-flow-builder-core.v1", + "name": "@wso2is/admin.flow-builder-core.v1", "version": "0.0.0", "description": "Flow builder base package for the WSO2 Identity Server admin portal.", "author": "WSO2", @@ -8,6 +8,8 @@ "dependencies": { "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", + "@lexical/react": "^0.21.0", + "@lexical/utils": "^0.21.0", "@monaco-editor/react": "^4.5.1", "@mui/icons-material": "^5.11.16", "@mui/lab": "5.0.0-alpha.129", @@ -18,9 +20,11 @@ "@oxygen-ui/react-icons": "^1.15.2", "@wso2is/admin.core.v1": "workspace:^", "@wso2is/core": "workspace:^", + "@wso2is/dnd": "workspace:^", "@xyflow/react": "^12.3.2", "classnames": "^2.2.6", "i18next": "^21.9.1", + "lexical": "^0.21.0", "lodash-es": "^4.17.21", "react-i18next": "^11.18.5", "react-redux": "^7.2.9", diff --git a/features/admin.authentication-flow-builder-core.v1/providers/authentication-flow-builder-core-provider.tsx b/features/admin.flow-builder-core.v1/providers/authentication-flow-builder-core-provider.tsx similarity index 94% rename from features/admin.authentication-flow-builder-core.v1/providers/authentication-flow-builder-core-provider.tsx rename to features/admin.flow-builder-core.v1/providers/authentication-flow-builder-core-provider.tsx index 4bd00f2d923..7ca2321f030 100644 --- a/features/admin.authentication-flow-builder-core.v1/providers/authentication-flow-builder-core-provider.tsx +++ b/features/admin.flow-builder-core.v1/providers/authentication-flow-builder-core-provider.tsx @@ -34,11 +34,11 @@ export interface AuthenticationFlowBuilderProviderProps { /** * The factory for creating nodes. */ - NodeFactory: FunctionComponent; + ComponentFactory: FunctionComponent; /** * The factory for creating element properties. */ - ElementPropertiesFactory: FunctionComponent; + ElementProperties: FunctionComponent; } /** @@ -48,8 +48,8 @@ export interface AuthenticationFlowBuilderProviderProps { * @returns The AuthenticationFlowBuilderCoreProvider component. */ const AuthenticationFlowBuilderCoreProvider = ({ - NodeFactory, - ElementPropertiesFactory, + ComponentFactory, + ElementProperties, children }: PropsWithChildren): ReactElement => { const [ isElementPanelOpen, setIsElementPanelOpen ] = useState(true); @@ -71,7 +71,7 @@ const AuthenticationFlowBuilderCoreProvider = ({ { capitalize(element.category) } Properties - { capitalize(element.type) } + { capitalize(element.variant ?? element.type) } ); @@ -91,8 +91,8 @@ const AuthenticationFlowBuilderCoreProvider = ({ return ( = ({
Flows -
diff --git a/features/admin.registration-flow-builder.v1/api/use-get-registration-flow-builder-elements.ts b/features/admin.registration-flow-builder.v1/api/use-get-registration-flow-builder-elements.ts index a00cca1389a..2e1d9606c94 100644 --- a/features/admin.registration-flow-builder.v1/api/use-get-registration-flow-builder-elements.ts +++ b/features/admin.registration-flow-builder.v1/api/use-get-registration-flow-builder-elements.ts @@ -16,10 +16,9 @@ * under the License. */ -import useGetAuthenticationFlowBuilderCoreElements from - "@wso2is/admin.authentication-flow-builder-core.v1/api/use-get-authentication-flow-builder-core-elements"; -import { Elements } from "@wso2is/admin.authentication-flow-builder-core.v1/models/elements"; import { RequestErrorInterface, RequestResultInterface } from "@wso2is/admin.core.v1/hooks/use-request"; +import useGetFlowBuilderCoreElements from "@wso2is/admin.flow-builder-core.v1/api/use-get-flow-builder-core-elements"; +import { Elements } from "@wso2is/admin.flow-builder-core.v1/models/elements"; import widgets from "../data/widgets.json"; /** @@ -36,7 +35,7 @@ import widgets from "../data/widgets.json"; const useGetRegistrationFlowBuilderElements = ( _shouldFetch: boolean = true ): RequestResultInterface => { - const { data: coreElements } = useGetAuthenticationFlowBuilderCoreElements(); + const { data: coreElements } = useGetFlowBuilderCoreElements(); return { data: ({ diff --git a/features/admin.registration-flow-builder.v1/components/element-properties/component-property-factory.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/component-property-factory.tsx similarity index 90% rename from features/admin.registration-flow-builder.v1/components/element-properties/component-property-factory.tsx rename to features/admin.registration-flow-builder.v1/components/element-property-panel/component-property-factory.tsx index ac21070db77..51223347b6e 100644 --- a/features/admin.registration-flow-builder.v1/components/element-properties/component-property-factory.tsx +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/component-property-factory.tsx @@ -19,7 +19,7 @@ import CommonComponentPropertyFactory, { CommonComponentPropertyFactoryPropsInterface // eslint-disable-next-line max-len -} from "@wso2is/admin.authentication-flow-builder-core.v1/components/element-properties/common-component-property-factory"; +} from "@wso2is/admin.flow-builder-core.v1/components/element-property-panel/common-component-property-factory"; import React, { FunctionComponent, ReactElement } from "react"; /** @@ -36,13 +36,15 @@ export type ComponentPropertyFactoryPropsInterface = CommonComponentPropertyFact const ComponentPropertyFactory: FunctionComponent = ({ element, propertyKey, - propertyValue + propertyValue, + onChange }: ComponentPropertyFactoryPropsInterface): ReactElement | null => { return ( ); }; diff --git a/features/admin.registration-flow-builder.v1/components/element-property-panel/element-properties.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/element-properties.tsx new file mode 100644 index 00000000000..0476a63e0e3 --- /dev/null +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/element-properties.tsx @@ -0,0 +1,88 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { FieldKey, FieldValue, Properties } from "@wso2is/admin.flow-builder-core.v1/models/base"; +import { Element, ElementCategories } from "@wso2is/admin.flow-builder-core.v1/models/elements"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement } from "react"; +import ElementPropertyFactory from "./element-property-factory"; +import FieldExtendedProperties from "./extended-properties/field-extended-properties"; + +/** + * Props interface of {@link ElementProperties} + */ +export interface ElementPropertiesPropsInterface extends IdentifiableComponentInterface { + properties: Properties; + /** + * The element associated with the property. + */ + element: Element; + /** + * The event handler for the property change. + * @param propertyKey - The key of the property. + * @param previousValue - The previous value of the property. + * @param newValue - The new value of the property. + * @param element - The element associated with the property. + */ + onChange: (propertyKey: string, previousValue: any, newValue: any, element: Element) => void; +} + +/** + * Factory to generate the property configurator for the given registration flow element. + * + * @param props - Props injected to the component. + * @returns The ElementPropertyConfiguratorFactory component. + */ +const ElementProperties: FunctionComponent = ({ + properties, + element, + onChange +}: ElementPropertiesPropsInterface): ReactElement | null => { + const renderElementPropertyFactory = () => { + return Object.entries(properties).map(([ key, value ]: [FieldKey, FieldValue]) => ( + + )); + }; + + switch (element.category) { + case ElementCategories.Field: + return ( + <> + + { renderElementPropertyFactory() } + + ); + default: + return <>{ renderElementPropertyFactory() }; + } +}; + +export default ElementProperties; diff --git a/features/admin.registration-flow-builder.v1/components/element-properties/element-property-factory.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/element-property-factory.tsx similarity index 77% rename from features/admin.registration-flow-builder.v1/components/element-properties/element-property-factory.tsx rename to features/admin.registration-flow-builder.v1/components/element-property-panel/element-property-factory.tsx index 6ca608a9f4d..785ad8d523a 100644 --- a/features/admin.registration-flow-builder.v1/components/element-properties/element-property-factory.tsx +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/element-property-factory.tsx @@ -16,7 +16,7 @@ * under the License. */ -import { Element, ElementCategories } from "@wso2is/admin.authentication-flow-builder-core.v1/models/elements"; +import { Element, ElementCategories } from "@wso2is/admin.flow-builder-core.v1/models/elements"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; import React, { FunctionComponent, ReactElement } from "react"; import ComponentPropertyFactory from "./component-property-factory"; @@ -38,6 +38,14 @@ export interface ElementPropertyFactoryPropsInterface extends IdentifiableCompon * The value of the property. */ propertyValue: any; + /** + * The event handler for the property change. + * @param propertyKey - The key of the property. + * @param previousValue - The previous value of the property. + * @param newValue - The new value of the property. + * @param element - The element associated with the property. + */ + onChange: (propertyKey: string, previousValue: any, newValue: any, element: Element) => void; } /** @@ -50,16 +58,20 @@ const ElementPropertyFactory: FunctionComponent { switch (element.category) { - case ElementCategories.Component: + case ElementCategories.Field: + case ElementCategories.Action: + case ElementCategories.Display: return ( ); case ElementCategories.Widget: @@ -69,6 +81,7 @@ const ElementPropertyFactory: FunctionComponent ); default: diff --git a/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/button-extended-properties.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/button-extended-properties.tsx new file mode 100644 index 00000000000..dbf3010da19 --- /dev/null +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/button-extended-properties.tsx @@ -0,0 +1,61 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import FormControl from "@oxygen-ui/react/FormControl"; +import Select from "@oxygen-ui/react/Select"; +import Stack from "@oxygen-ui/react/Stack"; +// eslint-disable-next-line max-len +import { CommonComponentPropertyFactoryPropsInterface } from "@wso2is/admin.flow-builder-core.v1/components/element-property-panel/common-component-property-factory"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { FunctionComponent, ReactElement, useState } from "react"; +import { RegistrationFlowActionTypes } from "../../../models/actions"; + +/** + * Props interface of {@link ButtonExtendedProperties} + */ +export type ButtonExtendedPropertiesPropsInterface = CommonComponentPropertyFactoryPropsInterface & + IdentifiableComponentInterface; + +/** + * Extended properties for the field elements. + * + * @param props - Props injected to the component. + * @returns The ButtonExtendedProperties component. + */ +const ButtonExtendedProperties: FunctionComponent = ({ + "data-componentid": componentId = "button-extended-properties" +}: ButtonExtendedPropertiesPropsInterface): ReactElement => { + const [ selectedActionType ] = useState(null); + + return ( + + + + + + ); +}; + +export default ButtonExtendedProperties; diff --git a/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx new file mode 100644 index 00000000000..fcadefc27c2 --- /dev/null +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/extended-properties/field-extended-properties.tsx @@ -0,0 +1,80 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import FormControl from "@oxygen-ui/react/FormControl"; +import MenuItem from "@oxygen-ui/react/MenuItem"; +import Select from "@oxygen-ui/react/Select"; +import Stack from "@oxygen-ui/react/Stack"; +// eslint-disable-next-line max-len +import { CommonComponentPropertyFactoryPropsInterface } from "@wso2is/admin.flow-builder-core.v1/components/element-property-panel/common-component-property-factory"; +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import React, { ChangeEvent, FunctionComponent, ReactElement, useState } from "react"; +import useGetSupportedProfileAttributes from "../../../api/use-get-supported-profile-attributes"; +import { Attribute } from "../../../models/attributes"; + +/** + * Props interface of {@link FieldExtendedProperties} + */ +export type FieldExtendedPropertiesPropsInterface = CommonComponentPropertyFactoryPropsInterface & + IdentifiableComponentInterface; + +/** + * Extended properties for the field elements. + * + * @param props - Props injected to the component. + * @returns The FieldExtendedProperties component. + */ +const FieldExtendedProperties: FunctionComponent = ({ + "data-componentid": componentId = "field-extended-properties", + element, + onChange +}: FieldExtendedPropertiesPropsInterface): ReactElement => { + const { data: attributes } = useGetSupportedProfileAttributes(); + const [ selectedAttribute, setSelectedAttribute ] = useState(null); + + return ( + + + + + + ); +}; + +export default FieldExtendedProperties; diff --git a/features/admin.registration-flow-builder.v1/components/element-properties/widget-property-factory.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx similarity index 87% rename from features/admin.registration-flow-builder.v1/components/element-properties/widget-property-factory.tsx rename to features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx index c7551ee0b8b..3694bd8d21a 100644 --- a/features/admin.registration-flow-builder.v1/components/element-properties/widget-property-factory.tsx +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/widget-property-factory.tsx @@ -18,8 +18,8 @@ import CommonWidgetPropertyFactory, { CommonWidgetPropertyFactoryPropsInterface -} from "@wso2is/admin.authentication-flow-builder-core.v1/components/element-properties/common-widget-property-factory"; -import { WidgetTypes } from "@wso2is/admin.authentication-flow-builder-core.v1/models/widget"; +} from "@wso2is/admin.flow-builder-core.v1/components/element-property-panel/common-widget-property-factory"; +import { WidgetTypes } from "@wso2is/admin.flow-builder-core.v1/models/widget"; import React, { FunctionComponent, ReactElement } from "react"; import AttributeCollectorProperties from "./widgets/attribute-collector-properties"; @@ -37,7 +37,8 @@ export type WidgetPropertyFactoryPropsInterface = CommonWidgetPropertyFactoryPro const WidgetPropertyFactory: FunctionComponent = ({ element, propertyKey, - propertyValue + propertyValue, + onChange }: WidgetPropertyFactoryPropsInterface): ReactElement | null => { switch (element.type) { case WidgetTypes.AttributeCollector: @@ -48,6 +49,7 @@ const WidgetPropertyFactory: FunctionComponent ); } diff --git a/features/admin.registration-flow-builder.v1/components/element-properties/widgets/attribute-collector-properties.scss b/features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.scss similarity index 100% rename from features/admin.registration-flow-builder.v1/components/element-properties/widgets/attribute-collector-properties.scss rename to features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.scss diff --git a/features/admin.registration-flow-builder.v1/components/element-properties/widgets/attribute-collector-properties.tsx b/features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.tsx similarity index 95% rename from features/admin.registration-flow-builder.v1/components/element-properties/widgets/attribute-collector-properties.tsx rename to features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.tsx index 425145380cb..3d330bce94c 100644 --- a/features/admin.registration-flow-builder.v1/components/element-properties/widgets/attribute-collector-properties.tsx +++ b/features/admin.registration-flow-builder.v1/components/element-property-panel/widgets/attribute-collector-properties.tsx @@ -22,7 +22,7 @@ import Checkbox from "@oxygen-ui/react/Checkbox"; import Stack from "@oxygen-ui/react/Stack"; import Typography from "@oxygen-ui/react/Typography"; import useAuthenticationFlowBuilderCore from - "@wso2is/admin.authentication-flow-builder-core.v1/hooks/use-authentication-flow-builder-core-context"; + "@wso2is/admin.flow-builder-core.v1/hooks/use-authentication-flow-builder-core-context"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; import isEmpty from "lodash-es/isEmpty"; import some from "lodash-es/some"; @@ -67,7 +67,7 @@ const AttributeCollectorProperties: FunctionComponent diff --git a/features/admin.registration-flow-builder.v1/components/nodes/attribute-factory.tsx b/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attribute-factory.tsx similarity index 92% rename from features/admin.registration-flow-builder.v1/components/nodes/attribute-factory.tsx rename to features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attribute-factory.tsx index 2c20cd8636b..9215e54215f 100644 --- a/features/admin.registration-flow-builder.v1/components/nodes/attribute-factory.tsx +++ b/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attribute-factory.tsx @@ -20,7 +20,7 @@ import TextField from "@oxygen-ui/react/TextField"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; import { Node } from "@xyflow/react"; import React, { FunctionComponent, ReactElement } from "react"; -import { Attribute } from "../../models/attributes"; +import { Attribute } from "../../../../../models/attributes"; /** * Props interface of {@link AttributeFactory} @@ -33,10 +33,10 @@ export interface AttributeFactoryPropsInterface extends IdentifiableComponentInt } /** - * Node for representing an empty step in the authentication flow. + * Factory for generating the attributes. * * @param props - Props injected to the component. - * @returns Step Node component. + * @returns The AttributeFactory component. */ export const AttributeFactory: FunctionComponent = ({ attribute diff --git a/features/admin.registration-flow-builder.v1/components/nodes/attribute-collector-node.tsx b/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attributes-adapter.tsx similarity index 75% rename from features/admin.registration-flow-builder.v1/components/nodes/attribute-collector-node.tsx rename to features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attributes-adapter.tsx index a8c8b003ccc..ce737cd909e 100644 --- a/features/admin.registration-flow-builder.v1/components/nodes/attribute-collector-node.tsx +++ b/features/admin.registration-flow-builder.v1/components/elements/components/adapters/attributes/attributes-adapter.tsx @@ -21,22 +21,22 @@ import { IdentifiableComponentInterface } from "@wso2is/core/models"; import { useNodeId } from "@xyflow/react"; import React, { FunctionComponent, ReactElement } from "react"; import AttributeFactory from "./attribute-factory"; -import useRegistrationFlowBuilder from "../../hooks/use-registration-flow-builder-core-context"; -import { Attribute } from "../../models/attributes"; +import useRegistrationFlowBuilder from "../../../../../hooks/use-registration-flow-builder-core-context"; +import { Attribute } from "../../../../../models/attributes"; /** - * Props interface of {@link AttributeCollectorNode} + * Props interface of {@link AttributesAdapter} */ export type AttributeCollectorNodePropsInterface = IdentifiableComponentInterface; /** - * Factory to generate the property configurator for the given element. + * Adapter to generate the attributes. * * @param props - Props injected to the component. - * @returns The AttributeCollectorNode component. + * @returns The AttributesAdapter component. */ -const AttributeCollectorNode: FunctionComponent = ({ - "data-componentid": componentId = "authentication-flow-builder-attribute-collector-node" +const AttributesAdapter: FunctionComponent = ({ + "data-componentid": componentId = "attributes-adapter" }: AttributeCollectorNodePropsInterface): ReactElement => { const nodeId: string = useNodeId(); const { selectedAttributes } = useRegistrationFlowBuilder(); @@ -52,4 +52,4 @@ const AttributeCollectorNode: FunctionComponent = ({ +export const ComponentFactory: FunctionComponent = ({ node, nodeId -}: NodeFactoryPropsInterface & Node): ReactElement => { +}: ComponentFactoryPropsInterface & Node): ReactElement => { if (node.category === ElementCategories.Widget) { if (node.type === WidgetTypes.AttributeCollector) { - return ; + return ; } } - return ; + return ; }; -export default NodeFactory; +export default ComponentFactory; diff --git a/features/admin.registration-flow-builder.v1/components/registration-flow-builder.tsx b/features/admin.registration-flow-builder.v1/components/registration-flow-builder.tsx index faf38d7f0e6..d0f62421733 100644 --- a/features/admin.registration-flow-builder.v1/components/registration-flow-builder.tsx +++ b/features/admin.registration-flow-builder.v1/components/registration-flow-builder.tsx @@ -16,13 +16,13 @@ * under the License. */ -import DecoratedVisualFlow from "@wso2is/admin.authentication-flow-builder-core.v1/components/decorated-visual-flow"; +import DecoratedVisualFlow from "@wso2is/admin.flow-builder-core.v1/components/decorated-visual-flow"; import AuthenticationFlowBuilderCoreProvider from - "@wso2is/admin.authentication-flow-builder-core.v1/providers/authentication-flow-builder-core-provider"; + "@wso2is/admin.flow-builder-core.v1/providers/authentication-flow-builder-core-provider"; import { IdentifiableComponentInterface } from "@wso2is/core/models"; import React, { FunctionComponent, HTMLAttributes, ReactElement } from "react"; -import ElementPropertyFactory from "./element-properties/element-property-factory"; -import NodeFactory from "./nodes/node-factory"; +import ElementProperties from "./element-property-panel/element-properties"; +import ComponentFactory from "./elements/components/component-factory"; import useGetRegistrationFlowBuilderElements from "../api/use-get-registration-flow-builder-elements"; import RegistrationFlowBuilderProvider from "../providers/registration-flow-builder-provider"; @@ -45,8 +45,8 @@ const RegistrationFlowBuilder: FunctionComponent diff --git a/features/admin.registration-flow-builder.v1/data/widgets.json b/features/admin.registration-flow-builder.v1/data/widgets.json index b998670d103..83d2462684d 100644 --- a/features/admin.registration-flow-builder.v1/data/widgets.json +++ b/features/admin.registration-flow-builder.v1/data/widgets.json @@ -5,10 +5,7 @@ "version": "0.1.0", "deprecated": false, "display": { - "label": { - "fallback": "Attribute Collector", - "i18nKey": null - }, + "label": "Attribute Collector", "image": "https://www.svgrepo.com/show/450909/form-elements.svg" }, "config": { diff --git a/features/admin.registration-flow-builder.v1/models/actions.ts b/features/admin.registration-flow-builder.v1/models/actions.ts new file mode 100644 index 00000000000..62abf4da60e --- /dev/null +++ b/features/admin.registration-flow-builder.v1/models/actions.ts @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ActionTypes } from "@wso2is/admin.flow-builder-core.v1/models/actions"; + +export enum ExtendedActionTypes { + Executor = "EXECUTOR", +} + +export type RegistrationFlowActionTypes = ActionTypes | ExtendedActionTypes; diff --git a/features/admin.registration-flow-builder.v1/package.json b/features/admin.registration-flow-builder.v1/package.json index a50ff2f2cf2..57b9bdb95ed 100644 --- a/features/admin.registration-flow-builder.v1/package.json +++ b/features/admin.registration-flow-builder.v1/package.json @@ -16,7 +16,7 @@ "@mui/utils": "^5.12.3", "@oxygen-ui/react": "^1.15.2", "@oxygen-ui/react-icons": "^1.15.2", - "@wso2is/admin.authentication-flow-builder-core.v1": "workspace:^", + "@wso2is/admin.flow-builder-core.v1": "workspace:^", "@wso2is/admin.core.v1": "workspace:^", "@wso2is/core": "workspace:^", "@xyflow/react": "^12.3.2", diff --git a/modules/dnd/.babelrc b/modules/dnd/.babelrc new file mode 100644 index 00000000000..bff72e0d710 --- /dev/null +++ b/modules/dnd/.babelrc @@ -0,0 +1,30 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/modules/dnd/.eslintignore b/modules/dnd/.eslintignore new file mode 100644 index 00000000000..b9470778764 --- /dev/null +++ b/modules/dnd/.eslintignore @@ -0,0 +1,2 @@ +node_modules/ +dist/ diff --git a/modules/dnd/.eslintrc.js b/modules/dnd/.eslintrc.js new file mode 100644 index 00000000000..51721b9fe7f --- /dev/null +++ b/modules/dnd/.eslintrc.js @@ -0,0 +1,23 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +module.exports = { + extends: [ + "../../.eslintrc.js" + ] +}; diff --git a/modules/dnd/README.md b/modules/dnd/README.md new file mode 100644 index 00000000000..5fd2f1a2350 --- /dev/null +++ b/modules/dnd/README.md @@ -0,0 +1 @@ +# WSO2 Identity Server - DnD Module diff --git a/modules/dnd/jest.config.ts b/modules/dnd/jest.config.ts new file mode 100644 index 00000000000..ab57d2ddee7 --- /dev/null +++ b/modules/dnd/jest.config.ts @@ -0,0 +1,63 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +module.exports = { + displayName: "dnd", + moduleDirectories: [ + "node_modules", + "test-configs", + __dirname + ], + moduleFileExtensions: [ + "js", + "jsx", + "ts", + "tsx", + "json", + "node" + ], + moduleNameMapper: { + "^@unit-testing(.*)$": "/test-configs/utils", + "^lodash-es/(.*)$": "/../../node_modules/lodash/$1" + }, + modulePaths: [ + "" + ], + roots: [ + "src" + ], + setupFilesAfterEnv: [ + "/test-configs/setup-test.ts" + ], + testMatch: [ + "/**/?(*.)test.{ts,tsx}" + ], + testPathIgnorePatterns: [ + "/(build|docs|node_modules)/" + ], + transform: { + "^.+\\.(js|jsx)?$": "babel-jest", + "^.+\\.(ts|tsx)?$": [ "ts-jest", { + tsconfig: "/tsconfig.json" + } ] + }, + transformIgnorePatterns: [ + "/node_modules/?(?!@wso2is)" + ], + verbose: true +}; diff --git a/modules/dnd/package.json b/modules/dnd/package.json new file mode 100644 index 00000000000..557aabb5ce6 --- /dev/null +++ b/modules/dnd/package.json @@ -0,0 +1,69 @@ +{ + "private": true, + "name": "@wso2is/dnd", + "version": "0.0.0", + "description": "Drag & Drop (React) library for WSO2 Identity Server front end applications.", + "keywords": [ + "WSO2", + "WSO2 IS", + "WSO2 Identity Server", + "WSO2 Identity Apps", + "dnd", + "drag and drop" + ], + "main": "dist/index.cjs", + "types": "dist/index.d.ts", + "author": "WSO2", + "license": "Apache-2.0", + "scripts": { + "build": "pnpm nx run dnd:build", + "clean": "pnpm clean:lock-files && pnpm clean:build && pnpm clean:node-modules", + "clean:build": "pnpm rimraf dist", + "clean:lock-files": "pnpm rimraf package-lock.json && pnpm rimraf pnpm-lock.yaml && pnpm rimraf yarn.lock", + "clean:node-modules": "pnpm rimraf node_modules", + "compile": "pnpm tsc -p tsconfig.json --incremental", + "lint": "pnpm lint:all", + "lint:all": "pnpm lint:targeted -- .", + "lint:autofix": "pnpm lint:all -- --fix", + "lint:targeted": "eslint --ext .js,.jsx,.ts,.tsx --resolve-plugins-relative-to .", + "test": "jest --passWithNoTests", + "test:coverage": "jest --passWithNoTests --coverage --collect-coverage", + "test:watch": "pnpm test -- --watch", + "typecheck": "pnpm compile" + }, + "dependencies": { + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.11.16", + "@mui/lab": "5.0.0-alpha.129", + "@mui/material": "^5.13.0", + "@mui/system": "^5.12.3", + "@mui/utils": "^5.12.3", + "@oxygen-ui/react": "^1.15.2", + "@oxygen-ui/react-icons": "^1.15.2", + "@wso2is/core": "workspace:^", + "classnames": "^2.2.6", + "lodash-es": "^4.17.21" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^14.2.1", + "@types/jest": "^29.5.12", + "@types/react": "^18.0.18", + "@typescript-eslint/eslint-plugin": "^6.5.0", + "@typescript-eslint/parser": "^6.5.0", + "eslint": "8.46.0", + "eslint-plugin-import": "^2.20.2", + "eslint-plugin-react": "^7.30.0", + "eslint-plugin-react-hooks": "^4.0.0", + "jest": "^29.7.0", + "rimraf": "^3.0.2", + "ts-jest": "^29.1.2", + "typescript": "^4.6.4", + "uuid": "^8.3.0" + } +} diff --git a/modules/dnd/project.json b/modules/dnd/project.json new file mode 100644 index 00000000000..32473a0285b --- /dev/null +++ b/modules/dnd/project.json @@ -0,0 +1,65 @@ +{ + "name": "dnd", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "modules/dnd/src", + "projectType": "library", + "generators": {}, + "prefix": "@wso2is", + "tags": [], + "implicitDependencies": [ + "core", + "react-components", + "validation" + ], + "targets": { + "build": { + "executor": "@nx/rollup:rollup", + "outputs": ["{options.outputPath}"], + "options": { + "outputPath": "modules/dnd/dist", + "tsConfig": "modules/dnd/tsconfig.lib.json", + "project": "modules/dnd/package.json", + "entryFile": "modules/dnd/src/index.ts", + "external": ["react/jsx-runtime"], + "rollupConfig": "@nx/react/plugins/bundle-rollup", + "compiler": "babel", + "format": [ + "esm", + "cjs" + ], + "assets": [ + { + "glob": "modules/dnd/README.md", + "input": ".", + "output": "." + } + ], + "updateBuildableProjectDepsInPackageJson": true + } + }, + "lint": { + "executor": "nx:run-commands", + "options": { + "command": "pnpm lint", + "cwd": "modules/dnd", + "parallel": false + } + }, + "test": { + "executor": "nx:run-commands", + "options": { + "command": "pnpm test", + "cwd": "modules/dnd", + "parallel": false + } + }, + "test-coverage": { + "executor": "nx:run-commands", + "options": { + "command": "pnpm test:coverage", + "cwd": "modules/dnd", + "parallel": false + } + } + } +} diff --git a/features/admin.authentication-flow-builder-core.v1/components/draggable-node.scss b/modules/dnd/src/components/draggable-node.scss similarity index 100% rename from features/admin.authentication-flow-builder-core.v1/components/draggable-node.scss rename to modules/dnd/src/components/draggable-node.scss diff --git a/features/admin.authentication-flow-builder-core.v1/components/draggable-node.tsx b/modules/dnd/src/components/draggable-node.tsx similarity index 86% rename from features/admin.authentication-flow-builder-core.v1/components/draggable-node.tsx rename to modules/dnd/src/components/draggable-node.tsx index e70a6e505e2..9bd6f05fb44 100644 --- a/features/admin.authentication-flow-builder-core.v1/components/draggable-node.tsx +++ b/modules/dnd/src/components/draggable-node.tsx @@ -19,13 +19,12 @@ import { IdentifiableComponentInterface } from "@wso2is/core/models"; import React, { DragEvent, FunctionComponent, HTMLAttributes, ReactElement } from "react"; import useDnD from "../hooks/use-dnd"; -import { SupportedCanvasNodes } from "../models/visual-editor"; import "./draggable-node.scss"; /** - * Interface for the props of the Draggable Node. + * Props interface of {@link DraggableNode} */ -export interface DraggableNodePropsInterface +export interface DraggableNodePropsInterface extends IdentifiableComponentInterface, HTMLAttributes { /** @@ -36,7 +35,6 @@ export interface DraggableNodePropsInterface /** * A component that represents a draggable node. - * TODO: Move this to a shared module. `@wso2is/dnd`. * * @param props - Props injected to the component. * @returns Draggable node component. @@ -49,7 +47,7 @@ const DraggableNode: FunctionComponent = ({ }: DraggableNodePropsInterface): ReactElement => { const { setNode } = useDnD(); - const onDragStart = (event: DragEvent, node: SupportedCanvasNodes) => { + const onDragStart = (event: DragEvent, node: Node) => { setNode(node); event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("application/json", JSON.stringify(node)); diff --git a/modules/dnd/src/components/droppable-container.scss b/modules/dnd/src/components/droppable-container.scss new file mode 100644 index 00000000000..8b9cff1a0bc --- /dev/null +++ b/modules/dnd/src/components/droppable-container.scss @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.droppable-container { + display: flex; + flex-direction: column; + gap: 8px; + + .draggable-item { + cursor: grab; + transition: transform 0.2s, background 0.2s; + + &:active { + background: #f9f9f9; + cursor: grabbing; + transform: scale(1.03); + } + } +} diff --git a/modules/dnd/src/components/droppable-container.tsx b/modules/dnd/src/components/droppable-container.tsx new file mode 100644 index 00000000000..a1b4ada7816 --- /dev/null +++ b/modules/dnd/src/components/droppable-container.tsx @@ -0,0 +1,180 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { IdentifiableComponentInterface } from "@wso2is/core/models"; +import cloneDeep from "lodash-es/cloneDeep"; +import React, { HTMLAttributes, MutableRefObject, ReactNode, useEffect, useRef, useState } from "react"; +import "./droppable-container.scss"; + +/** + * Props interface of {@link DroppableContainer} + */ + +export interface DroppableContainerProps + extends IdentifiableComponentInterface, + Omit, "children"> { + /** + * The nodes to be rendered inside the droppable container. + */ + nodes: T[]; + /** + * Callback to handle the order change of nodes. + * + * @param newOrder - The new order of nodes. + */ + onOrderChange?: (newOrder: T[]) => void; + /** + * Function to render the children of the droppable container. + * + * @param props - The props to be passed to the children. + * @returns The rendered children. + */ + children: (props: { nodes: T[]; dragHandlers: DragHandlers; getDragItemProps: GetDragItemProps }) => ReactNode; +} + +/** + * Interface for the props of a draggable item. + */ +export interface DragItemProps { + /** + * The class name to be applied to the draggable item. + */ + className?: string; + /** + * Indicates whether the item is draggable. + */ + draggable: boolean; + /** + * Function to handle the drag start event. + */ + onDragStart: () => void; + /** + * Function to handle the drag enter event. + */ + onDragEnter: () => void; + /** + * Function to handle the drag end event. + */ + onDragEnd: () => void; +} + +/** + * Type for the function to get the props of a draggable item. + * + * @param index - The index of the draggable item. + * @returns The props of the draggable item. + */ +export type GetDragItemProps = (index: number) => DragItemProps; + +/** + * Interface for the drag handlers. + */ +export interface DragHandlers { + /** + * Function to handle the drag start event. + * + * @param index - The index of the item being dragged. + */ + onDragStart: (index: number) => void; + /** + * Function to handle the drag end event. + */ + onDragEnd: () => void; + /** + * Function to handle the drag enter event. + * + * @param index - The index of the item being dragged over. + */ + onDragEnter: (index: number) => void; +} + +/** + * Container to drop draggable items. + * + * @param props - Props injected to the component. + * @returns Droppable container component. + */ +const DroppableContainer = ({ nodes, onOrderChange, children }: DroppableContainerProps) => { + const [ orderedNodes, setOrderedNodes ] = useState([]); + const dragNodeIndex: MutableRefObject = useRef(null); + const dragOverNodeIndex: MutableRefObject = useRef(null); + + useEffect(() => setOrderedNodes(cloneDeep(nodes)), [ nodes ]); + + /** + * Handles the drag start event. + * + * @param index - The index of the item being dragged. + */ + const handleDragStart = (index: number) => { + dragNodeIndex.current = index; + }; + + /** + * Handles the drag enter event. + * + * @param index - The index of the item being dragged over. + */ + const handleDragEnter = (index: number) => { + dragOverNodeIndex.current = index; + }; + + /** + * Handles the drag end event. + */ + const handleDragEnd = () => { + if ( + dragNodeIndex.current !== null && + dragOverNodeIndex.current !== null && + dragNodeIndex.current !== dragOverNodeIndex.current + ) { + const updatedNodes: T[] = [ ...orderedNodes ]; + const [ draggedItem ] = updatedNodes.splice(dragNodeIndex.current, 1); + + updatedNodes.splice(dragOverNodeIndex.current, 0, draggedItem); + + setOrderedNodes(updatedNodes); + if (onOrderChange) { + onOrderChange(updatedNodes); + } + } + + dragNodeIndex.current = null; + dragOverNodeIndex.current = null; + }; + + const dragHandlers: DragHandlers = { + onDragEnd: handleDragEnd, + onDragEnter: handleDragEnter, + onDragStart: handleDragStart + }; + + const getDragItemProps = (index: number): DragItemProps => ({ + className: "draggable-item", + draggable: true, + onDragEnd: handleDragEnd, + onDragEnter: () => handleDragEnter(index), + onDragStart: () => handleDragStart(index) + }); + + return ( +
{ children({ dragHandlers, getDragItemProps, nodes: orderedNodes }) }
+ ); +}; + +export default DroppableContainer; diff --git a/features/admin.authentication-flow-builder-core.v1/context/dnd-context.tsx b/modules/dnd/src/context/dnd-context.tsx similarity index 93% rename from features/admin.authentication-flow-builder-core.v1/context/dnd-context.tsx rename to modules/dnd/src/context/dnd-context.tsx index 6c819a02d5b..c6ee3e14b6e 100644 --- a/features/admin.authentication-flow-builder-core.v1/context/dnd-context.tsx +++ b/modules/dnd/src/context/dnd-context.tsx @@ -25,7 +25,7 @@ export type DnDContextProps = { /** * Utility function to generate a unique component ID. */ - generateComponentId: () => string; + generateComponentId: (prefix?: string) => string; /** * Node object. */ @@ -39,7 +39,6 @@ export type DnDContextProps = { /** * Context object for managing the Drag & Drop context. - * TODO: Move this to a shared module. `@wso2is/dnd`. */ const DnDContext: Context = createContext({ generateComponentId: () => "", diff --git a/features/admin.authentication-flow-builder-core.v1/hooks/use-dnd.ts b/modules/dnd/src/hooks/use-dnd.ts similarity index 92% rename from features/admin.authentication-flow-builder-core.v1/hooks/use-dnd.ts rename to modules/dnd/src/hooks/use-dnd.ts index 1c3aece4989..db7ec4189f1 100644 --- a/features/admin.authentication-flow-builder-core.v1/hooks/use-dnd.ts +++ b/modules/dnd/src/hooks/use-dnd.ts @@ -26,7 +26,6 @@ export type useDnDInterface = DnDContextProps; /** * Hook that provides Drag & Drop context. - * TODO: Move this to a shared module. `@wso2is/dnd`. * * This hook allows elements to access drag-and-drop related data and functions * provided by the Drag & Drop context. It returns an object containing @@ -49,7 +48,7 @@ const useDnD = (): useDnDInterface => { const context: DnDContextProps = useContext(DnDContext); if (context === undefined) { - throw new Error("useDnD must be used within a TenantProvider"); + throw new Error("useDnD must be used within a DnDProvider"); } return context; diff --git a/modules/dnd/src/index.ts b/modules/dnd/src/index.ts new file mode 100644 index 00000000000..4cc5b17e53e --- /dev/null +++ b/modules/dnd/src/index.ts @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export * from "./public-api"; diff --git a/features/admin.authentication-flow-builder-core.v1/providers/dnd-provider.tsx b/modules/dnd/src/providers/dnd-provider.tsx similarity index 92% rename from features/admin.authentication-flow-builder-core.v1/providers/dnd-provider.tsx rename to modules/dnd/src/providers/dnd-provider.tsx index cd7c3e712a2..c8036b6c744 100644 --- a/features/admin.authentication-flow-builder-core.v1/providers/dnd-provider.tsx +++ b/modules/dnd/src/providers/dnd-provider.tsx @@ -27,7 +27,6 @@ export type DnDProviderProps = unknown; /** * This component provides Drag & Drop context to its children. - * TODO: Move this to a shared module. `@wso2is/dnd`. * * @param props - Props injected to the component. * @returns The DnDProvider component. @@ -39,7 +38,7 @@ const DnDProvider = ({ children }: PropsWithChildren): ReactEl * Generates a unique component ID for the node. * @returns Unique component ID. */ - const generateComponentId = (): string => `dndnode_${uuidv4()}`; + const generateComponentId = (prefix: string = "node"): string => `dnd-${prefix}_${uuidv4()}`; return { children }; }; diff --git a/modules/dnd/src/public-api.ts b/modules/dnd/src/public-api.ts new file mode 100644 index 00000000000..959149c0307 --- /dev/null +++ b/modules/dnd/src/public-api.ts @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { default as DraggableNode } from "./components/draggable-node"; +export * from "./components/draggable-node"; + +export { default as DroppableContainer } from "./components/droppable-container"; +export * from "./components/droppable-container"; + +export { default as DnDContext } from "./context/dnd-context"; +export * from "./context/dnd-context"; + +export { default as useDnD } from "./hooks/use-dnd"; +export * from "./hooks/use-dnd"; + +export { default as DnDProvider } from "./providers/dnd-provider"; +export * from "./providers/dnd-provider"; + diff --git a/modules/dnd/test-configs/setup-test.ts b/modules/dnd/test-configs/setup-test.ts new file mode 100644 index 00000000000..5dc6c8fe7ea --- /dev/null +++ b/modules/dnd/test-configs/setup-test.ts @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import "@testing-library/jest-dom"; +import "babel-polyfill"; diff --git a/modules/dnd/tsconfig.json b/modules/dnd/tsconfig.json new file mode 100644 index 00000000000..aeed91257c4 --- /dev/null +++ b/modules/dnd/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.base.react.json", + "compilerOptions": { + "allowJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/modules/dnd/tsconfig.lib.json b/modules/dnd/tsconfig.lib.json new file mode 100644 index 00000000000..711cac7b83d --- /dev/null +++ b/modules/dnd/tsconfig.lib.json @@ -0,0 +1,24 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./dist/out-tsc", + "types": ["node"] + }, + "files": [ + "../../node_modules/@nx/react/typings/cssmodule.d.ts", + "../../node_modules/@nx/react/typings/image.d.ts" + ], + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx", + "jest.config.ts", + "test-configs" + ], + "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] +} diff --git a/modules/dnd/tsconfig.spec.json b/modules/dnd/tsconfig.spec.json new file mode 100644 index 00000000000..b6d0596e0c7 --- /dev/null +++ b/modules/dnd/tsconfig.spec.json @@ -0,0 +1,19 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"] + }, + "include": [ + "**/*.test.ts", + "**/*.spec.ts", + "**/*.test.tsx", + "**/*.spec.tsx", + "**/*.test.js", + "**/*.spec.js", + "**/*.test.jsx", + "**/*.spec.jsx", + "**/*.d.ts" + ] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53b9c6336e6..3b06a458ba8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2798,139 +2798,6 @@ importers: specifier: ^4.6.4 version: 4.9.5 - features/admin.authentication-flow-builder-core.v1: - dependencies: - '@emotion/react': - specifier: ^11.11.0 - version: 11.13.3(@types/react@18.0.18)(react@18.3.1) - '@emotion/styled': - specifier: ^11.11.0 - version: 11.13.0(@emotion/react@11.13.3)(@types/react@18.0.18)(react@18.3.1) - '@monaco-editor/react': - specifier: ^4.5.1 - version: 4.6.0(monaco-editor@0.51.0)(react-dom@18.3.1)(react@18.3.1) - '@mui/icons-material': - specifier: ^5.11.16 - version: 5.16.7(@mui/material@5.13.0)(@types/react@18.0.18)(react@18.3.1) - '@mui/lab': - specifier: 5.0.0-alpha.129 - version: 5.0.0-alpha.129(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/material@5.13.0)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) - '@mui/material': - specifier: 5.13.0 - version: 5.13.0(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) - '@mui/system': - specifier: ^5.12.3 - version: 5.16.7(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.0.18)(react@18.3.1) - '@mui/utils': - specifier: ^5.12.3 - version: 5.16.6(@types/react@18.0.18)(react@18.3.1) - '@oxygen-ui/react': - specifier: ^1.15.2 - version: 1.15.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@5.16.7)(@mui/lab@5.0.0-alpha.129)(@mui/material@5.13.0)(@mui/system@5.16.7)(@mui/utils@5.16.6)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) - '@oxygen-ui/react-icons': - specifier: ^1.15.2 - version: 1.15.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) - '@wso2is/admin.core.v1': - specifier: workspace:^ - version: link:../admin.core.v1 - '@wso2is/core': - specifier: workspace:^ - version: link:../../modules/core - '@xyflow/react': - specifier: ^12.3.2 - version: 12.3.2(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) - classnames: - specifier: ^2.2.6 - version: 2.5.1 - i18next: - specifier: ^21.9.1 - version: 21.10.0 - lodash-es: - specifier: ^4.17.21 - version: 4.17.21 - react: - specifier: ^18.2.0 - version: 18.3.1 - react-dom: - specifier: ^18.2.0 - version: 18.3.1(react@18.3.1) - react-i18next: - specifier: ^11.18.5 - version: 11.18.6(i18next@21.10.0)(react-dom@18.3.1)(react@18.3.1) - react-redux: - specifier: ^7.2.9 - version: 7.2.9(react-dom@18.3.1)(react@18.3.1) - redux: - specifier: ^4.0.4 - version: 4.2.1 - semantic-ui-react: - specifier: ^2.1.3 - version: 2.1.5(react-dom@18.3.1)(react@18.3.1) - uuid: - specifier: ^8.3.0 - version: 8.3.2 - devDependencies: - '@rollup/plugin-commonjs': - specifier: ^25.0.7 - version: 25.0.8(rollup@4.21.3) - '@rollup/plugin-dynamic-import-vars': - specifier: ^2.1.2 - version: 2.1.2(rollup@4.21.3) - '@rollup/plugin-image': - specifier: ^3.0.3 - version: 3.0.3(rollup@4.21.3) - '@rollup/plugin-json': - specifier: ^6.1.0 - version: 6.1.0(rollup@4.21.3) - '@rollup/plugin-node-resolve': - specifier: ^15.2.3 - version: 15.2.3(rollup@4.21.3) - '@rollup/plugin-typescript': - specifier: ^11.1.6 - version: 11.1.6(rollup@4.21.3)(tslib@2.7.0)(typescript@4.9.5) - '@svgr/rollup': - specifier: ^6.2.1 - version: 6.5.1 - '@testing-library/jest-dom': - specifier: ^5.11.9 - version: 5.17.0 - '@types/lodash-es': - specifier: ^4.17.4 - version: 4.17.12 - '@types/react': - specifier: 18.0.18 - version: 18.0.18 - '@types/react-redux': - specifier: ^7.1.25 - version: 7.1.33 - '@types/testing-library__jest-dom': - specifier: ^5.14.3 - version: 5.14.9 - rollup: - specifier: ^4.17.2 - version: 4.21.3 - rollup-plugin-dts: - specifier: ^6.1.1 - version: 6.1.1(rollup@4.21.3)(typescript@4.9.5) - rollup-plugin-generate-package-json: - specifier: ^3.2.0 - version: 3.2.0(rollup@4.21.3) - rollup-plugin-polyfill-node: - specifier: ^0.13.0 - version: 0.13.0(rollup@4.21.3) - rollup-plugin-scss: - specifier: ^4.0.0 - version: 4.0.0 - rollup-plugin-styles: - specifier: ^4.0.0 - version: 4.0.0(rollup@4.21.3) - rollup-plugin-svg: - specifier: ^2.0.0 - version: 2.0.0 - typescript: - specifier: ^4.6.4 - version: 4.9.5 - features/admin.authentication-flow-builder.v1: dependencies: '@emotion/react': @@ -8552,6 +8419,151 @@ importers: specifier: ^4.6.4 version: 4.9.5 + features/admin.flow-builder-core.v1: + dependencies: + '@emotion/react': + specifier: ^11.11.0 + version: 11.13.3(@types/react@18.0.18)(react@18.3.1) + '@emotion/styled': + specifier: ^11.11.0 + version: 11.13.0(@emotion/react@11.13.3)(@types/react@18.0.18)(react@18.3.1) + '@lexical/react': + specifier: ^0.21.0 + version: 0.21.0(react-dom@18.3.1)(react@18.3.1)(yjs@13.6.20) + '@lexical/utils': + specifier: ^0.21.0 + version: 0.21.0 + '@monaco-editor/react': + specifier: ^4.5.1 + version: 4.6.0(monaco-editor@0.51.0)(react-dom@18.3.1)(react@18.3.1) + '@mui/icons-material': + specifier: ^5.11.16 + version: 5.16.7(@mui/material@5.13.0)(@types/react@18.0.18)(react@18.3.1) + '@mui/lab': + specifier: 5.0.0-alpha.129 + version: 5.0.0-alpha.129(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/material@5.13.0)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': + specifier: 5.13.0 + version: 5.13.0(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) + '@mui/system': + specifier: ^5.12.3 + version: 5.16.7(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.0.18)(react@18.3.1) + '@mui/utils': + specifier: ^5.12.3 + version: 5.16.6(@types/react@18.0.18)(react@18.3.1) + '@oxygen-ui/react': + specifier: ^1.15.2 + version: 1.15.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@5.16.7)(@mui/lab@5.0.0-alpha.129)(@mui/material@5.13.0)(@mui/system@5.16.7)(@mui/utils@5.16.6)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) + '@oxygen-ui/react-icons': + specifier: ^1.15.2 + version: 1.15.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) + '@wso2is/admin.core.v1': + specifier: workspace:^ + version: link:../admin.core.v1 + '@wso2is/core': + specifier: workspace:^ + version: link:../../modules/core + '@wso2is/dnd': + specifier: workspace:^ + version: link:../../modules/dnd + '@xyflow/react': + specifier: ^12.3.2 + version: 12.3.2(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) + classnames: + specifier: ^2.2.6 + version: 2.5.1 + i18next: + specifier: ^21.9.1 + version: 21.10.0 + lexical: + specifier: ^0.21.0 + version: 0.21.0 + lodash-es: + specifier: ^4.17.21 + version: 4.17.21 + react: + specifier: ^18.2.0 + version: 18.3.1 + react-dom: + specifier: ^18.2.0 + version: 18.3.1(react@18.3.1) + react-i18next: + specifier: ^11.18.5 + version: 11.18.6(i18next@21.10.0)(react-dom@18.3.1)(react@18.3.1) + react-redux: + specifier: ^7.2.9 + version: 7.2.9(react-dom@18.3.1)(react@18.3.1) + redux: + specifier: ^4.0.4 + version: 4.2.1 + semantic-ui-react: + specifier: ^2.1.3 + version: 2.1.5(react-dom@18.3.1)(react@18.3.1) + uuid: + specifier: ^8.3.0 + version: 8.3.2 + devDependencies: + '@rollup/plugin-commonjs': + specifier: ^25.0.7 + version: 25.0.8(rollup@4.21.3) + '@rollup/plugin-dynamic-import-vars': + specifier: ^2.1.2 + version: 2.1.2(rollup@4.21.3) + '@rollup/plugin-image': + specifier: ^3.0.3 + version: 3.0.3(rollup@4.21.3) + '@rollup/plugin-json': + specifier: ^6.1.0 + version: 6.1.0(rollup@4.21.3) + '@rollup/plugin-node-resolve': + specifier: ^15.2.3 + version: 15.2.3(rollup@4.21.3) + '@rollup/plugin-typescript': + specifier: ^11.1.6 + version: 11.1.6(rollup@4.21.3)(tslib@2.7.0)(typescript@4.9.5) + '@svgr/rollup': + specifier: ^6.2.1 + version: 6.5.1 + '@testing-library/jest-dom': + specifier: ^5.11.9 + version: 5.17.0 + '@types/lodash-es': + specifier: ^4.17.4 + version: 4.17.12 + '@types/react': + specifier: 18.0.18 + version: 18.0.18 + '@types/react-redux': + specifier: ^7.1.25 + version: 7.1.33 + '@types/testing-library__jest-dom': + specifier: ^5.14.3 + version: 5.14.9 + rollup: + specifier: ^4.17.2 + version: 4.21.3 + rollup-plugin-dts: + specifier: ^6.1.1 + version: 6.1.1(rollup@4.21.3)(typescript@4.9.5) + rollup-plugin-generate-package-json: + specifier: ^3.2.0 + version: 3.2.0(rollup@4.21.3) + rollup-plugin-polyfill-node: + specifier: ^0.13.0 + version: 0.13.0(rollup@4.21.3) + rollup-plugin-scss: + specifier: ^4.0.0 + version: 4.0.0 + rollup-plugin-styles: + specifier: ^4.0.0 + version: 4.0.0(rollup@4.21.3) + rollup-plugin-svg: + specifier: ^2.0.0 + version: 2.0.0 + typescript: + specifier: ^4.6.4 + version: 4.9.5 + features/admin.flows.v1: dependencies: '@asgardeo/auth-react': @@ -13260,12 +13272,12 @@ importers: '@oxygen-ui/react-icons': specifier: ^1.15.2 version: 1.15.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) - '@wso2is/admin.authentication-flow-builder-core.v1': - specifier: workspace:^ - version: link:../admin.authentication-flow-builder-core.v1 '@wso2is/admin.core.v1': specifier: workspace:^ version: link:../admin.core.v1 + '@wso2is/admin.flow-builder-core.v1': + specifier: workspace:^ + version: link:../admin.flow-builder-core.v1 '@wso2is/core': specifier: workspace:^ version: link:../../modules/core @@ -20727,6 +20739,97 @@ importers: specifier: ^4.6.4 version: 4.9.5 + modules/dnd: + dependencies: + '@emotion/react': + specifier: ^11.11.0 + version: 11.13.3(@types/react@18.0.18)(react@18.3.1) + '@emotion/styled': + specifier: ^11.11.0 + version: 11.13.0(@emotion/react@11.13.3)(@types/react@18.0.18)(react@18.3.1) + '@mui/icons-material': + specifier: ^5.11.16 + version: 5.16.7(@mui/material@5.13.0)(@types/react@18.0.18)(react@18.3.1) + '@mui/lab': + specifier: 5.0.0-alpha.129 + version: 5.0.0-alpha.129(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/material@5.13.0)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) + '@mui/material': + specifier: 5.13.0 + version: 5.13.0(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1) + '@mui/system': + specifier: ^5.12.3 + version: 5.16.7(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.0.18)(react@18.3.1) + '@mui/utils': + specifier: ^5.12.3 + version: 5.16.6(@types/react@18.0.18)(react@18.3.1) + '@oxygen-ui/react': + specifier: ^1.15.2 + version: 1.15.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@5.16.7)(@mui/lab@5.0.0-alpha.129)(@mui/material@5.13.0)(@mui/system@5.16.7)(@mui/utils@5.16.6)(@types/react@18.0.18)(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) + '@oxygen-ui/react-icons': + specifier: ^1.15.2 + version: 1.15.2(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) + '@wso2is/core': + specifier: workspace:^ + version: link:../core + classnames: + specifier: ^2.2.6 + version: 2.5.1 + lodash-es: + specifier: ^4.17.21 + version: 4.17.21 + react: + specifier: '*' + version: 18.3.1 + react-dom: + specifier: '*' + version: 18.3.1(react@18.3.1) + devDependencies: + '@testing-library/jest-dom': + specifier: ^6.4.2 + version: 6.5.0 + '@testing-library/react': + specifier: ^14.2.1 + version: 14.3.1(react-dom@18.3.1)(react@18.3.1) + '@types/jest': + specifier: ^29.5.12 + version: 29.5.12 + '@types/react': + specifier: 18.0.18 + version: 18.0.18 + '@typescript-eslint/eslint-plugin': + specifier: ^6.5.0 + version: 6.5.0(@typescript-eslint/parser@6.5.0)(eslint@8.46.0)(typescript@4.9.5) + '@typescript-eslint/parser': + specifier: ^6.5.0 + version: 6.5.0(eslint@8.46.0)(typescript@4.9.5) + eslint: + specifier: 8.46.0 + version: 8.46.0 + eslint-plugin-import: + specifier: ^2.20.2 + version: 2.30.0(@typescript-eslint/parser@6.5.0)(eslint@8.46.0) + eslint-plugin-react: + specifier: ^7.30.0 + version: 7.31.11(eslint@8.46.0) + eslint-plugin-react-hooks: + specifier: ^4.0.0 + version: 4.6.2(eslint@8.46.0) + jest: + specifier: ^29.7.0 + version: 29.7.0(@types/node@18.11.9) + rimraf: + specifier: ^3.0.2 + version: 3.0.2 + ts-jest: + specifier: ^29.1.2 + version: 29.1.5(@babel/core@7.26.0)(babel-jest@26.6.3)(esbuild@0.18.20)(jest@29.7.0)(typescript@4.9.5) + typescript: + specifier: ^4.6.4 + version: 4.9.5 + uuid: + specifier: ^8.3.0 + version: 8.3.2 + modules/dynamic-forms: dependencies: '@mui/material': @@ -21565,7 +21668,7 @@ packages: '@babel/traverse': 7.25.9 '@babel/types': 7.26.0 convert-source-map: 1.9.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) gensync: 1.0.0-beta.2 json5: 2.2.3 lodash: 4.17.21 @@ -21587,10 +21690,10 @@ packages: '@babel/helpers': 7.25.6 '@babel/parser': 7.25.6 '@babel/template': 7.25.0 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 convert-source-map: 2.0.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -21612,7 +21715,7 @@ packages: '@babel/traverse': 7.25.9 '@babel/types': 7.26.0 convert-source-map: 2.0.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -21654,7 +21757,7 @@ packages: resolution: {integrity: sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color @@ -21701,7 +21804,7 @@ packages: '@babel/helper-optimise-call-expression': 7.24.7 '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2) '@babel/helper-skip-transparent-expression-wrappers': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 semver: 6.3.1 transitivePeerDependencies: - supports-color @@ -21719,7 +21822,7 @@ packages: '@babel/helper-optimise-call-expression': 7.24.7 '@babel/helper-replace-supers': 7.25.0(@babel/core@7.26.0) '@babel/helper-skip-transparent-expression-wrappers': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 semver: 6.3.1 transitivePeerDependencies: - supports-color @@ -21808,11 +21911,11 @@ packages: '@babel/core': ^7.4.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-compilation-targets': 7.25.2 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) - '@babel/helper-plugin-utils': 7.24.8 - '@babel/traverse': 7.25.6(supports-color@5.5.0) - debug: 4.3.7(supports-color@5.5.0) + '@babel/helper-compilation-targets': 7.25.9 + '@babel/helper-module-imports': 7.24.7 + '@babel/helper-plugin-utils': 7.25.9 + '@babel/traverse': 7.25.9 + debug: 4.3.7(supports-color@6.1.0) lodash.debounce: 4.0.8 resolve: 1.22.8 semver: 6.3.1 @@ -21827,7 +21930,7 @@ packages: '@babel/core': 7.25.2 '@babel/helper-compilation-targets': 7.25.9 '@babel/helper-plugin-utils': 7.25.9 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) lodash.debounce: 4.0.8 resolve: 1.22.8 transitivePeerDependencies: @@ -21841,7 +21944,7 @@ packages: '@babel/core': 7.26.0 '@babel/helper-compilation-targets': 7.25.9 '@babel/helper-plugin-utils': 7.25.9 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) lodash.debounce: 4.0.8 resolve: 1.22.8 transitivePeerDependencies: @@ -21851,7 +21954,7 @@ packages: resolution: {integrity: sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color @@ -21865,6 +21968,15 @@ packages: transitivePeerDependencies: - supports-color + /@babel/helper-module-imports@7.24.7: + resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/traverse': 7.25.6 + '@babel/types': 7.25.6 + transitivePeerDependencies: + - supports-color + /@babel/helper-module-imports@7.24.7(supports-color@5.5.0): resolution: {integrity: sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==} engines: {node: '>=6.9.0'} @@ -21873,6 +21985,7 @@ packages: '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color + dev: false /@babel/helper-module-imports@7.25.9: resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==} @@ -21890,24 +22003,10 @@ packages: '@babel/core': ^7.0.0 dependencies: '@babel/core': 7.25.2 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) - '@babel/helper-simple-access': 7.24.7 - '@babel/helper-validator-identifier': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) - transitivePeerDependencies: - - supports-color - - /@babel/helper-module-transforms@7.25.2(@babel/core@7.26.0): - resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/helper-simple-access': 7.24.7 '@babel/helper-validator-identifier': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color @@ -21982,7 +22081,7 @@ packages: '@babel/core': 7.25.2 '@babel/helper-annotate-as-pure': 7.24.7 '@babel/helper-wrap-function': 7.25.0 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -22022,7 +22121,7 @@ packages: '@babel/core': 7.25.2 '@babel/helper-member-expression-to-functions': 7.24.8 '@babel/helper-optimise-call-expression': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -22036,7 +22135,7 @@ packages: '@babel/core': 7.26.0 '@babel/helper-member-expression-to-functions': 7.24.8 '@babel/helper-optimise-call-expression': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color @@ -22070,7 +22169,7 @@ packages: resolution: {integrity: sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color @@ -22088,7 +22187,7 @@ packages: resolution: {integrity: sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color @@ -22131,7 +22230,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.25.0 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 transitivePeerDependencies: - supports-color @@ -22192,7 +22291,7 @@ packages: dependencies: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -22325,7 +22424,7 @@ packages: dependencies: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -22377,7 +22476,7 @@ packages: dependencies: '@babel/core': 7.26.0 '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.26.0) - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 transitivePeerDependencies: - supports-color @@ -22403,7 +22502,7 @@ packages: dependencies: '@babel/core': 7.26.0 '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.26.0) - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 '@babel/plugin-syntax-decorators': 7.24.7(@babel/core@7.26.0) transitivePeerDependencies: - supports-color @@ -22415,7 +22514,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 '@babel/plugin-syntax-export-default-from': 7.24.7(@babel/core@7.26.0) /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.26.0): @@ -22426,7 +22525,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.0) /@babel/plugin-proposal-object-rest-spread@7.12.1(@babel/core@7.12.9): @@ -22449,8 +22548,8 @@ packages: dependencies: '@babel/compat-data': 7.25.4 '@babel/core': 7.26.0 - '@babel/helper-compilation-targets': 7.25.2 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-compilation-targets': 7.25.9 + '@babel/helper-plugin-utils': 7.25.9 '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.0) '@babel/plugin-transform-parameters': 7.24.7(@babel/core@7.26.0) @@ -22462,7 +22561,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 '@babel/helper-skip-transparent-expression-wrappers': 7.24.7 '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.0) transitivePeerDependencies: @@ -22477,7 +22576,7 @@ packages: dependencies: '@babel/core': 7.26.0 '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.26.0) - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 transitivePeerDependencies: - supports-color @@ -22507,7 +22606,7 @@ packages: '@babel/core': 7.26.0 '@babel/helper-annotate-as-pure': 7.24.7 '@babel/helper-create-class-features-plugin': 7.25.4(@babel/core@7.26.0) - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.0) transitivePeerDependencies: - supports-color @@ -22621,7 +22720,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.25.2): resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} @@ -22686,6 +22785,7 @@ packages: dependencies: '@babel/core': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 + dev: true /@babel/plugin-syntax-import-attributes@7.25.6(@babel/core@7.26.0): resolution: {integrity: sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==} @@ -22948,7 +23048,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.2): resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} @@ -23017,7 +23117,7 @@ packages: '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-remap-async-to-generator': 7.25.0(@babel/core@7.25.2) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2) - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -23055,7 +23155,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.25.2 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-remap-async-to-generator': 7.25.0(@babel/core@7.25.2) transitivePeerDependencies: @@ -23239,7 +23339,7 @@ packages: '@babel/helper-compilation-targets': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-replace-supers': 7.25.0(@babel/core@7.25.2) - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -23256,7 +23356,7 @@ packages: '@babel/helper-compilation-targets': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-replace-supers': 7.25.0(@babel/core@7.26.0) - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -23624,7 +23724,7 @@ packages: '@babel/core': 7.25.2 '@babel/helper-compilation-targets': 7.25.2 '@babel/helper-plugin-utils': 7.24.8 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -23820,19 +23920,6 @@ packages: - supports-color dev: true - /@babel/plugin-transform-modules-commonjs@7.24.8(@babel/core@7.26.0): - resolution: {integrity: sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.26.0 - '@babel/helper-module-transforms': 7.25.2(@babel/core@7.26.0) - '@babel/helper-plugin-utils': 7.24.8 - '@babel/helper-simple-access': 7.24.7 - transitivePeerDependencies: - - supports-color - /@babel/plugin-transform-modules-commonjs@7.25.9(@babel/core@7.25.2): resolution: {integrity: sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==} engines: {node: '>=6.9.0'} @@ -23869,7 +23956,7 @@ packages: '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2) '@babel/helper-plugin-utils': 7.24.8 '@babel/helper-validator-identifier': 7.24.7 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -24364,7 +24451,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 /@babel/plugin-transform-react-display-name@7.24.7(@babel/core@7.25.2): resolution: {integrity: sha512-H/Snz9PFxKsS1JLI4dJLtnJgCJRoo0AUm3chP6NYr+9En1JMKloheEiLIhlp5MDVznWo+H3AAC1Mc8lmUEpsgg==} @@ -24436,7 +24523,7 @@ packages: dependencies: '@babel/core': 7.25.2 '@babel/helper-annotate-as-pure': 7.24.7 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/helper-plugin-utils': 7.24.8 '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.25.2) '@babel/types': 7.25.6 @@ -24452,7 +24539,7 @@ packages: dependencies: '@babel/core': 7.26.0 '@babel/helper-annotate-as-pure': 7.24.7 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/helper-plugin-utils': 7.24.8 '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.26.0) '@babel/types': 7.25.6 @@ -24607,7 +24694,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/helper-plugin-utils': 7.24.8 babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.26.0) babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.0) @@ -25226,8 +25313,8 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 - '@babel/helper-validator-option': 7.24.8 + '@babel/helper-plugin-utils': 7.25.9 + '@babel/helper-validator-option': 7.25.9 '@babel/plugin-transform-flow-strip-types': 7.25.2(@babel/core@7.26.0) /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.25.2): @@ -25322,10 +25409,10 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.26.0 - '@babel/helper-plugin-utils': 7.24.8 - '@babel/helper-validator-option': 7.24.8 - '@babel/plugin-syntax-jsx': 7.24.7(@babel/core@7.26.0) - '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.26.0) + '@babel/helper-plugin-utils': 7.25.9 + '@babel/helper-validator-option': 7.25.9 + '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0) + '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0) '@babel/plugin-transform-typescript': 7.25.2(@babel/core@7.26.0) transitivePeerDependencies: - supports-color @@ -25389,11 +25476,25 @@ packages: '@babel/parser': 7.26.2 '@babel/types': 7.26.0 + /@babel/traverse@7.25.6: + resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.26.2 + '@babel/generator': 7.25.6 + '@babel/parser': 7.25.6 + '@babel/template': 7.25.0 + '@babel/types': 7.25.6 + debug: 4.3.7(supports-color@6.1.0) + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + /@babel/traverse@7.25.6(supports-color@5.5.0): resolution: {integrity: sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.24.7 + '@babel/code-frame': 7.26.2 '@babel/generator': 7.25.6 '@babel/parser': 7.25.6 '@babel/template': 7.25.0 @@ -25402,6 +25503,7 @@ packages: globals: 11.12.0 transitivePeerDependencies: - supports-color + dev: false /@babel/traverse@7.25.9: resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==} @@ -25412,7 +25514,7 @@ packages: '@babel/parser': 7.26.2 '@babel/template': 7.25.9 '@babel/types': 7.26.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -25675,7 +25777,7 @@ packages: /@emotion/babel-plugin@11.12.0: resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==} dependencies: - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@babel/runtime': 7.25.6 '@emotion/hash': 0.9.2 '@emotion/memoize': 0.9.0 @@ -26012,7 +26114,7 @@ packages: engines: {node: ^10.12.0 || >=12.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) espree: 7.3.1 globals: 13.24.0 ignore: 4.0.6 @@ -26029,7 +26131,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) espree: 9.6.1 globals: 13.24.0 ignore: 5.3.2 @@ -26098,7 +26200,7 @@ packages: deprecated: Use @eslint/config-array instead dependencies: '@humanwhocodes/object-schema': 2.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -26109,7 +26211,7 @@ packages: deprecated: Use @eslint/config-array instead dependencies: '@humanwhocodes/object-schema': 1.2.1 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -27373,6 +27475,203 @@ packages: write-file-atomic: 4.0.2 dev: true + /@lexical/clipboard@0.21.0: + resolution: {integrity: sha512-3lNMlMeUob9fcnRXGVieV/lmPbmet/SVWckNTOwzfKrZ/YW5HiiyJrWviLRVf50dGXTbmBGt7K/2pfPYvWCHFA==} + dependencies: + '@lexical/html': 0.21.0 + '@lexical/list': 0.21.0 + '@lexical/selection': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/code@0.21.0: + resolution: {integrity: sha512-E0DNSFu4I+LMn3ft+UT0Dbntc8ZKjIA0BJj6BDewm0qh3bir40YUf5DkI2lpiFNRF2OpcmmcIxakREeU6avqTA==} + dependencies: + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + prismjs: 1.29.0 + dev: false + + /@lexical/devtools-core@0.21.0(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-csK41CmRLZbKNV5pT4fUn5RzdPjU5PoWR8EqaS9kiyayhDg2zEnuPtvUYWanLfCLH9A2oOfbEsGxjMctAySlJw==} + peerDependencies: + react: '>=17.x' + react-dom: '>=17.x' + dependencies: + '@lexical/html': 0.21.0 + '@lexical/link': 0.21.0 + '@lexical/mark': 0.21.0 + '@lexical/table': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + + /@lexical/dragon@0.21.0: + resolution: {integrity: sha512-ahTCaOtRFNauEzplN1qVuPjyGAlDd+XcVM5FQCdxVh/1DvqmBxEJRVuCBqatzUUVb89jRBekYUcEdnY9iNjvEQ==} + dependencies: + lexical: 0.21.0 + dev: false + + /@lexical/hashtag@0.21.0: + resolution: {integrity: sha512-O4dxcZNq1Xm45HLoRifbGAYvQkg3qLoBc6ibmHnDqZL5mQDsufnH6QEKWfgDtrvp9++3iqsSC+TE7VzWIvA7ww==} + dependencies: + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/history@0.21.0: + resolution: {integrity: sha512-Sv2sici2NnAfHYHYRSjjS139MDT8fHP6PlYM2hVr+17dOg7/fJl22VBLRgQ7/+jLtAPxQjID69jvaMlOvt4Oog==} + dependencies: + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/html@0.21.0: + resolution: {integrity: sha512-UGahVsGz8OD7Ya39qwquE+JPStTxCw/uaQrnUNorCM7owtPidO2H+tsilAB3A1GK3ksFGdHeEjBjG0Gf7gOg+Q==} + dependencies: + '@lexical/selection': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/link@0.21.0: + resolution: {integrity: sha512-/coktIyRXg8rXz/7uxXsSEfSQYxPIx8CmignAXWYhcyYtCWA0fD2mhEhWwVvHH9ofNzvidclRPYKUnrmUm3z3Q==} + dependencies: + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/list@0.21.0: + resolution: {integrity: sha512-WItGlwwNJCS8b6SO1QPKzArShmD+OXQkLbhBcAh+EfpnkvmCW5T5LqY+OfIRmEN1dhDOnwqCY7mXkivWO8o5tw==} + dependencies: + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/mark@0.21.0: + resolution: {integrity: sha512-2x/LoHDYPOkZbKHz4qLFWsPywjRv9KggTOtmRazmaNRUG0FpkImJwUbbaKjWQXeESVGpzfL3qNFSAmCWthsc4g==} + dependencies: + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/markdown@0.21.0: + resolution: {integrity: sha512-XCQCyW5ujK0xR6evV8sF0hv/MRUA//kIrB2JiyF12tLQyjLRNEXO+0IKastWnMKSaDdJMKjzgd+4PiummYs7uA==} + dependencies: + '@lexical/code': 0.21.0 + '@lexical/link': 0.21.0 + '@lexical/list': 0.21.0 + '@lexical/rich-text': 0.21.0 + '@lexical/text': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/offset@0.21.0: + resolution: {integrity: sha512-UR0wHg+XXbq++6aeUPdU0K41xhUDBYzX+AeiqU9bZ7yoOq4grvKD8KBr5tARCSYTy0yvQnL1ddSO12TrP/98Lg==} + dependencies: + lexical: 0.21.0 + dev: false + + /@lexical/overflow@0.21.0: + resolution: {integrity: sha512-93P+d1mbvaJvZF8KK2pG22GuS2pHLtyC7N3GBfkbyAIb7TL/rYs47iR+eADJ4iNY680lylJ4Sl/AEnWvlY7hAg==} + dependencies: + lexical: 0.21.0 + dev: false + + /@lexical/plain-text@0.21.0: + resolution: {integrity: sha512-r4CsAknBD7qGYSE5fPdjpJ6EjfvzHbDtuCeKciL9muiswQhw4HeJrT1qb/QUIY+072uvXTgCgmjUmkbYnxKyPA==} + dependencies: + '@lexical/clipboard': 0.21.0 + '@lexical/selection': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/react@0.21.0(react-dom@18.3.1)(react@18.3.1)(yjs@13.6.20): + resolution: {integrity: sha512-tKwx8EoNkBBKOZf8c10QfyDImH87+XUI1QDL8KXt+Lb8E4ho7g1jAjoEirNEn9gMBj33K4l2qVdbe3XmPAdpMQ==} + peerDependencies: + react: '>=17.x' + react-dom: '>=17.x' + dependencies: + '@lexical/clipboard': 0.21.0 + '@lexical/code': 0.21.0 + '@lexical/devtools-core': 0.21.0(react-dom@18.3.1)(react@18.3.1) + '@lexical/dragon': 0.21.0 + '@lexical/hashtag': 0.21.0 + '@lexical/history': 0.21.0 + '@lexical/link': 0.21.0 + '@lexical/list': 0.21.0 + '@lexical/mark': 0.21.0 + '@lexical/markdown': 0.21.0 + '@lexical/overflow': 0.21.0 + '@lexical/plain-text': 0.21.0 + '@lexical/rich-text': 0.21.0 + '@lexical/selection': 0.21.0 + '@lexical/table': 0.21.0 + '@lexical/text': 0.21.0 + '@lexical/utils': 0.21.0 + '@lexical/yjs': 0.21.0(yjs@13.6.20) + lexical: 0.21.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-error-boundary: 3.1.4(react@18.3.1) + transitivePeerDependencies: + - yjs + dev: false + + /@lexical/rich-text@0.21.0: + resolution: {integrity: sha512-+pvEKUneEkGfWOSTl9jU58N9knePilMLxxOtppCAcgnaCdilOh3n5YyRppXhvmprUe0JaTseCMoik2LP51G/JA==} + dependencies: + '@lexical/clipboard': 0.21.0 + '@lexical/selection': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/selection@0.21.0: + resolution: {integrity: sha512-4u53bc8zlPPF0rnHjsGQExQ1St8NafsDd70/t1FMw7yvoMtUsKdH7+ap00esLkJOMv45unJD7UOzKRqU1X0sEA==} + dependencies: + lexical: 0.21.0 + dev: false + + /@lexical/table@0.21.0: + resolution: {integrity: sha512-JhylAWcf4qKD4FmxMUt3YzH5zg2+baBr4+/haLZL7178hMvUzJwGIiWk+3hD3phzmW3WrP49uFXzM7DMSCkE8w==} + dependencies: + '@lexical/clipboard': 0.21.0 + '@lexical/utils': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/text@0.21.0: + resolution: {integrity: sha512-ceB4fhYejCoR8ID4uIs0sO/VyQoayRjrRWTIEMvOcQtwUkcyciKRhY0A7f2wVeq/MFStd+ajLLjy4WKYK5zUnA==} + dependencies: + lexical: 0.21.0 + dev: false + + /@lexical/utils@0.21.0: + resolution: {integrity: sha512-YzsNOAiLkCy6R3DuP18gtseDrzgx+30lFyqRvp5M7mckeYgQElwdfG5biNFDLv7BM9GjSzgU5Cunjycsx6Sjqg==} + dependencies: + '@lexical/list': 0.21.0 + '@lexical/selection': 0.21.0 + '@lexical/table': 0.21.0 + lexical: 0.21.0 + dev: false + + /@lexical/yjs@0.21.0(yjs@13.6.20): + resolution: {integrity: sha512-AtPhC3pJ92CHz3dWoniSky7+MSK2WSd0xijc76I2qbTeXyeuFfYyhR6gWMg4knuY9Wz3vo9/+dXGdbQIPD8efw==} + peerDependencies: + yjs: '>=13.5.22' + dependencies: + '@lexical/offset': 0.21.0 + '@lexical/selection': 0.21.0 + lexical: 0.21.0 + yjs: 13.6.20 + dev: false + /@manypkg/find-root@1.1.0: resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} dependencies: @@ -27666,7 +27965,7 @@ packages: dependencies: '@open-draft/until': 1.0.3 '@xmldom/xmldom': 0.7.13 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) headers-utils: 3.0.2 outvariant: 1.4.3 strict-event-emitter: 0.2.8 @@ -29603,7 +29902,7 @@ packages: optional: true dependencies: '@babel/core': 7.25.2 - '@babel/helper-module-imports': 7.24.7(supports-color@5.5.0) + '@babel/helper-module-imports': 7.24.7 '@rollup/pluginutils': 3.1.0(rollup@2.79.1) rollup: 2.79.1 transitivePeerDependencies: @@ -31157,7 +31456,7 @@ packages: '@babel/parser': 7.25.6 '@babel/plugin-transform-react-jsx': 7.25.2(@babel/core@7.26.0) '@babel/preset-env': 7.26.0(@babel/core@7.26.0) - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 '@storybook/csf': 0.0.2--canary.4566f4d.1 '@storybook/mdx1-csf': 0.0.1(@babel/core@7.26.0) @@ -31175,7 +31474,7 @@ packages: dependencies: '@babel/generator': 7.25.6 '@babel/parser': 7.25.6 - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 '@babel/types': 7.25.6 '@storybook/csf': 0.1.11 '@storybook/types': 7.6.9 @@ -31515,7 +31814,7 @@ packages: typescript: '>= 3.x' webpack: 5.84.1 dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) endent: 2.1.0 find-cache-dir: 3.3.2 flat-cache: 3.2.0 @@ -31534,7 +31833,7 @@ packages: typescript: '>= 4.x' webpack: 5.84.1 dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) endent: 2.1.0 find-cache-dir: 3.3.2 flat-cache: 3.2.0 @@ -32195,7 +32494,7 @@ packages: resolution: {integrity: sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==} engines: {node: '>=10'} dependencies: - '@babel/types': 7.25.6 + '@babel/types': 7.26.0 dev: true /@svgr/hast-util-to-babel-ast@6.5.1: @@ -32412,7 +32711,7 @@ packages: '@swc-node/sourcemap-support': 0.3.0 '@swc/core': 1.3.99(@swc/helpers@0.5.9) colorette: 2.0.20 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) pirates: 4.0.6 tslib: 2.7.0 typescript: 5.1.6 @@ -33587,7 +33886,7 @@ packages: '@typescript-eslint/type-utils': 6.5.0(eslint@7.32.0)(typescript@5.1.6) '@typescript-eslint/utils': 6.5.0(eslint@7.32.0)(typescript@5.1.6) '@typescript-eslint/visitor-keys': 6.5.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) eslint: 7.32.0 graphemer: 1.4.0 ignore: 5.3.2 @@ -33616,7 +33915,7 @@ packages: '@typescript-eslint/type-utils': 6.5.0(eslint@8.46.0)(typescript@4.9.5) '@typescript-eslint/utils': 6.5.0(eslint@8.46.0)(typescript@4.9.5) '@typescript-eslint/visitor-keys': 6.5.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) eslint: 8.46.0 graphemer: 1.4.0 ignore: 5.3.2 @@ -33642,7 +33941,7 @@ packages: '@typescript-eslint/types': 6.5.0 '@typescript-eslint/typescript-estree': 6.5.0(typescript@5.1.6) '@typescript-eslint/visitor-keys': 6.5.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) eslint: 7.32.0 typescript: 5.1.6 transitivePeerDependencies: @@ -33663,7 +33962,7 @@ packages: '@typescript-eslint/types': 6.5.0 '@typescript-eslint/typescript-estree': 6.5.0(typescript@4.9.5) '@typescript-eslint/visitor-keys': 6.5.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) eslint: 8.46.0 typescript: 4.9.5 transitivePeerDependencies: @@ -33698,7 +33997,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 6.5.0(typescript@5.1.6) '@typescript-eslint/utils': 6.5.0(eslint@7.32.0)(typescript@5.1.6) - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) eslint: 7.32.0 ts-api-utils: 1.3.0(typescript@5.1.6) typescript: 5.1.6 @@ -33718,7 +34017,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 6.5.0(typescript@4.9.5) '@typescript-eslint/utils': 6.5.0(eslint@8.46.0)(typescript@4.9.5) - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) eslint: 8.46.0 ts-api-utils: 1.3.0(typescript@4.9.5) typescript: 4.9.5 @@ -33747,7 +34046,7 @@ packages: dependencies: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/visitor-keys': 5.62.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.3 @@ -33768,7 +34067,7 @@ packages: dependencies: '@typescript-eslint/types': 6.5.0 '@typescript-eslint/visitor-keys': 6.5.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.3 @@ -33789,7 +34088,7 @@ packages: dependencies: '@typescript-eslint/types': 6.5.0 '@typescript-eslint/visitor-keys': 6.5.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) globby: 11.1.0 is-glob: 4.0.3 semver: 7.6.3 @@ -33986,7 +34285,6 @@ packages: dependencies: webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@3.11.3)(webpack@5.84.1) - dev: true /@webpack-cli/info@1.5.0(webpack-cli@4.10.0): resolution: {integrity: sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==} @@ -34005,7 +34303,6 @@ packages: dependencies: webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@3.11.3)(webpack@5.84.1) - dev: true /@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)(webpack-dev-server@3.11.3): resolution: {integrity: sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==} @@ -34033,7 +34330,6 @@ packages: webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@3.11.3)(webpack@5.84.1) webpack-dev-server: 3.11.3(webpack-cli@4.10.0)(webpack@5.84.1) - dev: true /@webpack-contrib/schema-utils@1.0.0-beta.0(webpack@5.84.1): resolution: {integrity: sha512-LonryJP+FxQQHsjGBi6W786TQB1Oym+agTpY0c+Kj8alnIw+DLUJb6SI8Y1GHGhLCH1yPRrucjObUmxNICQ1pg==} @@ -34234,7 +34530,7 @@ packages: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color dev: true @@ -35019,7 +35315,7 @@ packages: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.24.8 '@babel/plugin-syntax-typescript': 7.25.4(@babel/core@7.26.0) - '@babel/traverse': 7.25.6(supports-color@5.5.0) + '@babel/traverse': 7.25.6 transitivePeerDependencies: - supports-color dev: true @@ -35242,7 +35538,7 @@ packages: '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.25.2) '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2) '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.2) - '@babel/plugin-syntax-import-attributes': 7.25.6(@babel/core@7.25.2) + '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.25.2) '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2) '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2) '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2) @@ -37449,6 +37745,7 @@ packages: dependencies: ms: 2.1.3 supports-color: 5.5.0 + dev: false /debug@4.3.7(supports-color@6.1.0): resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} @@ -37765,7 +38062,7 @@ packages: hasBin: true dependencies: address: 1.2.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color @@ -38337,7 +38634,7 @@ packages: peerDependencies: esbuild: '>=0.12 <1' dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) esbuild: 0.18.20 transitivePeerDependencies: - supports-color @@ -38825,7 +39122,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) doctrine: 3.0.0 enquirer: 2.4.1 escape-string-regexp: 4.0.0 @@ -38878,7 +39175,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2 @@ -39731,7 +40028,7 @@ packages: vue-template-compiler: optional: true dependencies: - '@babel/code-frame': 7.24.7 + '@babel/code-frame': 7.26.2 '@types/json-schema': 7.0.15 chalk: 4.1.2 chokidar: 3.6.0 @@ -40943,7 +41240,7 @@ packages: dependencies: '@tootallnate/once': 1.1.2 agent-base: 6.0.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color dev: true @@ -40954,7 +41251,7 @@ packages: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color dev: true @@ -41036,7 +41333,7 @@ packages: engines: {node: '>= 6.0.0'} dependencies: agent-base: 5.1.1 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color @@ -41045,7 +41342,7 @@ packages: engines: {node: '>= 6'} dependencies: agent-base: 6.0.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color dev: true @@ -41342,7 +41639,6 @@ packages: /interpret@3.1.1: resolution: {integrity: sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==} engines: {node: '>=10.13.0'} - dev: true /invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} @@ -41924,6 +42220,10 @@ packages: - encoding dev: false + /isomorphic.js@0.2.5: + resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==} + dev: false + /istanbul-lib-coverage@3.2.2: resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==} engines: {node: '>=8'} @@ -41995,7 +42295,7 @@ packages: resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==} engines: {node: '>=10'} dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) istanbul-lib-coverage: 3.2.2 source-map: 0.6.1 transitivePeerDependencies: @@ -43106,7 +43406,7 @@ packages: '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.26.0) '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.26.0) '@babel/plugin-proposal-optional-chaining': 7.21.0(@babel/core@7.26.0) - '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.26.0) + '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0) '@babel/preset-env': 7.26.0(@babel/core@7.25.2) '@babel/preset-flow': 7.24.7(@babel/core@7.26.0) '@babel/preset-typescript': 7.24.7(@babel/core@7.26.0) @@ -43660,6 +43960,18 @@ packages: prelude-ls: 1.2.1 type-check: 0.4.0 + /lexical@0.21.0: + resolution: {integrity: sha512-Dxc5SCG4kB+wF+Rh55ism3SuecOKeOtCtGHFGKd6pj2QKVojtjkxGTQPMt7//2z5rMSue4R+hmRM0pCEZflupA==} + dev: false + + /lib0@0.2.98: + resolution: {integrity: sha512-XteTiNO0qEXqqweWx+b21p/fBnNHUA1NwAtJNJek1oPrewEZs2uiT4gWivHKr9GqCjDPAhchz0UQO8NwU3bBNA==} + engines: {node: '>=16'} + hasBin: true + dependencies: + isomorphic.js: 0.2.5 + dev: false + /libnpmaccess@6.0.4: resolution: {integrity: sha512-qZ3wcfIyUoW0+qSFkMBovcTrSGJ3ZeyvpR7d5N9pEYv/kXs8sHP2wiqEIXBKLFrZlmM0kR0RJD7mtfLngtlLag==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} @@ -43905,7 +44217,7 @@ packages: deprecated: 4.x is no longer supported. Please upgrade to 6.x or higher. dependencies: date-format: 2.1.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) flatted: 2.0.2 rfdc: 1.4.1 streamroller: 1.0.6 @@ -44538,7 +44850,7 @@ packages: resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==} dependencies: '@types/debug': 4.1.12 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.1 @@ -46383,7 +46695,7 @@ packages: peerDependencies: postcss: ^8.4.31 dependencies: - browserslist: 4.23.3 + browserslist: 4.24.2 caniuse-api: 3.0.0 colord: 2.9.3 postcss: 8.4.45 @@ -46407,7 +46719,7 @@ packages: peerDependencies: postcss: ^8.4.31 dependencies: - browserslist: 4.23.3 + browserslist: 4.24.2 postcss: 8.4.45 postcss-value-parser: 4.2.0 dev: true @@ -46686,7 +46998,7 @@ packages: peerDependencies: postcss: ^8.4.31 dependencies: - browserslist: 4.23.3 + browserslist: 4.24.2 cssnano-utils: 4.0.2(postcss@8.4.45) postcss: 8.4.45 postcss-value-parser: 4.2.0 @@ -46959,7 +47271,7 @@ packages: peerDependencies: postcss: ^8.4.31 dependencies: - browserslist: 4.23.3 + browserslist: 4.24.2 postcss: 8.4.45 postcss-value-parser: 4.2.0 dev: true @@ -47218,6 +47530,11 @@ packages: resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==} engines: {node: '>= 0.8'} + /prismjs@1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + dev: false + /private@0.1.8: resolution: {integrity: sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==} engines: {node: '>= 0.6'} @@ -47412,7 +47729,7 @@ packages: engines: {node: '>=8.16.0'} dependencies: '@types/mime-types': 2.1.4 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) extract-zip: 1.7.0 https-proxy-agent: 4.0.0 mime: 2.6.0 @@ -47696,7 +48013,7 @@ packages: hasBin: true dependencies: '@babel/core': 7.26.0 - '@babel/generator': 7.25.6 + '@babel/generator': 7.26.2 '@babel/runtime': 7.25.6 ast-types: 0.14.2 commander: 2.20.3 @@ -47784,6 +48101,16 @@ packages: react-is: 18.1.0 dev: true + /react-error-boundary@3.1.4(react@18.3.1): + resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==} + engines: {node: '>=10', npm: '>=6'} + peerDependencies: + react: '>=16.13.1' + dependencies: + '@babel/runtime': 7.25.6 + react: 18.3.1 + dev: false + /react-fast-compare@2.0.4: resolution: {integrity: sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==} dev: false @@ -48425,7 +48752,6 @@ packages: engines: {node: '>= 10.13.0'} dependencies: resolve: 1.22.8 - dev: true /redent@1.0.0: resolution: {integrity: sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==} @@ -49594,7 +49920,7 @@ packages: /simple-git@1.132.0: resolution: {integrity: sha512-xauHm1YqCTom1sC9eOjfq3/9RKiUA9iPnxBbrY2DdL8l4ADMu0jjM5l5lphQP5YWNqAL2aXC/OeuQ76vHtW5fg==} dependencies: - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) transitivePeerDependencies: - supports-color dev: true @@ -49711,7 +50037,7 @@ packages: engines: {node: '>= 10'} dependencies: agent-base: 6.0.2 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) socks: 2.8.3 transitivePeerDependencies: - supports-color @@ -49880,19 +50206,6 @@ packages: /spdx-license-ids@3.0.20: resolution: {integrity: sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==} - /spdy-transport@3.0.0: - resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==} - dependencies: - debug: 4.3.7(supports-color@5.5.0) - detect-node: 2.1.0 - hpack.js: 2.1.6 - obuf: 1.1.2 - readable-stream: 3.6.2 - wbuf: 1.7.3 - transitivePeerDependencies: - - supports-color - dev: true - /spdy-transport@3.0.0(supports-color@6.1.0): resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==} dependencies: @@ -49905,19 +50218,6 @@ packages: transitivePeerDependencies: - supports-color - /spdy@4.0.2: - resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==} - engines: {node: '>=6.0.0'} - dependencies: - debug: 4.3.7(supports-color@5.5.0) - handle-thing: 2.0.1 - http-deceiver: 1.2.7 - select-hose: 2.0.0 - spdy-transport: 3.0.0 - transitivePeerDependencies: - - supports-color - dev: true - /spdy@4.0.2(supports-color@6.1.0): resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==} engines: {node: '>=6.0.0'} @@ -50471,7 +50771,7 @@ packages: hasBin: true dependencies: '@adobe/css-tools': 4.4.0 - debug: 4.3.7(supports-color@5.5.0) + debug: 4.3.7(supports-color@6.1.0) glob: 7.2.3 sax: 1.2.4 source-map: 0.7.4 @@ -50771,7 +51071,7 @@ packages: schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.32.0 - webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@4.10.0) + webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@5.1.4) /terser@4.8.1: resolution: {integrity: sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==} @@ -52196,7 +52496,6 @@ packages: webpack-bundle-analyzer: 4.10.2 webpack-dev-server: 3.11.3(webpack-cli@4.10.0)(webpack@5.84.1) webpack-merge: 5.10.0 - dev: true /webpack-dev-middleware@3.7.3(webpack@5.84.1): resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==} @@ -52347,7 +52646,7 @@ packages: selfsigned: 2.4.1 serve-index: 1.9.1(supports-color@6.1.0) sockjs: 0.3.24 - spdy: 4.0.2 + spdy: 4.0.2(supports-color@6.1.0) webpack: 5.84.1(@swc/core@1.3.99)(esbuild@0.18.20)(webpack-cli@4.10.0) webpack-cli: 4.10.0(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@3.11.3)(webpack@5.84.1) webpack-dev-middleware: 5.3.4(webpack@5.84.1) @@ -52525,7 +52824,6 @@ packages: - '@swc/core' - esbuild - uglify-js - dev: true /websocket-driver@0.7.4: resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==} @@ -52956,6 +53254,13 @@ packages: buffer-crc32: 0.2.13 fd-slicer: 1.1.0 + /yjs@13.6.20: + resolution: {integrity: sha512-Z2YZI+SYqK7XdWlloI3lhMiKnCdFCVC4PchpdO+mCYwtiTwncjUbnRK9R1JmkNfdmHyDXuWN3ibJAt0wsqTbLQ==} + engines: {node: '>=16.0.0', npm: '>=8.0.0'} + dependencies: + lib0: 0.2.98 + dev: false + /yn@3.1.1: resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==} engines: {node: '>=6'} diff --git a/tsconfig.base.json b/tsconfig.base.json index 248e1b26919..1cedfdaee2d 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -17,6 +17,7 @@ "target": "es2015", "baseUrl": ".", "paths": { + "@wso2is/dnd": ["modules/dnd/src/index.ts"], "@wso2is/dynamic-forms": ["modules/dynamic-forms/src/index.ts"], "@wso2is/form": ["modules/form/src/index.ts"], "@wso2is/forms": ["modules/forms/src/index.ts"],