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

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

@@ -0,0 +1,770 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { Item } from '@react-stately/collections';
+import CreateIcon from 'mdi-react/CreateIcon';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import FormSelectIcon from 'mdi-react/FormSelectIcon';
+import { useAsyncList } from '@react-stately/data';
+import { action } from '@storybook/addon-actions';
+import isChromatic from 'chromatic/isChromatic';
+import ListView from '.';
+import Box from '../Box/Box';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Text from '../Text';
+import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'ListView',
+  component: ListView,
+  argTypes: {
+    loadingState: {
+      control: {
+        type: 'select',
+        options: loadingStates
+      }
+    },
+    disabledKeys: {
+      defaultValue: ['Snake']
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    onSelectionChange: {
+      control: 'none',
+      // eslint-disable-next-line no-console
+      defaultValue: console.log
+    }
+  }
+};
+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: action('onBlur'),
+  onFocus: action('onFocus'),
+  onLoadMore: action('onLoadMore')
+};
+
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item;
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: FormSelectIcon,
+    mr: "sm",
+    color: "text.primary",
+    size: 25
+  }), ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "create-icon",
+    size: 20
+  }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
+    "aria-label": "actions-icon",
+    size: 20
+  }, ___EmotionJSX(MoreVertIcon, null))));
+};
+
+export var Default = function Default(_ref2) {
+  var args = _extends({}, _ref2);
+
+  return ___EmotionJSX(ListView, _extends({}, props, args, {
+    items: items
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name,
+      "data-id": item.key
+    }, ___EmotionJSX(Box, {
+      isRow: true
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center"
+    }, ___EmotionJSX(Icon, {
+      icon: FormSelectIcon,
+      mr: "sm",
+      color: "text.primary",
+      size: 25
+    }), ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), ___EmotionJSX(Box, {
+      isRow: true,
+      alignSelf: "center"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon",
+      size: 20
+    }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
+      "aria-label": "actions-icon",
+      size: 20
+    }, ___EmotionJSX(MoreVertIcon, null)))));
+  });
+};
+export var InfiniteLoadingList = function InfiniteLoadingList(args) {
+  var getMockData = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(signal, cursor) {
+      var pageNumber;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              pageNumber = 1;
+
+              if (cursor) {
+                pageNumber = Number(cursor.substr(_indexOfInstanceProperty(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(function (resolve) {
+                return _setTimeout(resolve, cursor ? 2000 : 3000);
+              });
+
+            case 5:
+              return _context.abrupt("return", {
+                items: _sliceInstanceProperty(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(signal, cursor, filterText) {
+      var res, json;
+      return _regeneratorRuntime.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.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(function (_resolve, reject) {
+                return _setTimeout(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(function (resolve) {
+                return _setTimeout(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 = useAsyncList({
+    load: function load(_ref5) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var signal, cursor, filterText;
+        return _regeneratorRuntime.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 && _includesInstanceProperty(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 ___EmotionJSX(Box, {
+    sx: {
+      maxHeight: '400px'
+    }
+  }, ___EmotionJSX(ListView, _extends({}, actions, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name
+    }, ___EmotionJSX(ListElement, {
+      item: item
+    }));
+  }));
+};
+InfiniteLoadingList.args = {
+  useMockData: isChromatic()
+};
+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.'
+    }
+  }
+};
+export var MultipleSelection = function MultipleSelection(_ref6) {
+  var args = _extends({}, _ref6);
+
+  return ___EmotionJSX(ListView, _extends({}, props, args, {
+    items: items,
+    selectionMode: "multiple"
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name
+    }, ___EmotionJSX(ListElement, {
+      item: item
+    }));
+  });
+};