@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/cjs/components/ComboBoxField/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ComboBoxField["default"];
+  }
+});
+
+var _ComboBoxField = _interopRequireDefault(require("./ComboBoxField"));

package/lib/cjs/components/CopyText/CopyButton.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _react2 = require("@emotion/react");
+
+var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
+    ref: ref,
+    "aria-label": "copy",
+    variant: "buttons.copy"
+  }, props), (0, _react2.jsx)(_Icon["default"], {
+    icon: _ContentCopyIcon["default"],
+    size: 15
+  }));
+});
+var _default = CopyButton;
+exports["default"] = _default;

package/lib/cjs/components/CopyText/CopyText.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _focus = require("@react-aria/focus");
+
+var _interactions = require("@react-aria/interactions");
+
+var _utils = require("@react-aria/utils");
+
+var _index = require("../../index");
+
+var _CopyButton = _interopRequireDefault(require("./CopyButton"));
+
+var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
+
+var _react2 = require("@emotion/react");
+
+var TooltipWrapper = function TooltipWrapper(_ref) {
+  var children = _ref.children,
+      tooltip = _ref.tooltip,
+      others = (0, _objectWithoutProperties2["default"])(_ref, ["children", "tooltip"]);
+  return (0, _react2.jsx)(_index.TooltipTrigger, (0, _extends2["default"])({
+    key: tooltip,
+    direction: "top",
+    isNotFlippable: true,
+    offset: 5
+  }, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
+};
+
+TooltipWrapper.propTypes = {
+  isOpen: _propTypes["default"].bool,
+  targetRef: _propTypes["default"].shape({}),
+  tooltip: _propTypes["default"].string
+};
+/**
+ * Allows copying some pieces of text by clicking on the text or by the button nearby.
+ */
+
+var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      textToCopy = props.textToCopy,
+      tooltipText = props.tooltipText,
+      mode = props.mode,
+      tooltipProps = props.tooltipProps,
+      wrapperProps = props.wrapperProps,
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "textToCopy", "tooltipText", "mode", "tooltipProps", "wrapperProps"]);
+  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isCopied = _useState2[0],
+      setIsCopied = _useState2[1];
+
+  var _useHover = (0, _interactions.useHover)(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  (0, _react.useEffect)(function () {
+    setIsCopied(false);
+  }, [isHovered]); // Hiding "Copied!" tooltip after delay
+
+  /* istanbul ignore next */
+
+  (0, _react.useEffect)(function () {
+    if (isCopied) {
+      var timer = (0, _setTimeout2["default"])(function () {
+        setIsCopied(false);
+      }, 1000);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+
+    return undefined;
+  }, [isCopied]);
+  var copyToClipboard = (0, _useCopyToClipboard["default"])(value, setIsCopied);
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "quiet",
+    onPress: copyToClipboard,
+    "aria-label": "copy-content"
+  }, focusProps), children);
+  var tooltip = isCopied ? 'Copied!' : tooltipText;
+  var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var wrapperRef = (0, _react.useRef)();
+
+  if (mode === 'nonClickableContent') {
+    return (0, _react2.jsx)(TooltipWrapper, (0, _extends2["default"])({
+      isOpen: isTooltipOpen,
+      tooltip: tooltip,
+      targetRef: wrapperRef
+    }, tooltipProps), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+      ref: wrapperRef,
+      isRow: true,
+      tabIndex: 0
+    }, (0, _utils.mergeProps)(hoverProps, others), wrapperProps), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+      onPress: copyToClipboard
+    }, focusProps))));
+  }
+
+  if (mode === 'link') {
+    return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+      ref: ref,
+      isRow: true,
+      variant: "boxes.copy"
+    }, others), content, (0, _react2.jsx)(TooltipWrapper, {
+      isOpen: isTooltipOpen,
+      tooltip: tooltip
+    }, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+      onPress: copyToClipboard
+    }, (0, _utils.mergeProps)(hoverProps, focusProps)))));
+  }
+
+  return (0, _react2.jsx)(TooltipWrapper, {
+    isOpen: isTooltipOpen,
+    tooltip: tooltip
+  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: ref,
+    isRow: true,
+    variant: "boxes.copy"
+  }, (0, _utils.mergeProps)(hoverProps, others)), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+    onPress: copyToClipboard
+  }, focusProps)))));
+});
+CopyText.propTypes = {
+  /** The behavioral pattern to apply to the component. */
+  mode: _propTypes["default"].oneOf(['text', 'link', 'nonClickableContent']),
+
+  /** The text to be copied instead of the text inside the child component. */
+  textToCopy: _propTypes["default"].string,
+
+  /** The text to be displayed in the tooltip. */
+  tooltipText: _propTypes["default"].string,
+
+  /** Props to apply to the tooltip in nonClickableContent mode. */
+  tooltipProps: _propTypes["default"].shape({}),
+
+  /** Props to apply to the wrapper in nonClickableContent mode. */
+  wrapperProps: _propTypes["default"].shape({})
+};
+CopyText.defaultProps = {
+  mode: 'text',
+  tooltipText: 'Copy to clipboard'
+};
+CopyText.displayName = 'CopyText';
+var _default = CopyText;
+exports["default"] = _default;

package/lib/cjs/components/CopyText/CopyText.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.WithChangedCopiedValue = exports.WithLink = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Link = _interopRequireDefault(require("../Link"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _CopyText = _interopRequireDefault(require("./CopyText"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'CopyText',
+  component: _CopyText["default"],
+  argTypes: {
+    mode: {
+      control: 'none'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_CopyText["default"], args, (0, _react2.jsx)(_Text["default"], null, "Here is a value"));
+};
+
+exports.Default = Default;
+
+var WithLink = function WithLink(args) {
+  return (0, _react2.jsx)(_CopyText["default"], (0, _extends2["default"])({}, args, {
+    mode: "link"
+  }), (0, _react2.jsx)(_Link["default"], {
+    href: "https://a.url.com"
+  }, "https://a.url.com"));
+};
+
+exports.WithLink = WithLink;
+
+var WithChangedCopiedValue = function WithChangedCopiedValue(args) {
+  return (0, _react2.jsx)(_CopyText["default"], (0, _extends2["default"])({}, args, {
+    textToCopy: "Here is a copied value"
+  }), (0, _react2.jsx)(_Text["default"], null, "Here is a value"));
+};
+
+exports.WithChangedCopiedValue = WithChangedCopiedValue;