@tendaui/components 1.0.0

package/LICENSE

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

package/README.md

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

package/alert/Alert.tsx

@@ -0,0 +1,147 @@
+import React, { forwardRef, useRef } from "react";
+import classNames from "classnames";
+import {
+  IconClose as TdCloseIcon,
+  IconInfoCircle as TdInfoCircleFilledIcon,
+  IconCheckCircleStroked as TdCheckCircleFilledIcon,
+  IconAlertTriangle as TdErrorCircleFilledIcon
+} from "@tendaui/icons";
+
+import { CSSTransition } from "react-transition-group";
+import parseTNode from "../utils/parseTNode";
+import noop from "../utils/noop";
+
+import useConfig from "../hooks/useConfig";
+import useGlobalIcon from "../hooks/useGlobalIcon";
+import { TdAlertProps } from "./type";
+import { StyledProps } from "../common";
+import { alertDefaultProps } from "./defaultProps";
+import composeRefs from "../utils/composeRefs";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+const transitionTime = 200;
+
+export interface AlertProps extends TdAlertProps, StyledProps {}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const { classPrefix } = useConfig();
+  // const [local, t] = useLocaleReceiver('alert');
+  const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } = useGlobalIcon({
+    CloseIcon: TdCloseIcon,
+    InfoCircleFilledIcon: TdInfoCircleFilledIcon,
+    CheckCircleFilledIcon: TdCheckCircleFilledIcon,
+    ErrorCircleFilledIcon: TdErrorCircleFilledIcon
+  });
+
+  const {
+    message,
+    title,
+    operation,
+    theme,
+    icon,
+    closeBtn,
+    maxLine,
+    onClose,
+    className,
+    onClosed = noop,
+    ...alertProps
+  } = useDefaultProps(props, alertDefaultProps);
+
+  const [closed, setClosed] = React.useState(false);
+  const [collapsed, setCollapsed] = React.useState(true);
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  const iconMap = {
+    success: CheckCircleFilledIcon,
+    info: InfoCircleFilledIcon,
+    error: ErrorCircleFilledIcon,
+    warning: ErrorCircleFilledIcon
+  };
+
+  const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
+    setClosed(true);
+    onClose?.({ e });
+  };
+
+  const handleCollapse = () => {
+    setCollapsed((collapsed) => !collapsed);
+  };
+
+  const renderIconNode = () => {
+    if (React.isValidElement(icon)) return icon;
+    return React.createElement(iconMap[theme], { className: "t-icon" });
+  };
+
+  const renderMessage = () => {
+    if (+maxLine > 0 && Array.isArray(message)) {
+      return (
+        <div className={`${classPrefix}-alert__description`}>
+          {message.map((item, index) => {
+            if (collapsed) {
+              if (index < +maxLine) {
+                return <div key={index}>{item}</div>;
+              }
+            } else {
+              return <div key={index}>{item}</div>;
+            }
+            return true;
+          })}
+          {+maxLine < message.length && (
+            <div className={`${classPrefix}-alert__collapse`} onClick={handleCollapse}>
+              {collapsed ? "展开" : "收起"}
+            </div>
+          )}
+        </div>
+      );
+    }
+    return <div className={`${classPrefix}-alert__description`}>{message}</div>;
+  };
+
+  // close 属性变更为 closeBtn，close废弃后可删除。（需兼容标签上直接写close和closeBtn的场景）
+  const isUsingClose = Reflect.has(props, "close");
+  const closeNode = isUsingClose ? props.closeBtn : closeBtn;
+  if (isUsingClose) {
+    console.warn("TAlert", "prop `close` is going to be deprecated, please use `closeBtn` instead.");
+  }
+  const renderClose = () => {
+    if (closeNode === false) return null;
+    return (
+      <div className={`${classPrefix}-alert__close`} onClick={handleClose}>
+        {parseTNode(closeNode, undefined, <CloseIcon className="t-icon"></CloseIcon>)}
+      </div>
+    );
+  };
+
+  return (
+    <CSSTransition
+      in={!closed}
+      unmountOnExit
+      classNames={{
+        exitActive: `${classPrefix}-alert--closing`
+      }}
+      nodeRef={nodeRef}
+      timeout={transitionTime}
+      onExited={onClosed}
+    >
+      <div
+        ref={composeRefs(ref, nodeRef)}
+        className={classNames(`${classPrefix}-alert`, `${classPrefix}-alert--${theme}`, className)}
+        {...alertProps}
+      >
+        <div className={`${classPrefix}-alert__icon`}>{renderIconNode()}</div>
+        <div className={`${classPrefix}-alert__content`}>
+          {title ? <div className={`${classPrefix}-alert__title`}>{title}</div> : null}
+          <div className={`${classPrefix}-alert__message`}>
+            {renderMessage()}
+            {operation ? <div className={`${classPrefix}-alert__operation`}>{parseTNode(operation)}</div> : null}
+          </div>
+        </div>
+        {renderClose()}
+      </div>
+    </CSSTransition>
+  );
+});
+
+Alert.displayName = "Alert";
+
+export default Alert;

package/alert/defaultProps.ts

@@ -0,0 +1,3 @@
+import { TdAlertProps } from "./type";
+
+export const alertDefaultProps: TdAlertProps = { closeBtn: false, maxLine: 0, theme: "info" };

package/alert/index.ts

@@ -0,0 +1,9 @@
+import _Alert from "./Alert";
+
+import "./style/index.js";
+
+export type { AlertProps } from "./Alert";
+export * from "./type";
+
+export const Alert = _Alert;
+export default Alert;

package/alert/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/alert/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/alert/_index.scss";

package/alert/type.ts

@@ -0,0 +1,44 @@
+import { TNode, TElement } from "../common";
+import { MouseEvent } from "react";
+
+export interface TdAlertProps {
+  /**
+   * 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
+   * @default false
+   */
+  closeBtn?: TNode;
+  /**
+   * 图标
+   */
+  icon?: TElement;
+  /**
+   * 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠
+   * @default 0
+   */
+  maxLine?: number;
+  /**
+   * 内容（子元素）
+   */
+  message?: TNode;
+  /**
+   * 跟在告警内容后面的操作区
+   */
+  operation?: TElement;
+  /**
+   * 组件风格
+   * @default info
+   */
+  theme?: "success" | "info" | "warning" | "error";
+  /**
+   * 标题
+   */
+  title?: TNode;
+  /**
+   * 关闭按钮点击时触发
+   */
+  onClose?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
+  /**
+   * 告警提示框关闭动画结束后触发
+   */
+  onClosed?: () => void;
+}

package/badge/Badge.tsx

@@ -0,0 +1,85 @@
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import { StyledProps } from "../common";
+import useConfig from "../hooks/useConfig";
+import { TdBadgeProps } from "./type";
+import { badgeDefaultProps } from "./defaultProps";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface BadgeProps extends TdBadgeProps, StyledProps {}
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  const {
+    color,
+    dot,
+    maxCount,
+    count,
+    size,
+    shape,
+    showZero,
+    offset,
+    className,
+    content,
+    children,
+    style,
+    ...restProps
+  } = useDefaultProps<BadgeProps>(props, badgeDefaultProps);
+  const { classPrefix } = useConfig();
+
+  const childNode = content || children;
+
+  const badgeClassName = classNames(
+    !childNode && `${classPrefix}-badge--static`,
+    dot ? `${classPrefix}-badge--dot` : `${classPrefix}-badge--${shape}`,
+    size === "small" && `${classPrefix}-size-s`,
+    !childNode && className
+  );
+  const getDisplayCount = () => {
+    if (typeof count === "number" && count > maxCount) {
+      return `${maxCount}+`;
+    }
+    return count;
+  };
+
+  let isHidden = !count;
+  if (typeof count === "number") {
+    isHidden = count < 1 && !showZero;
+  }
+
+  const getStyle = () => {
+    const mergedStyle: React.CSSProperties = { ...style };
+    if (color) {
+      mergedStyle.backgroundColor = color;
+    }
+    if (offset) {
+      if (offset[0]) {
+        mergedStyle.right = +offset[0];
+      }
+      if (offset[1]) {
+        mergedStyle.marginTop = +offset[1];
+      }
+    }
+    return mergedStyle;
+  };
+
+  const badge = !isHidden ? (
+    <span {...(childNode ? {} : restProps)} className={badgeClassName} style={getStyle()}>
+      {!dot ? getDisplayCount() : null}
+    </span>
+  ) : null;
+
+  if (!childNode) {
+    return badge;
+  }
+
+  return (
+    <span {...restProps} className={classNames(`${classPrefix}-badge`, className)} ref={ref}>
+      {childNode}
+      {badge}
+    </span>
+  );
+});
+
+Badge.displayName = "Badge";
+
+export default Badge;

package/badge/defaultProps.ts

@@ -0,0 +1,10 @@
+import { TdBadgeProps } from "./type";
+
+export const badgeDefaultProps: TdBadgeProps = {
+  count: 0,
+  dot: false,
+  maxCount: 99,
+  shape: "circle",
+  showZero: false,
+  size: "medium"
+};

package/badge/index.ts

@@ -0,0 +1,9 @@
+import _Badge from "./Badge";
+
+import "./style/index.js";
+
+export type { BadgeProps } from "./Badge";
+export * from "./type";
+
+export const Badge = _Badge;
+export default Badge;

package/badge/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/badge/style/index.js

@@ -0,0 +1 @@
+import "../../styles/components/badge/_index.scss";

package/badge/type.ts

@@ -0,0 +1,51 @@
+import { TNode } from "../common";
+
+export interface TdBadgeProps {
+  /**
+   * 徽标内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 徽标内容
+   */
+  content?: TNode;
+  /**
+   * 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+
+   * @default 0
+   */
+  count?: TNode;
+  /**
+   * 是否为红点
+   * @default false
+   */
+  dot?: boolean;
+  /**
+   * 封顶的数字值
+   * @default 99
+   */
+  maxCount?: number;
+  /**
+   * 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']
+   */
+  offset?: Array<string | number>;
+  /**
+   * 形状
+   * @default circle
+   */
+  shape?: "circle" | "round";
+  /**
+   * 当数值为 0 时，是否展示徽标
+   * @default false
+   */
+  showZero?: boolean;
+  /**
+   * 尺寸
+   * @default medium
+   */
+  size?: "small" | "medium";
+}

package/button/Button.tsx

@@ -0,0 +1,95 @@
+import React, { useMemo, forwardRef } from "react";
+import classNames from "classnames";
+import useConfig from "../hooks/useConfig";
+import Loading from "../loading";
+import { TdButtonProps } from "./type";
+import { buttonDefaultProps } from "./defaultProps";
+import parseTNode from "../utils/parseTNode";
+import useDefaultProps from "../hooks/useDefaultProps";
+
+export interface ButtonProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, "content" | "shape" | "size" | "type" | "children">,
+    TdButtonProps {}
+
+const Button = forwardRef((originProps: ButtonProps, ref: React.ForwardedRef<HTMLElement>) => {
+  const props = useDefaultProps(originProps, buttonDefaultProps);
+  const {
+    type,
+    theme,
+    variant,
+    icon,
+    disabled,
+    loading,
+    size,
+    block,
+    ghost,
+    shape,
+    children,
+    content,
+    className,
+    suffix,
+    href,
+    tag,
+    onClick,
+    ...buttonProps
+  } = props;
+
+  const { classPrefix } = useConfig();
+
+  const renderChildren = content ?? children;
+
+  let iconNode = icon;
+  if (loading) iconNode = <Loading loading={loading} inheritColor={true} />;
+
+  const renderTheme = useMemo(() => {
+    if (!theme) {
+      if (variant === "base") return "primary";
+      return "default";
+    }
+    return theme;
+  }, [theme, variant]);
+
+  const renderTag = useMemo(() => {
+    if (!tag && href && !disabled) return "a";
+    if (!tag && disabled) return "div";
+    return tag || "button";
+  }, [tag, href, disabled]);
+
+  return React.createElement(
+    renderTag,
+    {
+      ...buttonProps,
+      href,
+      type,
+      ref,
+      disabled: disabled || loading,
+      className: classNames(
+        className,
+        [
+          `${classPrefix}-button`,
+          `${classPrefix}-button--theme-${renderTheme}`,
+          `${classPrefix}-button--variant-${variant}`
+        ],
+        {
+          [`${classPrefix}-button--shape-${shape}`]: shape !== "rectangle",
+          [`${classPrefix}-button--ghost`]: ghost,
+          [`${classPrefix}-is-loading`]: loading,
+          [`${classPrefix}-is-disabled`]: disabled,
+          [`${classPrefix}-size-s`]: size === "small",
+          [`${classPrefix}-size-l`]: size === "large",
+          [`${classPrefix}-size-full-width`]: block
+        }
+      ),
+      onClick: !disabled && !loading ? onClick : undefined
+    },
+    <>
+      {iconNode}
+      {renderChildren && <span className={`${classPrefix}-button__text`}>{renderChildren}</span>}
+      {suffix && <span className={`${classPrefix}-button__suffix`}>{parseTNode(suffix)}</span>}
+    </>
+  );
+});
+
+Button.displayName = "Button";
+
+export default Button;

package/button/defaultProps.ts

@@ -0,0 +1,13 @@
+import { TdButtonProps } from "./type";
+
+export const buttonDefaultProps: TdButtonProps = {
+  block: false,
+  disabled: false,
+  form: undefined,
+  ghost: false,
+  loading: false,
+  shape: "rectangle",
+  size: "medium",
+  type: "button",
+  variant: "base"
+};

package/button/index.ts

@@ -0,0 +1,7 @@
+import _Button from "./Button";
+
+import "./style/index";
+export type { ButtonProps } from "./Button";
+export const Button = _Button;
+export * from "./type";
+export default Button;

package/button/style/css.js

@@ -0,0 +1 @@
+import "./index.css";