@cozeloop/components 0.0.3 → 0.0.4

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

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

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

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

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

@@ -1,63 +0,0 @@
-/* stylelint-disable declaration-no-important */
-.card {
-  background: transparent !important;
-  border-radius: 0 !important;
-
-  // flex flex-col px-4 pt-2 pb-4 bg-semi-bg-0 gap-3 rounded-md
-  :global {
-    .semi-card-body {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-
-      box-sizing: border-box;
-      height: 100%;
-      padding: 0;
-    }
-  }
-
-  .card-header{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    height: 24px;
-    min-height: 24px;
-    padding: 10px 20px 0;
-  }
-
-  .card-title {
-    position: relative;
-
-    display: flex;
-    gap: 4px;
-    align-items: center;
-
-    font-weight: 600;
-
-    .chevron-icon {
-      cursor: pointer;
-      transition: transform 0.3s;
-
-      &.chevron-icon-close {
-        transform: rotate(180deg);
-      }
-
-      &:hover {
-        color: var(--semi-color-primary);
-      }
-    }
-  }
-
-  .card-content {
-    height: 0;
-    opacity: 0;
-    transition: height 0.2s, opacity 0.2s;
-
-    &.active {
-      overflow: hidden;
-      height: 100%;
-      opacity: 1;
-    }
-  }
-}

package/src/collapsible-card/index.tsx

@@ -1,57 +0,0 @@
-import { type CSSProperties, type ReactNode } from 'react';
-
-import cn from 'classnames';
-import { IconCozArrowUpFill } from '@coze-arch/coze-design/icons';
-import { Card, Typography } from '@coze-arch/coze-design';
-
-import styles from './index.module.less';
-
-interface Props {
-  title?: ReactNode;
-  children?: ReactNode;
-  actionBtns?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-  hideExpand?: boolean;
-  isExpand?: boolean;
-  setIsExpand?: (isExpand: boolean) => void;
-}
-
-export function CollapsibleCard({
-  title,
-  children,
-  actionBtns,
-  className,
-  style,
-  isExpand,
-  setIsExpand,
-  hideExpand,
-}: Props) {
-  return (
-    <Card className={cn(styles.card, className)} style={style} bordered={false}>
-      {title || actionBtns ? (
-        <div className={styles['card-header']}>
-          <Typography.Text className={styles['card-title']}>
-            {title}
-            {children && !hideExpand ? (
-              <IconCozArrowUpFill
-                className={cn(styles['chevron-icon'], {
-                  [styles['chevron-icon-close']]: !isExpand,
-                })}
-                onClick={() => setIsExpand?.(!isExpand)}
-              />
-            ) : null}
-          </Typography.Text>
-          <div>{actionBtns}</div>
-        </div>
-      ) : null}
-      <div
-        className={cn(styles['card-content'], {
-          [styles.active]: isExpand,
-        })}
-      >
-        {children}
-      </div>
-    </Card>
-  );
-}

package/src/column-manage-storage/index.tsx

@@ -1,64 +0,0 @@
-import { isEmpty } from 'lodash-es';
-import { safeJsonParse } from '@cozeloop/toolkit';
-
-import { type ColumnItem } from '../columns-select';
-
-export const DATASET_COLUMN_STORAGE_KEY = 'dataset-column';
-
-export const getColumnManageStorage = (storageKey: string) => {
-  const storage = localStorage.getItem(storageKey);
-  return safeJsonParse(storage || '{}') || {};
-};
-export interface ColumnSort {
-  [key: string]: {
-    index: number;
-    checked: boolean;
-  };
-}
-export const setColumnsManageStorage = (
-  storageKey: string,
-  columns: ColumnItem[],
-) => {
-  if (!storageKey) {
-    return;
-  }
-  const data: ColumnSort = {};
-  columns.forEach((column, index) => {
-    data[column.key] = {
-      index,
-      checked: column.checked ?? true,
-    };
-  });
-  localStorage.setItem(storageKey, JSON.stringify(data));
-};
-
-export const dealColumnsWithStorage = (
-  storageKey: string,
-  columns: ColumnItem[],
-): ColumnItem[] => {
-  const sort = getColumnManageStorage(storageKey);
-  if (!sort || isEmpty(sort)) {
-    return columns;
-  }
-  const newColumns = [...(columns || [])].sort((a, b) => {
-    const indexA = sort[a.key]?.index ?? Infinity;
-    const indexB = sort[b.key]?.index ?? Infinity;
-    // 如果两个元素都在 arrayB 中，按照 arrayB 的顺序排序
-    if (indexA !== Infinity && indexB !== Infinity) {
-      return indexA - indexB;
-    }
-    // 如果只有一个元素在 arrayB 中，将其排在前面
-    if (indexA !== Infinity) {
-      return -1;
-    }
-    if (indexB !== Infinity) {
-      return 1;
-    }
-    // 如果两个元素都不在 arrayB 中，保持原有顺序
-    return 0;
-  });
-  return newColumns.map(column => ({
-    ...column,
-    checked: sort[column.key]?.checked ?? true,
-  }));
-};

package/src/columns-select/index.tsx

@@ -1,244 +0,0 @@
-/* eslint-disable @coze-arch/max-line-per-function */
-/* eslint-disable @coze-arch/no-batch-import-or-export */
-import * as sort from 'react-sortable-hoc';
-import { Fragment, useEffect, useMemo, useState } from 'react';
-
-import {
-  IconCozHandle,
-  IconCozTableSetting,
-} from '@coze-arch/coze-design/icons';
-import {
-  Button,
-  Checkbox,
-  Dropdown,
-  Typography,
-  Divider,
-  Tooltip,
-  type ColumnProps,
-} from '@coze-arch/coze-design';
-// @ts-expect-error react-sortable-hoc ts type issue
-const { sortableContainer, sortableElement, sortableHandle } = sort;
-const { arrayMove } = sort;
-
-const SortableContainer = sortableContainer(
-  ({ children }: { children: React.ReactNode }) => (
-    <div className="max-w-[200px] w-fit rounded-[6px] py-2 px-1 max-h-[372px] overflow-y-auto flex gap-y-1 flex-col">
-      {children}
-    </div>
-  ),
-);
-
-const DragHandle = sortableHandle(() => (
-  <IconCozHandle className="cursor-grab" aria-label="拖动排序" role="button" />
-));
-export interface ColumnItem extends ColumnProps {
-  key: string;
-  value: string;
-  disabled?: boolean;
-  checked?: boolean;
-}
-
-export interface ColumnSelectorProps {
-  columns: ColumnItem[];
-  onChange?: (items: ColumnItem[]) => void;
-  buttonText?: string;
-  resetButtonText?: string;
-  className?: string;
-  sortable?: boolean;
-  defaultColumns?: ColumnItem[];
-  itemRender?: (item: ColumnItem) => React.ReactNode;
-  footerRender?: (item: ColumnItem[]) => React.ReactNode;
-}
-
-export const ColumnSelector = ({
-  columns,
-  defaultColumns = columns,
-  onChange,
-  buttonText,
-  resetButtonText = '重置为默认',
-  className,
-  sortable = true,
-  itemRender,
-  footerRender,
-}: ColumnSelectorProps) => {
-  const [list, setList] = useState<ColumnItem[]>(() => [...columns]);
-  const selectedKeys = useMemo(
-    () => list.filter(item => item.checked).map(item => item.key),
-    [list],
-  );
-  const disabledKeys = useMemo(
-    () => list.filter(item => item.disabled).map(item => item.key),
-    [list],
-  );
-
-  const RenderItem = (value: ColumnItem, slot?: React.ReactNode) => {
-    const render = itemRender ? itemRender(value) : null;
-    if (render) {
-      return render;
-    }
-    return (
-      <span
-        // ref={spanRef}
-        className="group flex items-center justify-between py-1 px-2 text-[var(--coz-fg-primary)] z-[99999] select-none hover:bg-[var(--coz-mg-secondary)] rounded-[6px] cursor-pointer bg-white"
-        style={{
-          zIndex: 99999,
-        }}
-      >
-        <div
-          className="flex items-center gap-x-2 max-w-full w-full"
-          onClick={() => {
-            if (disabledKeys.includes(value.key ?? '') || value.disabled) {
-              return;
-            }
-            const newKeys = selectedKeys.includes(value.key ?? '')
-              ? selectedKeys.filter(key => key !== value.key)
-              : [...selectedKeys, value.key];
-
-            const newColumns = list.map(item => {
-              if (newKeys.includes(item.key)) {
-                return {
-                  ...item,
-                  checked: true,
-                };
-              }
-
-              return {
-                ...item,
-                checked: false,
-              };
-            });
-
-            setList(newColumns);
-            onChange?.(newColumns);
-          }}
-        >
-          <Checkbox
-            disabled={disabledKeys.includes(value.key ?? '') || value.disabled}
-            checked={selectedKeys.includes(value.key ?? '')}
-            aria-label={`选择${value.value}`}
-          />
-          <Typography.Text
-            ellipsis={{
-              showTooltip: {
-                opts: {
-                  content: value.value,
-                  theme: 'dark',
-                },
-              },
-            }}
-            className="text-[13px] text-[var(--coz-fg-primary)] flex-1 overflow-hidden w-full"
-            style={{
-              color:
-                disabledKeys.includes(value.key ?? '') || value.disabled
-                  ? 'var(--coz-fg-dim)'
-                  : '',
-            }}
-          >
-            {value.value}
-          </Typography.Text>
-          <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center coz-fg-secondary">
-            {slot}
-          </div>
-        </div>
-      </span>
-    );
-  };
-
-  const SortableItem = sortableElement(({ value }: { value: ColumnItem }) =>
-    RenderItem(value, <DragHandle />),
-  );
-
-  const handleSortEnd = ({
-    oldIndex,
-    newIndex,
-  }: {
-    oldIndex: number;
-    newIndex: number;
-  }) => {
-    const newList = arrayMove(list, oldIndex, newIndex);
-    setList(newList);
-    onChange?.(newList);
-  };
-
-  const handleReset = () => {
-    setList(defaultColumns);
-    onChange?.(defaultColumns);
-  };
-
-  useEffect(() => {
-    setList(columns);
-  }, [columns]);
-
-  return (
-    <div className={className}>
-      <Dropdown
-        position="bottomRight"
-        render={
-          <div
-            onClick={event => {
-              event.stopPropagation();
-            }}
-          >
-            <SortableContainer onSortEnd={handleSortEnd} useDragHandle>
-              <>
-                {list.map((value, index) =>
-                  value?.disabled || !sortable ? (
-                    <Fragment key={`item-${value.key}`}>
-                      {RenderItem(value)}
-                    </Fragment>
-                  ) : (
-                    <SortableItem
-                      key={`item-${value.key}`}
-                      index={index}
-                      value={value}
-                    />
-                  ),
-                )}
-              </>
-            </SortableContainer>
-            <Divider />
-            {footerRender ? (
-              <div className="flex items-center">
-                {footerRender(list)}
-                <Button
-                  color="secondary"
-                  type="secondary"
-                  className="text-center flex-1"
-                  onClick={handleReset}
-                >
-                  <span className="text-brand font-medium text-[13px]">
-                    {resetButtonText}
-                  </span>
-                </Button>
-              </div>
-            ) : (
-              <Button
-                color="secondary"
-                type="secondary"
-                className="w-full text-center"
-                onClick={handleReset}
-              >
-                <span className="text-brand font-medium text-[13px]">
-                  {resetButtonText}
-                </span>
-              </Button>
-            )}
-          </div>
-        }
-        trigger="click"
-      >
-        <div>
-          <Tooltip content="列管理" theme="dark" position="top">
-            <Button
-              icon={<IconCozTableSetting />}
-              type="primary"
-              color="primary"
-              className="flex items-center justify-center"
-              aria-label={buttonText}
-            />
-          </Tooltip>
-        </div>
-      </Dropdown>
-    </div>
-  );
-};

package/src/edit-icon-button/index.tsx

@@ -1,36 +0,0 @@
-import { type MouseEvent } from 'react';
-
-import classNames from 'classnames';
-import { IconCozPencil } from '@coze-arch/coze-design/icons';
-
-interface Props extends React.HTMLAttributes<SVGElement> {
-  className?: string;
-  disabled?: boolean;
-  onClick?: (e: MouseEvent<SVGElement>) => void;
-}
-
-export function EditIconButton({
-  disabled,
-  className,
-  onClick,
-  ...rest
-}: Props) {
-  return (
-    <IconCozPencil
-      {...rest}
-      fontSize={14}
-      className={classNames(
-        'text-[var(--coz-fg-dim)]',
-        disabled
-          ? 'cursor-not-allowed'
-          : 'cursor-pointer hover:text-[rgba(var(--coze-up-brand-9))]',
-        className,
-      )}
-      onClick={e => {
-        if (!disabled) {
-          onClick?.(e);
-        }
-      }}
-    />
-  );
-}