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

package/lib/layouts/SchemaFormLayout.stories.js

@@ -0,0 +1,107 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React from 'react';
+import Earth from 'mdi-react/EarthIcon';
+import Cog from 'mdi-react/CogOutlineIcon';
+import Button from '../components/Button/Button';
+import Box from '../components/Box/Box';
+import Icon from '../components/Icon/Icon';
+import Text from '../components/Text/Text';
+import Separator from '../components/Separator/Separator';
+import TextField from '../components/TextField/TextField';
+import TextAreaField from '../components/TextAreaField/TextAreaField';
+import RadioGroupField from '../components/RadioGroupField/RadioGroupField';
+import RadioField from '../components/RadioField/RadioField';
+import Tabs from '../components/Tabs/Tabs';
+import Tab from '../components/Tab/Tab';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Layouts/SchemaForms'
+};
+export var Default = function Default() {
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  return ___EmotionJSX(Box, {
+    bg: "accent.99"
+  }, ___EmotionJSX(Separator, {
+    margin: "0"
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    p: "sm"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto"
+  }, ___EmotionJSX(Box, {
+    mr: "sm"
+  }, ___EmotionJSX(Text, {
+    variant: "label"
+  }, "Form Builder"), ___EmotionJSX(Text, {
+    variant: "title"
+  }, "Standard Registration")), ___EmotionJSX(Button, {
+    variant: "inline",
+    alignContent: "center"
+  }, "Preview")), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItem: "center"
+  }, ___EmotionJSX(Text, {
+    variant: "base",
+    mr: "lg",
+    color: "active",
+    alignSelf: "center"
+  }, "Cancel"), ___EmotionJSX(Button, {
+    bg: "active",
+    color: "white"
+  }, "Save and Close"))), ___EmotionJSX(Separator, {
+    margin: "0"
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    bg: "white"
+  }, ___EmotionJSX(Box, {
+    flexGrow: 1,
+    p: "md"
+  }, ___EmotionJSX(Box, {
+    onClick: function onClick() {
+      return !visible ? setVisible(!visible) : '';
+    }
+  }, ___EmotionJSX(Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    }
+  }, ___EmotionJSX(Tab, {
+    key: "Tab 1",
+    title: "Tab 1",
+    icon: ___EmotionJSX(Icon, {
+      icon: Earth,
+      size: 20,
+      color: "active",
+      mb: 10
+    })
+  }), ___EmotionJSX(Tab, {
+    key: "Tab 2",
+    title: "Tab 2",
+    icon: ___EmotionJSX(Icon, {
+      icon: Cog,
+      size: 20,
+      color: "active",
+      mb: 10
+    })
+  })), ___EmotionJSX(TextField, {
+    mt: "lg",
+    mb: "lg",
+    label: "Form Name"
+  }), ___EmotionJSX(TextAreaField, {
+    mb: "lg",
+    label: "Description"
+  }), ___EmotionJSX(RadioGroupField, {
+    label: "Required Fields",
+    variant: "radioGroupBasic"
+  }, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "Option A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "Option B"
+  }))))));
+};

package/lib/recipes/ApplicationSearchDropdown.stories.js

@@ -0,0 +1,272 @@
+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 _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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useState, useRef, useMemo } from 'react';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { useLayoutEffect } from '@react-aria/utils';
+import SearchIcon from 'mdi-react/SearchIcon';
+import Email from 'mdi-react/EmailIcon';
+import Pin from 'mdi-react/PinIcon';
+import { useFilter } from '@react-aria/i18n';
+import { FocusScope, createFocusManager } from '@react-aria/focus';
+import { ListView, Item, IconButton, Text, PopoverContainer, Box, Icon, SearchField } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/ApplicationSearchDropdown'
+};
+var items = [{
+  key: 'Gmail',
+  application: 'Gmail',
+  description: 'Googles most finest email app used by bazillions of people',
+  logo: Email,
+  id: '1'
+}, {
+  key: 'GAPG',
+  application: 'Google Apps Password Generator',
+  description: 'Generate passwords for all your Google Apps',
+  logo: Email,
+  id: '2'
+}, {
+  key: 'GCalendar',
+  application: 'Google Calendar',
+  description: 'Get your life organized and never miss an appointment again',
+  logo: Email,
+  id: '3'
+}, {
+  key: 'GDrive',
+  application: 'Google Drive',
+  description: 'Store all of your precious files up in the clouds',
+  logo: Email,
+  id: '4'
+}, {
+  key: 'Gmail2',
+  application: 'Gmail2',
+  description: 'Googles most finest email app used by bazillions of people',
+  logo: Email,
+  id: '5'
+}, {
+  key: 'GAPG2',
+  application: 'Google Apps Password Generator2',
+  description: 'Generate passwords for all your Google Apps',
+  logo: Email,
+  id: '6'
+}, {
+  key: 'GCalendar2',
+  application: 'Google Calendar2',
+  description: 'Get your life organized and never miss an appointment again',
+  logo: Email,
+  id: '7'
+}, {
+  key: 'GDrive2',
+  application: 'Google Drive2',
+  description: 'Store all of your precious files up in the clouds',
+  logo: Email,
+  id: '8'
+}];
+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];
+
+  var focusManager = createFocusManager(popoverRef);
+
+  var _useOverlayPosition = useOverlayPosition({
+    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), {}, {
+    minWidth: '380px',
+    maxHeight: '320px',
+    // shows 4 options
+    '& > div': {}
+  });
+
+  var _useFilter = useFilter({
+    sensitivity: 'base'
+  }),
+      startsWith = _startsWithInstanceProperty(_useFilter);
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      filterValue = _useState4[0],
+      setFilterValue = _useState4[1];
+
+  var filteredItems = useMemo(function () {
+    return _filterInstanceProperty(items).call(items, function (item) {
+      return startsWith(item.application, filterValue);
+    });
+  }, [items, filterValue]);
+
+  var onKeyDown = function onKeyDown(e) {
+    if (e.key === 'ArrowDown') {
+      focusManager.focusNext();
+    }
+  };
+
+  var InnerHtml = function InnerHtml(props) {
+    var _useState5 = useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        isPinned = _useState6[0],
+        setIsPinned = _useState6[1];
+
+    var item = props.item;
+
+    var onPinPress = function onPinPress() {
+      setIsPinned(!isPinned);
+    };
+
+    return ___EmotionJSX(Box, {
+      isRow: true
+    }, ___EmotionJSX(Icon, {
+      icon: item.logo,
+      mr: "md",
+      color: "text.primary",
+      size: 40,
+      alignSelf: "center",
+      ml: "-10px"
+    }), ___EmotionJSX(Box, {
+      alignSelf: "center",
+      sx: {
+        maxWidth: '260px'
+      }
+    }, ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center",
+      mr: "auto",
+      sx: {
+        fontWeight: '700'
+      }
+    }, item.application), ___EmotionJSX(Text, {
+      variant: "itemSubtitle",
+      alignSelf: "center",
+      mr: "auto",
+      sx: {
+        fontSize: '15px'
+      }
+    }, item.description)), ___EmotionJSX(Box, {
+      alignSelf: "center"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "Pin ".concat(item.application),
+      ml: "md",
+      alignSelf: "center",
+      onPress: function onPress() {
+        return onPinPress();
+      },
+      sx: {
+        '&.is-hovered': {
+          bg: 'transparent'
+        },
+        '&.is-pressed': {
+          'path': {
+            fill: 'active'
+          }
+        }
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: Pin,
+      sx: {
+        transform: 'rotate(45deg)',
+        '& > path': {
+          fill: isPinned ? 'success.bright' : 'neutral.50'
+        }
+      }
+    }))));
+  };
+
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(FocusScope, null, ___EmotionJSX(SearchField, {
+    ref: buttonRef,
+    icon: SearchIcon,
+    "aria-label": "Search Groups",
+    width: "380px",
+    controlProps: {
+      sx: {
+        borderRadius: '20px'
+      }
+    },
+    inputValue: filterValue,
+    onChange: setFilterValue,
+    onKeyUp: onKeyDown,
+    mr: "lg",
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    },
+    onBlur: function onBlur() {
+      return setIsOpen(false);
+    }
+  }), ___EmotionJSX(PopoverContainer, {
+    isOpen: isOpen && filteredItems.length > 0,
+    hasNoArrow: true,
+    isNonModal: true,
+    isDismissable: false,
+    ref: popoverRef,
+    placement: placement,
+    style: style,
+    type: "grid",
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    },
+    onBlur: function onBlur() {
+      return setIsOpen(false);
+    }
+  }, ___EmotionJSX(ListView, {
+    items: filteredItems,
+    onSelectionChange: function onSelectionChange() {
+      return setIsOpen(!isOpen);
+    },
+    rowProps: {
+      sx: {
+        bg: 'red',
+        padding: '-4px'
+      }
+    },
+    padding: "-4px"
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name,
+      "data-id": item.key,
+      hasSeparator: false,
+      listItemProps: {
+        sx: {
+          bg: 'white',
+          '&.is-hovered': {
+            bg: 'accent.99'
+          }
+        }
+      }
+    }, ___EmotionJSX(InnerHtml, {
+      item: item
+    }));
+  }))));
+};

package/lib/recipes/ArrayField.stories.js

@@ -0,0 +1,134 @@
+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 _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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useCallback, useState } from 'react';
+import TrashIcon from 'mdi-react/TrashIcon';
+import { v4 as uuid } from 'uuid';
+import { Box, Button, Icon, Text, TextField, IconButton } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/ArrayField'
+};
+export var Default = function Default() {
+  var createEmptyField = useCallback(function () {
+    return {
+      id: uuid(),
+      value: '',
+      'aria-label': 'array field input'
+    };
+  }, []);
+
+  var _useState = useState([createEmptyField()]),
+      _useState2 = _slicedToArray(_useState, 2),
+      fieldValues = _useState2[0],
+      setFieldValues = _useState2[1];
+
+  var mapArrayFieldWithNewValue = useCallback(function (arrValues, newValue, fieldId) {
+    return _mapInstanceProperty(arrValues).call(arrValues, function (fieldValue) {
+      if (fieldValue.id === fieldId) {
+        return _objectSpread(_objectSpread({}, fieldValue), {}, {
+          value: newValue
+        });
+      }
+
+      return fieldValue;
+    });
+  }, []);
+  var onFieldValueChange = useCallback(function (_ref, fieldId) {
+    var newValue = _ref.target.value;
+    setFieldValues(function (oldValues) {
+      return mapArrayFieldWithNewValue(oldValues, newValue, fieldId);
+    });
+  }, []);
+  var onFieldDelete = useCallback(function (fieldId) {
+    setFieldValues(function (oldValues) {
+      return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
+        var id = _ref2.id;
+        return id !== fieldId;
+      });
+    });
+  }, []);
+  var onFieldAdd = useCallback(function () {
+    setFieldValues(function (oldValues) {
+      var _context;
+
+      return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
+    });
+  }, []);
+
+  var DeleteButton = function DeleteButton(_ref3) {
+    var id = _ref3.id;
+    return ___EmotionJSX(IconButton, {
+      onPress: function onPress() {
+        return onFieldDelete(id);
+      },
+      isDisabled: fieldValues.length === 1,
+      sx: {
+        position: 'absolute',
+        right: -30,
+        top: 5,
+        width: 'auto'
+      },
+      type: "delete",
+      title: "Delete Field"
+    }, ___EmotionJSX(Icon, {
+      icon: TrashIcon,
+      size: 20,
+      color: "black"
+    }));
+  };
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "label"
+  }, "Redirected URIs"), _mapInstanceProperty(fieldValues).call(fieldValues, function (_ref4) {
+    var id = _ref4.id,
+        value = _ref4.value,
+        otherFieldProps = _objectWithoutProperties(_ref4, ["id", "value"]);
+
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      mb: "sm",
+      alignItems: "center",
+      key: id
+    }, ___EmotionJSX(TextField, _extends({
+      value: value,
+      onChange: function onChange(e) {
+        return onFieldValueChange(e, id);
+      },
+      mr: "xs",
+      slots: {
+        inContainer: ___EmotionJSX(DeleteButton, {
+          id: id
+        })
+      },
+      title: "Text Field"
+    }, otherFieldProps)));
+  }), ___EmotionJSX(Button, {
+    variant: "text",
+    onPress: onFieldAdd,
+    role: "button",
+    title: "Add Field Button",
+    sx: {
+      width: 'fit-content'
+    }
+  }, ___EmotionJSX(Text, {
+    variant: "label",
+    color: "active"
+  }, "+ Add")));
+};

package/lib/recipes/Arrow.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Box from '../components/Box';
+import { line } from '../styles/colors';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Arrow'
+};
+var ArrowIcon = "\u25BA";
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    height: 8,
+    width: 80,
+    sx: {
+      'align-items': 'center'
+    }
+  }, ___EmotionJSX(Box, {
+    width: "100%" // Use this instead of border property, to avoid cropping of strokes in Safari and FF
+    ,
+    sx: {
+      backgroundImage: "linear-gradient(to right, ".concat(line.light, " 50%, white 50%)"),
+      backgroundRepeat: 'repeat-x',
+      backgroundSize: '10px 2px',
+      height: 2
+    }
+  }), ___EmotionJSX(Box, {
+    color: "line.regular"
+  }, ArrowIcon));
+};