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

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

@@ -0,0 +1,523 @@
+"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.WithCustomHeight = exports.WithoutStatusIndicator = exports.Required = exports.HelperText = exports.Disabled = exports.FocusMenuTrigger = exports.DisabledKeys = exports.AllowCustomValue = exports.ControlledWithCustomValue = exports.ControlledFiltering = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.AsyncLoading = exports.WithSections = exports.Default = exports["default"] = void 0;
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _i18n = require("@react-aria/i18n");
+
+var _data = require("@react-stately/data");
+
+var _index = require("../../index");
+
+var _ComboBoxField = _interopRequireDefault(require("./ComboBoxField"));
+
+var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+
+var _react2 = require("@emotion/react");
+
+var items = [{
+  name: 'Aardvark',
+  id: '1'
+}, {
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  name: 'Snake',
+  id: '3'
+}];
+var animals = [{
+  name: 'Aardvark',
+  id: '1'
+}, {
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  name: 'Snake',
+  id: '3'
+}, {
+  name: 'Snail',
+  id: '4'
+}, {
+  name: 'Slug',
+  id: '5'
+}, {
+  name: 'Crow',
+  id: '6'
+}, {
+  name: 'Dog',
+  id: '7'
+}, {
+  name: 'Crab',
+  id: '8'
+}, {
+  name: 'Fish',
+  id: '9'
+}, {
+  name: 'Turtle',
+  id: '10'
+}, {
+  name: 'Mouse',
+  id: '11'
+}, {
+  name: 'Banana',
+  id: '12'
+}, {
+  name: 'Shark',
+  id: '13'
+}, {
+  name: 'Gorilla',
+  id: '14'
+}, {
+  name: 'Goat',
+  id: '15'
+}];
+var withSection = [{
+  name: 'Animals',
+  children: [{
+    name: 'Raccoon'
+  }, {
+    name: 'Kangaroo'
+  }, {
+    name: 'Opossum'
+  }]
+}, {
+  name: 'People',
+  children: [{
+    name: 'Michael'
+  }, {
+    name: 'Dwight'
+  }, {
+    name: 'Creed'
+  }]
+}];
+var actions = {
+  onOpenChange: (0, _addonActions.action)('onOpenChange'),
+  onInputChange: (0, _addonActions.action)('onInputChange'),
+  onSelectionChange: (0, _addonActions.action)('onSelectionChange'),
+  onBlur: (0, _addonActions.action)('onBlur'),
+  onFocus: (0, _addonActions.action)('onFocus'),
+  onLoadMore: (0, _addonActions.action)('onLoadMore')
+};
+var _default = {
+  title: 'Form/ComboBoxField',
+  component: _ComboBoxField["default"],
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Example label'
+    },
+    placeholder: {},
+    id: {},
+    defaultItems: {
+      defaultValue: items
+    },
+    defaultSelectedKey: {},
+    defaultInputValue: {},
+    disabledKeys: {
+      defaultValue: ['Snake']
+    },
+    direction: {},
+    menuTrigger: {},
+    isRequired: {},
+    hasCustomValue: {},
+    hasNoEmptySelection: {},
+    isNotFlippable: {},
+    hasAutoFocus: {},
+    hasNoStatusIndicator: {},
+    isReadOnly: {},
+    isDisabled: {},
+    loadingState: {
+      control: {
+        type: 'select',
+        options: _loadingStates["default"]
+      }
+    },
+    selectedKey: {
+      control: {
+        type: 'none'
+      }
+    },
+    inputValue: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    isOpen: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, args), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Default = Default;
+
+var WithSections = function WithSections(args) {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    items: withSection
+  }, args), function (section) {
+    return (0, _react2.jsx)(_index.Section, {
+      key: section.name,
+      items: section.children,
+      title: section.name
+    }, function (item) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: item.name
+      }, item.name);
+    });
+  }));
+};
+
+exports.WithSections = WithSections;
+
+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, filterText, res, json;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                signal = _ref.signal, cursor = _ref.cursor, filterText = _ref.filterText;
+
+                if (cursor) {
+                  // eslint-disable-next-line
+                  cursor = cursor.replace(/^http:\/\//i, 'https://');
+                } // If no cursor is available, then we're loading the first page,
+                // filtering the results returned via a query string that
+                // mirrors the ComboBox input text.
+                // Otherwise, the cursor is the next URL to load,
+                // as returned from the previous page.
+
+
+                _context.next = 4;
+                return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+                  signal: signal
+                });
+
+              case 4:
+                res = _context.sent;
+                _context.next = 7;
+                return res.json();
+
+              case 7:
+                json = _context.sent;
+                _context.next = 10;
+                return new _promise["default"](function (resolve) {
+                  return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+                });
+
+              case 10:
+                return _context.abrupt("return", {
+                  items: json.results,
+                  cursor: json.next
+                });
+
+              case 11:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  });
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, {
+    label: "Example label",
+    items: list.items,
+    inputValue: list.filterText,
+    onInputChange: list.setFilterText,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.AsyncLoading = AsyncLoading;
+
+var ControlledInput = function ControlledInput() {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    onInputChange: setInputValue
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledInput = ControlledInput;
+
+var ControlledMenu = function ControlledMenu() {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1]; // Use menuTrigger="manual" if you don't want open change events to fire on input / focus
+
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledMenu = ControlledMenu;
+
+var ControlledSelection = function ControlledSelection() {
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      selectedKey = _useState6[0],
+      setSelectedKey = _useState6[1];
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    selectedKey: selectedKey,
+    onSelectionChange: setSelectedKey
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledSelection = ControlledSelection;
+
+var ControlledFiltering = function ControlledFiltering() {
+  // import { useFilter } from '@react-aria/i18n'
+  var _useFilter = (0, _i18n.useFilter)({
+    sensitivity: 'base'
+  }),
+      startsWith = (0, _startsWith["default"])(_useFilter);
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      filterValue = _useState8[0],
+      setFilterValue = _useState8[1];
+
+  var filteredItems = (0, _react.useMemo)(function () {
+    return (0, _filter["default"])(items).call(items, function (item) {
+      return startsWith(item.name, filterValue);
+    });
+  }, [items, filterValue]);
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label"
+  }, actions, {
+    items: filteredItems,
+    inputValue: filterValue,
+    onInputChange: setFilterValue
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledFiltering = ControlledFiltering;
+
+var ControlledWithCustomValue = function ControlledWithCustomValue() {
+  var _useState9 = (0, _react.useState)(''),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: inputValue,
+    onInputChange: setInputValue,
+    onSelectionChange: setInputValue,
+    hasCustomValue: true
+  }), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ControlledWithCustomValue = ControlledWithCustomValue;
+
+var AllowCustomValue = function AllowCustomValue() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    hasCustomValue: true
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.AllowCustomValue = AllowCustomValue;
+
+var DisabledKeys = function DisabledKeys() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    disabledKeys: ['Aardvark']
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.DisabledKeys = DisabledKeys;
+
+var FocusMenuTrigger = function FocusMenuTrigger() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    menuTrigger: "focus"
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.FocusMenuTrigger = FocusMenuTrigger;
+
+var Disabled = function Disabled() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    isDisabled: true
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.Disabled = Disabled;
+
+var HelperText = function HelperText() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    helperText: "focus",
+    status: "error"
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.HelperText = HelperText;
+
+var Required = function Required() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    isRequired: true
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.Required = Required;
+
+var WithoutStatusIndicator = function WithoutStatusIndicator() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    hasNoStatusIndicator: true
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.WithoutStatusIndicator = WithoutStatusIndicator;
+
+var WithCustomHeight = function WithCustomHeight() {
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: animals,
+    scrollBoxProps: {
+      maxHeight: '75px'
+    }
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.WithCustomHeight = WithCustomHeight;