@pingux/astro 2.20.0-alpha.0 → 2.20.0-alpha.10

package/lib/recipes/RowLineChart.stories.js

@@ -1,565 +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 _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, { useCallback, useMemo } from 'react';
-import { useVisuallyHidden } from 'react-aria';
-import { action } from '@storybook/addon-actions';
-import { Line, LineChart, ResponsiveContainer } from 'recharts';
-import useResizeObserver from 'use-resize-observer';
-import { Box, Button, SwitchField, Text, Tooltip, TooltipTrigger } from '../index';
-import { neutral } from '../styles/colors';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Recipes/Row Line Chart',
-  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 expandableRowSharedStyle = {
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap'
-};
-var alignCellRightWrapper = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-end'
-};
-var sx = {
-  container: {
-    backgroundColor: 'accent.99',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    pr: '20px'
-  },
-  chartTitleContainer: {},
-  chartContainer: {
-    width: '100%',
-    height: '100%'
-  },
-  chart: {
-    width: '50',
-    height: '18'
-  },
-  chartTrendContainer: {
-    ml: 'md',
-    width: '50px'
-  },
-  expandableRow: {
-    titleWrapper: {
-      maxWidth: '50%',
-      p: 'md'
-    },
-    lineChart: {
-      title: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
-        ml: '20px',
-        pr: 'md'
-      }),
-      content: _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
-        width: 100
-      }),
-      chart: {
-        width: '50px',
-        height: '18px'
-      },
-      chartWrapper: {
-        '&:hover': {
-          backgroundColor: '#4462ED1A'
-        }
-      },
-      divider: {
-        backgroundColor: 'neutral.80',
-        height: '35px',
-        width: '1px'
-      }
-    }
-  },
-  expandableRowButton: {
-    chartWrapper: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      color: 'black',
-      background: 'none',
-      cursor: 'pointer',
-      height: 60,
-      padding: 0,
-      ml: 'md',
-      pr: 'md',
-      border: 'none',
-      '&:hover': {
-        backgroundColor: '#4462ED1A'
-      }
-    }
-  },
-  expandableRowText: {
-    title: _objectSpread({
-      fontSize: 'lg',
-      color: 'neutral.20'
-    }, expandableRowSharedStyle),
-    subtitle: _objectSpread({
-      fontSize: 'sm',
-      color: 'neutral.60'
-    }, expandableRowSharedStyle),
-    lineChart: {
-      title: _objectSpread({
-        fontSize: 'sm',
-        color: 'neutral.40',
-        maxWidth: '100%'
-      }, expandableRowSharedStyle),
-      count: {
-        color: 'neutral.20',
-        fontSize: 22,
-        fontWeight: 2
-      },
-      countLabel: {
-        fontSize: 'xs',
-        color: 'neutral.50'
-      },
-      chartLabel: {
-        fontSize: 'xs',
-        color: 'neutral.50',
-        minWidth: '60px'
-      },
-      trend: {
-        color: 'neutral.20',
-        fontSize: 'sm',
-        fontWeight: 3,
-        whiteSpace: 'nowrap'
-      }
-    }
-  }
-};
-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, {
-    sx: sx.expandableRow.titleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
-  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
-  }, "Empty Data")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
-  }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
-  }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
-  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
-  }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
-  }, "0"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
-  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
-    onPress: action('seeContributingDataAction'),
-    "aria-label": "line-chart button"
-  }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
-  }), ___EmotionJSX(Box, {
-    ml: 15
-  }, ___EmotionJSX(Box, {
-    sx: sx.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, {
-    sx: sx.expandableRowText.lineChart.chartLabel
-  }, "No data yet")), ___EmotionJSX(Box, {
-    size: "sm",
-    sx: sx.chartTrendContainer
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.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, {
-    sx: sx.expandableRow.titleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
-  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
-  }, "Full Data")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
-  }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
-  }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
-  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
-  }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
-  }, "1,234,234"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
-  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
-    onPress: action('seeContributingDataAction'),
-    "aria-label": "line-chart button"
-  }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
-  }), ___EmotionJSX(Box, {
-    ml: 15
-  }, ___EmotionJSX(Box, {
-    sx: sx.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, {
-    sx: sx.expandableRowText.lineChart.chartLabel
-  }, "12 wk trend")), ___EmotionJSX(Box, {
-    size: "sm",
-    sx: sx.chartTrendContainer
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.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, {
-    sx: sx.expandableRow.titleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
-  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
-  }, "Partial Data")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
-  }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
-  }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
-  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
-  }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
-  }, "234,234"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
-  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
-    onPress: action('seeContributingDataAction'),
-    "aria-label": "line-chart button"
-  }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
-  }), ___EmotionJSX(Box, {
-    ml: 15
-  }, ___EmotionJSX(Box, {
-    sx: sx.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, {
-    sx: sx.expandableRowText.lineChart.chartLabel
-  }, "12 wk trend")), ___EmotionJSX(Box, {
-    size: "sm",
-    sx: sx.chartTrendContainer
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.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, {
-    sx: sx.expandableRow.titleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
-  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
-  }, "Zero Data")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
-  }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
-  }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
-  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
-  }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
-  }, "0"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
-  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
-    onPress: action('seeContributingDataAction'),
-    "aria-label": "line-chart button"
-  }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
-  }), ___EmotionJSX(Box, {
-    ml: 15
-  }, ___EmotionJSX(Box, {
-    sx: sx.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, {
-    sx: sx.expandableRowText.lineChart.chartLabel
-  }, "12 wk trend")), ___EmotionJSX(Box, {
-    size: "sm",
-    sx: sx.chartTrendContainer
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.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, {
-    sx: sx.expandableRow.titleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.title
-  }, "Expanded Row with Line Chart"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.subtitle
-  }, "Zero Values")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignItems: "center"
-  }, ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.title
-  }, hideIfMobile()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.title
-  }, "Avg daily sign-ons:")), ___EmotionJSX(Box, _extends({
-    sx: sx.expandableRow.lineChart.content
-  }, hideIfTablet()), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.count
-  }, "0"), ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.lineChart.countLabel
-  }, "Past 7 days")), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
-    sx: sx.expandableRowButton.chartWrapper,
-    onPress: action('seeContributingDataAction'),
-    "aria-label": "line-chart button"
-  }, hideIfTablet()), ___EmotionJSX(Box, {
-    sx: sx.expandableRow.lineChart.divider
-  }), ___EmotionJSX(Box, {
-    ml: 15
-  }, ___EmotionJSX(Box, {
-    sx: sx.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, {
-    sx: sx.expandableRowText.lineChart.chartLabel
-  }, "12 wk trend")), ___EmotionJSX(Box, {
-    size: "sm",
-    sx: sx.chartTrendContainer
-  }, ___EmotionJSX(Text, {
-    sx: sx.expandableRowText.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);
-};