@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

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

@@ -0,0 +1,812 @@
+"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["default"] = exports.MultipleSelection = exports.InfiniteLoadingList = exports.Default = void 0;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _collections = require("@react-stately/collections");
+
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
+var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
+
+var _FormSelectIcon = _interopRequireDefault(require("mdi-react/FormSelectIcon"));
+
+var _data = require("@react-stately/data");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'ListView',
+  component: _["default"],
+  argTypes: {
+    loadingState: {
+      control: {
+        type: 'select',
+        options: _loadingStates["default"]
+      }
+    },
+    disabledKeys: {
+      defaultValue: ['Snake']
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    onSelectionChange: {
+      control: 'none',
+      // eslint-disable-next-line no-console
+      defaultValue: console.log
+    }
+  }
+};
+exports["default"] = _default;
+var items = [{
+  key: 'Aardvark',
+  name: 'Aardvark',
+  id: '1'
+}, {
+  key: 'Kangaroo',
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  key: 'Snake',
+  name: 'Snake',
+  id: '3'
+}];
+var animals = [{
+  name: 'Aardvark'
+}, {
+  name: 'Albatross'
+}, {
+  name: 'Alligator'
+}, {
+  name: 'Alpaca'
+}, {
+  name: 'Ant'
+}, {
+  name: 'Anteater'
+}, {
+  name: 'Antelope'
+}, {
+  name: 'Ape'
+}, {
+  name: 'Armadillo'
+}, {
+  name: 'Donkey'
+}, {
+  name: 'Baboon'
+}, {
+  name: 'Badger'
+}, {
+  name: 'Barracuda'
+}, {
+  name: 'Bat'
+}, {
+  name: 'Bear'
+}, {
+  name: 'Beaver'
+}, {
+  name: 'Bee'
+}, {
+  name: 'Bison'
+}, {
+  name: 'Boar'
+}, {
+  name: 'Buffalo'
+}, {
+  name: 'Butterfly'
+}, {
+  name: 'Camel'
+}, {
+  name: 'Capybara'
+}, {
+  name: 'Caribou'
+}, {
+  name: 'Cassowary'
+}, {
+  name: 'Cat'
+}, {
+  name: 'Caterpillar'
+}, {
+  name: 'Cattle'
+}, {
+  name: 'Chamois'
+}, {
+  name: 'Cheetah'
+}, {
+  name: 'Chicken'
+}, {
+  name: 'Chimpanzee'
+}, {
+  name: 'Chinchilla'
+}, {
+  name: 'Chough'
+}, {
+  name: 'Clam'
+}, {
+  name: 'Cobra'
+}, {
+  name: 'Cockroach'
+}, {
+  name: 'Cod'
+}, {
+  name: 'Cormorant'
+}, {
+  name: 'Coyote'
+}, {
+  name: 'Crab'
+}, {
+  name: 'Crane'
+}, {
+  name: 'Crocodile'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Curlew'
+}, {
+  name: 'Deer'
+}, {
+  name: 'Dinosaur'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Dogfish'
+}, {
+  name: 'Dolphin'
+}, {
+  name: 'Dotterel'
+}, {
+  name: 'Dove'
+}, {
+  name: 'Dragonfly'
+}, {
+  name: 'Duck'
+}, {
+  name: 'Dugong'
+}, {
+  name: 'Dunlin'
+}, {
+  name: 'Eagle'
+}, {
+  name: 'Echidna'
+}, {
+  name: 'Eel'
+}, {
+  name: 'Eland'
+}, {
+  name: 'Elephant'
+}, {
+  name: 'Elk'
+}, {
+  name: 'Emu'
+}, {
+  name: 'Falcon'
+}, {
+  name: 'Ferret'
+}, {
+  name: 'Finch'
+}, {
+  name: 'Fish'
+}, {
+  name: 'Flamingo'
+}, {
+  name: 'Fly'
+}, {
+  name: 'Fox'
+}, {
+  name: 'Frog'
+}, {
+  name: 'Gaur'
+}, {
+  name: 'Gazelle'
+}, {
+  name: 'Gerbil'
+}, {
+  name: 'Giraffe'
+}, {
+  name: 'Gnat'
+}, {
+  name: 'Gnu'
+}, {
+  name: 'Goat'
+}, {
+  name: 'Goldfinch'
+}, {
+  name: 'Goldfish'
+}, {
+  name: 'Goose'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goshawk'
+}, {
+  name: 'Grasshopper'
+}, {
+  name: 'Grouse'
+}, {
+  name: 'Guanaco'
+}, {
+  name: 'Gull'
+}, {
+  name: 'Hamster'
+}, {
+  name: 'Hare'
+}, {
+  name: 'Hawk'
+}, {
+  name: 'Hedgehog'
+}, {
+  name: 'Heron'
+}, {
+  name: 'Herring'
+}, {
+  name: 'Hippopotamus'
+}, {
+  name: 'Hornet'
+}, {
+  name: 'Horse'
+}, {
+  name: 'Human'
+}, {
+  name: 'Hummingbird'
+}, {
+  name: 'Hyena'
+}, {
+  name: 'Ibex'
+}, {
+  name: 'Ibis'
+}, {
+  name: 'Jackal'
+}, {
+  name: 'Jaguar'
+}, {
+  name: 'Jay'
+}, {
+  name: 'Jellyfish'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Kingfisher'
+}, {
+  name: 'Koala'
+}, {
+  name: 'Kookabura'
+}, {
+  name: 'Kouprey'
+}, {
+  name: 'Kudu'
+}, {
+  name: 'Lapwing'
+}, {
+  name: 'Lark'
+}, {
+  name: 'Lemur'
+}, {
+  name: 'Leopard'
+}, {
+  name: 'Lion'
+}, {
+  name: 'Llama'
+}, {
+  name: 'Lobster'
+}, {
+  name: 'Locust'
+}, {
+  name: 'Loris'
+}, {
+  name: 'Louse'
+}, {
+  name: 'Lyrebird'
+}, {
+  name: 'Magpie'
+}, {
+  name: 'Mallard'
+}, {
+  name: 'Manatee'
+}, {
+  name: 'Mandrill'
+}, {
+  name: 'Mantis'
+}, {
+  name: 'Marten'
+}, {
+  name: 'Meerkat'
+}, {
+  name: 'Mink'
+}, {
+  name: 'Mole'
+}, {
+  name: 'Mongoose'
+}, {
+  name: 'Monkey'
+}, {
+  name: 'Moose'
+}, {
+  name: 'Mosquito'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Mule'
+}, {
+  name: 'Narwhal'
+}, {
+  name: 'Newt'
+}, {
+  name: 'Nightingale'
+}, {
+  name: 'Octopus'
+}, {
+  name: 'Okapi'
+}, {
+  name: 'Opossum'
+}, {
+  name: 'Oryx'
+}, {
+  name: 'Ostrich'
+}, {
+  name: 'Otter'
+}, {
+  name: 'Owl'
+}, {
+  name: 'Oyster'
+}, {
+  name: 'Panther'
+}, {
+  name: 'Parrot'
+}, {
+  name: 'Partridge'
+}, {
+  name: 'Peafowl'
+}, {
+  name: 'Pelican'
+}, {
+  name: 'Penguin'
+}, {
+  name: 'Pheasant'
+}, {
+  name: 'Pig'
+}, {
+  name: 'Pigeon'
+}, {
+  name: 'Pony'
+}, {
+  name: 'Porcupine'
+}, {
+  name: 'Porpoise'
+}, {
+  name: 'Quail'
+}, {
+  name: 'Quelea'
+}, {
+  name: 'Quetzal'
+}, {
+  name: 'Rabbit'
+}, {
+  name: 'Raccoon'
+}, {
+  name: 'Rail'
+}, {
+  name: 'Ram'
+}, {
+  name: 'Rat'
+}, {
+  name: 'Raven'
+}, {
+  name: 'Red deer'
+}, {
+  name: 'Red panda'
+}, {
+  name: 'Reindeer'
+}, {
+  name: 'Rhinoceros'
+}, {
+  name: 'Rook'
+}, {
+  name: 'Salamander'
+}, {
+  name: 'Salmon'
+}, {
+  name: 'Sand Dollar'
+}, {
+  name: 'Sandpiper'
+}, {
+  name: 'Sardine'
+}, {
+  name: 'Scorpion'
+}, {
+  name: 'Seahorse'
+}, {
+  name: 'Seal'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Sheep'
+}, {
+  name: 'Shrew'
+}, {
+  name: 'Skunk'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Sparrow'
+}, {
+  name: 'Spider'
+}, {
+  name: 'Spoonbill'
+}, {
+  name: 'Squid'
+}, {
+  name: 'Squirrel'
+}, {
+  name: 'Starling'
+}, {
+  name: 'Stingray'
+}, {
+  name: 'Stinkbug'
+}, {
+  name: 'Stork'
+}, {
+  name: 'Swallow'
+}, {
+  name: 'Swan'
+}, {
+  name: 'Tapir'
+}, {
+  name: 'Tarsier'
+}, {
+  name: 'Termite'
+}, {
+  name: 'Tiger'
+}, {
+  name: 'Toad'
+}, {
+  name: 'Trout'
+}, {
+  name: 'Turkey'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Viper'
+}, {
+  name: 'Vulture'
+}, {
+  name: 'Wallaby'
+}, {
+  name: 'Walrus'
+}, {
+  name: 'Wasp'
+}, {
+  name: 'Weasel'
+}, {
+  name: 'Whale'
+}, {
+  name: 'Wildcat'
+}, {
+  name: 'Wolf'
+}, {
+  name: 'Wolverine'
+}, {
+  name: 'Wombat'
+}, {
+  name: 'Woodcock'
+}, {
+  name: 'Woodpecker'
+}, {
+  name: 'Worm'
+}, {
+  name: 'Wren'
+}, {
+  name: 'Yak'
+}, {
+  name: 'Zebra'
+}];
+var props = {
+  disabledKeys: ['Snake']
+};
+var actions = {
+  onBlur: (0, _addonActions.action)('onBlur'),
+  onFocus: (0, _addonActions.action)('onFocus'),
+  onLoadMore: (0, _addonActions.action)('onLoadMore')
+};
+
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item;
+  return (0, _react2.jsx)(_Box["default"], {
+    isRow: true
+  }, (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _FormSelectIcon["default"],
+    mr: "sm",
+    color: "text.primary",
+    size: 25
+  }), (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    alignSelf: "center"
+  }, (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "create-icon",
+    size: 20
+  }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_IconButton["default"], {
+    "aria-label": "actions-icon",
+    size: 20
+  }, (0, _react2.jsx)(_MoreVertIcon["default"], null))));
+};
+
+var Default = function Default(_ref2) {
+  var args = (0, _extends2["default"])({}, _ref2);
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, args, {
+    items: items
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.name,
+      textValue: item.name,
+      "data-id": item.key
+    }, (0, _react2.jsx)(_Box["default"], {
+      isRow: true
+    }, (0, _react2.jsx)(_Box["default"], {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center"
+    }, (0, _react2.jsx)(_Icon["default"], {
+      icon: _FormSelectIcon["default"],
+      mr: "sm",
+      color: "text.primary",
+      size: 25
+    }), (0, _react2.jsx)(_Text["default"], {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), (0, _react2.jsx)(_Box["default"], {
+      isRow: true,
+      alignSelf: "center"
+    }, (0, _react2.jsx)(_IconButton["default"], {
+      "aria-label": "create-icon",
+      size: 20
+    }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_IconButton["default"], {
+      "aria-label": "actions-icon",
+      size: 20
+    }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
+  });
+};
+
+exports.Default = Default;
+
+var InfiniteLoadingList = function InfiniteLoadingList(args) {
+  var getMockData = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(signal, cursor) {
+      var pageNumber;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              pageNumber = 1;
+
+              if (cursor) {
+                pageNumber = Number(cursor.substr((0, _indexOf["default"])(cursor).call(cursor, '-') + 1));
+              } // With this we will emulate load even with mocked API, except for Chromatic runs
+
+
+              if (args.useMockData) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 5;
+              return new _promise["default"](function (resolve) {
+                return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 5:
+              return _context.abrupt("return", {
+                items: (0, _slice["default"])(animals).call(animals, (pageNumber - 1) * 10, pageNumber * 10),
+                cursor: "mock-".concat(pageNumber + 1)
+              });
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getMockData(_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var fetchApiData = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(signal, cursor, filterText) {
+      var res, json;
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!args.useMockData) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return", getMockData());
+
+            case 2:
+              _context2.prev = 2;
+              _context2.next = 5;
+              return _promise["default"].race([// 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.
+              fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+                signal: signal
+              }), new _promise["default"](function (_resolve, reject) {
+                return (0, _setTimeout2["default"])(function () {
+                  return reject(new Error('timeout'));
+                }, 3000);
+              })]);
+
+            case 5:
+              res = _context2.sent;
+              _context2.next = 8;
+              return res.json();
+
+            case 8:
+              json = _context2.sent;
+              _context2.next = 11;
+              return new _promise["default"](function (resolve) {
+                return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 11:
+              return _context2.abrupt("return", {
+                items: json.results,
+                cursor: json.next
+              });
+
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](2);
+              return _context2.abrupt("return", getMockData());
+
+            case 17:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2, 14]]);
+    }));
+
+    return function fetchApiData(_x3, _x4, _x5) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var list = (0, _data.useAsyncList)({
+    load: function load(_ref5) {
+      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var signal, cursor, filterText;
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                signal = _ref5.signal, cursor = _ref5.cursor, filterText = _ref5.filterText;
+
+                if (cursor) {
+                  // eslint-disable-next-line
+                  cursor = cursor.replace(/^http:\/\//i, "https://");
+                } // check if we are mocking pages
+
+
+                if (!(cursor && (0, _includes["default"])(cursor).call(cursor, 'mock'))) {
+                  _context3.next = 4;
+                  break;
+                }
+
+                return _context3.abrupt("return", getMockData(signal, cursor, filterText));
+
+              case 4:
+                return _context3.abrupt("return", fetchApiData(signal, cursor, filterText));
+
+              case 5:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }))();
+    }
+  });
+  return (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      maxHeight: '400px'
+    }
+  }, (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, actions, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.name,
+      textValue: item.name
+    }, (0, _react2.jsx)(ListElement, {
+      item: item
+    }));
+  }));
+};
+
+exports.InfiniteLoadingList = InfiniteLoadingList;
+InfiniteLoadingList.args = {
+  useMockData: (0, _isChromatic["default"])()
+};
+InfiniteLoadingList.parameters = {
+  docs: {
+    description: {
+      story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
+    }
+  }
+};
+
+var MultipleSelection = function MultipleSelection(_ref6) {
+  var args = (0, _extends2["default"])({}, _ref6);
+  return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, props, args, {
+    items: items,
+    selectionMode: "multiple"
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.name,
+      textValue: item.name
+    }, (0, _react2.jsx)(ListElement, {
+      item: item
+    }));
+  });
+};
+
+exports.MultipleSelection = MultipleSelection;