@cozeloop/components 0.0.1 → 0.0.3

package/src/semi-schema-form/components/widgets/checkbox.tsx

@@ -0,0 +1,67 @@
+import React, { type FocusEvent } from 'react';
+
+import {
+  ariaDescribedByIds,
+  // labelValue,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type WidgetProps,
+  type GenericObjectType,
+} from '@rjsf/utils';
+import { Checkbox, type CheckboxProps } from '@coze-arch/coze-design';
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    autofocus,
+    disabled,
+    formContext,
+    id,
+    // label,
+    // hideLabel,
+    onBlur,
+    onChange,
+    onFocus,
+    readonly,
+    value,
+  } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleChange: CheckboxProps['onChange'] = ({ target }) =>
+    onChange(target.checked);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, target && target.checked);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, target && target.checked);
+
+  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+  const extraProps = {
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+  return (
+    <Checkbox
+      autoFocus={autofocus}
+      checked={typeof value === 'undefined' ? false : value}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      onChange={!readonly ? handleChange : undefined}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {/* {labelValue(label, hideLabel, '')} */}
+    </Checkbox>
+  );
+}

package/src/semi-schema-form/components/widgets/checkboxs.tsx

@@ -0,0 +1,100 @@
+import React, { type FocusEvent } from 'react';
+
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  optionId,
+  type FormContextType,
+  type WidgetProps,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type GenericObjectType,
+} from '@rjsf/utils';
+import { Checkbox, type CheckboxGroupProps } from '@coze-arch/coze-design';
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxesWidget<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({
+  autofocus,
+  disabled,
+  formContext,
+  id,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+
+  const handleChange: CheckboxGroupProps['onChange'] = nextValue =>
+    onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(
+      id,
+      enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue),
+    );
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(
+      id,
+      enumOptionsValueForIndex<S>(target.value, enumOptions, emptyValue),
+    );
+
+  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+  const extraProps = {
+    id,
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(
+    value,
+    enumOptions,
+    true,
+  ) as string[];
+
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? (
+    <>
+      <Checkbox.Group
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        name={id}
+        onChange={!readonly ? handleChange : undefined}
+        value={selectedIndexes}
+        {...extraProps}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        {Array.isArray(enumOptions) &&
+          enumOptions.map((option, i) => (
+            <span key={i}>
+              <Checkbox
+                id={optionId(id, i)}
+                autoFocus={i === 0 ? autofocus : false}
+                disabled={
+                  Array.isArray(enumDisabled) &&
+                  enumDisabled.indexOf(option.value) !== -1
+                }
+                value={String(i)}
+              >
+                {option.label}
+              </Checkbox>
+              {!inline && <br />}
+            </span>
+          ))}
+      </Checkbox.Group>
+    </>
+  ) : null;
+}

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

@@ -0,0 +1,17 @@
+import { type RegistryWidgetsType } from '@rjsf/utils';
+
+import TextAreaWidget from './textarea';
+import SelectWidget from './select';
+import RangeWidget from './range';
+import RadioWidget from './radio';
+import CheckboxesWidget from './checkboxs';
+import CheckboxWidget from './checkbox';
+
+export const widgets: RegistryWidgetsType = {
+  TextAreaWidget,
+  SelectWidget,
+  CheckboxWidget,
+  CheckboxesWidget,
+  RadioWidget,
+  RangeWidget,
+};

package/src/semi-schema-form/components/widgets/radio.tsx

@@ -0,0 +1,105 @@
+import React, { type FocusEvent } from 'react';
+
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  type FormContextType,
+  type GenericObjectType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type WidgetProps,
+} from '@rjsf/utils';
+import { Radio, type RadioGroupProps } from '@coze-arch/coze-design';
+
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RadioWidget<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({
+  autofocus,
+  disabled,
+  formContext,
+  id,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { enumOptions, enumDisabled, emptyValue } = options;
+
+  const handleChange: RadioGroupProps['onChange'] = ({
+    target: { value: nextValue },
+  }) =>
+    onChange(enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue));
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(
+      id,
+      enumOptionsValueForIndex<S>(
+        target && target.value,
+        enumOptions,
+        emptyValue,
+      ),
+    );
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(
+      id,
+      enumOptionsValueForIndex<S>(
+        target && target.value,
+        enumOptions,
+        emptyValue,
+      ),
+    );
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(
+    value,
+    enumOptions,
+  ) as string;
+
+  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+  const extraProps = {
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+
+  return (
+    <Radio.Group
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onChange={!readonly ? handleChange : undefined}
+      {...extraProps}
+      value={selectedIndexes}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, i) => (
+          <Radio
+            name={id}
+            autoFocus={i === 0 ? autofocus : false}
+            disabled={
+              disabled ||
+              (Array.isArray(enumDisabled) &&
+                enumDisabled.indexOf(option.value) !== -1)
+            }
+            key={i}
+            value={String(i)}
+          >
+            {option.label}
+          </Radio>
+        ))}
+    </Radio.Group>
+  );
+}

package/src/semi-schema-form/components/widgets/range.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+  ariaDescribedByIds,
+  rangeSpec,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type WidgetProps,
+  type GenericObjectType,
+} from '@rjsf/utils';
+import { Slider, type SliderProps } from '@coze-arch/coze-design';
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    autofocus,
+    disabled,
+    formContext,
+    id,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    placeholder,
+    readonly,
+    schema,
+    value,
+  } = props;
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { min, max, step } = rangeSpec(schema);
+
+  const emptyValue = options.emptyValue || '';
+
+  const handleChange: SliderProps['onChange'] = nextValue =>
+    onChange(typeof nextValue === 'undefined' ? emptyValue : nextValue);
+
+  const handleBlur = () => onBlur(id, value);
+
+  const handleFocus = () => onFocus(id, value);
+
+  // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+  // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+  const extraProps = {
+    placeholder,
+    onBlur: !readonly ? handleBlur : undefined,
+    onFocus: !readonly ? handleFocus : undefined,
+  };
+
+  return (
+    <Slider
+      autoFocus={autofocus}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      max={max}
+      min={min}
+      onChange={!readonly ? handleChange : undefined}
+      range={false}
+      step={step}
+      value={value}
+      {...extraProps}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/semi-schema-form/components/widgets/select.tsx

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+
+import {
+  ariaDescribedByIds,
+  enumOptionsIndexForValue,
+  enumOptionsValueForIndex,
+  type FormContextType,
+  type GenericObjectType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type WidgetProps,
+} from '@rjsf/utils';
+import {
+  type SelectProps,
+  type OptionProps,
+  Select,
+} from '@coze-arch/coze-design';
+
+const SELECT_STYLE = {
+  width: '100%',
+};
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function SelectWidget<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({
+  autofocus,
+  disabled,
+  formContext = {} as unknown as F,
+  id,
+  multiple,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  placeholder,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const { enumOptions, enumDisabled, emptyValue } = options;
+
+  const handleChange: SelectProps['onChange'] = nextValue => {
+    if (typeof nextValue === 'object' && !Array.isArray(nextValue)) {
+      throw new Error('Object type value is not supported');
+    } else {
+      onChange(
+        typeof nextValue === 'undefined'
+          ? undefined
+          : enumOptionsValueForIndex<S>(nextValue, enumOptions, emptyValue),
+      );
+    }
+  };
+
+  const handleBlur = () =>
+    onBlur(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  const handleFocus = () =>
+    onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+
+  const selectedIndexes = enumOptionsIndexForValue<S>(
+    value,
+    enumOptions,
+    multiple,
+  );
+
+  const selectOptions: OptionProps[] | undefined = useMemo(() => {
+    if (Array.isArray(enumOptions)) {
+      const opts: OptionProps[] = enumOptions.map(
+        ({ value: optionValue, label: optionLabel }, index) => ({
+          disabled:
+            Array.isArray(enumDisabled) &&
+            enumDisabled.indexOf(optionValue) !== -1,
+          key: String(index),
+          value: String(index),
+          label: optionLabel,
+        }),
+      );
+
+      return opts;
+    }
+    return undefined;
+  }, [enumDisabled, enumOptions]);
+
+  return (
+    <Select
+      autoFocus={autofocus}
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      multiple={multiple}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      style={SELECT_STYLE}
+      value={selectedIndexes}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+      optionList={selectOptions}
+    />
+  );
+}

package/src/semi-schema-form/components/widgets/textarea.tsx

@@ -0,0 +1,63 @@
+import React, { type FocusEvent } from 'react';
+
+import {
+  ariaDescribedByIds,
+  type FormContextType,
+  type GenericObjectType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+  type WidgetProps,
+} from '@rjsf/utils';
+import { TextArea, type TextAreaProps } from '@coze-arch/coze-design';
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>({
+  disabled,
+  formContext,
+  id,
+  onBlur,
+  onChange,
+  onFocus,
+  options,
+  placeholder,
+  readonly,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleChange: TextAreaProps['onChange'] = nextValue =>
+    onChange(nextValue === '' ? options.emptyValue : nextValue);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLTextAreaElement>) =>
+    onBlur(id, target && target.value);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLTextAreaElement>) =>
+    onFocus(id, target && target.value);
+
+  return (
+    <TextArea
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      rows={options.rows || 4}
+      style={INPUT_STYLE}
+      value={value}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    />
+  );
+}

package/src/semi-schema-form/index.tsx

@@ -0,0 +1,14 @@
+import type Form from '@rjsf/core';
+import { withTheme } from '@rjsf/core';
+
+export { default as schemaValidators } from '@rjsf/validator-ajv8';
+
+import { widgets } from './components/widgets';
+import { templates } from './components/tmpls';
+
+export const SemiSchemaForm = withTheme({
+  widgets,
+  templates,
+});
+
+export type SemiSchemaFormInstance = Form;

package/src/sentinel-form/enum.ts

@@ -0,0 +1,16 @@
+export enum EventNames {
+  // 进入相关
+  INIT_LOOP_FORM = 'init_loop_form',
+  // 保点击保存，表单报错
+  LOOP_FORM_FIELD_VALIDATE_ERROR = 'loop_form_field_validate_error', // 表单项报错次数
+
+  // 点击保存，接口报错
+  LOOP_FORM_SUBMIT_INTERFACE_ERROR = 'loop_form_submit_interface_error', // 提交接口报错次数
+
+  // 点击保存，成功
+  LOOP_FORM_SUBMIT_SUCCESS = 'loop_form_submit_success', // 提交成功
+
+  // 离开表单
+  LOOP_FORM_FIELD_CHANGE_TIMELINE = 'loop_form_field_change_timeline', // 表单项变更时间轴
+  LOOP_FORM_CLOSE = 'loop_form_close', // 离开表单
+}