@cozeloop/components 0.0.2 → 0.0.3

package/src/semi-schema-form/components/tmpls/base-input.tsx

@@ -0,0 +1,126 @@
+/* eslint-disable complexity */
+import React, { type FocusEvent } from 'react';
+
+import {
+  ariaDescribedByIds,
+  type BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  type FormContextType,
+  type GenericObjectType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+} from '@rjsf/utils';
+import {
+  Input,
+  CozInputNumber,
+  type InputNumberProps,
+  type InputProps,
+} from '@coze-arch/coze-design';
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: BaseInputTemplateProps<T, S, F>) {
+  const {
+    disabled,
+    formContext,
+    id,
+    onBlur,
+    onChange,
+    onChangeOverride,
+    onFocus,
+    options,
+    placeholder,
+    readonly,
+    schema,
+    value,
+    type,
+  } = props;
+  const {
+    step,
+    type: fieldType,
+    ...inputProps
+  } = getInputProps<T, S, F>(schema, type, options, false);
+
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleNumberChange: InputNumberProps['onChange'] = nextValue =>
+    onChange(nextValue);
+
+  const handleTextChange: InputProps['onChange'] = (nextValue, e) => {
+    onChangeOverride
+      ? onChangeOverride(e)
+      : onChange(nextValue === '' ? options.emptyValue : nextValue);
+  };
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, target && target.value);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, target && target.value);
+
+  const input =
+    fieldType === 'number' || fieldType === 'integer' ? (
+      <CozInputNumber
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleNumberChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        style={INPUT_STYLE}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        step={step as number | undefined}
+        value={value}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+    ) : (
+      <Input
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onBlur={!readonly ? handleBlur : undefined}
+        onChange={!readonly ? handleTextChange : undefined}
+        onFocus={!readonly ? handleFocus : undefined}
+        placeholder={placeholder}
+        style={INPUT_STYLE}
+        list={schema.examples ? examplesId<T>(id) : undefined}
+        {...inputProps}
+        value={value}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+      />
+    );
+
+  return (
+    <>
+      {input}
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(
+              schema.default && !schema.examples.includes(schema.default)
+                ? ([schema.default] as string[])
+                : [],
+            )
+            .map(example => (
+              <option key={example} value={example} />
+            ))}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/semi-schema-form/components/tmpls/description-field.tsx

@@ -0,0 +1,23 @@
+import {
+  type DescriptionFieldProps,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description } = props;
+
+  if (!description) {
+    return null;
+  }
+  return <span id={id}>{description}</span>;
+}

package/src/semi-schema-form/components/tmpls/error-list.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import {
+  type ErrorListProps,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+import { IconCozWarningCircle } from '@coze-arch/coze-design/icons';
+import { Banner, List, Space } from '@coze-arch/coze-design';
+
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({ errors, registry }: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+  const renderErrors = () => (
+    <List className="list-group" size="small">
+      {errors.map((error, index) => (
+        <List.Item key={index}>
+          <Space>
+            <IconCozWarningCircle />
+            {error.stack}
+          </Space>
+        </List.Item>
+      ))}
+    </List>
+  );
+
+  return (
+    <Banner
+      type="danger"
+      className="panel panel-danger errors"
+      title={translateString(TranslatableString.ErrorsLabel)}
+      description={renderErrors()}
+    />
+  );
+}

package/src/semi-schema-form/components/tmpls/field-error.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  type FieldErrorProps,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  errorId,
+} from '@rjsf/utils';
+import { Form } from '@coze-arch/coze-design';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId<T>(idSchema);
+
+  return (
+    <div id={id}>
+      {errors.map(error => (
+        <Form.ErrorMessage key={`field-${id}-error-${error}`} error={error} />
+      ))}
+    </div>
+  );
+}

package/src/semi-schema-form/components/tmpls/field.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  type FieldTemplateProps,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Form, Typography } from '@coze-arch/coze-design';
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    children,
+    description,
+    rawErrors,
+    hidden,
+    label,
+    rawDescription,
+    required,
+  } = props;
+
+  if (hidden) {
+    return <div className="field-hidden">{children}</div>;
+  }
+
+  // check to see if there is rawDescription(string) before using description(ReactNode)
+  // to prevent showing a blank description area
+  const descriptionNode = rawDescription ? description : undefined;
+
+  return (
+    <Form.Slot
+      label={{ text: label, required }}
+      className="mb-4"
+      error={{
+        error: rawErrors,
+        validateStatus: rawErrors?.length ? 'error' : undefined,
+      }}
+    >
+      {children}
+
+      <Typography.Paragraph className="text-xs w-full text-gray-500">
+        {descriptionNode}
+      </Typography.Paragraph>
+    </Form.Slot>
+  );
+}

package/src/semi-schema-form/components/tmpls/icon-button.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import {
+  type FormContextType,
+  type IconButtonProps,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  TranslatableString,
+} from '@rjsf/utils';
+import {
+  IconCozCopy,
+  IconCozLongArrowUp,
+  IconCozPlusCircle,
+  IconCozTrashCan,
+} from '@coze-arch/coze-design/icons';
+import {
+  IconButton,
+  type IconButtonProps as SemiIconBaseButtonProps,
+} from '@coze-arch/coze-design';
+
+// The `type` and `color` for IconButtonProps collides with props of `ButtonProps` so omit it to avoid Typescript issue
+export type BaseIconButtonProps<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+> = Omit<IconButtonProps<T, S, F>, 'type' | 'color'>;
+type IconButtonComponent = <
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(
+  props: BaseIconButtonProps<T, S, F>,
+) => JSX.Element;
+
+export default function BaseIconButton<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: BaseIconButtonProps<T, S, F> & SemiIconBaseButtonProps) {
+  const { iconType, icon, onClick, uiSchema, registry, style, ...otherProps } =
+    props;
+
+  return (
+    <IconButton onClick={onClick} icon={icon} {...otherProps} size="small" />
+  );
+}
+
+export const AddButton: IconButtonComponent = props => {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <BaseIconButton
+      title={translateString(TranslatableString.AddItemButton)}
+      {...props}
+      icon={<IconCozPlusCircle />}
+    />
+  );
+};
+
+export const CopyButton: IconButtonComponent = props => {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <BaseIconButton
+      title={translateString(TranslatableString.CopyButton)}
+      {...props}
+      icon={<IconCozCopy />}
+    />
+  );
+};
+
+export const MoveDownButton: IconButtonComponent = props => {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <BaseIconButton
+      title={translateString(TranslatableString.MoveDownButton)}
+      {...props}
+      icon={<IconCozLongArrowUp className="rotate-180" />}
+    />
+  );
+};
+
+export const MoveUpButton: IconButtonComponent = props => {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <BaseIconButton
+      title={translateString(TranslatableString.MoveUpButton)}
+      {...props}
+      icon={<IconCozLongArrowUp />}
+    />
+  );
+};
+
+export const RemoveButton: IconButtonComponent = props => {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <BaseIconButton
+      title={translateString(TranslatableString.RemoveButton)}
+      {...props}
+      type="danger"
+      icon={<IconCozTrashCan />}
+    />
+  );
+};

package/src/semi-schema-form/components/tmpls/index.ts

@@ -0,0 +1,39 @@
+import { type TemplatesType } from '@rjsf/utils';
+
+import TitleFieldTemplate from './title-field';
+import SubmitButton from './submit';
+import ObjectFieldTemplate from './object-field';
+import {
+  AddButton,
+  CopyButton,
+  MoveDownButton,
+  MoveUpButton,
+  RemoveButton,
+} from './icon-button';
+import FieldErrorTemplate from './field-error';
+import FieldTemplate from './field';
+import ErrorListTemplate from './error-list';
+import DescriptionFieldTemplate from './description-field';
+import BaseInputTemplate from './base-input';
+import ArrayFieldItemTemplate from './array-field-item';
+import ArrayFieldTemplate from './array-field';
+
+export const templates: Partial<TemplatesType> = {
+  ArrayFieldTemplate,
+  ArrayFieldItemTemplate,
+  BaseInputTemplate,
+  FieldTemplate,
+  ObjectFieldTemplate,
+  ButtonTemplates: {
+    AddButton,
+    CopyButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton,
+    SubmitButton,
+  },
+  TitleFieldTemplate,
+  DescriptionFieldTemplate,
+  FieldErrorTemplate,
+  ErrorListTemplate,
+};

package/src/semi-schema-form/components/tmpls/object-field.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+
+import { isString, isObject, isNumber } from 'lodash-es';
+import {
+  type FormContextType,
+  type GenericObjectType,
+  type ObjectFieldTemplateProps,
+  type ObjectFieldTemplatePropertyType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type UiSchema,
+  canExpand,
+  // descriptionId,
+  // getTemplate,
+  getUiOptions,
+  // titleId,
+} from '@rjsf/utils';
+import { Col, Row, TextArea } from '@coze-arch/coze-design';
+
+// const DESCRIPTION_COL_STYLE = {
+//   paddingBottom: '8px',
+// };
+
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    // description,
+    disabled,
+    formContext,
+    formData,
+    idSchema,
+    onAddClick,
+    properties,
+    readonly,
+    // required,
+    registry,
+    schema,
+    // title,
+    uiSchema,
+  } = props;
+  // const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  // const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>(
+  //   'TitleFieldTemplate',
+  //   registry,
+  //   uiOptions,
+  // );
+  // const DescriptionFieldTemplate = getTemplate<
+  //   'DescriptionFieldTemplate',
+  //   T,
+  //   S,
+  //   F
+  // >('DescriptionFieldTemplate', registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  const { colSpan = 24, rowGutter = 24 } = formContext as GenericObjectType;
+
+  const findSchema = (element: ObjectFieldTemplatePropertyType): S =>
+    element.content.props.schema;
+
+  const findSchemaType = (element: ObjectFieldTemplatePropertyType) =>
+    findSchema(element).type;
+
+  const findUiSchema = (
+    element: ObjectFieldTemplatePropertyType,
+  ): UiSchema<T, S, F> | undefined => element.content.props.uiSchema;
+
+  const findUiSchemaField = (element: ObjectFieldTemplatePropertyType) =>
+    getUiOptions(findUiSchema(element)).field;
+
+  const findUiSchemaWidget = (element: ObjectFieldTemplatePropertyType) =>
+    getUiOptions(findUiSchema(element)).widget;
+
+  const calculateColSpan = (element: ObjectFieldTemplatePropertyType) => {
+    const type = findSchemaType(element);
+    const field = findUiSchemaField(element);
+    const widget = findUiSchemaWidget(element);
+
+    const defaultColSpan =
+      properties.length < 2 || // Single or no field in object.
+      type === 'object' ||
+      type === 'array' ||
+      widget === 'textarea'
+        ? 24
+        : 12;
+
+    if (isObject(colSpan)) {
+      const colSpanObj: GenericObjectType = colSpan;
+      if (isString(widget)) {
+        return colSpanObj[widget as string];
+      }
+      if (isString(field)) {
+        return colSpanObj[field as string];
+      }
+      if (isString(type)) {
+        return colSpanObj[type as string];
+      }
+    }
+    if (isNumber(colSpan)) {
+      return colSpan;
+    }
+    return defaultColSpan;
+  };
+
+  if (!props.properties.length) {
+    return <TextArea id={idSchema.$id} />;
+  }
+  return (
+    <fieldset
+      id={idSchema.$id}
+      className={'p-3 semi-card-bordered rounded-[4px]'}
+    >
+      <Row gutter={rowGutter}>
+        {/* {title ? (
+          <Col span={24}>
+            <TitleFieldTemplate
+              id={titleId<T>(idSchema)}
+              title={title}
+              required={required}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        ) : null}
+        {description ? (
+          <Col span={24} style={DESCRIPTION_COL_STYLE}>
+            <DescriptionFieldTemplate
+              id={descriptionId<T>(idSchema)}
+              description={description}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        ) : null} */}
+        {properties
+          .filter(e => !e.hidden)
+          .map((element: ObjectFieldTemplatePropertyType) => (
+            <Col key={element.name} span={calculateColSpan(element)}>
+              {element.content}
+            </Col>
+          ))}
+      </Row>
+
+      {canExpand(schema, uiSchema, formData) && (
+        <Col span={24}>
+          <Row gutter={rowGutter} justify="end">
+            <Col span={6}>
+              <AddButton
+                className="object-property-expand"
+                disabled={disabled || readonly}
+                onClick={onAddClick(schema)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </Col>
+          </Row>
+        </Col>
+      )}
+    </fieldset>
+  );
+}

package/src/semi-schema-form/components/tmpls/submit.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  getSubmitButtonOptions,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type SubmitButtonProps,
+} from '@rjsf/utils';
+import { Button } from '@coze-arch/coze-design';
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps,
+  } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <Button type="primary" {...submitButtonProps} htmlType="submit">
+      {submitText}
+    </Button>
+  );
+}

package/src/semi-schema-form/components/tmpls/title-field.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  type FormContextType,
+  type TitleFieldProps,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  getUiOptions,
+} from '@rjsf/utils';
+import { Typography } from '@coze-arch/coze-design';
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({ id, uiSchema, title }: TitleFieldProps<T, S, F>) {
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+
+  return (
+    <div id={id} className="my-1">
+      <Typography.Title heading={5}>
+        {uiOptions.title || title}
+      </Typography.Title>
+      <hr className="border-0 bg-secondary" style={{ height: '1px' }} />
+    </div>
+  );
+}