@tendaui/components 1.0.0 → 1.2.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 TendaUI
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 TendaUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,176 +1,176 @@
-# @tendaui/components
-
-TendaUI React 组件库的源代码包，包含所有 UI 组件的实现。
-
-## 📦 安装
-
-在 monorepo 的其他包中使用 `workspace` 协议安装：
-
-```bash
-pnpm add @tendaui/components@workspace:*
-```
-
-## 🔗 在其他包中使用
-
-### 1. 在 package.json 中添加依赖
-
-```json
-{
-  "dependencies": {
-    "@tendaui/components": "workspace:*"
-  }
-}
-```
-
-### 2. 在代码中导入使用
-
-#### 导入单个组件
-
-```tsx
-import { Button } from "@tendaui/components";
-import "@tendaui/components/button/style";
-
-function App() {
-  return <Button type="primary">点击我</Button>;
-}
-```
-
-#### 导入多个组件
-
-```tsx
-import { Button, Input, Form } from "@tendaui/components";
-import "@tendaui/components/styles/globals.css";
-
-function App() {
-  return (
-    <Form>
-      <Input placeholder="请输入" />
-      <Button type="primary">提交</Button>
-    </Form>
-  );
-}
-```
-
-#### 按需导入组件
-
-```tsx
-// 导入单个组件的所有导出
-import Button from "@tendaui/components/button";
-import "@tendaui/components/button/style";
-
-// 或者导入特定文件
-import { Button } from "@tendaui/components/button";
-```
-
-#### 导入 Hooks
-
-```tsx
-import { useConfig, useControlled } from "@tendaui/components/hooks";
-```
-
-#### 导入工具函数
-
-```tsx
-import { composeRefs, parseTNode } from "@tendaui/components/utils";
-```
-
-## 📝 TypeScript 支持
-
-如果需要在 TypeScript 项目中使用，可以在 `tsconfig.json` 中添加路径映射：
-
-```json
-{
-  "compilerOptions": {
-    "paths": {
-      "@tendaui/components": ["../../packages/components"],
-      "@tendaui/components/*": ["../../packages/components/*"]
-    }
-  }
-}
-```
-
-## 🎯 使用场景
-
-### 场景 1: 在 `tendaui-react` 包中使用
-
-`tendaui-react` 包可以依赖 `@tendaui/components` 来构建最终发布的包：
-
-```json
-{
-  "name": "tendaui-react",
-  "dependencies": {
-    "@tendaui/components": "workspace:*"
-  }
-}
-```
-
-### 场景 2: 在文档包中使用
-
-在 Storybook 或其他文档工具中直接使用组件：
-
-```tsx
-import { Button } from "@tendaui/components";
-import { Meta, Story } from "@storybook/react";
-
-export default {
-  title: "Components/Button",
-  component: Button
-} as Meta;
-```
-
-### 场景 3: 在测试中使用
-
-在测试文件中导入组件进行测试：
-
-```tsx
-import { render, screen } from "@testing-library/react";
-import { Button } from "@tendaui/components";
-
-test("renders button", () => {
-  render(<Button>Test</Button>);
-  expect(screen.getByText("Test")).toBeInTheDocument();
-});
-```
-
-## 📋 可用组件
-
-- `Alert` - 警告提示
-- `Badge` - 徽标
-- `Button` - 按钮
-- `Checkbox` - 复选框
-- `ConfigProvider` - 全局配置
-- `Dialog` - 对话框
-- `Form` - 表单
-- `Input` - 输入框
-- `Loading` - 加载中
-- `Notification` - 通知
-- `Popup` - 弹出层
-- `Select` - 选择器
-- `SelectInput` - 选择输入框
-- `Switch` - 开关
-- `Tag` - 标签
-- `TagInput` - 标签输入框
-
-## 🔧 开发
-
-### 本地开发
-
-由于这是一个源代码包，修改组件代码后，使用它的包会自动看到更改（如果配置了正确的构建工具）。
-
-### 构建
-
-如果需要构建这个包，可以添加构建脚本：
-
-```json
-{
-  "scripts": {
-    "build": "tsc --build"
-  }
-}
-```
-
-## 📚 相关文档
-
-- [Monorepo 最佳实践](../../MONOREPO.md)
-- [发布指南](../../PUBLISH.md)
-- [Lerna 使用指南](../../LERNA.md)
+# @tendaui/components
+
+TendaUI React 组件库的源代码包，包含所有 UI 组件的实现。
+
+## 📦 安装
+
+在 monorepo 的其他包中使用 `workspace` 协议安装：
+
+```bash
+pnpm add @tendaui/components@workspace:*
+```
+
+## 🔗 在其他包中使用
+
+### 1. 在 package.json 中添加依赖
+
+```json
+{
+  "dependencies": {
+    "@tendaui/components": "workspace:*"
+  }
+}
+```
+
+### 2. 在代码中导入使用
+
+#### 导入单个组件
+
+```tsx
+import { Button } from "@tendaui/components";
+import "@tendaui/components/button/style";
+
+function App() {
+  return <Button type="primary">点击我</Button>;
+}
+```
+
+#### 导入多个组件
+
+```tsx
+import { Button, Input, Form } from "@tendaui/components";
+import "@tendaui/components/styles/globals.css";
+
+function App() {
+  return (
+    <Form>
+      <Input placeholder="请输入" />
+      <Button type="primary">提交</Button>
+    </Form>
+  );
+}
+```
+
+#### 按需导入组件
+
+```tsx
+// 导入单个组件的所有导出
+import Button from "@tendaui/components/button";
+import "@tendaui/components/button/style";
+
+// 或者导入特定文件
+import { Button } from "@tendaui/components/button";
+```
+
+#### 导入 Hooks
+
+```tsx
+import { useConfig, useControlled } from "@tendaui/components/hooks";
+```
+
+#### 导入工具函数
+
+```tsx
+import { composeRefs, parseTNode } from "@tendaui/components/utils";
+```
+
+## 📝 TypeScript 支持
+
+如果需要在 TypeScript 项目中使用，可以在 `tsconfig.json` 中添加路径映射：
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "@tendaui/components": ["../../packages/components"],
+      "@tendaui/components/*": ["../../packages/components/*"]
+    }
+  }
+}
+```
+
+## 🎯 使用场景
+
+### 场景 1: 在 `tendaui-react` 包中使用
+
+`tendaui-react` 包可以依赖 `@tendaui/components` 来构建最终发布的包：
+
+```json
+{
+  "name": "tendaui-react",
+  "dependencies": {
+    "@tendaui/components": "workspace:*"
+  }
+}
+```
+
+### 场景 2: 在文档包中使用
+
+在 Storybook 或其他文档工具中直接使用组件：
+
+```tsx
+import { Button } from "@tendaui/components";
+import { Meta, Story } from "@storybook/react";
+
+export default {
+  title: "Components/Button",
+  component: Button
+} as Meta;
+```
+
+### 场景 3: 在测试中使用
+
+在测试文件中导入组件进行测试：
+
+```tsx
+import { render, screen } from "@testing-library/react";
+import { Button } from "@tendaui/components";
+
+test("renders button", () => {
+  render(<Button>Test</Button>);
+  expect(screen.getByText("Test")).toBeInTheDocument();
+});
+```
+
+## 📋 可用组件
+
+- `Alert` - 警告提示
+- `Badge` - 徽标
+- `Button` - 按钮
+- `Checkbox` - 复选框
+- `ConfigProvider` - 全局配置
+- `Dialog` - 对话框
+- `Form` - 表单
+- `Input` - 输入框
+- `Loading` - 加载中
+- `Notification` - 通知
+- `Popup` - 弹出层
+- `Select` - 选择器
+- `SelectInput` - 选择输入框
+- `Switch` - 开关
+- `Tag` - 标签
+- `TagInput` - 标签输入框
+
+## 🔧 开发
+
+### 本地开发
+
+由于这是一个源代码包，修改组件代码后，使用它的包会自动看到更改（如果配置了正确的构建工具）。
+
+### 构建
+
+如果需要构建这个包，可以添加构建脚本：
+
+```json
+{
+  "scripts": {
+    "build": "tsc --build"
+  }
+}
+```
+
+## 📚 相关文档
+
+- [Monorepo 最佳实践](../../MONOREPO.md)
+- [发布指南](../../PUBLISH.md)
+- [Lerna 使用指南](../../LERNA.md)

package/alert/Alert.tsx

@@ -18,6 +18,7 @@ import { StyledProps } from "../common";
 import { alertDefaultProps } from "./defaultProps";
 import composeRefs from "../utils/composeRefs";
 import useDefaultProps from "../hooks/useDefaultProps";
+import { useLocaleReceiver } from "../locale/LocalReceiver";
 
 const transitionTime = 200;
 
@@ -25,7 +26,7 @@ export interface AlertProps extends TdAlertProps, StyledProps {}
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
   const { classPrefix } = useConfig();
-  // const [local, t] = useLocaleReceiver('alert');
+  const [local, t] = useLocaleReceiver("alert");
   const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } = useGlobalIcon({
     CloseIcon: TdCloseIcon,
     InfoCircleFilledIcon: TdInfoCircleFilledIcon,
@@ -88,7 +89,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
           })}
           {+maxLine < message.length && (
             <div className={`${classPrefix}-alert__collapse`} onClick={handleCollapse}>
-              {collapsed ? "展开" : "收起"}
+              {collapsed ? t(local.expandText) : t(local.collapseText)}
             </div>
           )}
         </div>

package/button/_example/base.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+
+export default function Base() {
+  return (
+    <div style={{ display: "flex", gap: "8px" }}>
+      <Button theme="primary">Primary</Button>
+    </div>
+  );
+}

package/button/_example/icon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Button } from "@tendaui/react";
+import { IconArrowLeft, IconDelete, IconAlertTriangle, IconCheckCircleStroked } from "@tendaui/icons";
+
+export default function Icon() {
+  return (
+    <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+      <Button icon={<IconArrowLeft />}>默认按钮</Button>
+      <Button icon={<IconAlertTriangle />} theme="warning">
+        警告按钮
+      </Button>
+      <Button icon={<IconDelete />} theme="danger">
+        危险按钮
+      </Button>
+      <Button theme="success" icon={<IconCheckCircleStroked />}>
+        成功按钮
+      </Button>
+    </div>
+  );
+}

package/color-picker/ColorPickPanel.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ColorPanel from "./components/panel";
+import { ColorPickerProps } from "./type";
+
+const ColorPickerPanel: React.FC<ColorPickerProps> = (props) => <ColorPanel {...props} popupProps={null} />;
+
+ColorPickerPanel.displayName = "ColorPickerPanel";
+
+export default React.memo(ColorPickerPanel);

package/color-picker/ColorPicker.tsx

@@ -0,0 +1,67 @@
+import React, { useRef } from "react";
+import classNames from "classnames";
+import { Popup, PopupProps } from "../popup";
+import { ColorPickerProps, TdColorContext } from "./type";
+import useClassName from "./hooks/useClassNames";
+import useControlled from "../hooks/useControlled";
+import ColorTrigger from "./components/trigger";
+import ColorPanel from "./components/panel/index";
+import { colorPickerDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+const ColorPicker: React.FC<ColorPickerProps> = (props) => {
+  const baseClassName = useClassName();
+  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, ...panelProps } =
+    useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
+  const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
+
+  const [innerValue, setInnerValue] = useControlled(props, "value", onChange);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const colorPanelRef = useRef<HTMLDivElement>(null);
+
+  const popProps: PopupProps = {
+    placement: "bottom-left",
+    expandAnimation: true,
+    trigger: "click",
+    ...restPopupProps,
+    overlayClassName: classNames(baseClassName, overlayClassName),
+    overlayInnerStyle: {
+      padding: 0,
+      ...overlayInnerStyle
+    }
+  };
+
+  return (
+    <Popup
+      {...popProps}
+      content={
+        !disabled && (
+          <ColorPanel
+            {...panelProps}
+            clearable={clearable}
+            disabled={disabled}
+            value={innerValue}
+            onChange={(value: string, context: TdColorContext) => setInnerValue(value, context)}
+            ref={colorPanelRef}
+          />
+        )
+      }
+    >
+      <div className={`${baseClassName}__trigger`} ref={triggerRef}>
+        <ColorTrigger
+          clearable={clearable}
+          disabled={disabled}
+          borderless={borderless}
+          inputProps={inputProps}
+          value={innerValue}
+          onChange={setInnerValue}
+          onClear={onClear}
+        />
+      </div>
+    </Popup>
+  );
+};
+
+ColorPicker.displayName = "ColorPicker";
+
+export default React.memo(ColorPicker);

package/color-picker/components/panel/alpha.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import classNames from "classnames";
+import type { TdColorBaseProps } from "../../type";
+import ColorSlider from "./slider";
+
+const Alpha = (props: TdColorBaseProps) => {
+  const { color, baseClassName, onChange, ...rest } = props;
+
+  const handleChange = (v: number) => {
+    onChange?.(v / 100);
+  };
+
+  const railStyle = {
+    background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${props.color.rgb})`
+  };
+
+  return (
+    <ColorSlider
+      baseClassName={baseClassName}
+      className={classNames([`${baseClassName}__alpha`, `${baseClassName}--bg-alpha`])}
+      color={color}
+      value={color.alpha * 100}
+      onChange={handleChange}
+      railStyle={railStyle}
+      type="alpha"
+      maxValue={100}
+      {...rest}
+    />
+  );
+};
+
+export default React.memo(Alpha);

package/color-picker/components/panel/format/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { Color, getColorFormatOptions } from "../../../utils/color-picker";
+import Select from "../../../../select";
+import type { TdColorPickerProps } from "../../../type";
+import FormatInputs from "./inputs";
+
+export interface TdColorFormatProps extends TdColorPickerProps {
+  onInputChange: () => void;
+  baseClassName: string;
+  color: Color;
+}
+
+const FormatPanel = (props: TdColorFormatProps) => {
+  const { enableAlpha, baseClassName, format, selectInputProps } = props;
+  const [formatMode, setFormatMode] = useState(format);
+
+  const handleModeChange = (v: TdColorPickerProps["format"]) => {
+    setFormatMode(v);
+  };
+
+  return (
+    <div className={`${baseClassName}__format`}>
+      <div className={`${baseClassName}__format--item`}>
+        <Select
+          size="small"
+          className={`${baseClassName}__format-mode-select`}
+          popupProps={{
+            overlayClassName: `${baseClassName}__select-options`,
+            ...selectInputProps?.popupProps
+          }}
+          autoWidth
+          value={formatMode}
+          onChange={handleModeChange}
+        >
+          {getColorFormatOptions(enableAlpha).map((item) => (
+            <Select.Option key={item} value={item} label={item} style={{ fontSize: "12px" }} />
+          ))}
+        </Select>
+      </div>
+      <div className={`${baseClassName}__format--item`}>
+        <FormatInputs {...props} format={formatMode} />
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(FormatPanel);