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

package/lib/recipes/Slider.stories.js

@@ -1,204 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-/* eslint-disable no-nested-ternary */
-import React from 'react';
-import { useSlider, useSliderThumb } from '@react-aria/slider';
-import { useSliderState } from '@react-stately/slider';
-import { useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { mergeProps } from '@react-aria/utils';
-import { useNumberFormatter } from '@react-aria/i18n';
-import { Box } from '../index';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Recipes/Slider'
-};
-/*
- * The slider value can be formatted by using the `formatOptions` prop.
-`* formatOptions` is compatible with the option parameter of
- * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat)
- * and is applied based on the current locale.
- * https://react-spectrum.adobe.com/react-aria/useSlider.html
- */
-
-export var Default = function Default() {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    mb: "xl"
-  }, ___EmotionJSX(Slider, {
-    label: "Single with solid lower background",
-    maxValue: 100,
-    step: 1
-  })), ___EmotionJSX(Box, null, ___EmotionJSX(RangeSlider, {
-    label: "Multiple with gradient background and custom point values",
-    maxValue: 100,
-    defaultValue: [0, 1],
-    step: 1
-  })));
-};
-
-var Slider = function Slider(props) {
-  var _context, _context2, _context3, _context4;
-
-  var trackRef = React.useRef(null);
-  var numberFormatter = useNumberFormatter(props.formatOptions);
-  var state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
-    numberFormatter: numberFormatter
-  }));
-
-  var _useSlider = useSlider(props, state, trackRef),
-      groupProps = _useSlider.groupProps,
-      trackProps = _useSlider.trackProps,
-      labelProps = _useSlider.labelProps,
-      outputProps = _useSlider.outputProps;
-
-  var thumbPosition = state.getThumbPercent(0) * 100;
-  return ___EmotionJSX(Box, _extends({}, groupProps, {
-    sx: {
-      position: 'relative',
-      alignItems: 'center',
-      width: '100%',
-      touchAction: 'none'
-    }
-  }), ___EmotionJSX(Box, {
-    sx: {
-      alignSelf: 'stretch'
-    }
-  }, props.label && ___EmotionJSX("label", labelProps, props.label), ___EmotionJSX(Box, _extends({}, outputProps, {
-    sx: {
-      flex: '1 0 auto',
-      textAlign: 'end'
-    }
-  }), "(", state.getThumbValueLabel(0), ")")), ___EmotionJSX(Box, _extends({}, trackProps, {
-    ref: trackRef,
-    sx: {
-      position: 'relative',
-      height: 30,
-      width: ' 100%'
-    }
-  }), ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      backgroundImage: thumbPosition < 25 ? _concatInstanceProperty(_context = "linear-gradient(to right, rgb(169, 215, 50) 0%, rgb(169, 215, 50) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 25 && thumbPosition <= 49 ? _concatInstanceProperty(_context2 = "linear-gradient(to right, rgb(226, 215, 20) 0%, rgb(226, 215, 20) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context2, thumbPosition, "%, rgb(242, 242, 242) 100%)") : thumbPosition >= 50 && thumbPosition <= 74 ? _concatInstanceProperty(_context3 = "linear-gradient(to right,  rgb(231, 135, 38) 0%,  rgb(231, 135, 38) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context3, thumbPosition, "%, rgb(242, 242, 242) 100%)") : _concatInstanceProperty(_context4 = "linear-gradient(to right, rgb(235, 44, 56) 0%, rgb(235, 44, 56) ".concat(thumbPosition, "%, rgb(242, 242, 242) ")).call(_context4, thumbPosition, "%, rgb(242, 242, 242) 100%)"),
-      height: 10,
-      borderRadius: '5px',
-      top: 13,
-      width: '100%'
-    }
-  }), ___EmotionJSX(Thumb, {
-    index: 0,
-    state: state,
-    trackRef: trackRef
-  })));
-};
-
-var RangeSlider = function RangeSlider(props) {
-  var _context5;
-
-  var trackRef = React.useRef(null);
-  var numberFormatter = useNumberFormatter(props.formatOptions);
-  var state = useSliderState(_objectSpread(_objectSpread({}, props), {}, {
-    numberFormatter: numberFormatter
-  }));
-
-  var _useSlider2 = useSlider(props, state, trackRef),
-      groupProps = _useSlider2.groupProps,
-      trackProps = _useSlider2.trackProps,
-      labelProps = _useSlider2.labelProps,
-      outputProps = _useSlider2.outputProps;
-
-  return ___EmotionJSX(Box, _extends({}, groupProps, {
-    sx: {
-      position: 'relative',
-      alignItems: 'center',
-      width: '100%',
-      touchAction: 'none'
-    }
-  }), ___EmotionJSX(Box, {
-    sx: {
-      alignSelf: 'stretch'
-    }
-  }, props.label && ___EmotionJSX("label", labelProps, props.label), ___EmotionJSX(Box, _extends({}, outputProps, {
-    sx: {
-      flex: '1 0 auto',
-      textAlign: 'end'
-    }
-  }), "(", _concatInstanceProperty(_context5 = "".concat(state.getThumbValueLabel(0), ", ")).call(_context5, state.getThumbValueLabel(1)), ")")), ___EmotionJSX(Box, _extends({}, trackProps, {
-    ref: trackRef,
-    sx: {
-      position: 'relative',
-      height: 30,
-      width: ' 100%'
-    }
-  }), ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      backgroundImage: 'linear-gradient(to right, rgb(169, 215, 50) 10%, rgb(226, 215, 20) 50%, rgb(235, 44, 56) 90%)',
-      height: 10,
-      borderRadius: '5px',
-      top: 13,
-      width: '100%'
-    }
-  }), ___EmotionJSX(Thumb, {
-    index: 0,
-    state: state,
-    trackRef: trackRef
-  }), ___EmotionJSX(Thumb, {
-    index: 1,
-    state: state,
-    trackRef: trackRef
-  })));
-};
-
-var Thumb = function Thumb(props) {
-  var state = props.state,
-      trackRef = props.trackRef,
-      index = props.index;
-  var inputRef = React.useRef(null);
-
-  var _useSliderThumb = useSliderThumb({
-    index: index,
-    trackRef: trackRef,
-    inputRef: inputRef
-  }, state),
-      thumbProps = _useSliderThumb.thumbProps,
-      inputProps = _useSliderThumb.inputProps;
-
-  var _useFocusRing = useFocusRing(),
-      focusProps = _useFocusRing.focusProps,
-      isFocusVisible = _useFocusRing.isFocusVisible;
-
-  return ___EmotionJSX(Box, {
-    sx: {
-      position: 'absolute',
-      top: 5,
-      transform: 'translateX(-50%)',
-      left: "".concat(state.getThumbPercent(index) * 100, "%")
-    }
-  }, ___EmotionJSX(Box, _extends({}, thumbProps, {
-    sx: {
-      width: 25,
-      height: 25,
-      borderRadius: '50%',
-      backgroundColor: 'white',
-      border: '1px solid #C1C5C8',
-      boxShadow: '0 2px 2px 0 #CACACA',
-      outline: isFocusVisible ? '5px solid rgba(41,150,204,0.5)' : 'none'
-    }
-  }), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX("input", _extends({
-    ref: inputRef
-  }, mergeProps(inputProps, focusProps))))));
-};

package/lib/recipes/StatsCircle.stories.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import Box from '../components/Box';
-import Text from '../components/Text';
-import { active } from '../styles/colors';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Recipes/StatsCircle'
-};
-var sx = {
-  statsCircle: {
-    border: '3px solid',
-    borderColor: active,
-    borderRadius: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-};
-export var Default = function Default() {
-  return ___EmotionJSX(Box, {
-    width: "110px",
-    height: "110px",
-    sx: sx.statsCircle
-  }, ___EmotionJSX(Text, {
-    fontSize: 30
-  }, "63"), ___EmotionJSX(Text, {
-    color: "text.secondary"
-  }, "Members"));
-};