@lobehub/ui 1.33.0 → 1.34.0

package/es/Giscus/index.d.ts

@@ -0,0 +1,8 @@
+import { type GiscusProps as GiscusComponentProps } from '@giscus/react';
+import { CSSProperties } from 'react';
+export interface GiscusProps extends GiscusComponentProps {
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Giscus: import("react").NamedExoticComponent<GiscusProps>;
+export default Giscus;

package/es/Giscus/index.js

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "reactionsEnabled", "mapping", "lang", "inputPosition", "id", "loading", "emitMetadata"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import GiscusComponent from '@giscus/react';
+import { useTheme, useThemeMode } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { formatLang, genStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Giscus = /*#__PURE__*/memo(function (_ref) {
+  var style = _ref.style,
+    className = _ref.className,
+    _ref$reactionsEnabled = _ref.reactionsEnabled,
+    reactionsEnabled = _ref$reactionsEnabled === void 0 ? '1' : _ref$reactionsEnabled,
+    _ref$mapping = _ref.mapping,
+    mapping = _ref$mapping === void 0 ? 'title' : _ref$mapping,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'en_US' : _ref$lang,
+    _ref$inputPosition = _ref.inputPosition,
+    inputPosition = _ref$inputPosition === void 0 ? 'top' : _ref$inputPosition,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'giscus' : _ref$id,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? 'lazy' : _ref$loading,
+    _ref$emitMetadata = _ref.emitMetadata,
+    emitMetadata = _ref$emitMetadata === void 0 ? '0' : _ref$emitMetadata,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var token = useTheme();
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
+  var giscusTheme = useMemo(function () {
+    return btoa(genStyles(token, isDarkMode).styles);
+  }, [isDarkMode, token]);
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    style: style,
+    children: /*#__PURE__*/_jsx(GiscusComponent, _objectSpread({
+      emitMetadata: emitMetadata,
+      id: id,
+      inputPosition: inputPosition,
+      lang: formatLang(lang),
+      loading: loading,
+      mapping: mapping,
+      reactionsEnabled: reactionsEnabled,
+      theme: "data:text/css;base64,".concat(giscusTheme)
+    }, props))
+  });
+});
+export default Giscus;

package/es/Giscus/style.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from 'antd-style';
+export declare const genStyles: (token: Theme, isDarkMode: boolean) => import("antd-style").SerializedStyles;
+export declare const formatLang: (lang: string) => string;

package/es/Giscus/style.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { css } from 'antd-style';
+import { readableColor, rgba } from 'polished';
+import { colorScales } from "../styles/colors";
+export var genStyles = function genStyles(token, isDarkMode) {
+  var type = isDarkMode ? 'dark' : 'light';
+  var colorText = colorScales.gray[type][11];
+  var colorTextSecondary = colorScales.gray[type][10];
+  var colorTextTertiary = colorScales.gray[type][7];
+  var colorRed = isDarkMode ? colorScales.red[type][9] : colorScales.volcano[type][9];
+  var colorOrange = isDarkMode ? colorScales.gold[type][9] : colorScales.orange[type][9];
+  var colorGreen = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][9];
+  var colorBlue = isDarkMode ? colorScales.blue[type][9] : colorScales.geekblue[type][9];
+  var loaderContainer = isDarkMode ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg' : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';
+  var loadingImage = isDarkMode ? 'https://github.githubassets.com/images/mona-loading-dark.gif' : 'https://github.githubassets.com/images/mona-loading-default.gif';
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    main {\n      --color-prettylights-syntax-comment: ", ";\n      --color-prettylights-syntax-constant: ", ";\n      --color-prettylights-syntax-entity: ", ";\n      --color-prettylights-syntax-storage-modifier-import: ", ";\n      --color-prettylights-syntax-entity-tag: ", ";\n      --color-prettylights-syntax-keyword: ", ";\n      --color-prettylights-syntax-string: ", ";\n      --color-prettylights-syntax-variable: ", ";\n      --color-prettylights-syntax-brackethighlighter-unmatched: ", ";\n      --color-prettylights-syntax-invalid-illegal-text: ", ";\n      --color-prettylights-syntax-invalid-illegal-bg: ", ";\n      --color-prettylights-syntax-carriage-return-text: ", ";\n      --color-prettylights-syntax-carriage-return-bg: ", ";\n      --color-prettylights-syntax-string-regexp: ", ";\n      --color-prettylights-syntax-markup-list: ", ";\n      --color-prettylights-syntax-markup-heading: ", ";\n      --color-prettylights-syntax-markup-italic: ", ";\n      --color-prettylights-syntax-markup-bold: ", ";\n      --color-prettylights-syntax-markup-deleted-text: ", ";\n      --color-prettylights-syntax-markup-deleted-bg: ", ";\n      --color-prettylights-syntax-markup-inserted-text: ", ";\n      --color-prettylights-syntax-markup-inserted-bg: ", ";\n      --color-prettylights-syntax-markup-changed-text: ", ";\n      --color-prettylights-syntax-markup-changed-bg: ", ";\n      --color-prettylights-syntax-markup-ignored-text: ", ";\n      --color-prettylights-syntax-markup-ignored-bg: ", ";\n      --color-prettylights-syntax-meta-diff-range: ", ";\n      --color-prettylights-syntax-brackethighlighter-angle: ", ";\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ", ";\n      --color-prettylights-syntax-constant-other-reference-link: ", ";\n      --color-btn-text: ", ";\n      --color-btn-bg: ", ";\n      --color-btn-border: ", ";\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ", ";\n      --color-btn-hover-border: ", ";\n      --color-btn-active-bg: ", ";\n      --color-btn-active-border: ", ";\n      --color-btn-selected-bg: ", ";\n      --color-btn-primary-text: ", ";\n      --color-btn-primary-bg: ", ";\n      --color-btn-primary-border: ", ";\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ", ";\n      --color-btn-primary-hover-border: ", ";\n      --color-btn-primary-selected-bg: ", ";\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: ", ";\n      --color-btn-primary-disabled-bg: ", ";\n      --color-btn-primary-disabled-border: ", ";\n      --color-action-list-item-default-hover-bg: ", ";\n      --color-segmented-control-bg: ", ";\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ", ";\n      --color-fg-default: ", ";\n      --color-fg-muted: ", ";\n      --color-fg-subtle: ", ";\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ", ";\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ", ";\n      --color-border-default: ", ";\n      --color-border-muted: ", ";\n      --color-neutral-muted: ", ";\n      --color-neutral-subtle: ", ";\n      --color-accent-fg: ", ";\n      --color-accent-emphasis: ", ";\n      --color-accent-muted: ", ";\n      --color-accent-subtle: ", ";\n      --color-success-fg: ", ";\n      --color-attention-fg: ", ";\n      --color-attention-muted: ", ";\n      --color-attention-subtle: ", ";\n      --color-danger-fg: ", ";\n      --color-danger-muted: ", ";\n      --color-danger-subtle: ", ";\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ", ";\n      --color-scale-blue-8: ", ";\n      --color-social-reaction-bg-hover: ", ";\n      --color-social-reaction-bg-reacted-hover: ", ";\n\n      .markdown pre {\n        color: ", ";\n      }\n\n      .pagination-loader-container {\n        background-image: url(", ");\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ", ";\n        border-radius: ", "px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(", ");\n      }\n    }\n  "])), colorTextTertiary, colorGreen, colorOrange, colorRed, colorBlue, colorBlue, colorGreen, colorRed, colorRed, colorTextSecondary, rgba(colorRed, 0.4), colorTextSecondary, rgba(colorRed, 0.6), colorGreen, colorOrange, colorBlue, colorTextSecondary, colorTextSecondary, colorTextSecondary, rgba(colorRed, 0.2), colorGreen, rgba(colorGreen, 0.2), colorOrange, rgba(colorRed, 0.2), colorTextSecondary, rgba(colorBlue, 0.2), colorOrange, colorTextSecondary, colorTextTertiary, colorBlue, token.colorText, token.colorFillTertiary, token.colorBorderSecondary, token.colorFillSecondary, token.colorBorder, token.colorFillSecondary, token.colorBorder, token.colorFillSecondary, readableColor(token.colorPrimary), token.colorPrimary, token.colorPrimaryBorder, token.colorPrimaryHover, token.colorPrimaryBorderHover, token.colorPrimaryActive, rgba(readableColor(token.colorPrimary), 0.5), rgba(token.colorPrimary, 0.5), rgba(token.colorPrimaryBorder, 0.5), token.colorFillQuaternary, token.colorFillTertiary, token.colorBorder, token.colorText, token.colorTextSecondary, token.colorTextQuaternary, token.colorBgElevated, token.colorFillQuaternary, token.colorBorder, token.colorBorderSecondary, token.colorFillQuaternary, token.colorFillTertiary, token.colorInfo, token.colorInfoBorderHover, token.colorInfoBorder, token.colorInfoBg, token.colorSuccess, token.colorWarning, token.colorWarningBorder, token.colorWarningBg, token.colorError, token.colorErrorBorder, token.colorErrorBg, token.colorBgContainer, token.colorInfoBg, token.colorFillSecondary, token.colorInfoBgHover, colorText, loaderContainer, token.colorInfoBorderHover, token.borderRadius, loadingImage);
+};
+export var formatLang = function formatLang(lang) {
+  if (['zh_CN', 'zh_TW'].includes(lang)) {
+    return lang.replace('_', '-');
+  } else if (lang === 'zh_HK') {
+    return 'zh-TW';
+  } else {
+    return lang.split('_')[0];
+  }
+};

package/es/index.d.ts

@@ -28,6 +28,7 @@ export { default as FormFooter, type FormFooterProps } from './Form/components/F
 export { default as FormGroup, type FormGroupProps } from './Form/components/FormGroup';
 export { default as FormItem, type FormItemProps } from './Form/components/FormItem';
 export { default as FormTitle, type FormTitleProps } from './Form/components/FormTitle';
+export { default as Giscus, type GiscusProps } from './Giscus';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';
 export { default as Header, type HeaderProps } from './Header';
 export { default as Hero, type HeroAction, type HeroProps } from './Hero';

package/es/index.js

@@ -27,6 +27,7 @@ export { default as FormFooter } from "./Form/components/FormFooter";
 export { default as FormGroup } from "./Form/components/FormGroup";
 export { default as FormItem } from "./Form/components/FormItem";
 export { default as FormTitle } from "./Form/components/FormTitle";
+export { default as Giscus } from "./Giscus";
 export { default as GradientButton } from "./GradientButton";
 export { default as Header } from "./Header";
 export { default as Hero } from "./Hero";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -74,6 +74,7 @@
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
     "@floating-ui/react": "^0",
+    "@giscus/react": "^2",
     "@react-spring/web": "^9",
     "ahooks": "^3",
     "antd": "^5",
@@ -115,7 +116,6 @@
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",
-    "babel-plugin-antd-style": "^1",
     "commitlint": "^17",
     "concurrently": "^8",
     "cross-env": "^7",