@alifd/chat 0.0.1

package/lib/float-button/view/float-button.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const next_1 = require("@alifd/next");
+const index_1 = require("../../utils/index");
+const useAutoHide_1 = require("../hooks/useAutoHide");
+const useAutoAlign_1 = require("../hooks/useAutoAlign");
+const useNestleEdge_1 = require("../hooks/useNestleEdge");
+const useDragable_1 = require("../hooks/useDragable");
+const FloatButton = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, style, prefix = 'next-', type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children } = _a, others = tslib_1.__rest(_a, ["className", "style", "prefix", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children"]);
+    const elRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const [el, setEl] = (0, react_1.useState)(null);
+    const [triggerEl, setTriggerEl] = (0, react_1.useState)(null);
+    const draggedRef = (0, react_1.useRef)(false);
+    const cls = `${prefix}float-button`;
+    const [visible, onVisibleChange] = (0, index_1.useControlable)(others, {
+        valueName: 'visible',
+        changeName: 'onVisibleChange',
+    });
+    (0, react_1.useEffect)(() => {
+        setEl(elRef.current);
+        setTriggerEl(triggerRef.current);
+    }, []);
+    const { align: currentAlign, update: updateAlign } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
+        enable: type === 'balloon' && autoAlign,
+        defaultAlign: align,
+    });
+    const { isHideRef, setHide, handleMove, saveRestorePosition } = (0, useAutoHide_1.useAutoHide)(el, {
+        enable: !visible && autoHide,
+        interactiveEdges,
+        leftSize: leftSizeOfHidden,
+    });
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setHide(false);
+            updateAlign();
+        }
+    }, [visible]);
+    const { update: updateNestleEdge } = (0, useNestleEdge_1.useNestleEdge)(el, {
+        enable: !!autoNestleEdge,
+        safeAreaMargin,
+        interactiveEdges,
+        onUpdate(position) {
+            if (isHideRef.current) {
+                saveRestorePosition(position);
+                return false;
+            }
+        },
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setVisible(value) {
+            onVisibleChange(value, 'api');
+        },
+        setHide(isHide) {
+            setHide(isHide);
+        },
+        updateAlign,
+        updateNestleEdge,
+    }));
+    const { className: dragClassName, style: dragStyle } = (0, useDragable_1.useDragable)(el, {
+        enable: dragable,
+        safeAreaMargin,
+        defaultPosition,
+        onDragBefore() {
+            draggedRef.current = false;
+        },
+        onDraging(_, e) {
+            draggedRef.current = true;
+            updateAlign();
+            handleMove(e);
+            if (isHideRef.current) {
+                return false;
+            }
+        },
+        onDragend() {
+            if (!isHideRef.current) {
+                Promise.resolve().then(() => updateNestleEdge());
+            }
+        },
+    });
+    const classNames = (0, classnames_1.default)(cls, className, dragClassName);
+    const renderBalloon = () => {
+        return (react_1.default.createElement(next_1.Balloon, Object.assign({ visible: visible, onVisibleChange: (...args) => {
+                if (draggedRef.current) {
+                    return;
+                }
+                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
+            }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
+    };
+    const renderDrawer = () => {
+        return react_1.default.createElement("div", null);
+    };
+    const renderInnerDrawer = () => {
+        return react_1.default.createElement("div", null);
+    };
+    const renderView = () => {
+        switch (type) {
+            case 'drawer': {
+                return renderDrawer();
+            }
+            case 'inner-drawer': {
+                return renderInnerDrawer();
+            }
+            default: {
+                return renderBalloon();
+            }
+        }
+    };
+    return (react_1.default.createElement("div", { className: classNames, style: Object.assign(Object.assign({}, style), dragStyle), ref: elRef },
+        !!addonBefore && (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-addon`, `${cls}-addon--before`) }, addonBefore)),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-trigger`), ref: triggerRef }, renderView()),
+        !!addonAfter && (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-addon`, `${cls}-addon--after`) }, addonAfter))));
+});
+FloatButton.displayName = 'FloatButton';
+exports.default = next_1.ConfigProvider.config(FloatButton);

package/lib/float-button/view/inner-drawer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function InnerDrawer(): React.JSX.Element;

package/lib/float-button/view/inner-drawer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InnerDrawer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function InnerDrawer() {
+    return react_1.default.createElement("div", null, "inner-drawer");
+}
+exports.InnerDrawer = InnerDrawer;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export declare const version: string;

package/lib/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.version = exports.Button = void 0;
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+exports.version = '0.0.1';

package/lib/utils/common.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentType } from 'react';
+export declare function assignSubComponent<T extends ComponentType, P extends Record<string, unknown>>(Component: T, SubComponents: P): T & P;

package/lib/utils/common.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assignSubComponent = void 0;
+function assignSubComponent(Component, SubComponents) {
+    for (const key in SubComponents) {
+        if (Object.prototype.hasOwnProperty.call(SubComponents, key)) {
+            Component[key] = SubComponents[key];
+        }
+    }
+    return Component;
+}
+exports.assignSubComponent = assignSubComponent;

package/lib/utils/func.d.ts

@@ -0,0 +1,3 @@
+import { type AnyFunction } from './types';
+export declare function debounce<Callback extends AnyFunction>(callback: Callback, delay: number, leading?: boolean): (...args: Parameters<Callback>) => void;
+export declare function throttle<Callback extends AnyFunction>(callback: Callback, delay: number): (...args: Parameters<Callback>) => void;

package/lib/utils/func.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.throttle = exports.debounce = void 0;
+function debounce(callback, delay, leading = false) {
+    let timer;
+    let isFirstRun = true;
+    const fn = (...args) => {
+        if (isFirstRun && leading) {
+            isFirstRun = false;
+            timer = setTimeout(() => {
+                callback(...args);
+            });
+            return;
+        }
+        isFirstRun = false;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            callback(...args);
+        }, delay);
+    };
+    return fn;
+}
+exports.debounce = debounce;
+function throttle(callback, delay) {
+    let lastTime;
+    const fn = (...args) => {
+        const time = Date.now();
+        if (!lastTime || time - lastTime > delay) {
+            Promise.resolve().then(() => callback(...args));
+            lastTime = time;
+        }
+    };
+    return fn;
+}
+exports.throttle = throttle;

package/lib/utils/hooks/useControlable.d.ts

@@ -0,0 +1,6 @@
+export interface ControlableOptions {
+    valueName?: string;
+    defaultValueName?: string;
+    changeName?: string;
+}
+export declare function useControlable<Value = unknown, OnChange extends (nextValue: Value, ...rest: unknown[]) => unknown = (nextValue: Value, ...rest: unknown[]) => unknown>(props: Record<string, unknown>, { valueName, defaultValueName, changeName, }?: ControlableOptions): readonly [Value, OnChange];

package/lib/utils/hooks/useControlable.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlable = void 0;
+const react_1 = require("react");
+function upperFirst(str) {
+    return `${str.slice(0, 1).toUpperCase()}${str.slice(1)}`;
+}
+function getDefaultValueName(valueName) {
+    return `default${upperFirst(valueName)}`;
+}
+function useControlable(props, { valueName = 'value', defaultValueName = getDefaultValueName(valueName), changeName = 'onChange', } = {}) {
+    const isControl = valueName in props;
+    const propValue = (isControl ? props[valueName] : props[defaultValueName]);
+    const propOnChange = props[changeName];
+    const [value, setValue] = (0, react_1.useState)(() => propValue);
+    const handleChange = (nextValue, ...rest) => {
+        if (!isControl) {
+            setValue(() => nextValue);
+        }
+        if (typeof propOnChange === 'function') {
+            propOnChange(nextValue, ...rest);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (value !== propValue) {
+            setValue(() => propValue);
+        }
+    }, [propValue]);
+    return [value, handleChange];
+}
+exports.useControlable = useControlable;

package/lib/utils/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+import { type AnyFunction } from '../types';
+export declare function useDebounce<Callback extends AnyFunction>(callback: Callback, delay?: number, leading?: boolean): (...args: Parameters<Callback>) => void;

package/lib/utils/hooks/useDebounce.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebounce = void 0;
+const react_1 = require("react");
+const func_1 = require("../func");
+function useDebounce(callback, delay = 0, leading = false) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    return (0, react_1.useMemo)(() => {
+        return (0, func_1.debounce)((...args) => callbackRef.current(...args), delay, leading);
+    }, [delay, leading]);
+}
+exports.useDebounce = useDebounce;

package/lib/utils/hooks/useThrottle.d.ts

@@ -0,0 +1,2 @@
+import { type AnyFunction } from '../types';
+export declare function useThrottle<Callback extends AnyFunction>(callback: Callback, delay?: number): (...args: Parameters<Callback>) => void;

package/lib/utils/hooks/useThrottle.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThrottle = void 0;
+const react_1 = require("react");
+const func_1 = require("../func");
+function useThrottle(callback, delay = 0) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    return (0, react_1.useMemo)(() => {
+        return (0, func_1.throttle)((...args) => callbackRef.current(...args), delay);
+    }, [delay]);
+}
+exports.useThrottle = useThrottle;

package/lib/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './common';
+export * from './func';
+export { useControlable } from './hooks/useControlable';
+export { useDebounce } from './hooks/useDebounce';
+export { useThrottle } from './hooks/useThrottle';

package/lib/utils/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThrottle = exports.useDebounce = exports.useControlable = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./common"), exports);
+tslib_1.__exportStar(require("./func"), exports);
+var useControlable_1 = require("./hooks/useControlable");
+Object.defineProperty(exports, "useControlable", { enumerable: true, get: function () { return useControlable_1.useControlable; } });
+var useDebounce_1 = require("./hooks/useDebounce");
+Object.defineProperty(exports, "useDebounce", { enumerable: true, get: function () { return useDebounce_1.useDebounce; } });
+var useThrottle_1 = require("./hooks/useThrottle");
+Object.defineProperty(exports, "useThrottle", { enumerable: true, get: function () { return useThrottle_1.useThrottle; } });

package/lib/utils/types.d.ts

@@ -0,0 +1,2 @@
+export type AnyFunction = (...args: any[]) => any;
+export type Timer = ReturnType<typeof setTimeout>;

package/lib/utils/types.js

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

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@alifd/chat",
+  "version": "0.0.1",
+  "description": "A configurable component library for chat built on React.",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./package.json": "./package.json",
+    "./button": {
+      "import": "./es/button/index.js",
+      "require": "./lib/button/index.js"
+    },
+    "./float-button": {
+      "import": "./es/float-button/index.js",
+      "require": "./lib/float-button/index.js"
+    },
+    "./utils": {
+      "import": "./es/utils/index.js",
+      "require": "./lib/utils/index.js"
+    }
+  },
+  "files": [
+    "es",
+    "lib"
+  ],
+  "scripts": {
+    "start": "NODE_ENV=development tsx ./scripts/start.ts",
+    "build": "npm run build:es && npm run build:lib && npm run build:others",
+    "build:es": "rm -rf es && tsc -p ./tsconfig.build.json --outDir es --module esnext",
+    "build:lib": "rm -rf lib && tsc -p ./tsconfig.build.json --outDir lib --module commonjs",
+    "build:others": "tsx ./scripts/build.ts"
+  },
+  "devDependencies": {
+    "@alifd/eslint-config-next": "^2.0.0",
+    "@alifd/next": "^1.27.2",
+    "@microsoft/tsdoc": "^0.14.2",
+    "@microsoft/tsdoc-config": "^0.16.2",
+    "@rspack/core": "^0.5.1",
+    "@rspack/dev-server": "^0.5.1",
+    "@rspack/plugin-react-refresh": "^0.5.1",
+    "@swc/core": "^1.3.104",
+    "@types/fs-extra": "^11.0.4",
+    "@types/lodash": "^4.14.202",
+    "@types/minimist": "^1.2.5",
+    "@types/react": "^16.0.0",
+    "@types/react-dom": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "chalk": "^5.3.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "fs-extra": "^11.2.0",
+    "glob": "^10.3.10",
+    "hastscript": "^9.0.0",
+    "json5": "^2.2.3",
+    "lodash": "^4.17.21",
+    "minimist": "^1.2.8",
+    "moment": "^2.30.1",
+    "prettier": "^3.2.4",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-live": "^4.1.5",
+    "react-markdown": "^9.0.1",
+    "react-refresh": "^0.14.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.0",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.0.0",
+    "ts-morph": "^21.0.1",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  },
+  "sideEffects": [
+    "es/**/style.js",
+    "lib/**/style.js",
+    "*.scss",
+    "*.css"
+  ],
+  "repository": "git@gitlab.alibaba-inc.com:fusion-chat/fusion-chat.git",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}