@alifd/chat 0.3.40-beta.0 → 0.3.40-beta.1

package/lib/utils/github-dark.scss

@@ -0,0 +1,137 @@
+.ct-hljs-dark {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+
+  code.hljs {
+    padding: 3px 5px
+  }
+
+  /*!
+    Theme: GitHub Dark
+    Description: Dark theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Outdated base version: https://github.com/primer/github-syntax-dark
+    Current colors taken from GitHub's CSS
+  */
+  .hljs {
+    color: #c9d1d9;
+    background: #0d1117
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}

package/lib/utils/github.scss

@@ -0,0 +1,137 @@
+.ct-hljs-light {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+
+  code.hljs {
+    padding: 3px 5px
+  }
+
+  /*!
+    Theme: GitHub
+    Description: Light theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Outdated base version: https://github.com/primer/github-syntax-light
+    Current colors taken from GitHub's CSS
+  */
+  .hljs {
+    color: #24292e;
+    background: #ffffff
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #d73a49
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #6f42c1
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #005cc5
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #032f62
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #e36209
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #6a737d
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #22863a
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #24292e
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #005cc5;
+    font-weight: bold
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #735c0f
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #24292e;
+    font-style: italic
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #24292e;
+    font-weight: bold
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #22863a;
+    background-color: #f0fff4
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #b31d28;
+    background-color: #ffeef0
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}

package/lib/utils/hoc/main.scss

@@ -0,0 +1,166 @@
+@import "../../core/variables.scss";
+
+.#{$prefix}field-wrapper {
+  &-hover-enabled {
+    &:not(.#{$prefix}field-wrapper-disabled, .#{$prefix}field-wrapper-readonly) {
+
+      &.#{$prefix}field-wrapper-focused,
+      &:hover {
+        border-color: var(--input-focus-border-color, #5584FF);
+        background-color: var(--input-focus-bg-color, #FFFFFF);
+        box-shadow: 0 0 0 var(--input-focus-shadow-spread, 2px) var(--color-calculate-input-focus-shadow, rgba(85, 132, 255, 0.2));
+      }
+    }
+  }
+
+  &-style {
+    background: var(--color-fill1-1, #f6f8fc);
+    border-radius: var(--form-element-medium-corner, 3px);
+    border: var(--input-border-width, 1px) solid var(--color-fill1-1, #f6f8fc);
+  }
+
+  &-medium {
+    width: 100%;
+  }
+
+  /**
+   * 组件的整体布局
+   * horizontal: 水平布局
+   * vertical: 垂直布局
+  */
+  &-horizontal {
+    flex-direction: row;
+    align-items: center;
+    display: inline-flex;
+    width: 100%;
+    align-items: flex-start;
+
+    .#{$prefix}field-wrapper-content {
+      width: 100%;
+      position: relative;
+    }
+
+    .#{$prefix}label-required::before {
+      position: absolute;
+      left: 4px;
+    }
+
+    .#{$prefix}label {
+      max-width: 9em;
+      padding: var(--input-m-label-padding-left, 8px) 0;
+      padding-left: 12px;
+    }
+  }
+
+  &-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    display: inline-flex;
+    width: 100%;
+
+    .#{$prefix}label {
+      padding-left: 0;
+      margin-left: 0;
+      color: var(--color-text1-3, #6A6C70);
+      margin-bottom: var(--s-2, 8px);
+      line-height: 20px;
+    }
+
+    .#{$prefix}field-wrapper-content {
+      width: 100%;
+    }
+
+    .#{$prefix}label-required::before {
+      display: none;
+    }
+    .#{$prefix}label-required::after {
+      content: "*";
+      color: var(--color-error-3, #F34810);
+      margin-left: 2px;
+      font-size: calc(var(--form-element-medium-font-size, 12px) - 2px);
+      display: inline;
+    }
+  }
+
+  .#{$prefix}label {
+    position: relative;
+    color: var(--input-label-color, #666);
+    display: inline-block;
+    flex-shrink: 0;
+    flex-grow: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--form-element-medium-font-size, 12px);
+    line-height: 17px;
+
+    &-text {
+      display: block;
+    }
+
+    &-required::before {
+      content: "*";
+      color: var(--color-error-3, #F34810);
+      margin-right: 2px;
+    }
+
+    &.#{$prefix}label-required::before {
+      font-size: calc(var(--form-element-medium-font-size, 12px) - 2px);
+    }
+  }
+
+  &-content {
+    min-width: 120px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    align-items: stretch;
+    display: inline-flex;
+  }
+
+  &-error {
+    border-color: var(--input-feedback-error-border-color, #FF3000);
+    background-color: var(--input-feedback-error-bg-color, #FFFFFF);
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    background-color: var(--input-disabled-bg-color, #F6F8FC);
+
+    .#{$prefix}label {
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}content {
+      cursor: not-allowed;
+    }
+
+    ;
+  }
+
+  .next-input {
+    box-shadow: none !important;
+    background-color: transparent;
+    border: transparent !important;
+    width: 100%;
+  }
+
+  .next-date-picker2-input,
+  .next-time-picker2-input {
+    border: none !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+  }
+
+  .ct-date-picker2,
+  .ct-time-picker2 {
+    width: 100%;
+
+    .next-input {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .next-input-control {
+      width: 20px;
+    }
+  }
+}

package/lib/utils/hoc/withLabel.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import './main.scss';
+export interface WithLabelProps {
+    /**
+     * 标签文本
+     * @en Label text
+     */
+    label?: React.ReactNode;
+    /**
+     * 标签布局方式
+     * @en Label layout mode
+     */
+    labelLayout?: 'horizontal' | 'vertical';
+    /**
+     * 组件尺寸
+     * @en Component size
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 状态
+     * @en Component state
+     */
+    state?: 'error' | 'warning' | 'loading' | 'normal';
+    /**
+     * 是否禁用
+     * @en Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 包装器的类名
+     * @en Wrapper className
+     */
+    className?: string;
+    /**
+     * 包装器的样式
+     * @en Wrapper style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否必填
+     * @en Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * 是否只读
+     * @en Whether the field is readonly
+     */
+    readOnly?: boolean;
+    /**
+     * 获取焦点时的回调
+     * @en Callback when component gets focus
+     */
+    onFocus?: (e: React.FocusEvent<any>) => void;
+    /**
+     * 失去焦点时的回调
+     * @en Callback when component loses focus
+     */
+    onBlur?: (e: React.FocusEvent<any>) => void;
+    /**
+     * label 宽度
+     */
+    labelWidth?: string;
+}
+type ComponentWithLabelProps<P> = P & WithLabelProps;
+interface WithLabelConfig {
+    /**
+     * 标签布局方式
+     * - horizontal: 水平布局
+     * - vertical: 垂直布局
+     * @defaultValue 'horizontal'
+     */
+    labelLayout?: 'horizontal' | 'vertical';
+    /**
+     * 使用默认样式
+     */
+    coverStyle?: boolean;
+    /**
+     * 是否启用悬停状态样式
+     * @defaultValue true
+     */
+    enableHoverState?: boolean;
+    /**
+     * 是否启用焦点状态样式
+     * @defaultValue true
+     */
+    enableFocusState?: boolean;
+    /**
+     * 是否启用禁用状态样式
+     * @defaultValue true
+     */
+    enableDisabledState?: boolean;
+}
+export declare function withLabel<P>(WrappedComponent: React.ComponentType<P>, defaultConfig?: WithLabelConfig): React.ForwardRefExoticComponent<React.PropsWithoutRef<ComponentWithLabelProps<P>> & React.RefAttributes<any>>;
+export {};

package/lib/utils/hoc/withLabel.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withLabel = withLabel;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_1 = require("../index");
+require("./main.scss");
+function withLabel(WrappedComponent, defaultConfig = {}) {
+    const WithLabel = react_1.default.forwardRef((props, ref) => {
+        var _a;
+        const { label, size = 'medium', state, disabled, className, style, required, readOnly: readonly, onFocus, onBlur, labelLayout: propsLabelLayout, labelWidth } = props, rest = tslib_1.__rest(props, ["label", "size", "state", "disabled", "className", "style", "required", "readOnly", "onFocus", "onBlur", "labelLayout", "labelWidth"]);
+        const { labelLayout: defaultLabelLayout, coverStyle = true, enableHoverState = true, enableFocusState = true, enableDisabledState = true } = defaultConfig;
+        // Use defaultConfig labelLayout as higher priority
+        const labelLayout = (_a = defaultLabelLayout !== null && defaultLabelLayout !== void 0 ? defaultLabelLayout : propsLabelLayout) !== null && _a !== void 0 ? _a : 'horizontal';
+        const [focused, setFocused] = react_1.default.useState(false);
+        const handleFocus = react_1.default.useCallback((e) => {
+            if (enableFocusState) {
+                setFocused(true);
+            }
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, [onFocus, enableFocusState]);
+        const handleBlur = react_1.default.useCallback((e) => {
+            if (enableFocusState) {
+                setFocused(false);
+            }
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        }, [onBlur, enableFocusState]);
+        const wrapperClassName = (0, classnames_1.default)({
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-style`]: coverStyle,
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-${size}`]: size,
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-${state}`]: coverStyle && state && state !== 'normal',
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-disabled`]: enableDisabledState && disabled,
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-readonly`]: enableDisabledState && readonly,
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-focused`]: enableFocusState && focused && state !== 'error' && state !== 'warning',
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-hover-enabled`]: enableHoverState && state !== 'error' && state !== 'warning',
+            [`${index_1.PREFIX_DEFAULT}field-wrapper-${labelLayout}`]: label,
+        }, className);
+        const labelElement = label ? (react_1.default.createElement("label", { className: (0, classnames_1.default)({
+                [`${index_1.PREFIX_DEFAULT}label`]: true,
+                [`${index_1.PREFIX_DEFAULT}label-required`]: required
+            }) },
+            react_1.default.createElement("span", { className: `${index_1.PREFIX_DEFAULT}label-text`, style: {
+                    width: labelLayout === 'horizontal' && labelWidth ? labelWidth : 'auto',
+                } }, label))) : null;
+        if (labelLayout === 'vertical') {
+            return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${index_1.PREFIX_DEFAULT}field-wrapper-vertical`, `${index_1.PREFIX_DEFAULT}field-wrapper`) },
+                labelElement,
+                react_1.default.createElement("div", { className: wrapperClassName, style: style },
+                    react_1.default.createElement("span", { className: `${index_1.PREFIX_DEFAULT}field-wrapper-content` },
+                        react_1.default.createElement(WrappedComponent, Object.assign({}, rest, { ref: ref, size: size, state: state, disabled: disabled, readonly: readonly, onFocus: handleFocus, onBlur: handleBlur }))))));
+        }
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(wrapperClassName, `${index_1.PREFIX_DEFAULT}field-wrapper`, `${index_1.PREFIX_DEFAULT}field-wrapper-horizontal`), style: style },
+            labelElement,
+            react_1.default.createElement("span", { className: `${index_1.PREFIX_DEFAULT}field-wrapper-content` },
+                react_1.default.createElement(WrappedComponent, Object.assign({}, rest, { ref: ref, size: size, state: state, disabled: disabled, readonly: readonly, onFocus: handleFocus, onBlur: handleBlur })))));
+    });
+    WithLabel.displayName = `WithLabel(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+    return WithLabel;
+}

package/lib/utils/index.d.ts

@@ -2,6 +2,7 @@ export * from './consts';
 export * from './types';
 export * from './common';
 export * from './func';
+export * from './hoc/withLabel';
 export { useControlable } from './hooks/useControlable';
 export { useDebounce } from './hooks/useDebounce';
 export { useThrottle } from './hooks/useThrottle';

package/lib/utils/index.js

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./consts"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 tslib_1.__exportStar(require("./common"), exports);
 tslib_1.__exportStar(require("./func"), exports);
+tslib_1.__exportStar(require("./hoc/withLabel"), 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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.40-beta.0",
+  "version": "0.3.40-beta.1",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -465,6 +465,42 @@
     "./tool-status/style.js": {
       "import": "./es/tool-status/style.js",
       "require": "./lib/tool-status/style.js"
+    },
+    "./code-view": {
+      "import": "./es/code-view/index.js",
+      "require": "./lib/code-view/index.js"
+    },
+    "./code-view/style": {
+      "import": "./es/code-view/style.js",
+      "require": "./lib/code-view/style.js"
+    },
+    "./code-view/style.js": {
+      "import": "./es/code-view/style.js",
+      "require": "./lib/code-view/style.js"
+    },
+    "./collapse": {
+      "import": "./es/collapse/index.js",
+      "require": "./lib/collapse/index.js"
+    },
+    "./collapse/style": {
+      "import": "./es/collapse/style.js",
+      "require": "./lib/collapse/style.js"
+    },
+    "./collapse/style.js": {
+      "import": "./es/collapse/style.js",
+      "require": "./lib/collapse/style.js"
+    },
+    "./table": {
+      "import": "./es/table/index.js",
+      "require": "./lib/table/index.js"
+    },
+    "./table/style": {
+      "import": "./es/table/style.js",
+      "require": "./lib/table/style.js"
+    },
+    "./table/style.js": {
+      "import": "./es/table/style.js",
+      "require": "./lib/table/style.js"
     }
   },
   "files": [
@@ -479,7 +515,15 @@
     "build:lib": "rm -rf lib && tsc -p ./tsconfig.build.json --outDir lib --module commonjs",
     "build:others": "tsx ./scripts/build.ts",
     "changelog": "tsx ./scripts/changelog.ts",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepare": "husky",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix"
+    ]
   },
   "devDependencies": {
     "@alifd/eslint-config-next": "^2.0.0",
@@ -519,8 +563,10 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "hastscript": "^9.0.0",
+    "husky": "^9.1.7",
     "inquirer": "^10.0.0",
     "json5": "^2.2.3",
+    "lint-staged": "^13.3.0",
     "lodash": "^4.17.21",
     "minimist": "^1.2.8",
     "moment": "^2.30.1",
@@ -564,8 +610,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-photo-view": "^1.2.6",
     "sanitize-html": "~2.7.3",
-    "tslib": "^2.6.2",
-    "github-markdown-css": "^5.0.1"
+    "tslib": "^2.6.2"
   },
   "sideEffects": [
     "es/**/style.js",