@pingux/astro 2.16.1-alpha.1 → 2.17.0-alpha.1

package/lib/cjs/recipes/ScrollableListView.stories.hidden.js

@@ -1,136 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
-var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
-var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
-var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
-var _index = require("../index");
-var _react2 = require("@emotion/react");
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var _default = {
-  title: 'Recipes/Scrollable List View'
-};
-exports["default"] = _default;
-var unfilteredItems = [{
-  key: 'Aardvark',
-  name: 'Aardvark',
-  id: '1'
-}, {
-  key: 'Kangaroo',
-  name: 'Kangaroo',
-  id: '2'
-}, {
-  key: 'Snake',
-  name: 'Snake',
-  id: '3'
-}, {
-  key: 'Dog',
-  name: 'Dog',
-  id: '4'
-}, {
-  key: 'Cat',
-  name: 'Cat',
-  id: '5'
-}, {
-  key: 'Mouse',
-  name: 'Mouse',
-  id: '6'
-}, {
-  key: 'Jaguar',
-  name: 'Jaguar',
-  id: '7'
-}, {
-  key: 'Elephant',
-  name: 'Elephant',
-  id: '7'
-}];
-var Default = function Default(_ref) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(unfilteredItems),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    items = _useState4[0],
-    setItems = _useState4[1];
-  var filterItems = function filterItems(input) {
-    var filtered = (0, _filter["default"])(unfilteredItems).call(unfilteredItems, function (obj) {
-      var _context;
-      return (0, _includes["default"])(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
-    });
-    setItems(filtered);
-  };
-  var onChangeInput = function onChangeInput(input) {
-    setValue(input);
-    filterItems(input);
-  };
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
-    value: value,
-    onChange: onChangeInput
-  }), (0, _react2.jsx)(_index.ScrollBox, {
-    maxHeight: 450,
-    hasShadows: true
-  }, (0, _react2.jsx)(_index.ListView, (0, _extends2["default"])({}, args, {
-    items: items
-  }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.name,
-      textValue: item.name
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      mr: "auto",
-      alignSelf: "center"
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _FormSelectIcon["default"],
-      mr: "sm",
-      color: "accent.40",
-      size: 25,
-      title: {
-        name: 'Form Select Icon'
-      }
-    }), (0, _react2.jsx)(_index.Text, {
-      variant: "itemTitle",
-      alignSelf: "center"
-    }, item.name)), (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignSelf: "center",
-      gap: "sm"
-    }, (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "create-icon"
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _CreateIcon["default"],
-      size: "sm",
-      title: {
-        name: 'Create Icon'
-      }
-    })), (0, _react2.jsx)(_index.IconButton, {
-      "aria-label": "create-icon"
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _MoreVertIcon["default"],
-      size: "sm",
-      title: {
-        name: 'More Vertical Icon'
-      }
-    })))));
-  })));
-};
-exports.Default = Default;

package/lib/components/ListItem/ListItem.stories.js

@@ -1,174 +0,0 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useState } from 'react';
-import AccountIcon from '@pingux/mdi-react/AccountIcon';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
-import { withDesign } from 'storybook-addon-designs';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Icon, IconButton, ListItem, Separator, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
-import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
-import ListItemReadme from './ListItem.mdx';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/ListItem',
-  component: ListItem,
-  decorators: [withDesign],
-  parameters: {
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListItemReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
-      }
-    }
-  },
-  argTypes: _objectSpread({}, onHoverArgTypes)
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
-    margin: 0
-  }), ___EmotionJSX(ListItem, args, ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center"
-  }, "Fons Vernall")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "filter"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "sm",
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), ___EmotionJSX(Separator, {
-    margin: 0
-  }));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.listItem["default"]
-  }
-};
-export var WithSubtitle = function WithSubtitle(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
-    margin: 0
-  }), ___EmotionJSX(ListItem, args, ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "itemTitle"
-  }, "Fons Vernall"), ___EmotionJSX(Text, {
-    variant: "itemSubtitle",
-    mt: 1
-  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "filter"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "sm",
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), ___EmotionJSX(Separator, {
-    margin: 0
-  }));
-};
-export var WithHoverHandlers = function WithHoverHandlers(args) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setIsHovered = _useState2[1];
-  var handleHoverChange = function handleHoverChange() {
-    setIsHovered(function (previousIsHovered) {
-      return !previousIsHovered;
-    });
-  };
-  var sx = function sx(shouldTranslate) {
-    return {
-      transform: "".concat(shouldTranslate ? 'translate(15px)' : 'translate(0)')
-    };
-  };
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
-    margin: 0
-  }), ___EmotionJSX(ListItem, _extends({}, args, {
-    onHoverEnd: handleHoverChange,
-    onHoverStart: handleHoverChange
-  }), ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___EmotionJSX(Box, {
-    sx: sx(isHovered)
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle"
-  }, "Fons Vernall"), ___EmotionJSX(Text, {
-    variant: "itemSubtitle",
-    mt: 1
-  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    size: 26,
-    "aria-label": "filter"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: 20,
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), ___EmotionJSX(Separator, {
-    margin: 0
-  }));
-};

package/lib/experimental/ListView/ListView.mdx

@@ -1,47 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Components/ListView/ListView" />
-
-# ListView
-
-ListViews are used to display a list of items. Users can select, view, or edit items in this list.
-This virtualized component supports asynchronous data in infinitely scrollable lists. 
-
-This component should:
-- Be used to list items that contain a significant amount of information within them.
-- Be able to access ListItem information.
-
-It shouldn’t be used to list items that only have a single piece of information.
-
-### Required Components
-
-This component requires [ListViewItem](./?path=/story/experimental-listviewitem--default).
-
-### Accessibility
-
-This component should adhere to the [WAI-ARIA ListBox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) accessibility guidelines. 
-
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the item. |
-| Tab | Focuses item and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Arrow keys | Can be used to move the selection in the menu.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first row. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last visible row. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-rowcount`**  and **`aria-columncount`**  attributes are used to indicate the total number of rows and columns in the grid structure. 
-- The **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid. 
-- Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows. 
-- Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component’s column position and aria-selected to indicate the currently selected state.
-
-#### NOTES:
-- See the [ListAndPanel](./?path=/story/experimental-recipes-listandpanel--list-and-panel) and [ScrollableListView](./?path=/story/experimental-recipes-scrollablelistview--scrollable-list-view) recipes for more detailed examples.