@cozeloop/components 0.0.3 → 0.0.4

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

@@ -1,126 +0,0 @@
-/* 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

@@ -1,23 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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>
-  );
-}