@cozeloop/components 0.0.3 → 0.0.4

package/src/code-usage/index.tsx

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

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

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

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

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

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

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

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