@lobehub/ui 1.127.0 → 1.128.0

package/es/Form/index.d.ts

@@ -9,7 +9,7 @@ export interface ItemGroup {
     icon?: FormGroupProps['icon'];
     title: FormGroupProps['title'];
 }
-export interface FormProps extends AntFormProps {
+export interface FormProps extends Omit<AntFormProps, 'variant'> {
     children?: ReactNode;
     footer?: ReactNode;
     itemMinWidth?: FormItemProps['minWidth'];

package/es/SortableList/DragHandle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type ActionIconProps } from "../ActionIcon";
+declare const DragHandle: React.NamedExoticComponent<ActionIconProps>;
+export default DragHandle;

package/es/SortableList/DragHandle.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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; }
+import { GripVertical } from 'lucide-react';
+import React, { memo, useContext } from 'react';
+import ActionIcon from "../ActionIcon";
+import { SortableItemContext } from "./SortableItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DragHandle = /*#__PURE__*/memo(function (props) {
+  var _useContext = useContext(SortableItemContext),
+    attributes = _useContext.attributes,
+    listeners = _useContext.listeners,
+    ref = _useContext.ref;
+  return /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    icon: GripVertical,
+    size: 'small'
+  }, props), attributes), listeners), {}, {
+    ref: ref
+  }));
+});
+export default DragHandle;

package/es/SortableList/SortableItem.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+import { type FlexboxProps } from 'react-layout-kit';
+interface Context {
+    attributes: Record<string, any>;
+    listeners: DraggableSyntheticListeners;
+    ref(node: HTMLElement | null): void;
+}
+export declare const SortableItemContext: import("react").Context<Context>;
+export interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
+    id: string | number;
+}
+declare const SortableItem: import("react").NamedExoticComponent<SortableItemProps>;
+export default SortableItem;

package/es/SortableList/SortableItem.js

@@ -0,0 +1,60 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "id", "style"];
+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; }
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { createContext, memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SortableItemContext = /*#__PURE__*/createContext({
+  attributes: {},
+  listeners: undefined,
+  ref: function ref() {}
+});
+var SortableItem = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useSortable = useSortable({
+      id: id
+    }),
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    setActivatorNodeRef = _useSortable.setActivatorNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var context = useMemo(function () {
+    return {
+      attributes: attributes,
+      listeners: listeners,
+      ref: setActivatorNodeRef
+    };
+  }, [attributes, listeners, setActivatorNodeRef]);
+  return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+      align: 'center',
+      as: 'li',
+      className: styles.item,
+      gap: 4,
+      horizontal: true,
+      ref: setNodeRef,
+      style: _objectSpread({
+        opacity: isDragging ? 0.4 : undefined,
+        transform: CSS.Translate.toString(transform),
+        transition: transition
+      }, style)
+    }, rest), {}, {
+      children: children
+    }))
+  });
+});
+export default SortableItem;

package/es/SortableList/SortableOverlay.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const SortableOverlay: import("react").NamedExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export default SortableOverlay;

package/es/SortableList/SortableOverlay.js

@@ -0,0 +1,20 @@
+import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: '0.4'
+      }
+    }
+  })
+};
+var SortableOverlay = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(DragOverlay, {
+    dropAnimation: dropAnimationConfig,
+    children: children
+  });
+});
+export default SortableOverlay;

package/es/SortableList/index.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+import { type FlexboxProps } from 'react-layout-kit';
+import DragHandle from './DragHandle';
+import SortableItem from './SortableItem';
+interface BaseItem {
+    [key: string]: any;
+    id: string | number;
+}
+export interface SortableListProps extends Omit<FlexboxProps, 'onChange'> {
+    items: BaseItem[];
+    onChange(items: BaseItem[]): void;
+    renderItem(item: BaseItem): ReactNode;
+}
+export interface ISortableList {
+    (props: SortableListProps): ReactNode;
+    DragHandle: typeof DragHandle;
+    Item: typeof SortableItem;
+}
+declare const SortableList: ISortableList;
+export default SortableList;

package/es/SortableList/index.js

@@ -0,0 +1,84 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "onChange", "renderItem", "gap"];
+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; }
+import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { Fragment, memo, useMemo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import DragHandle from "./DragHandle";
+import SortableItem from "./SortableItem";
+import SortableOverlay from "./SortableOverlay";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SortableListParent = /*#__PURE__*/memo(function (_ref) {
+  var items = _ref.items,
+    onChange = _ref.onChange,
+    renderItem = _ref.renderItem,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 8 : _ref$gap,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var activeItem = useMemo(function () {
+    return items.find(function (item) {
+      return item.id === (active === null || active === void 0 ? void 0 : active.id);
+    });
+  }, [active, items]);
+  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  return /*#__PURE__*/_jsxs(DndContext, {
+    onDragCancel: function onDragCancel() {
+      setActive(null);
+    },
+    onDragEnd: function onDragEnd(_ref2) {
+      var active = _ref2.active,
+        over = _ref2.over;
+      if (over && active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+        var activeIndex = items.findIndex(function (_ref3) {
+          var id = _ref3.id;
+          return id === active.id;
+        });
+        var overIndex = items.findIndex(function (_ref4) {
+          var id = _ref4.id;
+          return id === over.id;
+        });
+        onChange(arrayMove(items, activeIndex, overIndex));
+      }
+      setActive(null);
+    },
+    onDragStart: function onDragStart(_ref5) {
+      var active = _ref5.active;
+      setActive(active);
+    },
+    sensors: sensors,
+    children: [/*#__PURE__*/_jsx(SortableContext, {
+      items: items,
+      children: /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+        as: 'ul',
+        className: styles.container,
+        gap: gap
+      }, rest), {}, {
+        children: items.map(function (item) {
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: renderItem(item)
+          }, item.id);
+        })
+      }))
+    }), /*#__PURE__*/_jsx(SortableOverlay, {
+      children: activeItem ? renderItem(activeItem) : null
+    })]
+  });
+});
+var SortableList = SortableListParent;
+SortableList.Item = SortableItem;
+SortableList.DragHandle = DragHandle;
+export default SortableList;

package/es/SortableList/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    item: import("antd-style").SerializedStyles;
+}>;

package/es/SortableList/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 0;\n      list-style: none;\n    "]))),
+    item: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      box-sizing: border-box;\n      list-style: none;\n    "])))
+  };
+});

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -3,5 +3,5 @@ var _templateObject;
 import { css } from 'antd-style';
 import { readableColor, rgba } from 'polished';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-checkbox-inner:after {\n    border-color: ", " !important;\n  }\n\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary:not(:disabled) {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-image-preview-close,\n    .", "-image-preview-switch-right,.", "-image-preview-switch-left {\n    ", ";\n    border-radius: ", "px;\n    background: ", ";\n\n    width: 32px;\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n  }\n\n  .", "-dropdown {\n    .", "-dropdown-menu {\n      border: 1px solid ", ";\n      border-radius: ", "px !important;\n      box-shadow: ", ";\n    }\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.stylish.blur, token.borderRadiusLG, rgba(token.colorBgMask, 0.1), token.prefixCls, token.prefixCls, token.colorBorderSecondary, token.borderRadius, token.boxShadowSecondary, token.prefixCls);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-checkbox-inner:after {\n    border-color: ", " !important;\n  }\n\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary:not(:disabled) {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-image-preview-close,\n    .", "-image-preview-switch-right,.", "-image-preview-switch-left {\n    ", ";\n    border-radius: ", "px;\n    background: ", ";\n\n    width: 32px;\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n  }\n\n  .", "-popover-inner {\n    border: 1px solid ", ";\n    box-shadow: ", ";\n  }\n\n  ul.", "-dropdown-menu {\n    border: 1px solid ", ";\n    border-radius: ", "px !important;\n    box-shadow: ", ";\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.stylish.blur, token.borderRadiusLG, rgba(token.colorBgMask, 0.1), token.prefixCls, token.colorBorderSecondary, token.boxShadowSecondary, token.prefixCls, token.colorBorderSecondary, token.borderRadius, token.boxShadowSecondary, token.prefixCls);
 });

package/es/index.d.ts

@@ -68,17 +68,10 @@ export { default as SelectWithImg, type SelectWithImgOptionItem, type SelectWith
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';
+export { default as SortableList, type SortableListProps } from './SortableList';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
-export { default as StoryBook, type StoryBookProps, 
-/**
- * @deprecated Use `StoryBookProps` instead. It was a typo.
- */
-default as StroyBook, 
-/**
- * @deprecated Use `StoryBookProps` instead. It was a typo.
- */
-type StoryBookProps as StroyBookProps, useControls, useCreateStore, } from './StoryBook';
+export { default as StoryBook, type StoryBookProps, useControls, useCreateStore, } from './StoryBook';
 export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';

package/es/index.js

@@ -67,16 +67,10 @@ export { default as SelectWithImg } from "./SelectWithImg";
 export { default as SideNav } from "./SideNav";
 export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";
+export { default as SortableList } from "./SortableList";
 export { default as Spotlight } from "./Spotlight";
 export { default as SpotlightCard } from "./SpotlightCard";
-export { default as StoryBook,
-/**
- * @deprecated Use `StoryBookProps` instead. It was a typo.
- */
-default as StroyBook
-/**
- * @deprecated Use `StoryBookProps` instead. It was a typo.
- */, useControls, useCreateStore } from "./StoryBook";
+export { default as StoryBook, useControls, useCreateStore } from "./StoryBook";
 export * from "./styles";
 export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.127.0",
+  "version": "1.128.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -31,6 +31,7 @@
     "build:watch": "father dev",
     "ci": "npm run lint && npm run type-check",
     "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache",
+    "dev": "father dev",
     "docs:build": "dumi build",
     "docs:build-analyze": "ANALYZE=1 dumi build",
     "docs:dev": "dumi dev",
@@ -73,6 +74,9 @@
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
+    "@dnd-kit/core": "^6",
+    "@dnd-kit/sortable": "^8",
+    "@dnd-kit/utilities": "^3",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@floating-ui/react": "^0",