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

package/lib/recipes/RowLineChart.stories.js

@@ -0,0 +1,495 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useCallback, useMemo } from 'react';
+import { Line, LineChart, ResponsiveContainer } from 'recharts';
+import { action } from '@storybook/addon-actions';
+import useResizeObserver from 'use-resize-observer';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import { neutral } from '../styles/colors';
+import { Box, Button, SwitchField, Text, Tooltip, TooltipTrigger } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/RowLineChart',
+  parameters: {
+    chromatic: {
+      diffThreshold: 0.9
+    }
+  }
+};
+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'
+  }
+};
+export var Default = function Default() {
+  var _useResizeObserver = useResizeObserver(),
+      ref = _useResizeObserver.ref,
+      width = _useResizeObserver.width;
+
+  var _useVisuallyHidden = useVisuallyHidden(),
+      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+
+  var isTablet = useMemo(function () {
+    return width <= 605;
+  }, [width]);
+  var isMobile = useMemo(function () {
+    return width <= 350;
+  }, [width]);
+  var hideIfTablet = useCallback(function () {
+    return isTablet && visuallyHiddenProps;
+  }, [isTablet]);
+  var hideIfMobile = useCallback(function () {
+    return isMobile && visuallyHiddenProps;
+  }, [isMobile]);
+
+  var EmptyData = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.container,
+    ref: ref
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Empty Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart"
+  }, ___EmotionJSX(ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, ___EmotionJSX(LineChart, {
+    sx: sx.chart,
+    data: chartData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "emptyData",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "No data yet")), ___EmotionJSX(Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var FullData = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Full Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "1,234,234"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, ___EmotionJSX(LineChart, {
+    sx: sx.chart,
+    data: chartData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "fullData",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var PartialData = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Partial Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "234,234"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, ___EmotionJSX(LineChart, {
+    sx: sx.chart,
+    data: partialDataData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "- 8.6%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var ZeroData = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Zero Data")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, ___EmotionJSX(LineChart, {
+    sx: sx.chart,
+    data: zeroData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  var ZeroValues = ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.container,
+    mt: 20
+  }, ___EmotionJSX(Box, {
+    p: "md",
+    variant: "boxes.expandableRow.titleWrapper"
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.title"
+  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
+    variant: "expandableRow.subtitle"
+  }, "Zero Values")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    sx: sx.chartTitleContainer
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.title"
+  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
+    variant: "boxes.expandableRow.lineChart.alignCellRightWrapper",
+    width: 100
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.count"
+  }, "0"), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.countLabel"
+  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "expandableRow.chartWrapper",
+    onPress: action('seeContributingDataAction'),
+    sx: sx.button,
+    "aria-label": "line-chart button"
+  }, hideIfTablet()), ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: 15
+  }, ___EmotionJSX(Box, {
+    variant: "boxes.expandableRow.lineChart.chart",
+    width: 50
+  }, ___EmotionJSX(ResponsiveContainer, {
+    sx: sx.chartContainer
+  }, ___EmotionJSX(LineChart, {
+    sx: sx.chart,
+    data: zeroValuesData
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: "value",
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.chartLabel"
+  }, "12 wk trend")), ___EmotionJSX(Box, {
+    size: "sm",
+    sx: sx.chartTrendContainer
+  }, ___EmotionJSX(Text, {
+    variant: "expandableRow.lineChart.trend"
+  }, "+ 0%"))), ___EmotionJSX(Tooltip, null, "See Contributing Data")), ___EmotionJSX(Box, {
+    size: "sm"
+  }, ___EmotionJSX(SwitchField, {
+    "aria-label": "line-chart switch-field"
+  }))));
+
+  return ___EmotionJSX(React.Fragment, null, EmptyData, FullData, PartialData, ZeroData, ZeroValues);
+};

package/lib/recipes/ScrollableListView.stories.js

@@ -0,0 +1,113 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } 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 { SearchField, ListView, Box, IconButton, ScrollBox, Text, Icon } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/ScrollableListView'
+};
+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'
+}];
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(unfilteredItems),
+      _useState4 = _slicedToArray(_useState3, 2),
+      items = _useState4[0],
+      setItems = _useState4[1];
+
+  var filterItems = function filterItems(input) {
+    var filtered = _filterInstanceProperty(unfilteredItems).call(unfilteredItems, function (obj) {
+      var _context;
+
+      return _includesInstanceProperty(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
+    });
+
+    setItems(filtered);
+  };
+
+  var onChangeInput = function onChangeInput(input) {
+    setValue(input);
+    filterItems(input);
+  };
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
+    value: value,
+    onChange: onChangeInput
+  }), ___EmotionJSX(ScrollBox, {
+    maxHeight: 450,
+    hasShadows: true
+  }, ___EmotionJSX(ListView, _extends({}, args, {
+    items: items
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name
+    }, ___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": "create-icon",
+      size: 20
+    }, ___EmotionJSX(MoreVertIcon, null)))));
+  })));
+};

package/lib/recipes/SelectedFieldOverlay.story.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import VisibilityOffOutlineIcon from 'mdi-react/VisibilityOffOutlineIcon';
+import Box from '../components/Box';
+import Icon from '../components/Icon';
+import TextField from '../components/TextField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Selected Field Overlay'
+};
+var sx = {
+  container: {
+    padding: 'md',
+    position: 'relative',
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: 'active',
+    borderRadius: 4,
+    cursor: 'pointer'
+  },
+  overlay: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:focus': {
+      outline: 'none'
+    }
+  }
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    sx: sx.container
+  }, ___EmotionJSX(TextField, {
+    label: "Name",
+    controlProps: {
+      tabIndex: '-1'
+    }
+  }), ___EmotionJSX(Box, {
+    sx: sx.overlay,
+    tabIndex: "0"
+  }, ___EmotionJSX(Icon, {
+    icon: VisibilityOffOutlineIcon,
+    size: 22
+  })));
+};