@cozeloop/components 0.0.2 → 0.0.3

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

@@ -0,0 +1,183 @@
+/* eslint-disable security/detect-non-literal-regexp */
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+} from 'react';
+
+import { EditorProvider } from '@coze-editor/editor/react';
+import {
+  type EditorAPI,
+  transformerCreator,
+} from '@coze-editor/editor/preset-code';
+import { json } from '@coze-editor/editor/language-json';
+import { EditorView } from '@codemirror/view';
+
+import { CodeMirrorCodeEditor } from './code-editor';
+
+interface BaseJsonEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  className?: string;
+  dataTestID?: string;
+  placeholder?: string | HTMLElement;
+  isDarkTheme?: boolean;
+  readonly?: boolean;
+  minHeight?: string | number;
+  maxHeight?: string | number;
+  editerHeight?: string | number;
+  padding?: string | number;
+  borderRadius?: string | number;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+interface Match {
+  match: string;
+  range: [number, number];
+}
+
+const extensions = [
+  EditorView.theme({
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent !important',
+    },
+    '.cm-activeLine': {
+      backgroundColor: 'transparent !important',
+    },
+  }),
+];
+
+function findAllMatches(inputString: string, regex: RegExp): Match[] {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes('g') ? regex.flags : `${regex.flags}g`,
+  );
+  let match;
+  const matches: Match[] = [];
+
+  while (true) {
+    match = globalRegex.exec(inputString);
+    if (!match) {
+      break;
+    }
+
+    if (match.index === globalRegex.lastIndex) {
+      globalRegex.lastIndex++;
+    }
+    matches.push({
+      match: match[0],
+      range: [match.index, match.index + match[0].length],
+    });
+  }
+
+  return matches;
+}
+
+const transformer = transformerCreator(text => {
+  const originalSource = text.toString();
+  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+
+  if (matches.length > 0) {
+    matches.forEach(({ range }) => {
+      text.replaceRange(range[0], range[1], 'null');
+    });
+  }
+
+  return text;
+});
+
+export const CodeMirrorJsonEditor = React.forwardRef(
+  (props: BaseJsonEditorProps, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      className,
+      isDarkTheme,
+      readonly,
+      minHeight = '100px',
+      maxHeight,
+      editerHeight,
+      padding,
+      borderRadius,
+      onFocus,
+      onBlur,
+    } = props;
+
+    const apiRef = useRef<EditorAPI | null>(null);
+
+    const handleChange = useCallback(
+      (e: { value: string }) => {
+        if (typeof onChange === 'function') {
+          onChange(e.value);
+        }
+      },
+      [onChange],
+    );
+
+    useEffect(() => {
+      apiRef.current?.updateASTDecorations();
+    }, [isDarkTheme]);
+
+    // 值受控;
+    useEffect(() => {
+      const editor = apiRef.current;
+
+      if (!editor) {
+        return;
+      }
+
+      if (typeof value === 'string' && value !== editor.getValue()) {
+        editor.setValue(value);
+      }
+    }, [value]);
+
+    const formatJson = async () => {
+      const view = apiRef.current?.$view;
+      if (!view) {
+        return;
+      }
+      view.dispatch(
+        await json.languageService.format(view.state, {
+          tabSize: 2,
+        }),
+      );
+    };
+
+    useImperativeHandle(ref, () => ({
+      formatJson,
+    }));
+
+    return (
+      <EditorProvider>
+        <div className={className}>
+          <CodeMirrorCodeEditor
+            defaultValue={value ?? ''}
+            onChange={handleChange}
+            options={{
+              placeholder,
+              lineWrapping: true,
+              theme: isDarkTheme ? 'coze-dark' : 'coze-light',
+              languageId: 'json',
+              editable: !readonly,
+              transformer,
+              minHeight,
+              maxHeight,
+              editerHeight,
+              borderRadius,
+              padding,
+              fontSize: 13,
+              lineHeight: 20,
+            }}
+            didMount={api => (apiRef.current = api)}
+            extensions={extensions}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </div>
+      </EditorProvider>
+    );
+  },
+);

package/src/codemirror-editor/raw-text-editor.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+
+import { EditorProvider } from '@coze-editor/editor/react';
+import { type EditorAPI } from '@coze-editor/editor/preset-universal';
+
+import { CodeMirrorTextEditor } from './text-editor';
+
+interface CodeMirrorRawTextEditorProps {
+  value: string;
+  onChange?: (value?: string) => void;
+  className?: string;
+  readonly?: boolean;
+  dataTestID?: string;
+  placeholder?: string | HTMLElement;
+  minHeight?: string | number;
+}
+
+export const CodeMirrorRawTextEditor = forwardRef<
+  HTMLDivElement,
+  CodeMirrorRawTextEditorProps
+>((props, ref) => {
+  const { value, onChange, placeholder, className, minHeight, readonly } =
+    props;
+
+  const apiRef = useRef<EditorAPI | null>(null);
+
+  const handleChange = useCallback(
+    (e: { value: string }) => {
+      if (typeof onChange === 'function') {
+        onChange(e.value);
+      }
+    },
+    [onChange],
+  );
+
+  // 值受控;
+  useEffect(() => {
+    const editor = apiRef.current;
+
+    if (!editor) {
+      return;
+    }
+
+    if (typeof value === 'string' && value !== editor.getValue()) {
+      editor.setValue(value);
+    }
+  }, [value]);
+
+  return (
+    <EditorProvider>
+      <div ref={ref} className={className}>
+        <CodeMirrorTextEditor
+          defaultValue={value ?? ''}
+          onChange={handleChange}
+          options={{
+            placeholder,
+            lineWrapping: true,
+            minHeight,
+            fontSize: 13,
+            editable: !readonly,
+            lineHeight: 20,
+          }}
+          didMount={api => (apiRef.current = api)}
+        />
+      </div>
+    </EditorProvider>
+  );
+});

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

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type ComponentType } from 'react';
+
+import { createRenderer, option } from '@coze-editor/editor/react';
+import universal from '@coze-editor/editor/preset-universal';
+import { mixLanguages } from '@coze-editor/editor';
+import { keymap, EditorView } from '@codemirror/view';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+
+const RawEditorTheme = EditorView.theme({
+  '&.cm-editor': {
+    outline: 'none',
+  },
+  '&.cm-content': {
+    wordBreak: 'break-all',
+  },
+});
+
+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',
+    },
+  });
+
+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',
+    },
+  });
+
+const extensions = [
+  mixLanguages({}),
+  RawEditorTheme,
+  // ...其他 extensions
+  history(),
+  keymap.of([...defaultKeymap, ...historyKeymap]),
+];
+
+export const CodeMirrorTextEditor: ComponentType<any> = createRenderer(
+  [
+    ...universal,
+    option('minHeight', minHeightOption),
+    option('lineHeight', lineHeightOption),
+  ],
+  extensions,
+);

package/src/codemirror-editor/themes/coze-dark.ts

@@ -0,0 +1,116 @@
+import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
+import { EditorView } from '@codemirror/view';
+
+const colors = {
+  background: '#151B27',
+  // syntax
+  comment: '#FFFFFF63',
+  key: '#39E5D7',
+  string: '#FF94D2',
+  number: '#FF9933',
+  boolean: '#78B0FF',
+  null: '#78B0FF',
+  separator: '#FFFFFFC9',
+};
+
+export const cozeDark = [
+  EditorView.theme({
+    '.cm-completionIcon-property': {
+      backgroundImage:
+        'url("' +
+        'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4zNTc2IDguMTAzNTVDMTIuMTYyMyA3LjkwODI5IDExLjg0NTcgNy45MDgyOSAxMS42NTA1IDguMTAzNTVMOC4xMDM1NSAxMS42NTA1QzcuOTA4MjkgMTEuODQ1NyA3LjkwODI5IDEyLjE2MjMgOC4xMDM1NSAxMi4zNTc2TDExLjY1MDUgMTUuOTA0NUMxMS44NDU3IDE2LjA5OTggMTIuMTYyMyAxNi4wOTk4IDEyLjM1NzYgMTUuOTA0NUwxNS45MDQ1IDEyLjM1NzZDMTYuMDk5OCAxMi4xNjIzIDE2LjA5OTggMTEuODQ1NyAxNS45MDQ1IDExLjY1MDVMMTIuMzU3NiA4LjEwMzU1WiIgZmlsbD0iI0ZGRkZGRkM5Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4wMDI2IDEuNDU1NDVDMTEuNjIxNCAxLjA5ODE4IDEyLjM4MzggMS4wOTgxOCAxMy4wMDI2IDEuNDU1NDVMMjAuNjM4IDUuODYzNzRDMjEuMjU2OCA2LjIyMSAyMS42MzggNi44ODEyNiAyMS42MzggNy41OTU3OVYxNi40MTI0QzIxLjYzOCAxNy4xMjY5IDIxLjI1NjggMTcuNzg3MiAyMC42MzggMTguMTQ0NEwxMy4wMDI2IDIyLjU1MjdDMTIuMzgzOCAyMi45MSAxMS42MjE0IDIyLjkxIDExLjAwMjYgMjIuNTUyN0wzLjM2NzE5IDE4LjE0NDRDMi43NDgzOSAxNy43ODcyIDIuMzY3MTkgMTcuMTI2OSAyLjM2NzE5IDE2LjQxMjRWNy41OTU3OUMyLjM2NzE5IDYuODgxMjYgMi43NDgzOSA2LjIyMTAxIDMuMzY3MTkgNS44NjM3NEwxMS4wMDI2IDEuNDU1NDVaTTEyLjAwMjYgMy4xODc1TDE5LjYzOCA3LjU5NTc5VjE2LjQxMjRMMTIuMDAyNiAyMC44MjA3TDQuMzY3MTkgMTYuNDEyNEw0LjM2NzE5IDcuNTk1NzlMMTIuMDAyNiAzLjE4NzVaIiBmaWxsPSIjRkZGRkZGQzkiLz48L3N2Zz4=' +
+        '")',
+      backgroundSize: '11px 11px',
+      backgroundRepeat: 'no-repeat',
+      width: '11px',
+      height: '11px',
+    },
+    '.cm-completionIcon-property::after': {
+      content: '""',
+    },
+  }),
+  createTheme({
+    variant: 'dark',
+    settings: {
+      background: colors.background,
+      foreground: '#fff',
+      caret: '#AEAFAD',
+      selection: '#d9d9d942',
+      gutterBackground: colors.background,
+      gutterForeground: '#FFFFFF63',
+      gutterBorderColor: 'transparent',
+      gutterBorderWidth: 0,
+      lineHighlight: '#272e3d36',
+      bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+      tooltip: {
+        backgroundColor: '#363D4D',
+        color: '#fff',
+        border: 'none',
+      },
+      completionItemHover: {
+        backgroundColor: '#FFFFFF0F',
+      },
+      completionItemSelected: {
+        backgroundColor: '#FFFFFF17',
+      },
+      completionItemIcon: {
+        color: '#FFFFFFC9',
+      },
+      completionItemLabel: {
+        color: '#FFFFFFC9',
+      },
+      completionItemDetail: {
+        color: '#FFFFFF63',
+      },
+    },
+    styles: [
+      // json
+      {
+        tag: t.comment,
+        color: colors.comment,
+      },
+      {
+        tag: [t.propertyName],
+        color: colors.key,
+      },
+      {
+        tag: [t.string],
+        color: colors.string,
+      },
+      {
+        tag: [t.number],
+        color: colors.number,
+      },
+      {
+        tag: [t.bool],
+        color: colors.boolean,
+      },
+      {
+        tag: [t.null],
+        color: colors.null,
+      },
+      {
+        tag: [t.separator],
+        color: colors.separator,
+      },
+
+      // shell
+      // curl
+      {
+        tag: [t.standard(t.variableName)],
+        color: '#3BEB84',
+      },
+      // -X
+      {
+        tag: [t.attributeName],
+        color: '#FF9933',
+      },
+      // cp-disable-next-line
+      // url in string (includes quotes), e.g. "https://..."
+      {
+        tag: [t.special(t.string)],
+        color: '#78B0FF',
+      },
+    ],
+  }),
+];

package/src/codemirror-editor/themes/coze-light.ts

@@ -0,0 +1,122 @@
+import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
+import { EditorView } from '@codemirror/view';
+
+const colors = {
+  background: '#fff',
+  // syntax
+  comment: '#000A298A',
+  key: '#00818C',
+  string: '#D1009D',
+  number: '#C74200',
+  boolean: '#2B57D9',
+  null: '#2B57D9',
+  separator: '#0F1529D1',
+};
+
+export const cozeLight = [
+  EditorView.theme({
+    '.cm-completionIcon-property': {
+      backgroundImage:
+        'url("' +
+        'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMi4zNTc2IDguMTAzNTVDMTIuMTYyMyA3LjkwODI5IDExLjg0NTcgNy45MDgyOSAxMS42NTA1IDguMTAzNTVMOC4xMDM1NSAxMS42NTA1QzcuOTA4MjkgMTEuODQ1NyA3LjkwODI5IDEyLjE2MjMgOC4xMDM1NSAxMi4zNTc2TDExLjY1MDUgMTUuOTA0NUMxMS44NDU3IDE2LjA5OTggMTIuMTYyMyAxNi4wOTk4IDEyLjM1NzYgMTUuOTA0NUwxNS45MDQ1IDEyLjM1NzZDMTYuMDk5OCAxMi4xNjIzIDE2LjA5OTggMTEuODQ1NyAxNS45MDQ1IDExLjY1MDVMMTIuMzU3NiA4LjEwMzU1WiIgZmlsbD0iIzA2MDcwOUNDIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4wMDI2IDEuNDU1NDVDMTEuNjIxNCAxLjA5ODE4IDEyLjM4MzggMS4wOTgxOCAxMy4wMDI2IDEuNDU1NDVMMjAuNjM4IDUuODYzNzRDMjEuMjU2OCA2LjIyMSAyMS42MzggNi44ODEyNiAyMS42MzggNy41OTU3OVYxNi40MTI0QzIxLjYzOCAxNy4xMjY5IDIxLjI1NjggMTcuNzg3MiAyMC42MzggMTguMTQ0NEwxMy4wMDI2IDIyLjU1MjdDMTIuMzgzOCAyMi45MSAxMS42MjE0IDIyLjkxIDExLjAwMjYgMjIuNTUyN0wzLjM2NzE5IDE4LjE0NDRDMi43NDgzOSAxNy43ODcyIDIuMzY3MTkgMTcuMTI2OSAyLjM2NzE5IDE2LjQxMjRWNy41OTU3OUMyLjM2NzE5IDYuODgxMjYgMi43NDgzOSA2LjIyMTAxIDMuMzY3MTkgNS44NjM3NEwxMS4wMDI2IDEuNDU1NDVaTTEyLjAwMjYgMy4xODc1TDE5LjYzOCA3LjU5NTc5VjE2LjQxMjRMMTIuMDAyNiAyMC44MjA3TDQuMzY3MTkgMTYuNDEyNEw0LjM2NzE5IDcuNTk1NzlMMTIuMDAyNiAzLjE4NzVaIiBmaWxsPSIjMDYwNzA5Q0MiLz48L3N2Zz4=' +
+        '")',
+      backgroundSize: '11px 11px',
+      backgroundRepeat: 'no-repeat',
+      width: '11px',
+      height: '11px',
+    },
+    '.cm-completionIcon-property::after': {
+      content: '""',
+    },
+  }),
+  createTheme({
+    variant: 'light',
+    settings: {
+      background: colors.background,
+      foreground: '#4D4D4C',
+      caret: '#AEAFAD',
+      selection: '#52649A21',
+      gutterBackground: colors.background,
+      gutterForeground: '#000A298A',
+      gutterBorderColor: 'transparent',
+      gutterBorderWidth: 0,
+      lineHighlight: '#efefef78',
+      bracketColors: ['#E4D129', '#AC05FF', '#2B57D9'],
+      tooltip: {
+        backgroundColor: 'var(--coz-bg-max)',
+        color: 'var(--coz-fg-primary)',
+        border: 'solid 1px var(--coz-stroke-plus)',
+        boxShadow: 'var(--coz-shadow-default)',
+        borderRadius: '8px',
+      },
+      tooltipCompletion: {
+        backgroundColor: '#FFFFFF',
+        color: '#060709CC',
+      },
+      completionItemHover: {
+        backgroundColor: '#5768A114',
+      },
+      completionItemSelected: {
+        backgroundColor: '#52649A21',
+      },
+      completionItemIcon: {
+        color: '#060709CC',
+      },
+      completionItemLabel: {
+        color: '#060709CC',
+      },
+      completionItemDetail: {
+        color: '#2029459E',
+      },
+    },
+    styles: [
+      // JSON
+      {
+        tag: t.comment,
+        color: colors.comment,
+      },
+      {
+        tag: [t.propertyName],
+        color: colors.key,
+      },
+      {
+        tag: [t.string],
+        color: colors.string,
+      },
+      {
+        tag: [t.number],
+        color: colors.number,
+      },
+      {
+        tag: [t.bool],
+        color: colors.boolean,
+      },
+      {
+        tag: [t.null],
+        color: colors.null,
+      },
+      {
+        tag: [t.separator],
+        color: colors.separator,
+      },
+
+      // shell
+      // curl
+      {
+        tag: [t.standard(t.variableName)],
+        color: '#00804A',
+      },
+      // -X
+      {
+        tag: [t.attributeName],
+        color: '#C74200',
+      },
+      // cp-disable-next-line
+      // url in string (includes quotes), e.g. "https://..."
+      {
+        tag: [t.special(t.string)],
+        color: '#2B57D9',
+      },
+    ],
+  }),
+];

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

@@ -0,0 +1,27 @@
+.coze-up-panel{
+  :global {
+    .semi-collapse-header,
+    .semi-collapse-content{
+      margin: 0;
+      padding: 0;
+    }
+
+    .semi-collapse-content{
+      padding-top: 0px;
+      padding-bottom: 0;
+    }
+  }
+
+  .chevron-icon {
+    cursor: pointer;
+    transition: transform 0.3s;
+
+    &.chevron-icon-close {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.coze-up-panel-hidden{
+  border:0
+}

package/src/collapse-card/index.tsx

@@ -0,0 +1,93 @@
+import { useState, useEffect } from 'react';
+
+import cn from 'classnames';
+import { IconCozArrowDown } from '@coze-arch/coze-design/icons';
+import { Collapse } from '@coze-arch/coze-design';
+
+import styles from './index.module.less';
+
+interface CollapseCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  className?: string;
+  title: React.ReactNode;
+  children: React.ReactNode;
+  subInfo?: React.ReactNode;
+  extra?: React.ReactNode;
+  defaultVisible?: boolean;
+  visible?: boolean;
+  disableCollapse?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+}
+
+export const CollapseCard = ({
+  className,
+  title,
+  children,
+  subInfo,
+  extra,
+  defaultVisible,
+  visible,
+  onVisibleChange,
+  disableCollapse,
+  ...props
+}: CollapseCardProps) => {
+  const [activeKey, setActiveKey] = useState(defaultVisible ? ['1'] : []);
+
+  // 处理受控模式
+  useEffect(() => {
+    if (visible !== undefined) {
+      setActiveKey(visible ? ['1'] : []);
+    }
+  }, [visible]);
+
+  const customHeader = (
+    <div className="flex items-center justify-between flex-1">
+      <div className="flex items-center gap-2">
+        {title}
+        <IconCozArrowDown
+          className={cn(styles['chevron-icon'], {
+            [styles['chevron-icon-close']]: !activeKey.length,
+          })}
+        />
+        {subInfo}
+      </div>
+      {extra}
+    </div>
+  );
+
+  const handleChange = (keys: string[]) => {
+    if (visible === undefined) {
+      setActiveKey(keys);
+    }
+    onVisibleChange?.(keys.length > 0);
+  };
+
+  if (disableCollapse) {
+    return (
+      <div className={cn('flex flex-col gap-4', className)}>
+        {title}
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <Collapse
+      {...props}
+      activeKey={activeKey}
+      onChange={v => handleChange(v as string[])}
+    >
+      <Collapse.Panel
+        className={cn(styles['coze-up-panel'], styles['coze-up-panel-hidden'], {
+          className,
+        })}
+        header={customHeader}
+        itemKey="1"
+        showArrow={false}
+        extra={extra}
+      >
+        {children}
+      </Collapse.Panel>
+    </Collapse>
+  );
+};