@pingux/astro 1.27.0-alpha.21 → 1.27.0-alpha.23

package/lib/recipes/RowLineChart.stories.js

@@ -1,507 +0,0 @@
-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
-}];
-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,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
-    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",
-    ml: 20,
-    pr: 15
-  }, 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'),
-    ml: 15,
-    pr: 15,
-    "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, {
-    width: "100%",
-    height: "100%"
-  }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
-    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",
-    ml: 15,
-    width: 50
-  }, ___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,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
-    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",
-    ml: 20,
-    pr: 15
-  }, 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'),
-    ml: 15,
-    pr: 15,
-    "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, {
-    width: "100%",
-    height: "100%"
-  }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
-    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",
-    ml: 15,
-    width: 50
-  }, ___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,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
-    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",
-    ml: 20,
-    pr: 15
-  }, 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'),
-    ml: 15,
-    pr: 15,
-    "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, {
-    width: "100%",
-    height: "100%"
-  }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
-    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",
-    ml: 15,
-    width: 50
-  }, ___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,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
-    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",
-    ml: 20,
-    pr: 15
-  }, 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'),
-    ml: 15,
-    pr: 15,
-    "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, {
-    width: "100%",
-    height: "100%"
-  }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
-    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",
-    ml: 15,
-    width: 50
-  }, ___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,
-    bg: "accent.99",
-    alignItems: "center",
-    justifyContent: "space-between",
-    pr: 20,
-    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",
-    ml: 20,
-    pr: 15
-  }, 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'),
-    ml: 15,
-    pr: 15,
-    "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, {
-    width: "100%",
-    height: "100%"
-  }, ___EmotionJSX(LineChart, {
-    width: 50,
-    height: 18,
-    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",
-    ml: 15,
-    width: 50
-  }, ___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

@@ -1,113 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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
-  })));
-};