@cozeloop/components 0.0.2 → 0.0.3

package/src/provider/index.tsx

@@ -0,0 +1,89 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+// I18n function type definition
+export type I18nFunction = (
+  key: string,
+  options?: Record<string, unknown>,
+  fallbackText?: string,
+) => string;
+
+// I18n object interface that matches the structure of @cozeloop/i18n-adapter
+export interface I18nObject {
+  t: I18nFunction;
+  language?: string; // en-US,zh-CN
+}
+
+// Context interface
+interface CozeLoopContextValue {
+  i18n?: I18nFunction | I18nObject;
+  sendEvent?: (
+    name: string,
+    params: Record<string, unknown>,
+    target?: HTMLElement | string | null,
+  ) => void;
+}
+
+// Create context
+const CozeLoopContext = createContext<CozeLoopContextValue>({});
+
+// Provider props
+interface CozeLoopProviderProps extends CozeLoopContextValue {
+  children: ReactNode;
+}
+
+// Provider component
+export function CozeLoopProvider({
+  children,
+  i18n,
+  sendEvent,
+}: CozeLoopProviderProps) {
+  return (
+    <CozeLoopContext.Provider value={{ i18n, sendEvent }}>
+      {children}
+    </CozeLoopContext.Provider>
+  );
+}
+
+// Hook to use i18n - returns an object with t method to maintain I18n.t usage pattern
+export function useI18n(): I18nObject {
+  const context = useContext(CozeLoopContext);
+
+  if (!context.i18n) {
+    // Fallback object when no i18n is provided
+    return {
+      t: (key: string) => {
+        console.warn(
+          `CozeLoopProvider: No i18n function provided, returning key: ${key}`,
+        );
+        return key;
+      },
+      language: 'zh-CN',
+    };
+  }
+
+  // If context.i18n is already an object with t method, return it directly
+  if (typeof context.i18n === 'object' && 't' in context.i18n) {
+    return context.i18n;
+  }
+
+  // If context.i18n is a function, wrap it in an object
+  return {
+    t: context.i18n,
+  };
+}
+
+// Hook to use sendEvent - return sendEvent function
+export function useReportEvent() {
+  const context = useContext(CozeLoopContext);
+  return (
+    context.sendEvent ??
+    ((name: string, params: Record<string, unknown>) => {
+      console.info(name, params);
+    })
+  );
+}
+
+// Hook to get the full context (for advanced usage)
+export function useCozeLoopContext(): CozeLoopContextValue {
+  return useContext(CozeLoopContext);
+}

package/src/resizable-side-sheet/index.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+import { useMouseDownOffset } from '@cozeloop/hooks';
+import { type SideSheetReactProps, SideSheet } from '@coze-arch/coze-design';
+
+interface ResizableSideSheetProps extends SideSheetReactProps {
+  minSize?: number;
+  maxSize?: number;
+  defaultSize?: number;
+  onResizeEnd?: (size: number) => void;
+}
+
+const SIZE_MAP = {
+  small: 448,
+  medium: 684,
+  large: 920,
+};
+/** 仅支持 left 模式 */
+export const ResizableSideSheet = (props: ResizableSideSheetProps) => {
+  const {
+    minSize = Number.MIN_VALUE,
+    defaultSize,
+    maxSize = Number.MAX_VALUE,
+    size = 'small',
+    onResizeEnd,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  const [sidePaneWidth, setSidePaneWidth] = useState(
+    defaultSize ?? SIZE_MAP[size],
+  );
+  const prevWidthRef = useRef(sidePaneWidth);
+
+  const { ref, isActive } = useMouseDownOffset(({ offsetX }) => {
+    const newWidth = prevWidthRef.current - offsetX;
+    setSidePaneWidth([maxSize, newWidth, minSize].sort((a, b) => a - b)[1]);
+  });
+
+  useEffect(() => {
+    prevWidthRef.current = sidePaneWidth;
+    document.body.style.cursor = isActive ? 'col-resize' : '';
+    document.body.style.userSelect = isActive ? 'none' : 'auto';
+    if (!isActive) {
+      onResizeEnd?.(sidePaneWidth);
+    }
+  }, [isActive]);
+  return (
+    <SideSheet
+      className={classNames('relative', className)}
+      size={size}
+      width={sidePaneWidth}
+      {...restProps}
+    >
+      <div
+        ref={ref}
+        className={classNames(
+          'absolute h-full w-1 bg-white top-0 left-0 hover:cursor-col-resize hover:bg-blue-400 transition',
+          {
+            'bg-blue-400 cursor-col-resize': isActive,
+          },
+        )}
+      />
+      {children}
+    </SideSheet>
+  );
+};

package/src/resize-sidesheet/index.module.less

@@ -0,0 +1,14 @@
+.sheet{
+  :global{
+    .semi-sidesheet-header {
+      display: flex;
+      align-items: flex-start;
+      padding: 18px 24px;
+      border-bottom: 1px solid var(--semi-color-border);
+    }
+
+    .semi-sidesheet-footer{
+      border-top: 1px solid var(--semi-color-border);
+    }
+  }
+}

package/src/resize-sidesheet/index.tsx

@@ -0,0 +1,68 @@
+import cn from 'classnames';
+import { IconCozCrossFill } from '@coze-arch/coze-design/icons';
+import {
+  type SideSheetReactProps,
+  Divider,
+  SideSheet,
+} from '@coze-arch/coze-design';
+import { Button } from '@coze-arch/coze-design';
+
+import { useDrag, type DragOptions } from './use-drag';
+
+import styles from './index.module.less';
+
+export const ResizeSidesheet = (
+  props: SideSheetReactProps & {
+    dragOptions?: DragOptions;
+    showDivider?: boolean;
+    disableDrag?: boolean;
+  },
+) => {
+  const {
+    children,
+    dragOptions,
+    title,
+    onCancel,
+    className,
+    showDivider,
+    disableDrag,
+    ...rest
+  } = props;
+  const { containerRef, isActive, sidePaneWidth } = useDrag(dragOptions);
+  return (
+    <SideSheet
+      title={
+        <div className="flex items-center gap-2">
+          <div className="flex-1">{title}</div>
+          {showDivider ? (
+            <Divider layout="vertical" className="h-[12px]" />
+          ) : null}
+          <Button
+            type="primary"
+            color="secondary"
+            icon={<IconCozCrossFill className="w-[16px] h-[16px]" />}
+            onClick={onCancel}
+          />
+        </div>
+      }
+      width={disableDrag ? undefined : sidePaneWidth}
+      className={cn(styles.sheet, className)}
+      {...rest}
+      onCancel={onCancel}
+      closable={false}
+    >
+      {disableDrag ? null : (
+        <div
+          ref={containerRef}
+          className={cn(
+            'absolute h-full w-[2px] z-[20000] bg-transparent  top-0 left-0 hover:cursor-col-resize hover:bg-[rgb(var(--coze-up-brand-9))] transition ',
+            {
+              'bg-[rgb(var(--coze-up-brand-9))] cursor-col-resize': isActive,
+            },
+          )}
+        />
+      )}
+      {props.children}
+    </SideSheet>
+  );
+};

package/src/resize-sidesheet/use-drag.ts

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useMouseDownOffset } from '../hooks/use-mouse-down-offset';
+
+const DEFAULT_WIDTH = 500;
+const MAX_WIDTH = 800;
+const MIN_WIDTH = 300;
+
+export interface DragOptions {
+  defaultWidth?: number;
+  maxWidth?: number;
+  minWidth?: number;
+  onDragEnd?: (width: number) => void;
+}
+
+export const useDrag = (options: DragOptions = {}) => {
+  const {
+    defaultWidth = DEFAULT_WIDTH,
+    maxWidth = MAX_WIDTH,
+    minWidth = MIN_WIDTH,
+  } = options;
+  const [sidePaneWidth, setSidePaneWidth] = useState(defaultWidth);
+  const prevWidthRef = useRef(sidePaneWidth);
+  const isActiveRef = useRef(false);
+  const { ref, isActive } = useMouseDownOffset(({ offsetX }) => {
+    const newWidth = prevWidthRef.current - offsetX;
+    setSidePaneWidth([maxWidth, newWidth, minWidth].sort((a, b) => a - b)[1]);
+  });
+  useEffect(() => {
+    prevWidthRef.current = sidePaneWidth;
+    document.body.style.cursor = isActive ? 'col-resize' : '';
+    document.body.style.userSelect = isActive ? 'none' : 'auto';
+    if (isActiveRef.current && !isActive) {
+      options?.onDragEnd?.(sidePaneWidth);
+    }
+    isActiveRef.current = isActive;
+  }, [isActive]);
+  return {
+    sidePaneWidth,
+    containerRef: ref,
+    isActive,
+  };
+};

package/src/schema-editor/index.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+
+import {
+  CodeMirrorJsonEditor,
+  CodeMirrorRawTextEditor,
+} from '../codemirror-editor';
+
+interface SchemaEditorProps {
+  value?: string;
+  readOnly?: boolean;
+  onChange?: (value?: string) => void;
+  language?: string;
+  placeholder?: string;
+  showLineNumbs?: boolean;
+  className?: string;
+}
+
+export const SchemaEditor = ({
+  value,
+  onChange,
+  placeholder,
+  readOnly,
+  language,
+  className,
+}: SchemaEditorProps) => (
+  <div
+    className={classNames(
+      'w-full h-[500px] border border-solid coz-stroke-primary rounded-[4px] overflow-hidden relative bg-white',
+      { 'opacity-70': readOnly },
+      className,
+    )}
+  >
+    {language === 'json' ? (
+      <CodeMirrorJsonEditor
+        className="w-full h-full overflow-y-auto"
+        onChange={onChange}
+        value={value || ''}
+        placeholder={placeholder}
+        readonly={readOnly}
+        borderRadius={4}
+      />
+    ) : (
+      <CodeMirrorRawTextEditor
+        className="w-full h-full overflow-y-auto"
+        onChange={onChange}
+        value={value || ''}
+        placeholder={placeholder}
+        readonly={readOnly}
+      />
+    )}
+  </div>
+);

package/src/search-form/index.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable security/detect-object-injection */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useSearchParams } from 'react-router-dom';
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+import { omit } from 'lodash-es';
+import { type Form } from '@coze-arch/coze-design';
+
+import { safeJsonParse } from '@cozeloop/toolkit';
+
+export type SearchFormFilterRecord = Record<string, any>;
+
+export interface SearchFormRef {
+  getValues: () => SearchFormFilterRecord | undefined;
+}
+
+interface SearchFormProps {
+  className?: string;
+  children: any;
+  SemiForm: typeof Form;
+  onSearch?: (v: SearchFormFilterRecord) => Promise<any>;
+  initValue?: SearchFormFilterRecord;
+}
+
+/**
+ * 如果对象的value为对象，将 value 转换为字符串
+ * @param value
+ * @returns
+ */
+const stringifyObjectValue = (value: Record<string, any>) =>
+  Object.keys(value).reduce(
+    (acc, key) => {
+      const val = value[key];
+      if (typeof val === 'object') {
+        acc[key] = JSON.stringify(val);
+      } else {
+        acc[key] = val;
+      }
+      return acc;
+    },
+    {} as unknown as Record<string, string>,
+  );
+
+const parseObjectValue = (data: Record<string, string>) =>
+  Object.keys(data).reduce(
+    (acc, key) => {
+      const value = data[key];
+      if (value.startsWith('{') || value.startsWith('[')) {
+        acc[key] = safeJsonParse(value) || value;
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as unknown as Record<string, any>,
+  );
+
+export const SearchForm = forwardRef<SearchFormRef, SearchFormProps>(
+  ({ className, children, onSearch, SemiForm, initValue = {} }, ref) => {
+    const formRef = useRef<Form<SearchFormFilterRecord>>(null);
+
+    const [initValueAndParams] = useState(() => {
+      const params = new URLSearchParams(window.location.search);
+
+      const initParams: Record<string, string> = {};
+      params.forEach((value, key) => {
+        initParams[key] = value;
+      });
+
+      const urlValues = parseObjectValue(initParams);
+      const defaultValue = { ...initValue, ...urlValues };
+      const defaultSearchParams = new URLSearchParams(
+        stringifyObjectValue(defaultValue),
+      );
+      const filterValue = omit(defaultValue, ['page', 'pageSize']);
+      if (Object.keys(filterValue).length !== 0) {
+        onSearch?.(filterValue);
+      }
+      return {
+        defaultValue: filterValue,
+        defaultSearchParams,
+      };
+    });
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const formValueChange = useCallback(
+      (allValues: SearchFormFilterRecord) => {
+        const searchResult = onSearch?.(allValues);
+        searchResult?.then(() => {
+          setSearchParams(
+            prev => {
+              const v = stringifyObjectValue(allValues || {});
+              prev.forEach((_value, key) => {
+                if (!['page', 'pageSize', 'tab'].includes(key)) {
+                  prev.delete(key);
+                }
+              });
+              Object.keys(v).forEach(key => {
+                prev.set(key, v[key]);
+              });
+              return prev;
+            },
+            { replace: true },
+          );
+        });
+      },
+      [searchParams],
+    );
+
+    useImperativeHandle(ref, () => ({
+      getValues: () => formRef.current?.formApi?.getValues?.(),
+    }));
+
+    type ChangeValue = typeof initValueAndParams.defaultValue;
+    return children ? (
+      <SemiForm<ChangeValue>
+        ref={formRef}
+        initValues={initValueAndParams.defaultValue}
+        onValueChange={formValueChange}
+        layout="horizontal"
+        className={className}
+      >
+        {children}
+      </SemiForm>
+    ) : null;
+  },
+);

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

@@ -0,0 +1,97 @@
+/* eslint-disable complexity */
+
+import React from 'react';
+import {
+  type ArrayFieldTemplateItemType,
+  type FormContextType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+} from '@rjsf/utils';
+import { ButtonGroup, Col, Row } from '@coze-arch/coze-design';
+
+const BTN_GRP_STYLE = {
+  width: '100%',
+};
+
+const BTN_STYLE = {
+  width: 'calc(100% / 4)',
+};
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    hasToolbar,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } =
+    registry.templates.ButtonTemplates;
+  const { rowGutter = 24, toolbarAlign = 'top' } = registry.formContext;
+
+  return (
+    <Row align={toolbarAlign} key={`array-item-${index}`} gutter={rowGutter}>
+      <Col span={18}>{children}</Col>
+
+      {hasToolbar ? (
+        <Col span={6}>
+          <ButtonGroup style={BTN_GRP_STYLE}>
+            {hasMoveUp || hasMoveDown ? (
+              <MoveUpButton
+                disabled={disabled || readonly || !hasMoveUp}
+                onClick={onReorderClick(index, index - 1)}
+                style={BTN_STYLE}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            ) : null}
+            {hasMoveUp || hasMoveDown ? (
+              <MoveDownButton
+                disabled={disabled || readonly || !hasMoveDown}
+                onClick={onReorderClick(index, index + 1)}
+                style={BTN_STYLE}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            ) : null}
+            {hasCopy ? (
+              <CopyButton
+                disabled={disabled || readonly}
+                onClick={onCopyIndexClick(index)}
+                style={BTN_STYLE}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            ) : null}
+            {hasRemove ? (
+              <RemoveButton
+                disabled={disabled || readonly}
+                onClick={onDropIndexClick(index)}
+                style={BTN_STYLE}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            ) : null}
+          </ButtonGroup>
+        </Col>
+      ) : null}
+    </Row>
+  );
+}

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

@@ -0,0 +1,127 @@
+import React from 'react';
+import cn from 'classnames';
+import {
+  getTemplate,
+  getUiOptions,
+  type ArrayFieldTemplateProps,
+  type ArrayFieldTemplateItemType,
+  type FormContextType,
+  type GenericObjectType,
+  type RJSFSchema,
+  type StrictRJSFSchema,
+} from '@rjsf/utils';
+import { Col, Row } from '@coze-arch/coze-design';
+
+// const DESCRIPTION_COL_STYLE = {
+//   paddingBottom: '8px',
+// };
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = unknown,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = object,
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    formContext,
+    idSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    // required,
+    // schema,
+    // title,
+    uiSchema,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  // const ArrayFieldDescriptionTemplate = getTemplate<
+  //   'ArrayFieldDescriptionTemplate',
+  //   T,
+  //   S,
+  //   F
+  // >('ArrayFieldDescriptionTemplate', registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions,
+  );
+  // const ArrayFieldTitleTemplate = getTemplate<
+  //   'ArrayFieldTitleTemplate',
+  //   T,
+  //   S,
+  //   F
+  // >('ArrayFieldTitleTemplate', registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  const { rowGutter = 24 } = formContext as GenericObjectType;
+
+  return (
+    <div
+      className={cn('p-3 semi-card-bordered rounded-[4px]', className)}
+      id={idSchema.$id}
+    >
+      <Row gutter={rowGutter}>
+        {/* {uiOptions.title || title ? (
+          <Col span={24}>
+            <ArrayFieldTitleTemplate
+              idSchema={idSchema}
+              required={required}
+              title={uiOptions.title || title}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        ) : null} */}
+        {/* {uiOptions.description || schema.description ? (
+          <Col span={24} style={DESCRIPTION_COL_STYLE}>
+            <ArrayFieldDescriptionTemplate
+              description={uiOptions.description || schema.description}
+              idSchema={idSchema}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        ) : null} */}
+        <Col className="row array-item-list" span={24}>
+          {items
+            ? items.map(
+                ({
+                  key,
+                  ...itemProps
+                }: ArrayFieldTemplateItemType<T, S, F>) => (
+                  <ArrayFieldItemTemplate key={key} {...itemProps} />
+                ),
+              )
+            : null}
+        </Col>
+
+        {canAdd ? (
+          <Col span={24}>
+            <Row gutter={rowGutter} justify="end">
+              <Col span={6}>
+                <AddButton
+                  className="array-item-add"
+                  disabled={disabled || readonly}
+                  onClick={onAddClick}
+                  uiSchema={uiSchema}
+                  registry={registry}
+                />
+              </Col>
+            </Row>
+          </Col>
+        ) : null}
+      </Row>
+    </div>
+  );
+}