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

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

@@ -0,0 +1,523 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState, useMemo } from 'react';
+import { action } from '@storybook/addon-actions';
+import { useFilter } from '@react-aria/i18n';
+import { useAsyncList } from '@react-stately/data';
+import { Item, OverlayProvider, Section } from '../../index';
+import ComboBoxField from './ComboBoxField';
+import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { jsx as ___EmotionJSX } from "@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: action('onOpenChange'),
+  onInputChange: action('onInputChange'),
+  onSelectionChange: action('onSelectionChange'),
+  onBlur: action('onBlur'),
+  onFocus: action('onFocus'),
+  onLoadMore: action('onLoadMore')
+};
+export default {
+  title: 'Form/ComboBoxField',
+  component: ComboBoxField,
+  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
+      }
+    },
+    selectedKey: {
+      control: {
+        type: 'none'
+      }
+    },
+    inputValue: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    isOpen: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, args), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+export var WithSections = function WithSections(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    items: withSection
+  }, args), function (section) {
+    return ___EmotionJSX(Section, {
+      key: section.name,
+      items: section.children,
+      title: section.name
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.name
+      }, item.name);
+    });
+  }));
+};
+export var AsyncLoading = function AsyncLoading() {
+  // This example uses `useAsyncList` from "@react-stately/data"
+  var list = useAsyncList({
+    load: function load(_ref) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var signal, cursor, filterText, res, json;
+        return _regeneratorRuntime.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(function (resolve) {
+                  return _setTimeout(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 ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, {
+    label: "Example label",
+    items: list.items,
+    inputValue: list.filterText,
+    onInputChange: list.setFilterText,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var ControlledInput = function ControlledInput() {
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    onInputChange: setInputValue
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var ControlledMenu = function ControlledMenu() {
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_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 ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var ControlledSelection = function ControlledSelection() {
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedKey = _useState6[0],
+      setSelectedKey = _useState6[1];
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    selectedKey: selectedKey,
+    onSelectionChange: setSelectedKey
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var ControlledFiltering = function ControlledFiltering() {
+  // import { useFilter } from '@react-aria/i18n'
+  var _useFilter = useFilter({
+    sensitivity: 'base'
+  }),
+      startsWith = _startsWithInstanceProperty(_useFilter);
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      filterValue = _useState8[0],
+      setFilterValue = _useState8[1];
+
+  var filteredItems = useMemo(function () {
+    return _filterInstanceProperty(items).call(items, function (item) {
+      return startsWith(item.name, filterValue);
+    });
+  }, [startsWith, filterValue]);
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label"
+  }, actions, {
+    items: filteredItems,
+    inputValue: filterValue,
+    onInputChange: setFilterValue
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var ControlledWithCustomValue = function ControlledWithCustomValue() {
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      inputValue = _useState10[0],
+      setInputValue = _useState10[1];
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: inputValue,
+    onInputChange: setInputValue,
+    onSelectionChange: setInputValue,
+    hasCustomValue: true
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var WithCustomInputValue = function WithCustomInputValue() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, {
+    label: "Example label",
+    defaultItems: items,
+    hasCustomValue: true
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id,
+      textValue: item.id
+    }, item.name);
+  }));
+};
+export var AllowCustomValue = function AllowCustomValue() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    hasCustomValue: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var DisabledKeys = function DisabledKeys() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    disabledKeys: ['Aardvark']
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var FocusMenuTrigger = function FocusMenuTrigger() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    menuTrigger: "focus"
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var Disabled = function Disabled() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    isDisabled: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var HelperText = function HelperText() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    helperText: "focus",
+    status: "error"
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var Required = function Required() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    isRequired: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var WithoutStatusIndicator = function WithoutStatusIndicator() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    hasNoStatusIndicator: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var WithCustomHeight = function WithCustomHeight() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: animals,
+    scrollBoxProps: {
+      maxHeight: '75px'
+    }
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var CustomDefaultFilter = function CustomDefaultFilter() {
+  var _useFilter2 = useFilter({
+    sensitivity: 'base'
+  }),
+      startsWith = _startsWithInstanceProperty(_useFilter2);
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: animals,
+    defaultFilter: startsWith
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+export var ControlledWithAddOption = function ControlledWithAddOption() {
+  var _useState11 = useState(items),
+      _useState12 = _slicedToArray(_useState11, 2),
+      options = _useState12[0],
+      setOptions = _useState12[1];
+
+  var _useState13 = useState(''),
+      _useState14 = _slicedToArray(_useState13, 2),
+      inputValue = _useState14[0],
+      setInputValue = _useState14[1];
+
+  var _useState15 = useState(''),
+      _useState16 = _slicedToArray(_useState15, 2),
+      selectedKey = _useState16[0],
+      setSelectedKey = _useState16[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    // Add new option to options array
+    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context2;
+
+      setOptions(_concatInstanceProperty(_context2 = []).call(_context2, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: options
+  }, actions, {
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};