impaktapps-ui-builder 0.0.382457 → 1.0.0

package/page/App/components/PublicTypes/ResourceGenerator/components/ControlledElement/index.tsx

@@ -0,0 +1,319 @@
+import { FC, Fragment, useCallback } from "react";
+import { Controller, RegisterOptions } from "react-hook-form";
+import { ControlledElementProps, DefaultValueType } from "./interface";
+import {
+  applyConfigItemContainer,
+  applyConfigItemLabelText,
+  configItemTip,
+  hostInputContainer,
+  labelContainer,
+  sslStyle,
+} from "./style";
+import {
+  Checkbox,
+  Input,
+  MenuItem,
+  RadioGroup,
+  Select,
+  Switch,
+} from "@mui/material";
+import { globalColor } from "@/utils/colorBuilder";
+
+export const ControlledElement: FC<ControlledElementProps> = (props) => {
+  const {
+    title,
+    contentLabel,
+    isRequired = false,
+    defaultValue,
+    placeholders = [],
+    styles = [],
+    name,
+    tips,
+    controlledType,
+    control,
+    error,
+    options = [],
+    rules = [],
+    tipsStyle,
+    // allowClear = false,
+    // forceEqualWidth,
+    labelStyle,
+    onValueChange,
+  } = props;
+
+  const filteredType = (
+    Array.isArray(controlledType) ? controlledType : [controlledType]
+  ).filter((type) => type.trim() && type !== "none");
+  const names = Array.isArray(name) ? name : [name];
+  const defaultValues = Array.isArray(defaultValue)
+    ? defaultValue
+    : [defaultValue];
+  const hasTextArea = filteredType.includes("textarea");
+
+  const getElementByControlledType = useCallback(
+    (
+      type: string,
+      name: string,
+      defaultValue: DefaultValueType,
+      placeholder: string,
+      rules: RegisterOptions,
+      style: Record<string, string | number> | undefined = {}
+    ) => {
+      switch (type) {
+        case "input":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  {...style}
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  error={error}
+                  placeholder={placeholder}
+                />
+              )}
+              name={name}
+            />
+          );
+        case "checkbox":
+          return (
+            <>
+              <Controller
+                control={control}
+                defaultValue={defaultValue}
+                rules={rules}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <Checkbox
+                    {...style}
+                    onBlur={onBlur}
+                    onChange={(e) => {
+                      onChange(value);
+                      onValueChange?.(e.target.value);
+                    }}
+                    checked={value}
+                    // placeholder={placeholder}
+                  />
+                )}
+                name={name}
+              />
+              <span css={sslStyle}>{contentLabel}</span>
+            </>
+          );
+        case "select":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({ field: { value, onChange, onBlur } }) => {
+                return (
+                  <Select
+                    value={value}
+                    onBlur={onBlur}
+                    fullWidth
+                    size="small"
+                    sx={{borderRadius:"20px"}}
+                    // allowClear={allowClear}
+                    onChange={(e) => {
+                      onValueChange?.(e.target.value as string);
+                      onChange(e.target.value);
+                    }}
+                  >
+                    {options?.map((e) => (
+                      <MenuItem value={e.value}>{e.label}</MenuItem>
+                    ))}
+                  </Select>
+                );
+              }}
+              name={name}
+            />
+          );
+        case "switch":
+          return (
+            <>
+              <Controller
+                control={control}
+                defaultValue={defaultValue}
+                rules={rules}
+                render={({ field: { value, onChange, onBlur } }) => (
+                  <Switch
+                    checked={value}
+                    onChange={(open) => {
+                      onChange(open);
+                      onValueChange?.(open.target.value);
+                    }}
+                    onBlur={onBlur}
+                    {...style}
+                  />
+                )}
+                name={name}
+              />
+              <span css={sslStyle}>{contentLabel}</span>
+            </>
+          );
+        case "number":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  type="number"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  placeholder={placeholder}
+                  {...style}
+                />
+              )}
+              name={name}
+            />
+          );
+        case "password":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <Input
+                  type="password"
+                  autoComplete="new-password"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  placeholder={placeholder}
+                  {...style}
+                />
+              )}
+              name={name}
+            />
+          );
+        case "radio":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <RadioGroup
+                  // colorScheme="techPurple"
+                  // w="100%"
+                  // type="radio"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  // placeholder={placeholder}
+                  // options={options}
+                  {...style}
+                />
+              )}
+              name={name}
+            />
+          );
+        case "radio-group":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <RadioGroup
+                  // colorScheme="gray"
+                  // w="100%"
+                  // type="button"
+                  onBlur={onBlur}
+                  onChange={onChange}
+                  value={value}
+                  // placeholder={placeholder}
+                  // forceEqualWidth={forceEqualWidth}
+                  // options={options}
+                  {...style}
+                />
+              )}
+              name={name}
+            />
+          );
+        case "textarea":
+          return (
+            <Controller
+              control={control}
+              defaultValue={defaultValue}
+              rules={rules}
+              render={({
+                field: {
+                  value,
+                  // , onChange, onBlur
+                },
+              }) => (
+                <div>{value}</div>
+                //     <TextArea
+                //       w="100%"
+                //       h="100%"
+                //       pb="16px"
+                //       minH="240px"
+                //       colorScheme="techPurple"
+                //       onBlur={onBlur}
+                //       onChange={onChange}
+                //       value={value}
+                //       autoSize={false}
+                //       placeholder={placeholder}
+                //       {...style}
+                //     />
+              )}
+              name={name}
+            />
+          );
+      }
+    },
+    [
+      contentLabel,
+      control,
+      error,
+      // forceEqualWidth,
+      onValueChange,
+      options,
+    ]
+  );
+
+  return (
+    <>
+      {!!filteredType.length && (
+        <div css={applyConfigItemContainer(hasTextArea)}>
+          <div css={labelStyle ? labelStyle : labelContainer}>
+            {isRequired && (
+              <span css={applyConfigItemLabelText(globalColor("red-03"))}>
+                *
+              </span>
+            )}
+            <span css={applyConfigItemLabelText(globalColor("grayBlue-02"))}>
+              {title}
+            </span>
+          </div>
+          <div css={hostInputContainer}>
+            {filteredType.map((type, index) => (
+              <Fragment key={index}>
+                {getElementByControlledType(
+                  type,
+                  names[index],
+                  defaultValues[index],
+                  placeholders[index],
+                  rules[index],
+                  styles[index]
+                )}
+              </Fragment>
+            ))}
+          </div>
+        </div>
+      )}
+      {tips && <div css={tipsStyle ? tipsStyle : configItemTip}>{tips}</div>}
+    </>
+  );
+};
+
+ControlledElement.displayName = "ControlledElement";

package/page/App/components/PublicTypes/ResourceGenerator/components/ControlledElement/interface.ts

@@ -0,0 +1,39 @@
+import { SelectOptionObject } from "@/page/App/components/Actions/ActionPanel/RestApiPanel"
+import { SerializedStyles } from "@emotion/react"
+import { ReactNode } from "react"
+import { Control, RegisterOptions } from "react-hook-form"
+
+export type ControlledType =
+  | "checkbox"
+  | "input"
+  | "number"
+  | "switch"
+  | "password"
+  | "textarea"
+  | "select"
+  | "radio-group"
+  | "radio"
+  | "none"
+
+export type DefaultValueType = string | boolean | number
+
+export interface ControlledElementProps {
+  title: ReactNode
+  isRequired?: boolean
+  defaultValue: DefaultValueType | DefaultValueType[]
+  placeholders?: string[]
+  contentLabel?: string
+  name: string | string[]
+  styles?: Record<string, string | number>[]
+  tips?: string | ReactNode
+  error?: boolean
+  labelStyle?: SerializedStyles
+  tipsStyle?: SerializedStyles
+  controlledType: ControlledType | ControlledType[]
+  options?: string[] | number[] | SelectOptionObject[]
+  control: Control
+  allowClear?: boolean
+  rules?: RegisterOptions[]
+  onValueChange?: (value: DefaultValueType) => void
+  forceEqualWidth?: boolean
+}

package/page/App/components/PublicTypes/ResourceGenerator/components/ControlledElement/style.ts

@@ -0,0 +1,74 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { SerializedStyles, css } from "@emotion/react"
+
+export function applyConfigItemContainer(hasTextarea: boolean) {
+  if (hasTextarea) {
+    return css`
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      padding-left: 24px;
+    `
+  } else {
+    return css`
+      display: flex;
+      min-height: 48px;
+      align-items: center;
+      flex-direction: row;
+      padding-left: 24px;
+    `
+  }
+}
+
+export const sslStyle = css`
+  font-size: 14px;
+  color: ${globalColor("grayBlue-02")};
+  margin-left: 8px;
+`
+
+export const configItemTip = css`
+  font-size: 14px;
+  color: ${globalColor("grayBlue-04")};
+  font-weight: 400;
+  margin-left: 192px;
+  padding: 0 24px 8px 24px;
+  line-height: 22px;
+  min-height: 30px;
+  white-space: normal;
+`
+
+export const labelContainer = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  min-width: 176px;
+  width: 176px;
+`
+
+export function applyConfigItemLabelText(
+  color: string,
+  margin?: boolean,
+): SerializedStyles {
+  let marginLeft = css``
+  if (margin) {
+    marginLeft = css`
+      margin-left: 4px;
+    `
+  }
+  return css`
+    font-size: 14px;
+    color: ${color};
+    font-weight: 500;
+    ${marginLeft};
+  `
+}
+
+export const hostInputContainer = css`
+  display: flex;
+  margin-left: 16px;
+  margin-right: 24px;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+`

package/page/App/components/PublicTypes/ResourceGenerator/components/InputRecordEditor/index.tsx

@@ -0,0 +1,98 @@
+import { FC, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { InputRecordEditorProps } from "./interface";
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import {
+  applyRecordEditorContainerStyle,
+  recordEditorLabelStyle,
+  recordEditorStyle,
+  recordStyle,
+} from "./style";
+import { Button, IconButton, Input } from "@mui/material";
+import { globalColor } from "@/utils/colorBuilder";
+
+export const InputRecordEditor: FC<InputRecordEditorProps> = (props) => {
+  const {
+    records,
+    label,
+    onDelete,
+    onAdd,
+    onChangeKey,
+    onChangeValue,
+    customRender,
+  } = props;
+
+  const { t } = useTranslation();
+  const recordList = useMemo(() => {
+    return (
+      <>
+        {records?.map((record, index) => {
+          if (customRender) {
+            return (
+              <div css={recordStyle} key={index}>
+                {customRender(record, index)}
+                <Button
+                  variant="outlined"
+                  onClick={() => {
+                    onDelete(index, record);
+                  }}
+                  // leftIcon={<DeleteIcon />}
+                />
+                Delete
+              </div>
+            );
+          }
+          return (
+            <div css={recordStyle} key={index}>
+              <Input
+                value={record.key}
+                placeholder="key"
+                onChange={(e) => {
+                  onChangeKey(index, e.target.value, record.value);
+                }}
+              />
+              <Input
+                placeholder="value"
+                value={record.value}
+                onChange={(e) => {
+                  onChangeValue(index, record.key, e.target.value);
+                }}
+              />
+              <IconButton
+                onClick={() => {
+                  onDelete(index, record);
+                }}
+                aria-label="delete"
+                color="primary"
+              >
+                <DeleteIcon />
+              </IconButton>
+            </div>
+          );
+        })}
+      </>
+    );
+  }, [customRender, onChangeKey, onChangeValue, onDelete, records]);
+
+  return (
+    <div css={applyRecordEditorContainerStyle(label)}>
+      {label != "" && <span css={recordEditorLabelStyle}>{label}</span>}
+      <div css={recordEditorStyle}>
+        {recordList}
+        <span>
+          <Button
+            startIcon={<AddCircleOutlineIcon sx={{color:globalColor(`techPurple-08`)}} />}
+            size="medium"
+            variant="text"
+            onClick={onAdd}
+          >
+            {t("editor.action.panel.btn.new")}
+          </Button>
+        </span>
+      </div>
+    </div>
+  );
+};
+
+InputRecordEditor.displayName = "InputRecordEditor";

package/page/App/components/PublicTypes/ResourceGenerator/components/InputRecordEditor/interface.ts

@@ -0,0 +1,13 @@
+
+import { ReactNode } from "react"
+// import { Params } from "react-router-dom"
+
+export interface InputRecordEditorProps {
+  label: string
+  records: any[]
+  onAdd: () => void
+  customRender?: (record: any, index: number) => ReactNode
+  onDelete: (index: number, record: any) => void
+  onChangeKey: (index: number, key: string, value: string) => void
+  onChangeValue: (index: number, key: string, value: string) => void
+}

package/page/App/components/PublicTypes/ResourceGenerator/components/InputRecordEditor/style.ts

@@ -0,0 +1,44 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+
+export function applyRecordEditorContainerStyle(label: string) {
+  return css`
+    display: flex;
+    padding-right: ${label !== "" ? "24px" : "0"};
+    flex-direction: row;
+    padding-left: 24px;
+  `
+}
+export const recordEditorStyle = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+`
+
+export const recordStyle = css`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 48px;
+  & > button {
+    color: ${globalColor(`grayBlue-05`)};
+    :hover {
+      color: ${globalColor(`grayBlue-02`)};
+      transition: color 200ms ease-in-out;
+    }
+  }
+`
+
+export const recordEditorLabelStyle = css`
+  min-width: 160px;
+  margin-left: 16px;
+  margin-right: 16px;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${globalColor(`grayBlue-02`)};
+`

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCard/index.tsx

@@ -0,0 +1,39 @@
+import { FC } from "react";
+import {
+  getResourceNameFromResourceType,
+  useResourceTypeToResourceName,
+} from "../../utils";
+import { ResourceCardSelectorProps } from "./interface";
+import {
+  applyItemStyle,
+  nameStyle,
+  subTitleStyle,
+  titleContainerStyle,
+} from "./style";
+import { getIconFromResourceType } from "./utils";
+import { useTheme } from "@mui/material";
+
+
+export const ResourceCard: FC<ResourceCardSelectorProps> = (props) => {
+  const { resourceType, onSelect } = props;
+ const theme = useTheme();
+  const subTitle = useResourceTypeToResourceName(resourceType);
+  return (
+    <div
+      css={applyItemStyle(theme)}
+      onClick={() => {
+        onSelect?.(resourceType);
+      }}
+    >
+      {getIconFromResourceType(resourceType)}
+      <div css={titleContainerStyle}>
+        <div css={nameStyle(theme)}>
+          {getResourceNameFromResourceType(resourceType)}
+        </div>
+        {subTitle !== "" && <div css={subTitleStyle}>{subTitle}</div>}
+      </div>
+    </div>
+  );
+};
+
+ResourceCard.displayName = "ResourceCard";

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCard/interface.ts

@@ -0,0 +1,7 @@
+import { ResourceType } from "../../../resource"
+
+
+export interface ResourceCardSelectorProps {
+  resourceType: ResourceType
+  onSelect?: (item: ResourceType) => void
+}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCard/style.ts

@@ -0,0 +1,44 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+import { Theme } from "@mui/material"
+
+
+export const applyItemStyle = (theme: Theme) => css`
+  display: flex;
+  padding: 0 0 0 16px;
+  height: 56px;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 8px;
+  border: solid 1px ${theme.palette.background.default};
+  position: relative;
+  background-color: ${theme.palette.action.focus};
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    box-shadow: 0 4px 10px 0 ${theme.palette.action.focus};
+    background-color: ${theme.palette.action.focus};
+    border-color: ${theme.palette.action.focus};
+  }
+`
+
+export const nameStyle = (theme: Theme) => css`
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  color: ${theme.palette.text.primary};
+ 
+`
+
+export const titleContainerStyle = css`
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 12px;
+`
+
+export const subTitleStyle = css`
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 400;
+  color: ${globalColor("grayBlue-04")};
+`