@dtjoy/dt-design 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) dtinsight UED
+
+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,141 @@
+
+
+
+<div align="center">
+
+# dt-design
+
+English | [简体中文](./README-zh_CN.md)
+
+An enterprise-class React component library built on [Ant Design](https://github.com/ant-design/ant-design), optimized for back-office business scenarios with high reusability and extensibility.
+
+</div>
+
+---
+
+## 📖 Introduction
+
+dt-design is a React component library internally developed by the **Digital Business Department**, extending Ant Design 5.x. It abstracts and沉淀（consolidates）common business patterns into **out-of-the-box components**, boosting development velocity while reducing redundant code.
+
+In addition, we provide several framework-agnostic utilities written in vanilla JavaScript:
+
+* `ContextMenu` – right-click context menu
+* `KeyEventListener` – global keyboard event binder
+
+---
+
+## 🎯 When to Use
+
+* ✅ Ant Design's basic components are insufficient for complex business requirements
+* ✅ Multiple projects share similar modules and need a unified implementation
+* ✅ You want to extract general business logic to avoid duplicate development
+* ✅ You need consistent UI specification and interaction behavior across products
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install dt-design
+
+# yarn
+yarn add dt-design
+
+# pnpm
+pnpm add dt-design
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import React from 'react';
+import { BlockHeader } from '@dtjoy/dt-design';
+
+const App = () => <BlockHeader title="Category Title" background />;
+```
+
+---
+
+## 📌 Tree-Shaking & On-Demand
+
+ES modules are fully supported; import only what you need and the bundler will drop the rest automatically:
+
+```ts
+import { BlockHeader, CustomTable } from '@dtjoy/dt-design';
+```
+
+---
+
+## 🧩 TypeScript First
+
+Written entirely in TypeScript with complete type definitions for better IntelliSense and compile-time safety.
+
+---
+
+## 🛠 Local Development
+
+```bash
+git clone https://github.com/ZhaoFxxkSky/dt-design
+cd dt-design
+pnpm install
+pnpm dev
+```
+
+Then open [http://127.0.0.1:8000](http://127.0.0.1:8000).  
+We use [dumi](https://d.umijs.org/) for docs & component management.
+
+---
+
+## 📦 Build & Release
+
+### Build the library
+
+```bash
+pnpm build
+```
+
+### Bump version (internal npm registry)
+
+```bash
+pnpm release -- -r x.x.x
+npm publish --registry <internal-npm-registry>
+```
+
+### Deploy documentation site (optional)
+
+```bash
+pnpm deploy
+```
+
+---
+
+## 🤝 Contributing
+
+We welcome Issues and Pull Requests. Workflow:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/xxx`)
+3. Commit your changes (`git commit -m 'feat: add xxx'`)
+4. Push to the branch (`git push origin feature/xxx`)
+5. Open a Pull Request
+
+Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for coding standards and CI rules.
+
+---
+
+## 👨‍💻 Core Team
+
+Maintained by the **Digital Business Department**. Thanks to all contributors!
+
+---
+
+## 📄 License
+
+Internal use only. Redistribution or publication without explicit permission is strictly prohibited.
+
+---
+
+Need help? Contact us at `wx-zhaog@dtjoy.com`

package/esm/_util/index.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from 'antd';
+export declare type LabelTooltipType = TooltipProps | TooltipProps['title'];
+export declare function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null;

package/esm/_util/index.js

@@ -0,0 +1,10 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React from 'react';
+export function toTooltipProps(tooltip) {
+  if (tooltip !== null && _typeof(tooltip) === 'object' && ! /*#__PURE__*/React.isValidElement(tooltip)) {
+    return tooltip;
+  }
+  return {
+    title: tooltip
+  };
+}

package/esm/_util/type.d.ts

@@ -0,0 +1,51 @@
+import type React from 'react';
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export declare type LiteralUnion<T extends string> = T | (string & {});
+export declare type AnyObject = Record<string, any>;
+export declare type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
+/**
+ * Get component props
+ * @example
+ * ```ts
+ * import { Checkbox } from '@dtjoy/dt-design'
+ * import type { GetProps } from '@dtjoy/dt-design';
+ *
+ * type CheckboxGroupProps = GetProps<typeof Checkbox.Group>
+ * ```
+ */
+export declare type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
+/**
+ * Get component props by component name
+ * @example
+ * ```ts
+ * import { Select } from '@dtjoy/dt-design';
+ * import type { GetProp, SelectProps } from '@dtjoy/dt-design';
+ *
+ * type SelectOption1 = GetProp<SelectProps, 'options'>[number];
+ * // or
+ * type SelectOption2 = GetProp<typeof Select, 'options'>[number];
+ *
+ * const onChange: GetProp<typeof Select, 'onChange'> = (value, option) => {
+ *  // Do something
+ * };
+ * ```
+ */
+export declare type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = NonNullable<GetProps<T>[PropName]>;
+declare type ReactRefComponent<Props extends {
+    ref?: React.Ref<any> | string;
+}> = (props: Props) => React.ReactNode;
+declare type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+/**
+ * Get component ref
+ * @example
+ * ```ts
+ * import { Input } from '@dtjoy/dt-design';
+ * import type { GetRef } from '@dtjoy/dt-design';
+ *
+ * type InputRef = GetRef<typeof Input>;
+ * ```
+ */
+export declare type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
+export declare type GetContextProps<T> = T extends React.Context<infer P> ? P : never;
+export declare type GetContextProp<T extends React.Context<any>, PropName extends keyof GetContextProps<T>> = NonNullable<GetContextProps<T>[PropName]>;
+export {};

package/esm/_util/type.js

@@ -0,0 +1 @@
+export {};

package/esm/blockHeader/index.d.ts

@@ -0,0 +1,47 @@
+import React, { ReactNode } from 'react';
+import { LabelTooltipType } from '../_util';
+import './style.less';
+export declare type SizeType = 'small' | 'middle' | 'large';
+export interface IBlockHeaderProps {
+    /** 标题 */
+    title: ReactNode;
+    /** 标题前的图标，默认是一个色块 */
+    addonBefore?: ReactNode;
+    /** 标题后的提示说明文字 */
+    description?: ReactNode;
+    /** 默认展示为问号的tooltip */
+    tooltip?: LabelTooltipType;
+    /** 后缀自定义内容块 */
+    addonAfter?: ReactNode;
+    /**
+     * 小标题 font-size: 12px; line-height: 32px
+     * 中标题 font-size: 14px; line-height: 40px
+     * 大标题 font-size: 16px; line-height: 40px
+     * 默认 中标题
+     */
+    size?: SizeType;
+    /** 自定义 Bottom 值 */
+    spaceBottom?: number;
+    /** 标题一行的样式类名 */
+    className?: string;
+    /** 标题的样式类名 */
+    style?: React.CSSProperties;
+    /** 展示内容(children)的样式类名 */
+    contentClassName?: string;
+    /** 展示内容(children)的样式 */
+    contentStyle?: React.CSSProperties;
+    /** 是否显示背景, 默认 true */
+    background?: boolean;
+    /** 当前展开状态 */
+    expand?: boolean;
+    /** 是否默认展开内容, 默认为 undefined */
+    defaultExpand?: boolean;
+    /** 展开/收起的内容 */
+    children?: ReactNode;
+    /** 展开/收起时的回调 */
+    onExpand?: (expand: boolean) => void;
+    /** 标题的样式 */
+    titleStyle?: React.CSSProperties;
+}
+declare const BlockHeader: React.FC<IBlockHeaderProps>;
+export default BlockHeader;

package/esm/blockHeader/index.js

@@ -0,0 +1,113 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import { QuestionOutlined, UpOutlined } from '@dtinsight/react-icons';
+import { Tooltip } from 'antd';
+import { globalConfig } from 'antd/es/config-provider';
+import classNames from 'classnames';
+import { toTooltipProps } from "../_util";
+// import useLocale from '../locale/useLocale';
+import "./style.less";
+function isControlled(props) {
+  return props.expand !== undefined;
+}
+var prefixCls = globalConfig().getPrefixCls('block-header');
+var preTitleRowCls = "".concat(prefixCls, "__title");
+var BlockHeader = function BlockHeader(props) {
+  var title = props.title,
+    _props$description = props.description,
+    description = _props$description === void 0 ? '' : _props$description,
+    tooltip = props.tooltip,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    _props$spaceBottom = props.spaceBottom,
+    spaceBottom = _props$spaceBottom === void 0 ? 16 : _props$spaceBottom,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$contentClassNa = props.contentClassName,
+    contentClassName = _props$contentClassNa === void 0 ? '' : _props$contentClassNa,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$contentStyle = props.contentStyle,
+    contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
+    _props$background = props.background,
+    background = _props$background === void 0 ? true : _props$background,
+    defaultExpand = props.defaultExpand,
+    addonAfter = props.addonAfter,
+    expand = props.expand,
+    _props$children = props.children,
+    children = _props$children === void 0 ? '' : _props$children,
+    _props$addonBefore = props.addonBefore,
+    addonBefore = _props$addonBefore === void 0 ? /*#__PURE__*/React.createElement("div", {
+      className: "addon-before--default"
+    }) : _props$addonBefore,
+    onExpand = props.onExpand,
+    titleStyle = props.titleStyle;
+  var _useState = useState(defaultExpand),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalExpand = _useState2[0],
+    setInternalExpand = _useState2[1];
+  // const locale = useLocale('BlockHeader');
+
+  var currentExpand = isControlled(props) ? expand : internalExpand;
+
+  // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
+  var showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
+  var tooltipProps = toTooltipProps(tooltip);
+  var bottomStyle;
+  if (spaceBottom) bottomStyle = showCollapse && currentExpand ? {
+    marginBottom: 0
+  } : {
+    marginBottom: spaceBottom
+  };
+  var handleExpand = function handleExpand(expand) {
+    if (!children) return;
+    !isControlled(props) && setInternalExpand(expand);
+    onExpand === null || onExpand === void 0 || onExpand(expand);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls), className),
+    style: _objectSpread(_objectSpread({}, bottomStyle), style)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(preTitleRowCls, "".concat(preTitleRowCls, "--").concat(size), _defineProperty(_defineProperty({}, "".concat(preTitleRowCls, "--background"), background), "".concat(preTitleRowCls, "--pointer"), showCollapse)),
+    style: titleStyle,
+    onClick: function onClick() {
+      return showCollapse && handleExpand(!currentExpand);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title__box"
+  }, addonBefore ? /*#__PURE__*/React.createElement("div", {
+    className: "title__addon-before title__addon-before--".concat(size)
+  }, addonBefore) : null, /*#__PURE__*/React.createElement("div", {
+    className: "title__text"
+  }, title), tooltipProps !== null && tooltipProps !== void 0 && tooltipProps.title ? /*#__PURE__*/React.createElement("div", {
+    className: "title__tooltip"
+  }, /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(QuestionOutlined, null))) : null, description ? /*#__PURE__*/React.createElement("div", {
+    className: "title__description"
+  }, description) : null), addonAfter && /*#__PURE__*/React.createElement("div", {
+    className: "title__addon-after"
+  }, addonAfter), showCollapse && /*#__PURE__*/React.createElement("div", {
+    className: "title__collapse"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collapse__text"
+  }), /*#__PURE__*/React.createElement(UpOutlined, {
+    className: classNames('collapse__icon', {
+      'collapse__icon--up': currentExpand,
+      'collapse__icon--down': !currentExpand
+    })
+  }))), children && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "__content"), contentClassName, _defineProperty({}, "".concat(prefixCls, "__content--active"), currentExpand || !showCollapse)),
+    style: contentStyle
+  }, children));
+};
+export default BlockHeader;

package/esm/blockHeader/style.less

@@ -0,0 +1,141 @@
+// @card_prefix: ~'dt-block-header';
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &--large {
+            .title__box {
+                line-height: 24px;
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
+            .title__box {
+                line-height: 22px;
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+        &--small {
+            .title__box {
+                line-height: 20px;
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+        &--pointer {
+            cursor: pointer;
+        }
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 16px;
+                color: #b1b4c5;
+                cursor: pointer;
+            }
+            &__text {
+                color: @text-color;
+                font-weight: 500;
+                margin-right: 4px;
+            }
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+            &__addon-after {
+                color: @label-color;
+            }
+            &__collapse {
+                color: @label-color;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
+                    }
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            opacity: 1;
+            padding: 16px 24px;
+            height: auto;
+        }
+    }
+}

package/esm/index.d.ts

@@ -0,0 +1,3 @@
+import '@dtinsight/react-icons/dist/index.css';
+import './styles/entry.less';
+export { default as BlockHeader } from './blockHeader';

package/esm/index.js

@@ -0,0 +1,52 @@
+import '@dtinsight/react-icons/dist/index.css';
+import "./styles/entry.less";
+export { default as BlockHeader } from "./blockHeader";
+// export { default as Button } from './button';
+// export { default as Catalogue } from './catalogue';
+// export { default as Chat } from './chat';
+// export { default as CollapsibleActionItems } from './collapsibleActionItems';
+// export { default as ConfigProvider } from './configProvider';
+// export { default as ContentLayout } from './contentLayout';
+// export { default as ContextMenu } from './contextMenu';
+// export { default as Copy } from './copy';
+// export { default as Descriptions } from './descriptions';
+// export { default as Drawer } from './drawer';
+// export { default as Dropdown } from './dropdown';
+// export { default as EllipsisText } from './ellipsisText';
+// export { default as Empty } from './empty';
+// export { default as ErrorBoundary } from './errorBoundary';
+// export { default as LoadError } from './errorBoundary/loadError';
+// export { default as FilterRules } from './filterRules';
+// export { default as Flex } from './flex';
+// export type { FlexProps } from './flex/interface';
+// export { default as Float } from './float';
+// export { default as Form } from './form';
+// export { default as Fullscreen } from './fullscreen';
+// export { default as GlobalLoading } from './globalLoading';
+// export { default as Image } from './image';
+// export { default as Input } from './input';
+// export { default as KeyEventListener } from './keyEventListener';
+// export { default as enUS } from './locale/en-US';
+// export { default as useLocale } from './locale/useLocale';
+// export { default as zhCN } from './locale/zh-CN';
+// export { default as MarkdownRender } from './markdownRender';
+// export { default as Modal } from './modal/modal';
+// export { default as NotFound } from './notFound';
+// export { default as ProgressBar } from './progressBar';
+// export { default as ProgressLine } from './progressLine';
+// export { default as Resize } from './resize';
+// export { default as Splitter } from './splitter';
+// export * from './splitter';
+// export { default as SpreadSheet } from './spreadSheet';
+// export { default as StatusTag } from './statusTag';
+// export { default as Table } from './table';
+// export { default as TinyTag } from './tinyTag';
+// export { default as useCookieListener } from './useCookieListener';
+// export { default as useDebounce } from './useDebounce';
+// export { default as useIntersectionObserver } from './useIntersectionObserver';
+// export { default as useList } from './useList';
+// export { default as useMeasure } from './useMeasure';
+// export { default as useMergeOption } from './useMergeOption';
+// export { default as useModal } from './useModal';
+// export { default as useTyping } from './useTyping';
+// export { default as useWindowSwitchListener } from './useWindowSwitchListener';

package/esm/styles/entry.less

@@ -0,0 +1,6 @@
+@import "~antd/es/style/themes/default.less";
+@import "./variables.less";
+
+* {
+    background: red;
+}

package/esm/styles/variables.less

@@ -0,0 +1 @@
+@primary-color: red;

package/lib/_util/index.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from 'antd';
+export declare type LabelTooltipType = TooltipProps | TooltipProps['title'];
+export declare function toTooltipProps(tooltip: LabelTooltipType): TooltipProps | null;

package/lib/_util/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toTooltipProps = toTooltipProps;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function toTooltipProps(tooltip) {
+  if (tooltip !== null && typeof tooltip === 'object' && ! /*#__PURE__*/_react.default.isValidElement(tooltip)) {
+    return tooltip;
+  }
+  return {
+    title: tooltip
+  };
+}

package/lib/_util/type.d.ts

@@ -0,0 +1,51 @@
+import type React from 'react';
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export declare type LiteralUnion<T extends string> = T | (string & {});
+export declare type AnyObject = Record<string, any>;
+export declare type CustomComponent<P = AnyObject> = React.ComponentType<P> | string;
+/**
+ * Get component props
+ * @example
+ * ```ts
+ * import { Checkbox } from '@dtjoy/dt-design'
+ * import type { GetProps } from '@dtjoy/dt-design';
+ *
+ * type CheckboxGroupProps = GetProps<typeof Checkbox.Group>
+ * ```
+ */
+export declare type GetProps<T extends React.ComponentType<any> | object> = T extends React.ComponentType<infer P> ? P : T extends object ? T : never;
+/**
+ * Get component props by component name
+ * @example
+ * ```ts
+ * import { Select } from '@dtjoy/dt-design';
+ * import type { GetProp, SelectProps } from '@dtjoy/dt-design';
+ *
+ * type SelectOption1 = GetProp<SelectProps, 'options'>[number];
+ * // or
+ * type SelectOption2 = GetProp<typeof Select, 'options'>[number];
+ *
+ * const onChange: GetProp<typeof Select, 'onChange'> = (value, option) => {
+ *  // Do something
+ * };
+ * ```
+ */
+export declare type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = NonNullable<GetProps<T>[PropName]>;
+declare type ReactRefComponent<Props extends {
+    ref?: React.Ref<any> | string;
+}> = (props: Props) => React.ReactNode;
+declare type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+/**
+ * Get component ref
+ * @example
+ * ```ts
+ * import { Input } from '@dtjoy/dt-design';
+ * import type { GetRef } from '@dtjoy/dt-design';
+ *
+ * type InputRef = GetRef<typeof Input>;
+ * ```
+ */
+export declare type GetRef<T extends ReactRefComponent<any> | React.Component<any>> = T extends React.Component<any> ? T : T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;
+export declare type GetContextProps<T> = T extends React.Context<infer P> ? P : never;
+export declare type GetContextProp<T extends React.Context<any>, PropName extends keyof GetContextProps<T>> = NonNullable<GetContextProps<T>[PropName]>;
+export {};

package/lib/_util/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/blockHeader/index.d.ts

@@ -0,0 +1,47 @@
+import React, { ReactNode } from 'react';
+import { LabelTooltipType } from '../_util';
+import './style.less';
+export declare type SizeType = 'small' | 'middle' | 'large';
+export interface IBlockHeaderProps {
+    /** 标题 */
+    title: ReactNode;
+    /** 标题前的图标，默认是一个色块 */
+    addonBefore?: ReactNode;
+    /** 标题后的提示说明文字 */
+    description?: ReactNode;
+    /** 默认展示为问号的tooltip */
+    tooltip?: LabelTooltipType;
+    /** 后缀自定义内容块 */
+    addonAfter?: ReactNode;
+    /**
+     * 小标题 font-size: 12px; line-height: 32px
+     * 中标题 font-size: 14px; line-height: 40px
+     * 大标题 font-size: 16px; line-height: 40px
+     * 默认 中标题
+     */
+    size?: SizeType;
+    /** 自定义 Bottom 值 */
+    spaceBottom?: number;
+    /** 标题一行的样式类名 */
+    className?: string;
+    /** 标题的样式类名 */
+    style?: React.CSSProperties;
+    /** 展示内容(children)的样式类名 */
+    contentClassName?: string;
+    /** 展示内容(children)的样式 */
+    contentStyle?: React.CSSProperties;
+    /** 是否显示背景, 默认 true */
+    background?: boolean;
+    /** 当前展开状态 */
+    expand?: boolean;
+    /** 是否默认展开内容, 默认为 undefined */
+    defaultExpand?: boolean;
+    /** 展开/收起的内容 */
+    children?: ReactNode;
+    /** 展开/收起时的回调 */
+    onExpand?: (expand: boolean) => void;
+    /** 标题的样式 */
+    titleStyle?: React.CSSProperties;
+}
+declare const BlockHeader: React.FC<IBlockHeaderProps>;
+export default BlockHeader;

package/lib/blockHeader/index.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIcons = require("@dtinsight/react-icons");
+var _antd = require("antd");
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("../_util");
+require("./style.less");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import useLocale from '../locale/useLocale';
+
+function isControlled(props) {
+  return props.expand !== undefined;
+}
+const prefixCls = (0, _configProvider.globalConfig)().getPrefixCls('block-header');
+const preTitleRowCls = `${prefixCls}__title`;
+const BlockHeader = function (props) {
+  const {
+    title,
+    description = '',
+    tooltip,
+    size = 'middle',
+    spaceBottom = 16,
+    className = '',
+    contentClassName = '',
+    style = {},
+    contentStyle = {},
+    background = true,
+    defaultExpand,
+    addonAfter,
+    expand,
+    children = '',
+    addonBefore = /*#__PURE__*/_react.default.createElement("div", {
+      className: "addon-before--default"
+    }),
+    onExpand,
+    titleStyle
+  } = props;
+  const [internalExpand, setInternalExpand] = (0, _react.useState)(defaultExpand);
+  // const locale = useLocale('BlockHeader');
+
+  const currentExpand = isControlled(props) ? expand : internalExpand;
+
+  // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
+  const showCollapse = (typeof expand === 'boolean' || typeof defaultExpand === 'boolean') && children;
+  const tooltipProps = (0, _util.toTooltipProps)(tooltip);
+  let bottomStyle;
+  if (spaceBottom) bottomStyle = showCollapse && currentExpand ? {
+    marginBottom: 0
+  } : {
+    marginBottom: spaceBottom
+  };
+  const handleExpand = expand => {
+    if (!children) return;
+    !isControlled(props) && setInternalExpand(expand);
+    onExpand?.(expand);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefixCls}`, className),
+    style: {
+      ...bottomStyle,
+      ...style
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(preTitleRowCls, `${preTitleRowCls}--${size}`, {
+      [`${preTitleRowCls}--background`]: background,
+      [`${preTitleRowCls}--pointer`]: showCollapse
+    }),
+    style: titleStyle,
+    onClick: () => showCollapse && handleExpand(!currentExpand)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title__box"
+  }, addonBefore ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `title__addon-before title__addon-before--${size}`
+  }, addonBefore) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title__text"
+  }, title), tooltipProps?.title ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `title__tooltip`
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, tooltipProps, /*#__PURE__*/_react.default.createElement(_reactIcons.QuestionOutlined, null))) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `title__description`
+  }, description) : null), addonAfter && /*#__PURE__*/_react.default.createElement("div", {
+    className: `title__addon-after`
+  }, addonAfter), showCollapse && /*#__PURE__*/_react.default.createElement("div", {
+    className: `title__collapse`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "collapse__text"
+  }), /*#__PURE__*/_react.default.createElement(_reactIcons.UpOutlined, {
+    className: (0, _classnames.default)('collapse__icon', {
+      'collapse__icon--up': currentExpand,
+      'collapse__icon--down': !currentExpand
+    })
+  }))), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${prefixCls}__content`, contentClassName, {
+      [`${prefixCls}__content--active`]: currentExpand || !showCollapse
+    }),
+    style: contentStyle
+  }, children));
+};
+var _default = exports.default = BlockHeader;

package/lib/blockHeader/style.less

@@ -0,0 +1,141 @@
+// @card_prefix: ~'dt-block-header';
+@card_prefix: ~'@{ant-prefix}-block-header';
+
+.@{card_prefix} {
+    &__title {
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &--large {
+            .title__box {
+                line-height: 24px;
+                .title__text {
+                    font-size: 16px;
+                }
+            }
+        }
+        &--middle {
+            .title__box {
+                line-height: 22px;
+                .title__text {
+                    font-size: 14px;
+                }
+            }
+        }
+        &--small {
+            .title__box {
+                line-height: 20px;
+                .title__text {
+                    font-size: 12px;
+                }
+            }
+        }
+        &--background {
+            padding: 0 12px;
+            background-color: #f9f9fa;
+            &.@{card_prefix}__title {
+                &--middle,
+                &--large {
+                    height: 40px;
+                }
+                &--small {
+                    height: 32px;
+                }
+            }
+        }
+        &--pointer {
+            cursor: pointer;
+        }
+        .title {
+            &__box {
+                flex: 1;
+                display: flex;
+                align-items: center;
+            }
+            &__addon-before {
+                margin-right: 8px;
+                color: @primary-color;
+                &--middle {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 20px;
+                }
+                &--small {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 16px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 16px;
+                }
+                &--large {
+                    .addon-before--default {
+                        width: 4px;
+                        height: 20px;
+                        background-color: @primary-color;
+                    }
+                    font-size: 24px;
+                }
+            }
+            &__tooltip {
+                display: flex;
+                margin-right: 4px;
+                font-size: 16px;
+                color: #b1b4c5;
+                cursor: pointer;
+            }
+            &__text {
+                color: @text-color;
+                font-weight: 500;
+                margin-right: 4px;
+            }
+            &__description {
+                display: flex;
+                align-items: center;
+                color: @label-color;
+                font-size: 12px;
+            }
+            &__addon-after {
+                color: @label-color;
+            }
+            &__collapse {
+                color: @label-color;
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                user-select: none;
+                .collapse {
+                    &__text {
+                        font-size: 12px;
+                        margin: 0 4px;
+                    }
+                    &__icon {
+                        font-size: 16px;
+                        transition: transform 0.4s;
+                        &--down {
+                            transform: rotate(-180deg);
+                        }
+                        &--up {
+                            transform: rotate(0deg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__content {
+        opacity: 0;
+        height: 0;
+        overflow: hidden;
+        transition: opacity 0.5s ease, height 0.5s ease;
+        &--active {
+            opacity: 1;
+            padding: 16px 24px;
+            height: auto;
+        }
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+import '@dtinsight/react-icons/dist/index.css';
+import './styles/entry.less';
+export { default as BlockHeader } from './blockHeader';

package/lib/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BlockHeader", {
+  enumerable: true,
+  get: function () {
+    return _blockHeader.default;
+  }
+});
+require("@dtinsight/react-icons/dist/index.css");
+require("./styles/entry.less");
+var _blockHeader = _interopRequireDefault(require("./blockHeader"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/styles/entry.less

@@ -0,0 +1,6 @@
+@import "~antd/es/style/themes/default.less";
+@import "./variables.less";
+
+* {
+    background: red;
+}

package/lib/styles/variables.less

@@ -0,0 +1 @@
+@primary-color: red;

package/package.json

@@ -0,0 +1,147 @@
+{
+  "name": "@dtjoy/dt-design",
+  "version": "1.0.0",
+  "description": "react-component",
+  "repository": "https://github.com/ZhaoFxxkSky/dt-design",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "dumi dev",
+    "build": "father build",
+    "build:watch": "father dev",
+    "test": "jest",
+    "docs:build": "dumi build",
+    "prepare": "husky install && dumi setup",
+    "doctor": "father doctor",
+    "lint": "npm run lint:es && npm run lint:css",
+    "lint:es-fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \".dumi/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint:css-fix": "stylelint \"src/**/*.{css,less,scss}\" \".dumi/**/*.{css,less,scss}\" --fix",
+    "lint:css": "stylelint \"src/**/*.{css,less,scss}\" \".dumi/**/*.{css,less,scss}\"",
+    "lint:es": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \".dumi/**/*.{js,jsx,ts,tsx}\"",
+    "prepublishOnly": "npm run build",
+    "deploy": "npm run docs:build && gh-pages -d docs-dist",
+    "release": "./scripts/release.sh"
+  },
+  "author": {
+    "name": "夕颜",
+    "email": "wx-zhaog@dtjoy.com",
+    "url": "https://github.com/ZhaoFxxkSky/dt-design"
+  },
+  "license": "MIT",
+  "files": [
+    "lib",
+    "esm"
+  ],
+  "sideEffects": [
+    "lib/*",
+    "*.scss",
+    "*.less"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "ui-library",
+    "typescript",
+    "ant-design"
+  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,scss}": [
+      "stylelint --fix"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@faker-js/faker": "^7.6.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.3",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.3.1",
+    "@types/react": "^18.0.0",
+    "@types/react-resizable": "^3.0.8",
+    "@types/react-syntax-highlighter": "~15.5.13",
+    "@types/shortid": "^0.0.31",
+    "@types/showdown": "^1.9.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "ant-design-testing": "^1.1.0",
+    "babel-plugin-import": "^1.13.8",
+    "cz-conventional-changelog": "^3.3.0",
+    "dumi": "^2.2.12",
+    "eslint": "^8.23.0",
+    "father": "~4.1.0",
+    "gh-pages": "^4.0.0",
+    "husky": "^8.0.1",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "ko-lint-config": "2.2.21",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "rc-motion": "2.6.2",
+    "rc-util": "^5.44.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.2.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "standard-version": "^9.5.0",
+    "stylelint": "^14.9.1",
+    "ts-jest": "^29.0.3",
+    "typescript": "~4.5.2"
+  },
+  "dependencies": {
+    "@dtinsight/dt-utils": "^1.3.1",
+    "@dtinsight/react-icons": "^1.0.0",
+    "@handsontable/react": "2.1.0",
+    "antd": "4.24.16",
+    "classnames": "^2.2.6",
+    "handsontable": "6.2.2",
+    "highlight.js": "^10.5.0",
+    "immer": "~10.1.1",
+    "lodash-es": "^4.17.21",
+    "rc-drawer": "~5.1.0",
+    "rc-resize-observer": "^1.4.3",
+    "rc-virtual-list": "^3.4.13",
+    "react-draggable": "~4.4.6",
+    "react-markdown": "~8.0.6",
+    "react-resizable": "^3.0.5",
+    "react-syntax-highlighter": "~15.5.0",
+    "remark-gfm": "~3.0.1",
+    "shortid": "^2.2.16",
+    "showdown": "^1.9.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "resolutions": {
+    "rc-motion": "2.6.2"
+  }
+}