@cozeloop/components 0.0.2 → 0.0.3

package/src/types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types='@coze-arch/bot-typings' />
+
+interface Window {
+  optimizeEditorMap?: Record<string, any>;
+}
+
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  /**
+   * The default export type depends on the svgDefaultExport config,
+   * it can be a string or a ReactComponent
+   * */
+  const content: any;
+  export default content;
+}
+declare type Int64 = string | number;
+
+/**
+ * defined in rsbuild config for `@monaco-editor/react` loader
+ */
+declare const MONACO_UNPKG: string;

package/src/upload/index.ts

@@ -0,0 +1,39 @@
+import { type customRequestArgs } from '@coze-arch/coze-design';
+
+export function uploadFile({
+  file,
+  fileType = 'image',
+  onProgress,
+  onSuccess,
+  onError,
+  spaceID,
+}: {
+  file: File;
+  fileType?: 'image' | 'object';
+  onProgress?: customRequestArgs['onProgress'];
+  onSuccess?: customRequestArgs['onSuccess'];
+  onError?: customRequestArgs['onError'];
+  spaceID: string;
+}) {
+  const result = new Promise<string>((resolve, reject) => {
+    (async function () {
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('business_type', 'evaluation');
+        formData.append('workspace_id', spaceID);
+        const res = await fetch('/api/foundation/v1/files', {
+          method: 'POST',
+          body: formData,
+        });
+        const resObj = await res.json();
+        onSuccess?.({ status: 200, Uri: resObj?.data?.file_name });
+        resolve(resObj?.data?.file_name ?? '');
+      } catch (e) {
+        onError?.({ status: 500 });
+        reject(e);
+      }
+    })();
+  });
+  return result;
+}

package/src/user-profile/index.tsx

@@ -0,0 +1,49 @@
+import cn from 'classnames';
+import { CozAvatar, Typography } from '@coze-arch/coze-design';
+
+interface UserInfoProps {
+  avatarUrl?: string;
+  name?: string;
+  className?: string;
+  avatarClassName?: string;
+  userNameClassName?: string;
+}
+export const UserProfile = ({
+  avatarUrl,
+  name,
+  className,
+  avatarClassName,
+  userNameClassName,
+}: UserInfoProps) => {
+  if (!avatarUrl && !name) {
+    return null;
+  }
+  return (
+    <div className={cn('flex items-center gap-[6px] w-full', className)}>
+      <CozAvatar
+        className={cn('!w-[20px] !h-[20px]', avatarClassName)}
+        src={avatarUrl}
+      >
+        {name}
+      </CozAvatar>
+      <Typography.Text
+        className={cn('flex-1 overflow-hidden !text-[13px]', userNameClassName)}
+        style={{
+          fontSize: 'inherit',
+          color: 'inherit',
+          fontWeight: 'inherit',
+          lineHeight: 'inherit',
+        }}
+        ellipsis={{
+          showTooltip: {
+            opts: {
+              theme: 'dark',
+            },
+          },
+        }}
+      >
+        {name}
+      </Typography.Text>
+    </div>
+  );
+};

package/src/utils/basic.ts

@@ -0,0 +1,29 @@
+import copy from 'copy-to-clipboard';
+import { Toast } from '@coze-arch/coze-design';
+
+export const handleCopy = async (value: string, hideToast?: boolean) => {
+  try {
+    copy(value);
+    !hideToast &&
+      Toast.success({
+        content: '复制成功',
+        showClose: false,
+        zIndex: 99999,
+      });
+    return Promise.resolve(true);
+  } catch (e) {
+    Toast.warning({
+      content: '复制失败',
+      showClose: false,
+      zIndex: 99999,
+    });
+    console.error(e);
+    return Promise.resolve(false);
+  }
+};
+
+export function sleep(timer = 600) {
+  return new Promise<void>(resolve => {
+    setTimeout(() => resolve(), timer);
+  });
+}

package/src/version-list/index.module.less

@@ -0,0 +1,16 @@
+/* stylelint-disable declaration-no-important */
+.description{
+  :global{
+    .semi-descriptions-item{
+      padding-bottom: 8px;
+    }
+
+    .semi-descriptions-key{
+      font-size: 13px !important;
+    }
+
+    th{
+      padding-right: 12px;
+    }
+  }
+}

package/src/version-list/version-descriptions.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable complexity */
+import cs from 'classnames';
+import { formatTimestampToString } from '@cozeloop/toolkit';
+import { type UserInfo } from '@cozeloop/api-schema/evaluation';
+import { Descriptions, Tag, Typography } from '@coze-arch/coze-design';
+
+import { UserProfile } from '../user-profile';
+
+import styles from './index.module.less';
+export type Integer64 = string;
+
+export interface Version {
+  id: Integer64;
+  version?: string;
+  submitTime?: Integer64;
+  submitter?: UserInfo;
+  description?: string;
+  isDraft?: boolean;
+  draftSubmitText?: string;
+}
+
+export default function VersionDescriptions({
+  version,
+  className,
+}: {
+  version: Version | undefined;
+  className?: string;
+}) {
+  const {
+    version: versionName,
+    draftSubmitText = '保存时间',
+    submitTime,
+    submitter,
+    description,
+    isDraft = false,
+  } = version || {};
+
+  return (
+    <Descriptions align="left" className={cs(styles.description, className)}>
+      <Tag color={isDraft ? 'primary' : 'green'} className="mb-2">
+        {isDraft ? '当前草稿' : '提交'}
+      </Tag>
+      {isDraft ? null : (
+        <Descriptions.Item itemKey="版本">
+          <span className="font-medium">{versionName ?? '-'}</span>
+        </Descriptions.Item>
+      )}
+      {!submitTime ? null : (
+        <Descriptions.Item
+          itemKey={isDraft ? draftSubmitText : '提交时间'}
+          className="!text-[13px]"
+        >
+          <span className="font-medium !text-[13px]">
+            {submitTime
+              ? formatTimestampToString(submitTime, 'YYYY-MM-DD HH:mm:ss')
+              : '-'}
+          </span>
+        </Descriptions.Item>
+      )}
+      {isDraft && !submitter ? null : (
+        <Descriptions.Item itemKey="提交人" className="!text-[13px]">
+          <UserProfile
+            name={submitter?.name}
+            avatarUrl={submitter?.avatar_url}
+          />
+        </Descriptions.Item>
+      )}
+      {isDraft ? null : (
+        <Descriptions.Item itemKey="版本说明" className="!text-[13px]">
+          <Typography.Text
+            ellipsis={{ rows: 2, showTooltip: true }}
+            className="!text-[13px]"
+          >
+            {description || '-'}
+          </Typography.Text>
+        </Descriptions.Item>
+      )}
+    </Descriptions>
+  );
+}

package/src/version-list/version-item.tsx

@@ -0,0 +1,30 @@
+import VersionDescriptions, { type Version } from './version-descriptions';
+
+interface Props {
+  version: Version | undefined;
+  active?: boolean;
+  className?: string;
+  onClick?: () => void;
+}
+
+export default function VersionItem({
+  version,
+  active,
+  className,
+  onClick,
+}: Props) {
+  return (
+    <div className={`group flex cursor-pointer ${className}`} onClick={onClick}>
+      <div className="w-6 h-10 flex items-center shrink-0">
+        <div
+          className={`w-2 h-2 rounded-full ${active ? 'bg-green-700' : 'bg-gray-300'} `}
+        />
+      </div>
+      <div
+        className={`grow px-2 pt-2 rounded-m ${active ? 'bg-gray-100' : ''} group-hover:bg-gray-100`}
+      >
+        <VersionDescriptions version={version} />
+      </div>
+    </div>
+  );
+}

package/src/version-list/version-list.tsx

@@ -0,0 +1,59 @@
+import { Button, List } from '@coze-arch/coze-design';
+
+import VersionItem from './version-item';
+import { type Integer64, type Version } from './version-descriptions';
+
+export interface VersionListProps {
+  versions: Version[] | undefined;
+  activeVersionId?: Integer64;
+  loadMoreLoading?: boolean;
+  enableLoadMore?: boolean;
+  noMore?: boolean;
+  onActiveChange?: (versionId: Integer64, version: Version) => void;
+  onLoadMore?: () => void;
+}
+
+export default function VersionList({
+  versions = [],
+  loadMoreLoading = false,
+  enableLoadMore = false,
+  noMore = false,
+  activeVersionId,
+  onActiveChange,
+  onLoadMore,
+}: VersionListProps) {
+  const loadMore =
+    !enableLoadMore || noMore ? null : (
+      <div className="flex justify-center">
+        <Button
+          loading={loadMoreLoading}
+          color="primary"
+          onClick={() => onLoadMore?.()}
+        >
+          显示更多
+        </Button>
+      </div>
+    );
+
+  return (
+    <>
+      <List
+        dataSource={versions}
+        loadMore={loadMore}
+        renderItem={version => {
+          const active =
+            activeVersionId === undefined || activeVersionId === version?.id;
+          return (
+            <VersionItem
+              key={version.id}
+              className="pb-3"
+              version={version}
+              active={active}
+              onClick={() => onActiveChange?.(version?.id, version)}
+            />
+          );
+        }}
+      />
+    </>
+  );
+}

package/src/version-list/version-switch-panel.tsx

@@ -0,0 +1,31 @@
+import { IconCozCross } from '@coze-arch/coze-design/icons';
+
+import VersionList, { type VersionListProps } from './version-list';
+
+export default function VersionSwitchPanel({
+  visible = true,
+  onClose,
+  ...versionListProps
+}: VersionListProps & {
+  visible?: boolean;
+  onClose?: () => void;
+}) {
+  if (!visible) {
+    return null;
+  }
+  return (
+    <div className="h-full w-[360px] flex flex-col border-0 border-l border-gray-200 border-solid overflow-hidden">
+      <div className="shrink-0 flex items-center px-6 h-12 border-0 border-b border-gray-200 border-solid bg-gray-100">
+        <div className="text-sm font-medium">版本记录</div>
+        <IconCozCross
+          className="ml-auto cursor-pointer text-gray-400 hover:text-gray-900"
+          onClick={onClose}
+        />
+      </div>
+      <div className="grow py-6 pl-6 pr-[18px] overflow-auto styled-scrollbar">
+        <VersionList {...versionListProps} />
+      </div>
+      <div className="shrink-0"></div>
+    </div>
+  );
+}

package/tailwind.config.ts

@@ -0,0 +1,6 @@
+import {
+  createTailwindcssConfig,
+  type TailwindcssConfig,
+} from '@cozeloop/tailwind-config';
+
+export default createTailwindcssConfig({}) as TailwindcssConfig;

package/tsconfig.build.json

@@ -0,0 +1,44 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "useUnknownInCatchVariables": false,
+    "types": ["vitest/globals"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strictNullChecks": true,
+    "rootDir": "./src",
+    "outDir": "./dist/lib",
+    "tsBuildInfoFile": "dist/lib/tsconfig.build.tsbuildinfo",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../api-schema/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../config/opensource/tailwind-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../coze-studio/packages/arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../hooks/tsconfig.build.json"
+    },
+    {
+      "path": "../toolkit/tsconfig.build.json"
+    }
+  ],
+  "$schema": "https://json.schemastore.org/tsconfig"
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "composite": true,
+    "moduleResolution": "bundler",
+    "module": "es2015"
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ],
+  "exclude": ["**/*"]
+}

package/tsconfig.misc.json

@@ -0,0 +1,28 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "include": [
+    "__tests__",
+    "vitest.config.mts",
+    "tailwind.config.ts",
+    "stories",
+    ".storybook/*"
+  ],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "rootDir": "./",
+    "outDir": "./dist",
+    "useUnknownInCatchVariables": false,
+    "types": ["vitest/globals"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "strictNullChecks": true
+  }
+}

package/vitest.config.mts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+  test: {},
+});

package/dist/es/collapsible-card/index.js

@@ -1,45 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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";
-function CollapsibleCard({
-  title,
-  children,
-  actionBtns,
-  className,
-  style,
-  isExpand,
-  setIsExpand,
-  hideExpand
-}) {
-  return /* @__PURE__ */ jsxs(Card, { className: cn(styles.card, className), style, bordered: false, children: [
-    title || actionBtns ? /* @__PURE__ */ jsxs("div", { className: styles["card-header"], children: [
-      /* @__PURE__ */ jsxs(Typography.Text, { className: styles["card-title"], children: [
-        title,
-        children && !hideExpand ? /* @__PURE__ */ jsx(
-          IconCozArrowUpFill,
-          {
-            className: cn(styles["chevron-icon"], {
-              [styles["chevron-icon-close"]]: !isExpand
-            }),
-            onClick: () => setIsExpand == null ? void 0 : setIsExpand(!isExpand)
-          }
-        ) : null
-      ] }),
-      /* @__PURE__ */ jsx("div", { children: actionBtns })
-    ] }) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(styles["card-content"], {
-          [styles.active]: isExpand
-        }),
-        children
-      }
-    )
-  ] });
-}
-export {
-  CollapsibleCard
-};

package/dist/es/collapsible-card/index.module.js

@@ -1,5 +0,0 @@
-import "./index_module.css";
-var index_module_default = { "card": "card_42a41", "card-header": "card-header_42a41", "card-title": "card-title_42a41", "chevron-icon": "chevron-icon_42a41", "chevron-icon-close": "chevron-icon-close_42a41", "card-content": "card-content_42a41", "active": "active_42a41" };
-export {
-  index_module_default as default
-};

package/dist/es/collapsible-card/index_module.css

@@ -1,48 +0,0 @@
-/* stylelint-disable declaration-no-important */
-.card_42a41 {
-  background: transparent !important;
-  border-radius: 0 !important;
-}
-.card_42a41 .semi-card-body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  box-sizing: border-box;
-  height: 100%;
-  padding: 0;
-}
-.card_42a41 .card-header_42a41 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 24px;
-  min-height: 24px;
-  padding: 10px 20px 0;
-}
-.card_42a41 .card-title_42a41 {
-  position: relative;
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  font-weight: 600;
-}
-.card_42a41 .card-title_42a41 .chevron-icon_42a41 {
-  cursor: pointer;
-  transition: transform 0.3s;
-}
-.card_42a41 .card-title_42a41 .chevron-icon_42a41.chevron-icon-close_42a41 {
-  transform: rotate(180deg);
-}
-.card_42a41 .card-title_42a41 .chevron-icon_42a41:hover {
-  color: var(--semi-color-primary);
-}
-.card_42a41 .card-content_42a41 {
-  height: 0;
-  opacity: 0;
-  transition: height 0.2s, opacity 0.2s;
-}
-.card_42a41 .card-content_42a41.active_42a41 {
-  overflow: hidden;
-  height: 100%;
-  opacity: 1;
-}

package/dist/es/column-manage-storage/index.js

@@ -1,73 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isEmpty } from "lodash-es";
-import { safeJsonParse } from "@cozeloop/toolkit";
-const DATASET_COLUMN_STORAGE_KEY = "dataset-column";
-const getColumnManageStorage = (storageKey) => {
-  const storage = localStorage.getItem(storageKey);
-  return safeJsonParse(storage || "{}") || {};
-};
-const setColumnsManageStorage = (storageKey, columns) => {
-  if (!storageKey) {
-    return;
-  }
-  const data = {};
-  columns.forEach((column, index) => {
-    var _a;
-    data[column.key] = {
-      index,
-      checked: (_a = column.checked) != null ? _a : true
-    };
-  });
-  localStorage.setItem(storageKey, JSON.stringify(data));
-};
-const dealColumnsWithStorage = (storageKey, columns) => {
-  const sort = getColumnManageStorage(storageKey);
-  if (!sort || isEmpty(sort)) {
-    return columns;
-  }
-  const newColumns = [...columns || []].sort((a, b) => {
-    var _a, _b, _c, _d;
-    const indexA = (_b = (_a = sort[a.key]) == null ? void 0 : _a.index) != null ? _b : Infinity;
-    const indexB = (_d = (_c = sort[b.key]) == null ? void 0 : _c.index) != null ? _d : Infinity;
-    if (indexA !== Infinity && indexB !== Infinity) {
-      return indexA - indexB;
-    }
-    if (indexA !== Infinity) {
-      return -1;
-    }
-    if (indexB !== Infinity) {
-      return 1;
-    }
-    return 0;
-  });
-  return newColumns.map((column) => {
-    var _a, _b;
-    return __spreadProps(__spreadValues({}, column), {
-      checked: (_b = (_a = sort[column.key]) == null ? void 0 : _a.checked) != null ? _b : true
-    });
-  });
-};
-export {
-  DATASET_COLUMN_STORAGE_KEY,
-  dealColumnsWithStorage,
-  getColumnManageStorage,
-  setColumnsManageStorage
-};