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

package/lib/cjs/recipes/RowLineChart.stories.js

@@ -0,0 +1,524 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _recharts = require("recharts");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _useResizeObserver2 = _interopRequireDefault(require("use-resize-observer"));
+
+var _visuallyHidden = require("@react-aria/visually-hidden");
+
+var _colors = require("../styles/colors");
+
+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/RowLineChart',
+  parameters: {
+    chromatic: {
+      diffThreshold: 0.9
+    }
+  }
+};
+exports["default"] = _default;
+var chartData = [{
+  id: 1,
+  emptyData: 0,
+  fullData: 1
+}, {
+  id: 2,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 3,
+  emptyData: 0,
+  fullData: 3
+}, {
+  id: 4,
+  emptyData: 0,
+  fullData: 2
+}, {
+  id: 5,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 6,
+  emptyData: 0,
+  fullData: 1
+}, {
+  id: 7,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 8,
+  emptyData: 0,
+  fullData: 5
+}, {
+  id: 9,
+  emptyData: 0,
+  fullData: 1
+}, {
+  id: 10,
+  emptyData: 0,
+  fullData: 2
+}, {
+  id: 11,
+  emptyData: 0,
+  fullData: 4
+}, {
+  id: 12,
+  emptyData: 0,
+  fullData: 11
+}];
+var partialDataData = [{
+  id: 1
+}, {
+  id: 2
+}, {
+  id: 3
+}, {
+  id: 4
+}, {
+  id: 5
+}, {
+  id: 6
+}, {
+  id: 7,
+  value: 6
+}, {
+  id: 8,
+  value: 5
+}, {
+  id: 9,
+  value: 4
+}, {
+  id: 10,
+  value: 3
+}, {
+  id: 11,
+  value: 2
+}, {
+  id: 12,
+  value: 1
+}];
+var zeroValuesData = [{
+  id: 1,
+  value: 0
+}, {
+  id: 2,
+  value: 0
+}, {
+  id: 3,
+  value: 0
+}, {
+  id: 4,
+  value: 0
+}];
+var zeroData = [{
+  id: 1
+}, {
+  id: 2
+}, {
+  id: 3
+}, {
+  id: 4
+}, {
+  id: 5
+}, {
+  id: 6
+}, {
+  id: 7
+}, {
+  id: 8,
+  value: 0
+}, {
+  id: 9,
+  value: 0
+}, {
+  id: 10,
+  value: 0
+}, {
+  id: 11,
+  value: 0
+}, {
+  id: 12,
+  value: 0
+}];
+var sx = {
+  container: {
+    backgroundColor: 'accent.99',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    pr: '20px'
+  },
+  button: {
+    ml: 'md',
+    pr: 'md'
+  },
+  chartTitleContainer: {
+    ml: '20px',
+    pr: 'md'
+  },
+  chartContainer: {
+    width: '100%',
+    height: '100%'
+  },
+  chart: {
+    width: '50',
+    height: '18'
+  },
+  chartTrendContainer: {
+    ml: 'md',
+    width: '50px'
+  }
+};
+
+var Default = function Default() {
+  var _useResizeObserver = (0, _useResizeObserver2["default"])(),
+      ref = _useResizeObserver.ref,
+      width = _useResizeObserver.width;
+
+  var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var isTablet = (0, _react.useMemo)(function () {
+    return width <= 605;
+  }, [width]);
+  var isMobile = (0, _react.useMemo)(function () {
+    return width <= 350;
+  }, [width]);
+  var hideIfTablet = (0, _react.useCallback)(function () {
+    return isTablet && visuallyHiddenProps;
+  }, [isTablet]);
+  var hideIfMobile = (0, _react.useCallback)(function () {
+    return isMobile && visuallyHiddenProps;
+  }, [isMobile]);
+  var EmptyData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.container,
+    ref: ref
+  }, (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.subtitle"
+  }, "Empty Data")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "expandableRow.chartWrapper",
+    onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: 15
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.chart"
+  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, (0, _react2.jsx)(_recharts.LineChart, {
+    sx: sx.chart,
+    data: chartData
+  }, (0, _react2.jsx)(_recharts.Line, {
+    type: "monotone",
+    dataKey: "emptyData",
+    dot: false,
+    stroke: _colors.neutral[20]
+  })))), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "No data yet")), (0, _react2.jsx)(_index.Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
+    size: "sm"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+  var FullData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.subtitle"
+  }, "Full Data")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "1,234,234"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "expandableRow.chartWrapper",
+    onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: 15
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, (0, _react2.jsx)(_recharts.LineChart, {
+    sx: sx.chart,
+    data: chartData
+  }, (0, _react2.jsx)(_recharts.Line, {
+    type: "monotone",
+    dataKey: "fullData",
+    dot: false,
+    stroke: _colors.neutral[20]
+  })))), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
+    size: "sm"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+  var PartialData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.subtitle"
+  }, "Partial Data")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "234,234"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "expandableRow.chartWrapper",
+    onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: 15
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, (0, _react2.jsx)(_recharts.LineChart, {
+    sx: sx.chart,
+    data: partialDataData
+  }, (0, _react2.jsx)(_recharts.Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: _colors.neutral[20]
+  })))), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "- 8.6%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
+    size: "sm"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+  var ZeroData = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.subtitle"
+  }, "Zero Data")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "expandableRow.chartWrapper",
+    onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: 15
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, (0, _react2.jsx)(_recharts.LineChart, {
+    sx: sx.chart,
+    data: zeroData
+  }, (0, _react2.jsx)(_recharts.Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: _colors.neutral[20]
+  })))), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
+    size: "sm"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+  var ZeroValues = (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, (0, _react2.jsx)(_index.Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.subtitle"
+  }, "Zero Values")), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "expandableRow.chartWrapper",
+    onPress: (0, _addonActions.action)('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: 15
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, (0, _react2.jsx)(_recharts.LineChart, {
+    sx: sx.chart,
+    data: zeroValuesData
+  }, (0, _react2.jsx)(_recharts.Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: _colors.neutral[20]
+  })))), (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), (0, _react2.jsx)(_index.Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), (0, _react2.jsx)(_index.Tooltip, null, "See Contributing Data")), (0, _react2.jsx)(_index.Box, {
+    size: "sm"
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+  return (0, _react2.jsx)(_react["default"].Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(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 _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/ScrollableListView'
+};
+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"])({}, _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)(_collections.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: "text.primary",
+      size: 25
+    }), (0, _react2.jsx)(_index.Text, {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignSelf: "center"
+    }, (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create-icon",
+      size: 20
+    }, (0, _react2.jsx)(_CreateIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
+      "aria-label": "create-icon",
+      size: 20
+    }, (0, _react2.jsx)(_MoreVertIcon["default"], null)))));
+  })));
+};
+
+exports.Default = Default;