@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.5

package/lib/recipes/EditableInput.stories.js

@@ -8,15 +8,12 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
 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, { createContext, useContext, useRef, useState, useEffect } from 'react';
-import CloseIcon from 'mdi-react/CloseIcon';
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import CheckIcon from 'mdi-react/CheckIcon';
-import { TextAreaField, IconButton, Icon, Box } from '../index';
+import CloseIcon from 'mdi-react/CloseIcon';
+import { Box, Icon, IconButton, TextAreaField } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Editable Input'
@@ -88,6 +85,7 @@ export var Default = function Default() {
     controlProps: controlProps
   }));
 };
+
 /**
  * Editable
  * Wrapper component that provides context value for all editable components
@@ -95,18 +93,16 @@ export var Default = function Default() {
 
 var Editable = function Editable(props) {
   var value = props.value,
-      isEditing = props.isEditing;
+    isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
     prevValue: '',
     value: value || ''
   };
-
   var _useState = useState(editableContextValue),
-      _useState2 = _slicedToArray(_useState, 2),
-      editableContext = _useState2[0],
-      setEditableContext = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    editableContext = _useState2[0],
+    setEditableContext = _useState2[1];
   return ___EmotionJSX(Box, {
     sx: {
       position: 'relative'
@@ -115,23 +111,21 @@ var Editable = function Editable(props) {
     value: [editableContext, setEditableContext]
   }, props.children));
 };
+
 /**
  * Editable preview
  * Read-only view of the component
  */
 
-
 var EditablePreview = function EditablePreview() {
   var _useContext = useContext(EditableAreaContext),
-      _useContext2 = _slicedToArray(_useContext, 2),
-      editableContext = _useContext2[0],
-      setEditableContext = _useContext2[1];
-
+    _useContext2 = _slicedToArray(_useContext, 2),
+    editableContext = _useContext2[0],
+    setEditableContext = _useContext2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hasFocus = _useState4[0],
-      setFocus = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFocus = _useState4[0],
+    setFocus = _useState4[1];
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -144,13 +138,11 @@ var EditablePreview = function EditablePreview() {
       setFocus(false);
     }
   }, [hasFocus, editableContext.isEditing]);
-
   var handleClick = function handleClick() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       isEditing: true
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -158,7 +150,6 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-
   return ___EmotionJSX(Box, {
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
@@ -177,32 +168,28 @@ var EditablePreview = function EditablePreview() {
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
+
 /**
  * Editable input
  * Swappable with TextField and TextAreaField component
  * Input view of the component
  */
 
-
 var EditableInput = function EditableInput(props) {
   var ariaLabel = props.inputProps.ariaLabel;
   var editableInput = useRef(null);
-
   var _useContext3 = useContext(EditableAreaContext),
-      _useContext4 = _slicedToArray(_useContext3, 2),
-      editableContext = _useContext4[0],
-      setEditableContext = _useContext4[1];
-
+    _useContext4 = _slicedToArray(_useContext3, 2),
+    editableContext = _useContext4[0],
+    setEditableContext = _useContext4[1];
   var _useState5 = useState(editableContext.value || ''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      prevValue = _useState6[0],
-      setPrevValue = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevValue = _useState6[0],
+    setPrevValue = _useState6[1];
   var _useState7 = useState(editableContext.value || ''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      editingValue = _useState8[0],
-      setEditingValue = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    editingValue = _useState8[0],
+    setEditingValue = _useState8[1];
   useEffect(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -211,14 +198,12 @@ var EditableInput = function EditableInput(props) {
       editableInput.current.focus();
     }
   }, [editableContext.isEditing]);
-
   var handleChange = function handleChange(e) {
     setEditingValue(e.target.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       value: e.target.value
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Escape') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -230,7 +215,6 @@ var EditableInput = function EditableInput(props) {
       if (e.shiftKey) {
         return;
       }
-
       setPrevValue(editableContext.value);
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
         prevValue: editableContext.value,
@@ -239,7 +223,6 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
-
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
@@ -258,28 +241,25 @@ var EditableInput = function EditableInput(props) {
     isUnresizable: true
   }));
 };
+
 /**
  * Editable controls
  * Use css to position buttons
  * Extend with more button controls as needed
  */
 
-
 var EditableControl = function EditableControl(props) {
   var confirmBtn = props.controlProps.confirmBtn,
-      cancelBtn = props.controlProps.cancelBtn,
-      onPress = props.onPress;
-
+    cancelBtn = props.controlProps.cancelBtn,
+    onPress = props.onPress;
   var _useContext5 = useContext(EditableAreaContext),
-      _useContext6 = _slicedToArray(_useContext5, 2),
-      editableContext = _useContext6[0],
-      setEditableContext = _useContext6[1];
-
+    _useContext6 = _slicedToArray(_useContext5, 2),
+    editableContext = _useContext6[0],
+    setEditableContext = _useContext6[1];
   var _useState9 = useState(editableContext.value || ''),
-      _useState10 = _slicedToArray(_useState9, 2),
-      prevValue = _useState10[0],
-      setPrevValue = _useState10[1];
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    prevValue = _useState10[0],
+    setPrevValue = _useState10[1];
   var handleCancel = function handleCancel() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       prevValue: prevValue,
@@ -287,7 +267,6 @@ var EditableControl = function EditableControl(props) {
       isEditing: false
     }));
   };
-
   var handleSubmit = function handleSubmit() {
     setPrevValue(editableContext.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -295,12 +274,10 @@ var EditableControl = function EditableControl(props) {
       value: editableContext.value,
       isEditing: false
     }));
-
     if (onPress) {
       onPress();
     }
   };
-
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -8,24 +8,21 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
+import { useOverlayPosition } from 'react-aria';
+import { useLayoutEffect } from '@react-aria/utils';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { useOverlayPosition } from 'react-aria';
-import { useLayoutEffect } from '@react-aria/utils';
-import { Button, Box, Icon, IconButton } from '../index';
 import PopoverContainer from '../components/PopoverContainer';
+import { Box, Button, Icon, IconButton } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Flippable Caret Menu Button'
@@ -68,59 +65,47 @@ var sx = {
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedButtons = _useState4[0],
-      setSelectedButton = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedButtons = _useState4[0],
+    setSelectedButton = _useState4[1];
   var onChange = function onChange() {
     setIsOpen(!isOpen);
   };
-
   var toggleButton = function toggleButton(key) {
     var _context;
-
     var newState = selectedButtons;
-
     if (_includesInstanceProperty(selectedButtons).call(selectedButtons, key)) {
       var index = _indexOfInstanceProperty(newState).call(newState, key);
-
       _spliceInstanceProperty(newState).call(newState, index, 1);
     } else {
       newState.push(key);
     }
-
     setSelectedButton(_concatInstanceProperty(_context = []).call(_context, newState));
   };
-
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: 'bottom left',
-    isOpen: true
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+      targetRef: buttonRef,
+      overlayRef: popoverRef,
+      placement: 'bottom left',
+      isOpen: true
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   useLayoutEffect(function () {
     requestAnimationFrame(function () {
       updatePosition();
     });
   }, [updatePosition]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: '500px',
     minWidth: '500px',
     height: '200px'
   });
-
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     ref: buttonRef,
     variant: "inline",

package/lib/recipes/LinkedListView.stories.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
@@ -6,7 +7,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
 import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
-import { Box, Badge, Icon, IconButton, Item, ListView, Menu, OverlayProvider, PopoverMenu, Separator, Text } from '../index';
+import { Badge, Box, Icon, IconButton, Item, ListView, Menu, OverlayProvider, PopoverMenu, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/LinkedListView',
@@ -60,7 +61,9 @@ var testData = [{
   name: 'Policy5',
   policyId: 'asdf23zaa-124123asdf',
   id: '3'
-}]; // IMPORTANT PLEASE READ
+}];
+
+// IMPORTANT PLEASE READ
 // in order for the list portion of this recipe to function correctly,
 // the array of objects that will be used to create
 // the production and staging rows, will need to be flat and sorted.
@@ -71,11 +74,9 @@ var testData = [{
 
 var flattenArray = function flattenArray(array) {
   var newArray = array;
-
   _forEachInstanceProperty(newArray).call(newArray, function (item) {
     if (item.childrenObjects) {
       var _context;
-
       _forEachInstanceProperty(_context = item.childrenObjects).call(_context, function (obj) {
         var newObj = obj;
         newObj.parentId = item.id;
@@ -83,40 +84,31 @@ var flattenArray = function flattenArray(array) {
       });
     }
   });
-
   return newArray;
 };
-
 var testSort = function testSort(array) {
   var newArray = array;
-
   _forEachInstanceProperty(newArray).call(newArray, function (item, i) {
     if (item.parentId) {
       var thisindex = _findIndexInstanceProperty(newArray).call(newArray, function (object) {
         return object.id === item.parentId;
       });
-
       var element = _spliceInstanceProperty(newArray).call(newArray, i, 1)[0];
-
       _spliceInstanceProperty(newArray).call(newArray, thisindex + 1, 0, element);
     }
   });
-
   return newArray;
 };
-
 var unsorted = flattenArray(testData);
 var sorted = testSort(unsorted);
 export var Default = function Default(_ref) {
   var _context2;
-
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useState = useState(_concatInstanceProperty(_context2 = []).call(_context2, sorted)),
-      _useState2 = _slicedToArray(_useState, 1),
-      theseItems = _useState2[0]; // svg of the bottom portion of the bracket, the portion with the L shaped hook.
-
+    _useState2 = _slicedToArray(_useState, 1),
+    theseItems = _useState2[0];
 
+  // svg of the bottom portion of the bracket, the portion with the L shaped hook.
   var BottomBracket = function BottomBracket() {
     var color = '#CACED3';
     return ___EmotionJSX(Box, {
@@ -168,9 +160,9 @@ export var Default = function Default(_ref) {
       fill: "white",
       transform: "translate(-280 -419)"
     }))))));
-  }; // the top portion of the bracket svg, this is basically just a straight vertical line.
-
+  };
 
+  // the top portion of the bracket svg, this is basically just a straight vertical line.
   var TopBracket = function TopBracket() {
     var color = '#CACED3';
     return ___EmotionJSX(Box, {
@@ -200,9 +192,9 @@ export var Default = function Default(_ref) {
       stroke: color,
       fill: "none"
     }))));
-  }; // the vector shield and key icon.
-
+  };
 
+  // the vector shield and key icon.
   var ShieldVector = function ShieldVector(props) {
     return ___EmotionJSX("svg", _extends({
       width: "19",
@@ -212,9 +204,9 @@ export var Default = function Default(_ref) {
     }, props), ___EmotionJSX("path", {
       d: "M9.5 7.33342C9.77627 7.33342 10.0412 7.44316 10.2366 7.63851C10.4319 7.83386 10.5417 8.09881 10.5417 8.37508C10.5417 8.65135 10.4319 8.9163 10.2366 9.11165C10.0412 9.307 9.77627 9.41675 9.5 9.41675C9.22373 9.41675 8.95878 9.307 8.76343 9.11165C8.56808 8.9163 8.45833 8.65135 8.45833 8.37508C8.45833 8.09881 8.56808 7.83386 8.76343 7.63851C8.95878 7.44316 9.22373 7.33342 9.5 7.33342ZM18.875 10.4584C18.875 16.2397 14.875 21.6459 9.5 22.9584C4.125 21.6459 0.125 16.2397 0.125 10.4584V4.20842L9.5 0.041748L18.875 4.20842V10.4584ZM9.5 5.25008C8.6712 5.25008 7.87634 5.57932 7.29029 6.16537C6.70424 6.75142 6.375 7.54628 6.375 8.37508C6.375 9.73967 7.23958 10.8959 8.45833 11.323V17.7501H10.5417V15.6667H12.625V13.5834H10.5417V11.323C11.7604 10.8959 12.625 9.73967 12.625 8.37508C12.625 7.54628 12.2958 6.75142 11.7097 6.16537C11.1237 5.57932 10.3288 5.25008 9.5 5.25008Z"
     }));
-  }; // reusable piece of code that handles the iconbutton and popover on the right side of the rows
-
+  };
 
+  // reusable piece of code that handles the iconbutton and popover on the right side of the rows
   var IconWithPopover = function IconWithPopover() {
     return ___EmotionJSX(PopoverMenu, {
       direction: "left"
@@ -246,9 +238,9 @@ export var Default = function Default(_ref) {
     }, ___EmotionJSX(Text, {
       color: "critical.bright"
     }, "Delete"))));
-  }; // made these separate components because staging and production both use them.
-
+  };
 
+  // made these separate components because staging and production both use them.
   var DefaultBadge = function DefaultBadge() {
     return ___EmotionJSX(Badge, {
       label: "Default",
@@ -261,10 +253,9 @@ export var Default = function Default(_ref) {
       }
     });
   };
-
   var ExprirationBadge = function ExprirationBadge(props) {
     var expirationText = props.expirationText,
-        chipText = props.chipText;
+      chipText = props.chipText;
     return ___EmotionJSX(Box, {
       sx: !chipText && {
         paddingLeft: '72px'
@@ -284,14 +275,14 @@ export var Default = function Default(_ref) {
       textColor: "text.primary",
       label: expirationText
     }));
-  }; // jsx of the production row
-
+  };
 
+  // jsx of the production row
   var Production = function Production(props) {
     var chipText = props.chipText,
-        hasStaging = props.hasStaging,
-        policyId = props.policyId,
-        name = props.name;
+      hasStaging = props.hasStaging,
+      policyId = props.policyId,
+      name = props.name;
     return ___EmotionJSX(Box, {
       isRow: true,
       height: "75px"
@@ -325,15 +316,15 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId)), chipText && ___EmotionJSX(DefaultBadge, null)), ___EmotionJSX(IconWithPopover, null));
-  }; // jsx of the staging row.
-
+    }, "Policy Id:", ' ', policyId)), chipText && ___EmotionJSX(DefaultBadge, null)), ___EmotionJSX(IconWithPopover, null));
+  };
 
+  // jsx of the staging row.
   var Staging = function Staging(props) {
     var chipText = props.chipText,
-        expirationText = props.expirationText,
-        policyId = props.policyId,
-        name = props.name;
+      expirationText = props.expirationText,
+      policyId = props.policyId,
+      name = props.name;
     return ___EmotionJSX(Box, {
       isRow: true,
       height: "75px",
@@ -366,11 +357,10 @@ export var Default = function Default(_ref) {
         color: 'text.secondary',
         fontSize: 'sm'
       }
-    }, "Policy Id: ", policyId))), chipText && ___EmotionJSX(DefaultBadge, null), expirationText && ___EmotionJSX(ExprirationBadge, {
+    }, "Policy Id:", ' ', policyId))), chipText && ___EmotionJSX(DefaultBadge, null), expirationText && ___EmotionJSX(ExprirationBadge, {
       expirationText: expirationText
     }), ___EmotionJSX(IconWithPopover, null));
   };
-
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ListView, _extends({}, args, {
     items: theseItems
   }), function (item) {