@digitalc/dxp-ui 0.0.1

package/es/components/Button/index_backup.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["children", "block", "htmlType", "loading", "circle", "className", "style", "disabled", "size", "theme", "type", "prefixCls", "iconPosition"];
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { PureComponent } from 'react';
+import { default as classNames, default as cls } from 'classnames';
+import { omit } from 'lodash';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from "../../constants";
+import { noop } from "../../utils/noop";
+import "./style/button.less";
+var btnSizes = strings.sizes;
+var htmlTypes = strings.htmlTypes,
+  btnTypes = strings.btnTypes;
+var Button = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Button, _PureComponent);
+  var _super = _createSuper(Button);
+  function Button() {
+    _classCallCheck(this, Button);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Button, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        block = _this$props.block,
+        htmlType = _this$props.htmlType,
+        loading = _this$props.loading,
+        circle = _this$props.circle,
+        className = _this$props.className,
+        style = _this$props.style,
+        disabled = _this$props.disabled,
+        size = _this$props.size,
+        theme = _this$props.theme,
+        type = _this$props.type,
+        prefixCls = _this$props.prefixCls,
+        iconPosition = _this$props.iconPosition,
+        attr = _objectWithoutProperties(_this$props, _excluded);
+      var baseProps = _objectSpread(_objectSpread({
+        disabled: disabled
+      }, omit(attr, ['x-gemo-children-alias'])), {}, {
+        className: classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-").concat(type), !disabled && type), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-size-").concat(size), size), "".concat(prefixCls, "-").concat(theme), theme), "".concat(prefixCls, "-block"), block), "".concat(prefixCls, "-circle"), circle), "".concat(prefixCls, "-").concat(type, "-disabled"), disabled && type), className),
+        type: htmlType,
+        'aria-disabled': disabled,
+        style: style
+      });
+      var xDXpProps = {};
+      if (!(className && className.includes('-with-icon'))) {
+        xDXpProps['x-dxp-prop'] = this.props['x-gemo-dxp-alias'] || 'children';
+      }
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/button-has-type
+        React.createElement("button", _extends({}, baseProps, {
+          onClick: this.props.onClick,
+          onMouseDown: this.props.onMouseDown
+        }), /*#__PURE__*/React.createElement("span", _extends({
+          className: cls("".concat(prefixCls, "-content"), this.props.contentClassName),
+          onClick: function onClick(e) {
+            return disabled && e.stopPropagation();
+          }
+        }, xDXpProps), children))
+        // <AntdBtn {...this.props}>{children}</AntdBtn>
+      );
+    }
+  }]);
+  return Button;
+}(PureComponent);
+_defineProperty(Button, "defaultProps", {
+  disabled: false,
+  size: 'default',
+  type: 'primary',
+  theme: 'light',
+  block: false,
+  htmlType: 'button',
+  onMouseDown: noop,
+  onClick: noop,
+  onMouseEnter: noop,
+  onMouseLeave: noop,
+  prefixCls: cssClasses.PREFIX + '-button'
+});
+// todo 待移除，统一走 TS 类型检查
+_defineProperty(Button, "propTypes", {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  prefixCls: PropTypes.string,
+  style: PropTypes.object,
+  size: PropTypes.oneOf(btnSizes),
+  type: PropTypes.oneOf(btnTypes),
+  block: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  circle: PropTypes.bool,
+  loading: PropTypes.bool,
+  htmlType: PropTypes.oneOf(htmlTypes),
+  theme: PropTypes.oneOf(strings.themes),
+  className: PropTypes.string,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  'aria-label': PropTypes.string,
+  contentClassName: PropTypes.string
+});
+export { Button as default };

package/es/components/Button/style/button.less

@@ -0,0 +1,34 @@
+@import './variables.less';
+
+// 基础按钮样式
+@components: button;
+
+// 使用字符串拼接
+.@{prefix}-@{components} {
+
+  // 按钮类型
+  // &-primary {
+  //   background-color: @btn-primary-bg-default;
+  // }
+  &:not(:disabled):not(.ant-btn-disabled):hover {
+    opacity: 0.8;
+    transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    .@{prefix}-text {
+      transform: scale(0.9);
+      transform-origin: center;
+      transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    }
+  }
+
+  &:not(:disabled):not(.dxp-button-disabled):active {
+    opacity: 0.5;
+    transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    .@{prefix}-text {
+      transform: scale(0.9);
+      transform-origin: center;
+      transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    }
+  }
+}

package/es/components/Button/style/variables.less

@@ -0,0 +1,5 @@
+
+@import '../../../style/variables.less';
+
+// Primary Button
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/Text/index.d.ts

@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react';
+import { noop } from '../../utils/noop';
+import './style/text.less';
+export type Size = 'bannerTitle' | 'pageTitle' | 'sectionTitle' | 'header' | 'bodyBold' | 'bodyRegular' | 'bodyStrikethrough' | 'smallbodyRegular' | 'smallBodyStrikethrough' | 'smallBodySemiBold' | 'smallBodyBold' | 'smallBodyLink' | 'textLink' | 'mediumBody' | 'mediumBodyBold';
+export interface xDXpProps {
+    'x-dxp-prop'?: string;
+}
+export interface TextProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children?: React.ReactNode;
+    className?: string;
+    size?: Size;
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    'x-dxp-children-alias'?: string;
+    [key: string]: any;
+}
+export default class Text extends PureComponent<TextProps> {
+    static defaultProps: {
+        size: string;
+        onMouseDown: typeof noop;
+        onClick: typeof noop;
+        onMouseEnter: typeof noop;
+        onMouseLeave: typeof noop;
+        prefixCls: string;
+    };
+    render(): React.JSX.Element;
+}

package/es/components/Text/index.js

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["children", "className", "size", "prefixCls", "style"];
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { PureComponent } from 'react';
+import { default as classNames } from 'classnames';
+import { omit } from 'lodash';
+import { cssClasses } from "../../constants";
+import { noop } from "../../utils/noop";
+import "./style/text.less";
+var Text = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Text, _PureComponent);
+  var _super = _createSuper(Text);
+  function Text() {
+    _classCallCheck(this, Text);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Text, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        size = _this$props.size,
+        prefixCls = _this$props.prefixCls,
+        style = _this$props.style,
+        attr = _objectWithoutProperties(_this$props, _excluded);
+      var baseProps = _objectSpread(_objectSpread({}, omit(attr, ['x-gemo-children-alias'])), {}, {
+        className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-size-").concat(size), size), className),
+        style: style
+      });
+      var xDXpProps = {};
+      if (!(className && className.includes('-with-icon'))) {
+        xDXpProps['x-dxp-prop'] = 'children';
+      }
+      return /*#__PURE__*/React.createElement("span", _extends({
+        onClick: this.props.onClick
+      }, xDXpProps, baseProps, {
+        onMouseDown: this.props.onMouseDown
+      }), children);
+    }
+  }]);
+  return Text;
+}(PureComponent);
+_defineProperty(Text, "defaultProps", {
+  size: 'bodyBold',
+  onMouseDown: noop,
+  onClick: noop,
+  onMouseEnter: noop,
+  onMouseLeave: noop,
+  prefixCls: cssClasses.PREFIX + '-text'
+});
+export { Text as default };

package/es/components/Text/style/text.less

@@ -0,0 +1,116 @@
+
+@import './variables.less';
+// 定义默认颜色常量
+@DEFAULT_COLOR: inherit;
+@STRIKETHROUGH_COLOR: #757575;
+@LINK_COLOR: #4E28E8;
+
+.dxp-text-size-bannerTitle {
+  color: @DEFAULT_COLOR;
+  font-size: 40px;
+  line-height: 48px;
+  font-family: Poppins-Blod;
+  font-weight: bold;
+}
+.dxp-text-size-pageTitle {
+  color: @DEFAULT_COLOR;
+  font-size: 32px;
+  line-height: 40px;
+  font-family: Poppins-Blod;
+  font-weight: bold;
+}
+.dxp-text-size-sectionTitle {
+  color: @DEFAULT_COLOR;
+  font-size: 24px;
+  line-height: 30px;
+  font-family: Poppins-Blod;
+  font-weight: bold;
+}
+.dxp-text-size-header {
+  color: @DEFAULT_COLOR;
+  font-size: 20px;
+  line-height: 25px;
+  font-family: Poppins-Blod;
+  font-weight: bold;
+}
+.dxp-text-size-bodyBold {
+  color: @DEFAULT_COLOR;
+  font-size: 16px;
+  line-height: 24px;
+  font-family: Roboto-Bold;
+  font-weight: bold;
+}
+.dxp-text-size-bodyRegular {
+  color: @DEFAULT_COLOR;
+  font-size: 16px;
+  line-height: 24px;
+  font-family: Roboto-Regular;
+  font-weight: normal;
+}
+.dxp-text-size-bodyStrikethrough {
+  color: @STRIKETHROUGH_COLOR;
+  font-size: 16px;
+  line-height: 24px;
+  font-family: Roboto-Regular;
+  font-weight: normal;
+  text-decoration: line-through;
+}
+.dxp-text-size-smallbodyRegular {
+  color: @DEFAULT_COLOR;
+  font-family: Roboto-Regular;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 18px;
+}
+.dxp-text-size-smallBodyStrikethrough {
+  color: @STRIKETHROUGH_COLOR;
+  font-family: Roboto-Regular;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: line-through;
+}
+.dxp-text-size-smallBodySemiBold {
+  color: @DEFAULT_COLOR;
+  font-family: Roboto-SemiBold;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 18px;
+}
+.dxp-text-size-smallBodyBold {
+  color: @DEFAULT_COLOR;
+  font-family: Roboto-Bold;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 18px;
+}
+.dxp-text-size-smallBodyLink  {
+  color: @LINK_COLOR;
+  font-family: Roboto-Bold;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 18px;
+  text-decoration: underline;
+}
+.dxp-text-size-textLink {
+  color: @LINK_COLOR;
+  font-family: Roboto-Bold;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  text-decoration: underline;
+}
+.dxp-text-size-mediumBody {
+  color: @DEFAULT_COLOR;
+  font-family: Roboto-Regular;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 22px;
+}
+.dxp-text-size-mediumBodyBold {
+  color: @DEFAULT_COLOR;
+  font-family: Roboto-Bold;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 22px;
+}

package/es/components/Text/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

package/es/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
+export { default as Text } from './Text';
+export type { TextProps } from './Text';

package/es/components/index.js

@@ -0,0 +1,4 @@
+"use client";
+
+export { default as Button } from "./Button";
+export { default as Text } from "./Text";

package/es/constants/index.d.ts

@@ -0,0 +1,15 @@
+declare const BASE_CLASS_PREFIX = "dxp";
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    readonly sizes: readonly ["default", "small", "large"];
+    readonly iconPositions: readonly ["left", "right"];
+    readonly htmlTypes: readonly ["button", "reset", "submit"];
+    readonly btnTypes: readonly ["primary", "secondary", "tertiary", "warning", "danger"];
+    readonly themes: readonly ["solid", "borderless", "light", "outline"];
+    readonly DEFAULT_ICON_SIZE: "default";
+    readonly DEFAULT_ICON_POSITION: "left";
+};
+declare const numbers: {};
+export { BASE_CLASS_PREFIX, cssClasses, numbers, strings };

package/es/constants/index.js

@@ -0,0 +1,16 @@
+var BASE_CLASS_PREFIX = 'dxp';
+// 这里方一些全局的 css class 变量，方便不同组件公用，。
+var cssClasses = {
+  PREFIX: "".concat(BASE_CLASS_PREFIX)
+};
+var strings = {
+  sizes: ['default', 'small', 'large'],
+  iconPositions: ['left', 'right'],
+  htmlTypes: ['button', 'reset', 'submit'],
+  btnTypes: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
+  themes: ['solid', 'borderless', 'light', 'outline'],
+  DEFAULT_ICON_SIZE: 'default',
+  DEFAULT_ICON_POSITION: 'left'
+};
+var numbers = {};
+export { BASE_CLASS_PREFIX, cssClasses, numbers, strings };

package/es/index.d.ts

@@ -0,0 +1,3 @@
+import './style/themes/index.css';
+export * from './components';
+export * from './utils/themeContext';

package/es/index.js

@@ -0,0 +1,3 @@
+import "./style/themes/index.css";
+export * from "./components";
+export * from "./utils/themeContext";