@cozeloop/components 0.0.2 → 0.0.3

package/src/base-search-select/base-search-select.tsx

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { isNull, isUndefined } from 'lodash-es';
+import classNames from 'classnames';
+import { useRequest } from 'ahooks';
+import { IconCozRefresh } from '@coze-arch/coze-design/icons';
+import {
+  type RenderSelectedItemFn,
+  Select,
+  type OptionProps,
+  Tooltip,
+  Button,
+} from '@coze-arch/coze-design';
+
+import { getOptionsNotInList, transformValueToArray } from './utils';
+import { type BaseSelectProps } from './types';
+
+import styles from './index.module.less';
+
+/**
+ * 基础选择器组件
+ * 解决两个主要问题：
+ * 1. 初始选中值不在第一页数据中导致只显示ID
+ * 2. 搜索后选中值不在结果中导致只显示ID
+ */
+// eslint-disable-next-line @coze-arch/max-line-per-function
+const BaseSearchSelect = (props: BaseSelectProps) => {
+  const {
+    optionList: _optionList,
+    loadOptionByIds,
+    value,
+    defaultValue,
+    onSearch,
+    renderSelectedItem,
+    onChangeWithObject,
+    onDropdownVisibleChange,
+    showRefreshBtn,
+    onClickRefresh,
+    disabledCacheOptions,
+  } = props;
+
+  // 是否在搜索中
+  const [searchWord, setSearchWord] = useState('');
+  const [refreshFlag, setRefreshFlag] = useState([]);
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const optionMapRef = useRef<Record<string, OptionProps>>({});
+
+  const optionList = useMemo(() => _optionList || [], [_optionList]);
+
+  const isOptionListNotExists = useMemo(() => !_optionList, [_optionList]);
+
+  useEffect(() => {
+    if (isOptionListNotExists) {
+      return;
+    }
+    // 每次 optionList 变化, 将 optionList 中的 option 添加到 optionMapRef 中缓存
+    (optionList || []).forEach(item => {
+      optionMapRef.current[item?.value as string] = item;
+    });
+  }, [optionList]);
+
+  // 初始化
+  useRequest(
+    async () => {
+      const initialValue = value || defaultValue;
+      // 1. 判断 list 有没有value, 有则不发请求
+      if (
+        isUndefined(initialValue) ||
+        isNull(initialValue) ||
+        initialValue === '' ||
+        !loadOptionByIds
+      ) {
+        return;
+      }
+
+      // 2. 判断 optionList 中有没有 value 中不存在的 选项, 有则不发请求
+      const optionsNotInList = getOptionsNotInList({
+        value: initialValue,
+        optionList,
+        onChangeWithObject,
+      });
+
+      if (optionsNotInList.length === 0) {
+        return;
+      }
+
+      try {
+        const payload = transformValueToArray(value, onChangeWithObject);
+        const fetchOptions = await loadOptionByIds(payload);
+        if (fetchOptions) {
+          setRefreshFlag([]);
+          optionMapRef.current = {
+            ...optionMapRef.current,
+            ...fetchOptions.reduce((acc, item) => {
+              acc[item?.value as string] = item;
+              return acc;
+            }, {}),
+          };
+        }
+      } catch (error) {
+        console.error('Failed to load selected option:', error);
+      }
+    },
+    {
+      refreshDeps: [value],
+    },
+  );
+
+  /**
+   * 最后展示的选项
+   */
+  const cacheOptions = useMemo(() => {
+    // searchWord 表示处于搜索中, 不应该展示不在选项列表中的选项
+    if (!value || searchWord || disabledCacheOptions) {
+      return optionList;
+    }
+
+    const optionsNotInList = getOptionsNotInList({
+      value,
+      optionList,
+      onChangeWithObject,
+    });
+
+    // value 所有选项都在选项列表中, 直接返回
+    if (optionsNotInList.length === 0) {
+      return optionList;
+    }
+
+    // value 不在选项列表, 则对value进行处理, 前面已经处理为arr了
+    // 所以这里可以直接按arr 处理 返回缓存中的选项
+    const optionsInCache = optionsNotInList.map(k => optionMapRef.current[k]);
+    // 有可能存在远端数据被删除，id无法拉去到的情况
+    const newOptions = [...optionsInCache, ...optionList].filter(Boolean);
+    return newOptions;
+  }, [optionList, value, searchWord, refreshFlag]);
+
+  /**
+   * 选中项渲染, 如果list中没有, 从缓存中拿当前的选种值
+   */
+  const RenderSelectedItem = useCallback(
+    (optionNode: Record<string, unknown>, multipleProps?: any) => {
+      const renderOpt =
+        optionMapRef.current[optionNode?.value as string] || optionNode;
+
+      if (renderSelectedItem) {
+        return renderSelectedItem(renderOpt, multipleProps);
+      }
+      // 多选
+      if (multipleProps) {
+        return {
+          isRenderInTag: true,
+          content: renderOpt?.label || renderOpt?.value,
+        };
+      }
+      return renderOpt?.label || renderOpt?.value;
+    },
+    [renderSelectedItem],
+  );
+
+  return (
+    <Select
+      suffix={
+        showRefreshBtn && dropdownVisible ? (
+          <Tooltip theme="dark" content="刷新">
+            <div className="flex flex-row items-center">
+              <Button
+                className="!h-6 !w-6"
+                icon={<IconCozRefresh />}
+                size="small"
+                color="secondary"
+                onClick={() => onClickRefresh?.()}
+              />
+              <div className="h-3 w-0 border-0 border-l border-solid coz-stroke-primary ml-[2px]" />
+            </div>
+          </Tooltip>
+        ) : null
+      }
+      {...props}
+      onDropdownVisibleChange={visible => {
+        setDropdownVisible(visible);
+        onDropdownVisibleChange?.(visible);
+      }}
+      dropdownClassName={classNames(
+        styles['select-dropdown-style'],
+        props.dropdownClassName,
+      )}
+      optionList={isOptionListNotExists ? undefined : cacheOptions}
+      renderSelectedItem={RenderSelectedItem as RenderSelectedItemFn}
+      onSearch={(vs, e) => {
+        setSearchWord(vs);
+        if (onSearch) {
+          onSearch?.(vs, e);
+        }
+      }}
+    />
+  );
+};
+
+export default BaseSearchSelect;

package/src/base-search-select/index.module.less

@@ -0,0 +1,16 @@
+/* stylelint-disable selector-class-pattern */
+.select-dropdown-style {
+  :global {
+    .coz-select-option-item .option-text-wrapper {
+      padding-left: 8px;
+      .option-text {
+        padding-left: 0px;
+      }
+    }
+    .coz-select-option-item.disabled {
+      .option-text-wrapper {
+        color: rgba(var(--coze-fg-1), var(--coze-fg-1-alpha));
+      }
+    }
+  }
+}

package/src/base-search-select/index.tsx

@@ -0,0 +1,3 @@
+export { default as BaseSearchSelect } from './base-search-select';
+export { default as BaseSearchFormSelect } from './base-search-form-select';
+export { type BaseSelectProps, type LoadOptionByIds } from './types';

package/src/base-search-select/types.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type OptionProps, type SelectProps } from '@coze-arch/coze-design';
+
+export type LoadOptionByIds = (
+  ids: string[] | number[],
+) => Promise<(OptionProps & { [key: string]: any })[]>;
+
+export interface BaseSelectProps extends SelectProps {
+  /** 是否禁用缓存选项 */
+  disabledCacheOptions?: boolean;
+  loadOptionByIds?: LoadOptionByIds;
+  /** 是否显示刷新按钮 */
+  showRefreshBtn?: boolean;
+  /** 点击刷新按钮的回调 */
+  onClickRefresh?: () => void;
+}

package/src/base-search-select/utils.ts

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const transformValueToArray = (
+  value: any,
+  onChangeWithObject = false,
+): string[] | number[] => {
+  // 对象传入
+  if (onChangeWithObject) {
+    // 对象数组
+    if (Array.isArray(value)) {
+      return value.map(item => item?.value || '').filter(Boolean);
+    }
+    // 单个对象
+    return value?.value ? [value?.value] : [];
+  }
+  // 普通数组 或 字符串
+  return Array.isArray(value) ? value : [value];
+};
+
+// 过滤 value 中不在 optionlist 中的 option
+export const filterValueNotInOptionList = (
+  value: any,
+  optionSet: Set<string | number | undefined>,
+  onChangeWithObject = false,
+): Int64[] => {
+  if (onChangeWithObject) {
+    // 对象数组
+    if (Array.isArray(value)) {
+      return value
+        .filter(item => !optionSet.has(item?.value))
+        .map(it => it?.value);
+    }
+    // 单个对象
+    return optionSet.has(value?.value) ? [] : [value?.value];
+  }
+
+  if (Array.isArray(value)) {
+    return value.filter(item => !optionSet.has(item));
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return optionSet.has(value) ? [] : [value];
+  }
+
+  return [];
+};
+
+export const getOptionsNotInList = ({
+  value,
+  optionList,
+  onChangeWithObject = false,
+}: {
+  value: any;
+  optionList: any[];
+  onChangeWithObject?: boolean;
+}) => {
+  // 集合
+  const existingValues = new Set(optionList.map(item => item.value));
+
+  // 找到 value 里面不在选项列表中的选项
+  const optionsNotInList = filterValueNotInOptionList(
+    value,
+    existingValues,
+    onChangeWithObject,
+  );
+  return optionsNotInList;
+};
+
+export const initialValueChecker = (
+  value: any,
+  optionList: any[],
+  onChangeWithObject = false,
+) => {
+  if (typeof value === 'string') {
+    return true;
+  }
+
+  return value;
+};

package/src/basic-card/index.tsx

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+export interface CardProps {
+  title: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const BasicCard = ({ title, children, className }: CardProps) => (
+  <div
+    className={classNames(
+      'border border-solid coz-stroke-plus rounded-[6px] overflow-hidden',
+      className,
+    )}
+  >
+    <div className="text-sm font-medium px-4 h-[44px] flex items-center coze-fg-primary bg-[#F7F7FC]">
+      {title}
+    </div>
+    {children ? <div className="p-4 bg-white">{children}</div> : null}
+  </div>
+);

package/src/card-pane/index.module.less

@@ -0,0 +1,14 @@
+.container {
+  padding: 8px 16px;
+
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.shadow {
+  transition: box-shadow 0.3s;
+  &:hover {
+    box-shadow: var(--semi-shadow-elevated);
+    z-index: 1;
+  }
+}

package/src/card-pane/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import styles from './index.module.less';
+
+export interface CardPaneProps extends React.HTMLAttributes<HTMLDivElement> {
+  /* hover 的时候是否展示 shadow 样式 */
+  hoverShadow?: boolean;
+}
+
+export function CardPane({ hoverShadow, className, ...props }: CardPaneProps) {
+  return (
+    <div
+      className={classNames(
+        styles.container,
+        {
+          [styles.shadow]: hoverShadow,
+        },
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/chip-select/index.module.less

@@ -0,0 +1,17 @@
+/* stylelint-disable declaration-no-important */
+.select{
+  height: 24px !important;
+  min-height: 24px !important;
+
+  :global{
+    .semi-select-selection-text{
+      .coz-chip{
+         padding-right: 0;
+      }
+    }
+
+    .semi-select-arrow{
+      padding-left: 0 !important;
+    }
+  }
+}

package/src/chip-select/index.tsx

@@ -0,0 +1,7 @@
+import cls from 'classnames';
+import { Select, type SelectProps } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+export const ChipSelect = (props: SelectProps) => (
+  <Select {...props} className={cls(styles.select, props.className)} />
+);

package/src/code-editor/index.tsx

@@ -0,0 +1,9 @@
+/// <reference path="../types.d.ts" />
+export { default as CodeEditor, DiffEditor } from '@monaco-editor/react';
+export { type Monaco, type MonacoDiffEditor } from '@monaco-editor/react';
+export { type editor } from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
+
+loader.config({
+  paths: { vs: MONACO_UNPKG },
+});

package/src/code-usage/code-item.module.less

@@ -0,0 +1,32 @@
+.usage-detail {
+  position: relative;
+  padding-left: 16px;
+
+  padding-bottom: 16px;
+
+
+  &:not(:last-child) {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 6px;
+      top: 20px;
+      bottom: 4px;
+      border-left: 2px solid var(--semi-color-primary);
+    }
+  }
+
+
+  &::after {
+    content: '•';
+    position: absolute;
+    left: 0;
+    top: -2px;
+    margin: auto 0;
+    height: 32px;
+    color: var(--semi-color-primary);
+    font-size: 32px;
+    line-height: 20px;
+
+  }
+}

package/src/code-usage/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { IconCozCopy } from '@coze-arch/coze-design/icons';
+import { handleCopy } from '../utils/basic';
+import { CodeEditor } from '../code-editor';
+
+import styles from './code-item.module.less';
+
+export enum SupportedLang {
+  Golang = 'go',
+  Js = 'javascript',
+  Python = 'python',
+}
+
+interface UsageContentProps {
+  content: string;
+  copyable?: boolean;
+  lang?: SupportedLang;
+  height?: number;
+}
+
+const UsageContent = ({
+  content,
+  copyable,
+  lang = SupportedLang.Js,
+  height = 300,
+}: UsageContentProps) => (
+  <div className="bg-[var(--semi-color-fill-0)] p-[16px] rounded-[8px] text-[14px] flex">
+    <div className="flex-1 whitespace-pre-wrap break-all">
+      <CodeEditor
+        width={'100%'}
+        height={height}
+        language={lang}
+        value={content}
+        theme={'code-block-grey'}
+        options={{
+          minimap: { enabled: false },
+          wordWrap: 'on',
+          scrollBeyondLastLine: false,
+          unicodeHighlight: { ambiguousCharacters: false },
+          lineNumbers: 'on',
+          formatOnPaste: true,
+          readOnly: true,
+        }}
+        beforeMount={monaco => {
+          monaco.editor.defineTheme('code-block-grey', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+              'editor.background': '#F4F4F4', // Set the background color of the editor
+            },
+          });
+        }}
+      />
+    </div>
+    <div className="ml-[8px]">
+      {copyable ? (
+        <IconCozCopy
+          className="ml-[4px] text-[var(--coz-fg-dim)] cursor-pointer hover:coz-fg-primary"
+          onClick={() => handleCopy(content || '')}
+        />
+      ) : null}
+    </div>
+  </div>
+);
+
+interface UsageItemProps {
+  title?: React.ReactNode;
+  content?: string;
+  lang?: SupportedLang;
+  contentHeight?: number;
+}
+
+export const UsageItem = ({
+  title,
+  content,
+  lang,
+  contentHeight,
+}: UsageItemProps) => (
+  <div className={styles['usage-detail']}>
+    <div className="text-[#16px] font-[500] mb-4">{title}</div>
+    {content ? (
+      <UsageContent
+        content={content}
+        copyable={true}
+        lang={lang}
+        height={contentHeight}
+      />
+    ) : null}
+  </div>
+);

package/src/codemirror-editor/code-editor.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type ComponentType } from 'react';
+
+import { createRenderer, option } from '@coze-editor/editor/react';
+import preset, { languages, themes } from '@coze-editor/editor/preset-code';
+import { shell } from '@coze-editor/editor/language-shell';
+import { json } from '@coze-editor/editor/language-json';
+import { mixLanguages } from '@coze-editor/editor';
+import { EditorView } from '@codemirror/view';
+
+import { cozeLight } from './themes/coze-light';
+import { cozeDark } from './themes/coze-dark';
+
+// 注册语言
+languages.register('json', {
+  // mixLanguages 用于解决 「插值也使用了括号，导致无法正确高亮」的问题
+  language: mixLanguages({
+    outerLanguage: json.language,
+  }),
+  languageService: json.languageService,
+});
+
+languages.register('shell', shell);
+
+// 注册主题
+themes.register('coze-light', cozeLight);
+themes.register('coze-dark', cozeDark);
+
+const minHeightOption = (value?: string | number) =>
+  EditorView.theme({
+    '.cm-content, .cm-gutter, .cm-right-gutter': {
+      minHeight:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+    '&.cm-editor': {
+      minHeight:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+  });
+
+const maxHeightOption = (value?: string | number) =>
+  EditorView.theme({
+    '&.cm-editor': {
+      maxHeight:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+  });
+
+const heightOption = (value?: string | number) =>
+  EditorView.theme({
+    '&.cm-editor': {
+      height:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+  });
+
+const paddingOption = (value?: string | number) =>
+  EditorView.theme({
+    '&.cm-editor': {
+      padding:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+  });
+
+const borderRadiusOption = (value?: string | number) =>
+  EditorView.theme({
+    '&.cm-editor, .cm-gutters': {
+      borderRadius:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+  });
+
+const lineHeightOption = (value?: string | number) =>
+  EditorView.theme({
+    '.cm-content, .cm-gutter, .cm-right-gutter': {
+      lineHeight:
+        typeof value === 'number'
+          ? `${value}px`
+          : typeof value === 'string'
+            ? value
+            : 'unset',
+    },
+  });
+
+function createStyleOptions() {
+  return [
+    option('minHeight', minHeightOption),
+    option('maxHeight', maxHeightOption),
+    option('editerHeight', heightOption),
+    option('borderRadius', borderRadiusOption),
+    option('padding', paddingOption),
+    option('lineHeight', lineHeightOption),
+  ];
+}
+
+const builtinExtensions = [
+  EditorView.theme({
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '& *': {
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+    },
+  }),
+  EditorView.theme({
+    '&.cm-content': {
+      wordBreak: 'break-all',
+    },
+  }),
+];
+
+export const CodeMirrorCodeEditor: ComponentType<any> = createRenderer(
+  [...preset, ...createStyleOptions()],
+  builtinExtensions,
+);

package/src/codemirror-editor/index.ts

@@ -0,0 +1,4 @@
+export { CodeMirrorCodeEditor } from './code-editor';
+export { CodeMirrorTextEditor } from './text-editor';
+export { CodeMirrorJsonEditor } from './json-editor';
+export { CodeMirrorRawTextEditor } from './raw-text-editor';