feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/common/utils/src/components/data-type-select/index.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useState } from 'react';
+
+import { I18n } from '@coze-arch/i18n';
+import { ColumnType } from '@coze-arch/bot-api/knowledge';
+
+import SinglelineSelect, {
+  type SinglelineSelectProps,
+} from '../singleline-select';
+
+export const getDataTypeText = (value: ColumnType) => {
+  const dataTypes = {
+    [ColumnType.Unknown]: 'Unknown',
+    [ColumnType.Text]: I18n.t('db_add_table_field_type_txt'),
+    [ColumnType.Number]: I18n.t('db_add_table_field_type_int'),
+    [ColumnType.Date]: I18n.t('db_add_table_field_type_time'),
+    [ColumnType.Float]: I18n.t('db_add_table_field_type_number'),
+    [ColumnType.Boolean]: I18n.t('db_add_table_field_type_bool'),
+    [ColumnType.Image]: I18n.t('knowledge_insert_img_010'),
+  };
+  return dataTypes[value] || '';
+};
+export const getDataTypeOptions = () => [
+  { value: ColumnType.Text, label: getDataTypeText(ColumnType.Text) },
+  { value: ColumnType.Number, label: getDataTypeText(ColumnType.Number) },
+  { value: ColumnType.Date, label: getDataTypeText(ColumnType.Date) },
+  { value: ColumnType.Float, label: getDataTypeText(ColumnType.Float) },
+  { value: ColumnType.Boolean, label: getDataTypeText(ColumnType.Boolean) },
+  { value: ColumnType.Image, label: getDataTypeText(ColumnType.Image) },
+];
+
+export const DataTypeSelect = (props: SinglelineSelectProps) => {
+  const [selectValue, setSelectValue] = useState<
+    SinglelineSelectProps['value']
+  >(props.value);
+  return (
+    <SinglelineSelect
+      value={selectValue}
+      selectProps={{
+        ...props.selectProps,
+        optionList: props.selectProps?.optionList || getDataTypeOptions(),
+      }}
+      errorMsg={props.errorMsg}
+      handleChange={v => {
+        setSelectValue(v as SinglelineSelectProps['value']);
+        props.handleChange?.(v);
+      }}
+    />
+  );
+};

frontend/packages/data/common/utils/src/components/input-with-count/index.module.less

@@ -0,0 +1,12 @@
+.limit-count {
+  overflow: hidden;
+
+  padding-right: 12px;
+  padding-left: 8px;
+
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 16px;
+  color: var(--coz-fg-secondary);
+}

frontend/packages/data/common/utils/src/components/input-with-count/index.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useMemo } from 'react';
+
+import { Input, type InputProps, withField } from '@coze-arch/coze-design';
+import 'utility-types';
+
+import s from './index.module.less';
+
+interface LimitCountProps {
+  maxLen: number;
+  len: number;
+}
+
+const LimitCount: React.FC<LimitCountProps> = ({ maxLen, len }) => (
+  <span className={s['limit-count']}>
+    <span>{len}</span>
+    <span>/</span>
+    <span>{maxLen}</span>
+  </span>
+);
+
+export interface InputWithCountProps extends InputProps {
+  // 设置字数限制并显示字数统计
+  getValueLength?: (value?: InputProps['value'] | string) => number;
+}
+
+export const InputWithCount: React.FC<InputWithCountProps> = props => {
+  const { value, maxLength, getValueLength } = props;
+
+  const len = useMemo(() => {
+    if (getValueLength) {
+      return getValueLength(value);
+    } else if (value) {
+      return value.toString().length;
+    } else {
+      return 0;
+    }
+  }, [value, getValueLength]);
+
+  return (
+    <Input
+      {...props}
+      autoComplete="off"
+      suffix={
+        Boolean(maxLength) && <LimitCount maxLen={maxLength ?? 0} len={len} />
+      }
+    />
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const CozeInputWithCountField: any = withField(InputWithCount);

frontend/packages/data/common/utils/src/components/singleline-select/index.module.less

@@ -0,0 +1,32 @@
+/* stylelint-disable declaration-no-important */
+.select-wapper {
+  width: 100%;
+
+  span {
+    width: 100%;
+  }
+
+  :global(.singleline-select-error-content) {
+    height: 20px;
+  }
+
+  :global(.select-error-text) {
+    position: absolute;
+    z-index: 100;
+
+    padding-top: 2px;
+    padding-left: 12px;
+
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--coz-fg-hglt-red);
+  }
+}
+
+.error-wapper {
+  :global {
+    .semi-select {
+      border: 1px solid var(--coz-fg-hglt-red) !important;
+    }
+  }
+}

frontend/packages/data/common/utils/src/components/singleline-select/index.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import cs from 'classnames';
+import { useReactive } from 'ahooks';
+import { Select, type SelectProps } from '@coze-arch/coze-design';
+import type { InputProps } from '@coze-arch/bot-semi/Input';
+import { CommonE2e } from '@coze-data/e2e';
+
+import s from './index.module.less';
+
+export interface SLSelectRefType {
+  triggerFocus?: () => void;
+}
+
+export type SinglelineSelectProps = InputProps & {
+  value: SelectProps['value'];
+  handleChange?: (v: SelectProps['value']) => void;
+  errorMsg?: string;
+  selectProps?: SelectProps;
+};
+
+export const SinglelineSelect: React.FC<SinglelineSelectProps> = props => {
+  const $state = useReactive({
+    value: props.value,
+  });
+
+  return (
+    <div
+      data-testid={CommonE2e.CommonDataTypeSelect}
+      className={cs(
+        s['select-wapper'],
+        props?.errorMsg ? s['error-wapper'] : null,
+      )}
+    >
+      <Select
+        {...props.selectProps}
+        style={{ width: '100%' }}
+        clickToHide={true}
+        value={$state.value}
+        onChange={v => {
+          ($state.value as SelectProps['value']) = v;
+          props?.handleChange?.(v);
+        }}
+      />
+      {props?.errorMsg ? (
+        <div className="singleline-select-error-content">
+          <div className="select-error-text">{props?.errorMsg}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default SinglelineSelect;

frontend/packages/data/common/utils/src/components/text-area/index.module.less

@@ -0,0 +1,21 @@
+/* stylelint-disable declaration-no-important */
+
+div.field {
+  padding-bottom: 24px !important;
+
+  &:has(:global(.semi-form-field-error-message)) {
+    padding-bottom: 0 !important;
+  }
+
+  :global {
+    .semi-form-field-error-message {
+      margin-top: 4px;
+      line-height: 20px;
+    }
+
+    .semi-input-textarea-counter {
+      padding-right: 5px!important;
+      padding-left: 5px;
+    }
+  }
+}

frontend/packages/data/common/utils/src/components/text-area/index.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { forwardRef } from 'react';
+
+import cs from 'classnames';
+import { TextArea, withField } from '@coze-arch/coze-design';
+
+import s from './index.module.less';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TextAreaInner: any = withField(TextArea, {});
+export const CozeFormTextArea: typeof TextAreaInner = forwardRef(
+  // @ts-expect-error -- to fix
+  ({ fieldClassName, ...props }, ref) => (
+    <TextAreaInner
+      ref={ref}
+      {...props}
+      fieldClassName={cs(fieldClassName, s.field)}
+    />
+  ),
+);