@cozeloop/components 0.0.3 → 0.0.4

package/src/provider/index.tsx

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

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

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

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

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

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

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

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

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