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

package/lib/cjs/components/Link/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 _Link["default"];
+  }
+});
+
+var _Link = _interopRequireDefault(require("./Link"));

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _hooks = require("../../hooks");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Loader = _interopRequireDefault(require("../Loader"));
+
+var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * Select field (dropdown) that does not rely on native browser or mobile implementations.
+ *
+ * Utilizes [useSelect](https://react-spectrum.adobe.com/react-aria/useSelect.html) from React Aria
+ * and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
+ * React Stately.
+ */
+var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var placeholder = props.placeholder,
+      status = props.status;
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+
+  var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
+    listboxStyle: {
+      width: '10em'
+    }
+  }, props), {}, {
+    // Need this for not applying is-default class
+    status: status === _statuses["default"].DEFAULT ? null : status
+  }), ref),
+      selectFieldProps = (0, _extends2["default"])({}, _useSelectField);
+
+  var fieldControlProps = selectFieldProps.fieldControlProps,
+      isLoadingInitial = selectFieldProps.isLoadingInitial,
+      state = selectFieldProps.state,
+      triggerProps = selectFieldProps.triggerProps,
+      triggerRef = selectFieldProps.triggerRef;
+  var trigger = (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+    ref: triggerRef,
+    variant: "link",
+    className: fieldControlProps.className
+  }, triggerProps), (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    color: "active"
+  }, placeholder), (0, _react2.jsx)(_Box["default"], {
+    isRow: true
+  }, isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+    variant: "loader.withinInput"
+  }), (0, _react2.jsx)(_Box["default"], {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _MenuDownIcon["default"],
+    sx: state.isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null
+  }))));
+  return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps, {
+    trigger: trigger
+  }));
+});
+LinkSelectField.propTypes = {
+  /** Alignment of the popover menu relative to the trigger. */
+  align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
+
+  /** Where the popover menu opens relative to its trigger. */
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /** The initial selected key in the collection (uncontrolled). */
+  defaultSelectedKey: _propTypes["default"].string,
+
+  /** Array of keys to disable within the options list. */
+  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+
+  /** Whether the collection allows empty selection. */
+  hasNoEmptySelection: _propTypes["default"].bool,
+
+  /** Whether the field has a status indicator. */
+  hasNoStatusIndicator: _propTypes["default"].bool,
+
+  /** Text rendered below the input. */
+  helperText: _propTypes["default"].node,
+
+  /** If present this prop will cause a help hint to render in the label of the field. */
+  hintText: _propTypes["default"].string,
+
+  /** Sets the default open state of the menu. */
+  isDefaultOpen: _propTypes["default"].bool,
+
+  /** Whether the input is disabled. */
+  isDisabled: _propTypes["default"].bool,
+
+  /** Whether the items are currently loading. */
+  isLoading: _propTypes["default"].bool,
+
+  /** @ignore Whether the menu should automatically flip direction when space is limited. */
+  isNotFlippable: _propTypes["default"].bool,
+
+  /** Sets the open state of the menu. */
+  isOpen: _propTypes["default"].bool,
+
+  /** @ignore Whether the input can be selected but not changed by the user. */
+  isReadOnly: _propTypes["default"].bool,
+
+  /** Whether user input is required on the input before form submission. */
+  isRequired: _propTypes["default"].bool,
+
+  /**
+   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+   */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].any),
+
+  /** The label for the select element. */
+  label: _propTypes["default"].node,
+
+  /** The name for the select element, used when submitting a form. */
+  name: _propTypes["default"].string,
+
+  /** Temporary text that occupies the text input when it is empty. */
+  placeholder: _propTypes["default"].string,
+
+  /** The currently selected key in the collection (controlled). */
+  selectedKey: _propTypes["default"].string,
+
+  /** Determines the type of label applied to the component. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+  /**
+   * Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
+   *
+   * () => any
+   */
+  onLoadMore: _propTypes["default"].func,
+
+  /**
+   * Method that is called when the open state of the menu changes.
+   *
+   * (isOpen: boolean) => void
+   */
+  onOpenChange: _propTypes["default"].func,
+
+  /**
+   * Handler that is called when the selection changes.
+   *
+   * (key: Key) => any
+   */
+  onSelectionChange: _propTypes["default"].func,
+
+  /**
+   * Props object passed along to `useSelect` from React Aria, `useSelectState` from React Stately,
+   * and/or the visible button representation for the select input.
+   */
+  controlProps: _propTypes["default"].shape({}),
+
+  /** Props object passed along to the root container as-is. */
+  containerProps: _propTypes["default"].shape({}),
+
+  /** Props object passed along to the label as-is. */
+  labelProps: _propTypes["default"].shape({})
+};
+LinkSelectField.defaultProps = {
+  placeholder: 'Select',
+  status: _statuses["default"].DEFAULT,
+  align: 'start',
+  direction: 'bottom'
+};
+LinkSelectField.displayName = 'LinkSelectField';
+var _default = LinkSelectField;
+exports["default"] = _default;

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

@@ -0,0 +1,350 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.AsyncLoading = exports.DynamicItems = exports.HelperText = exports.NoOptionsAvailable = exports.DisabledOptions = exports.DisabledField = exports.WithNoneOption = exports.Controlled = exports.LeftLabel = exports.Default = exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _data = require("@react-stately/data");
+
+var _index = require("../../index");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _context, _context2;
+
+var _default = {
+  title: 'Form/LinkSelectField',
+  component: _index.LinkSelectField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'What\'s your favourite color?'
+    },
+    placeholder: {},
+    defaultText: {},
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    hintText: {
+      control: {
+        type: 'text'
+      }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
+    defaultSelectedKey: {},
+    disabledKeys: {},
+    name: {},
+    align: {},
+    direction: {},
+    hasNoEmptySelection: {},
+    isDefaultOpen: {},
+    isDisabled: {},
+    isOpen: {},
+    isRequired: {},
+    controlProps: {},
+    selectedKey: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, (0, _extends2["default"])({}, args, {
+    width: "100%"
+  }), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+
+exports.Default = Default;
+
+var LeftLabel = function LeftLabel() {
+  return (0, _react2.jsx)(_Box["default"], {
+    gap: "xl",
+    width: "100%"
+  }, (0, _react2.jsx)(_index.LinkSelectField, {
+    helperText: "Here is some helpful text...",
+    label: "Example Label",
+    labelMode: "left"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")), (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "Example Label that is much longer than the previous one",
+    labelMode: "left"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")), (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "Example label with set width",
+    labelMode: "left",
+    containerProps: {
+      sx: {
+        gridTemplateColumns: '120px auto'
+      }
+    }
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+
+exports.LeftLabel = LeftLabel;
+LeftLabel.parameters = {
+  docs: {
+    description: {
+      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
+    }
+  }
+};
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)('yellow'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var handleSelectionChange = function handleSelectionChange(key) {
+    return setSelectedKey(key);
+  };
+
+  return (0, _react2.jsx)(_index.LinkSelectField, {
+    selectedKey: selectedKey,
+    onSelectionChange: handleSelectionChange,
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.Controlled = Controlled;
+
+var WithNoneOption = function WithNoneOption() {
+  return (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "none"
+  }, "None"), (0, _react2.jsx)(_index.Item, {
+    isSeparator: true,
+    textValue: "-"
+  }, (0, _react2.jsx)(_index.Separator, null)), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.WithNoneOption = WithNoneOption;
+
+var DisabledField = function DisabledField() {
+  return (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?",
+    isDisabled: true
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.DisabledField = DisabledField;
+
+var DisabledOptions = function DisabledOptions() {
+  return (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "What's your favorite color?",
+    disabledKeys: ['blue']
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue (disabled)"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.DisabledOptions = DisabledOptions;
+
+var NoOptionsAvailable = function NoOptionsAvailable() {
+  return (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "Select an option...",
+    isDisabled: true,
+    defaultText: "No options available"
+  });
+};
+
+exports.NoOptionsAvailable = NoOptionsAvailable;
+
+var HelperText = function HelperText() {
+  return (0, _react2.jsx)(_index.LinkSelectField, {
+    status: "error",
+    helperText: "Here is some helpful text...",
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.HelperText = HelperText;
+var options = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(200)).call(_context2)).call(_context, function (_, i) {
+  return {
+    key: "option-".concat(i),
+    name: "Option ".concat(i)
+  };
+});
+
+var DynamicItems = function DynamicItems() {
+  // options = new Array(200).fill().map((_, i) => ({ key: `option-${i}`, name: `Option ${i}` }));
+  var _useState3 = (0, _react.useState)(options),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
+      items = _useState4[0];
+
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "Select an option...",
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key
+    }, item.name);
+  }));
+};
+
+exports.DynamicItems = DynamicItems;
+DynamicItems.parameters = {
+  docs: {
+    storyDescription: 'If using a long list or one that is dynamically updated, use the `items` prop and a function to render the children. See [the React Stately docs](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections) for more information about this.'
+  }
+};
+
+var AsyncLoading = function AsyncLoading() {
+  // This example uses `useAsyncList` from "@react-stately/data"
+  var list = (0, _data.useAsyncList)({
+    load: function load(_ref) {
+      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var signal, cursor, res, json;
+        return _regenerator["default"].wrap(function _callee$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                signal = _ref.signal, cursor = _ref.cursor;
+                _context3.next = 3;
+                return fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
+                  signal: signal
+                });
+
+              case 3:
+                res = _context3.sent;
+                _context3.next = 6;
+                return res.json();
+
+              case 6:
+                json = _context3.sent;
+                _context3.next = 9;
+                return new _promise["default"](function (resolve) {
+                  return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+                });
+
+              case 9:
+                return _context3.abrupt("return", {
+                  items: json.results,
+                  cursor: json.next
+                });
+
+              case 10:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  });
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.LinkSelectField, {
+    label: "Pick a Pokemon",
+    items: list.items,
+    isLoading: list.isLoading,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.AsyncLoading = AsyncLoading;