@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/recipes/ConditionalFilter.stories.js

@@ -0,0 +1,388 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React from 'react';
+import CreateIcon from 'mdi-react/CreateIcon';
+import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
+import TrashIcon from 'mdi-react/TrashIcon';
+import { Box, Bracket, Button, Chip, IconButton, Icon, Item, OverlayProvider, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
+import OverlayPanel from '../components/OverlayPanel';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/ConditionalFilter'
+};
+var sx = {
+  customChipStyles: {
+    marginRight: 'sm',
+    '& > span': {
+      textTransform: 'none',
+      fontWeight: '500'
+    },
+    minWidth: '65px',
+    'z-index': '1'
+  },
+  borderedBoxStyles: {
+    '&::after': {
+      bg: 'decorative.7'
+    },
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'neutral.80',
+    borderRadius: '4px',
+    padding: 'sm',
+    width: '100%'
+  },
+  allConditionsBox: {
+    '&::after': {
+      bg: 'decorative.7'
+    },
+    alignItems: 'center',
+    borderRadius: '4px',
+    marginTop: 'md'
+  },
+  defaultText: {
+    textTransform: 'none',
+    color: 'inherit'
+  }
+};
+export var Default = function Default() {
+  var allConditions = [{
+    field1: 'Family Name',
+    field3: 'John',
+    key: 'FamilyNameField'
+  }, {
+    field1: 'Full Name',
+    field3: 'Alex Smith',
+    key: 'FullNameField'
+  }];
+  var anyConditions = [{
+    field1: 'Group',
+    field3: 'Marketing',
+    key: 'Group1Field'
+  }, {
+    field1: 'Group',
+    field3: 'UX Team',
+    key: 'Group2Field'
+  }];
+
+  var trashButton = ___EmotionJSX(IconButton, {
+    "aria-label": "deleteButton",
+    sx: {
+      alignSelf: 'center'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: TrashIcon,
+    sx: {
+      '& > path': {
+        fill: 'neutral.40'
+      }
+    }
+  }));
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      staticOverviewVisible = _React$useState2[0],
+      setStaticOverviewVisible = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      editOverviewVisible = _React$useState4[0],
+      setEditOverviewVisible = _React$useState4[1];
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return setStaticOverviewVisible(true);
+    }
+  }, "Open Panel"), staticOverviewVisible && ___EmotionJSX(OverlayPanel, {
+    isOpen: staticOverviewVisible
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    bg: "accent.99",
+    p: "md"
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    pb: "md"
+  }, "Branch Condition"), ___EmotionJSX(IconButton, {
+    "aria-label": "edit",
+    variant: "inverted",
+    ml: "xs",
+    onPress: function onPress() {
+      return setEditOverviewVisible(true);
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CreateIcon,
+    size: 14
+  }))), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Chip, {
+    label: "All",
+    bg: "decorative.7",
+    sx: sx.customChipStyles
+  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: item.key
+    }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
+      ml: "3px",
+      width: "100%"
+    }, ___EmotionJSX(Box, {
+      variant: "forms.input.container",
+      bg: "white",
+      isRow: true,
+      sx: sx.allConditionsBox
+    }, ___EmotionJSX(Text, {
+      pl: "md",
+      pr: "sm"
+    }, item.field1), ___EmotionJSX(Chip, {
+      label: "Equals",
+      bg: "accent.90",
+      textColor: "neutral.10",
+      sx: sx.customChipStyles,
+      alignSelf: "center"
+    }), ___EmotionJSX(Text, null, item.field3))));
+  }), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Bracket, {
+    isLast: true
+  }), ___EmotionJSX(Box, {
+    variant: "forms.input.container",
+    mt: "md",
+    sx: sx.borderedBoxStyles
+  }, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Chip, {
+    label: "Any",
+    bg: "decorative.4",
+    sx: sx.customChipStyles,
+    alignSelf: "center"
+  }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
+    ml: "sm"
+  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      key: item.key
+    }, ___EmotionJSX(Bracket, {
+      isLast: index === anyConditions.length - 1
+    }), ___EmotionJSX(Box, {
+      mt: "md",
+      variant: "forms.input.container",
+      bg: "white",
+      isRow: true,
+      width: "100%",
+      sx: sx.allConditionsBox
+    }, ___EmotionJSX(Text, {
+      pl: "md",
+      pr: "sm"
+    }, item.field1), ___EmotionJSX(Chip, {
+      label: "Equals",
+      bg: "accent.90",
+      textColor: "neutral.10",
+      sx: sx.customChipStyles,
+      alignSelf: "center"
+    }), ___EmotionJSX(Text, null, item.field3)));
+  })))))), ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return setStaticOverviewVisible(false);
+    },
+    width: "fit-content",
+    mt: "lg"
+  }, "Close Panel")), editOverviewVisible && ___EmotionJSX(OverlayPanel, {
+    isOpen: editOverviewVisible
+  }, ___EmotionJSX(Box, {
+    bg: "accent.99",
+    p: "md"
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    pb: "md"
+  }, "Branch Condition"), ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "md"
+  }, ___EmotionJSX(RockerButtonGroup, {
+    mr: "sm",
+    selectedKey: "all",
+    "aria-label": "temp-label"
+  }, ___EmotionJSX(RockerButton, {
+    name: "any",
+    key: "any",
+    selectedStyles: {
+      bg: 'decorative.7'
+    },
+    "aria-label": "temp-label"
+  }, ___EmotionJSX(Text, {
+    sx: sx.defaultText
+  }, "Any")), ___EmotionJSX(RockerButton, {
+    name: "all",
+    key: "all",
+    selectedStyles: {
+      bg: 'decorative.7'
+    },
+    "aria-label": "temp-label"
+  }, ___EmotionJSX(Text, {
+    sx: sx.defaultText
+  }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
+    variant: "inline",
+    width: "fit-content",
+    role: "button",
+    title: "Add Field Button",
+    ml: "auto",
+    mr: "xl",
+    "aria-label": "add"
+  }, "+ Add")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      mb: "md",
+      key: item.key
+    }, ___EmotionJSX(Icon, {
+      icon: DragVerticalIcon,
+      mr: "sm"
+    }), ___EmotionJSX(Box, {
+      isRow: true,
+      width: "100%"
+    }, ___EmotionJSX(TextField, {
+      width: "40%",
+      value: item.field1,
+      mr: "md",
+      containerProps: {
+        sx: {
+          '& > div::after': {
+            bg: 'decorative.7'
+          }
+        }
+      },
+      "aria-label": "temp-label"
+    }), ___EmotionJSX(SelectField, {
+      hasNoStatusIndicator: true,
+      selectedKey: "Equals",
+      mr: "md",
+      "aria-label": "temp-label"
+    }, ___EmotionJSX(Item, {
+      key: "Equals",
+      textValue: "Equals",
+      "aria-label": "equals"
+    }, "Equals"), ___EmotionJSX(Item, {
+      key: "NotEquals",
+      textValue: "NotEquals",
+      "aria-label": "notequal"
+    }, "Not Equal")), ___EmotionJSX(TextField, {
+      hasNoStatusIndicator: true,
+      width: "40%",
+      value: item.field3,
+      mr: "xs",
+      "aria-label": "temp-label"
+    })), trashButton);
+  }), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    mr: "sm"
+  }), ___EmotionJSX(Box, {
+    variant: "forms.input.container",
+    sx: sx.borderedBoxStyles
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "md"
+  }, ___EmotionJSX(RockerButtonGroup, {
+    mr: "sm",
+    "aria-label": "temp-label"
+  }, ___EmotionJSX(RockerButton, {
+    name: "any",
+    key: "any",
+    selectedStyles: {
+      bg: 'decorative.4'
+    },
+    "aria-label": "any"
+  }, ___EmotionJSX(Text, {
+    sx: sx.defaultText
+  }, "Any")), ___EmotionJSX(RockerButton, {
+    name: "all",
+    key: "all",
+    selectedStyles: {
+      bg: 'decorative.4'
+    },
+    "aria-label": "all"
+  }, ___EmotionJSX(Text, {
+    sx: sx.defaultText
+  }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
+    variant: "inline",
+    width: "fit-content",
+    role: "button",
+    title: "Add Field Button",
+    ml: "auto",
+    mr: "xl",
+    "aria-label": "add"
+  }, "+ Add")), ___EmotionJSX(Box, {
+    ml: "lg"
+  }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item) {
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center",
+      mb: "md",
+      key: item.key
+    }, ___EmotionJSX(Icon, {
+      icon: DragVerticalIcon,
+      mr: "sm"
+    }), ___EmotionJSX(Box, {
+      isRow: true,
+      width: "100%"
+    }, ___EmotionJSX(TextField, {
+      "aria-label": "temp-label",
+      value: item.field1,
+      width: "40%",
+      mr: "md",
+      containerProps: {
+        sx: {
+          '& > div::after': {
+            bg: 'decorative.4'
+          }
+        }
+      }
+    }), ___EmotionJSX(SelectField, {
+      "aria-label": "temp-label",
+      hasNoStatusIndicator: true,
+      selectedKey: "Equals",
+      mr: "md"
+    }, ___EmotionJSX(Item, {
+      key: "Equals",
+      textValue: "Equals",
+      "aria-label": "Equals"
+    }, "Equals"), ___EmotionJSX(Item, {
+      key: "NotEquals",
+      textValue: "NotEqual",
+      "aria-label": "NotEqual"
+    }, "Not Equal")), ___EmotionJSX(TextField, {
+      "aria-label": "temp-label",
+      hasNoStatusIndicator: true,
+      value: item.field3,
+      width: "40%",
+      mr: "xs"
+    })), trashButton);
+  }))), ___EmotionJSX(IconButton, {
+    "aria-label": "my-label"
+  }, ___EmotionJSX(Icon, {
+    icon: TrashIcon,
+    sx: {
+      '& > path': {
+        fill: '#68747f !important'
+      }
+    }
+  }))), ___EmotionJSX(Box, {
+    isRow: true,
+    mt: "lg"
+  }, ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return setEditOverviewVisible(false);
+    },
+    variant: "primary",
+    mr: "md",
+    "aria-label": "save"
+  }, "Save"), ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return setEditOverviewVisible(false);
+    },
+    variant: "link",
+    "aria-label": "cancel"
+  }, "Cancel"))))));
+};

package/lib/recipes/CopyToClipboard.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Button, Text } from '../index';
+import useCopyToClipboard from '../hooks/useCopyToClipboard';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/CopyToClipboard'
+};
+export var Default = function Default() {
+  var textToCopy = 'eyJraWQiOiI4YTg5MmY3ZS1iNTk1LTRkYWQtODBlNC0yMzA4ODkyZTczZDQiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2FwaS5waW5nb25lLmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgucGluZ29uZS5jb20iLCJjb25zb2xlVXJsIjoiaHR0cHM6Ly9jb25zb2xlLnBpbmdvbmUuY29tIiwiZW52aXJvbm1lbnROYW1lIjoiTW9udGFuYSIsImVudmlyb25tZW50SWQiOiJhYzc2NWQ0Ny1kMDM2LTQ1MGUtODFjMS1mYjQ1NDMxMjM1NjYiLCJvcmdhbml6YXRpb25OYW1lIjoiaW50ZXJuYWxfZXJpa2FhbGRlYm9yZ2hfMjUyMDc1MDMxIiwib3JnYW5pemF0aW9uSWQiOiJkMDYzMmYwZi03YjQ2LTQ5ZjUtYjgyYS1kZWU5MWQ3MDY3ODYiLCJnYXRld2F5TmFtZSI6ImRzZHMiLCJnYXRld2F5SWQiOiJiMDVmNGU5Yy1jMzRiLTRlZTMtYTYyNS01ZGFiNjlkYTE1YTEiLCJnYXRld2F5VHlwZSI6IlBJTkdfRkVERVJBVEUiLCJ0YXJnZXRDbHVzdGVyRW52aXJvbm1lbnQiOiJQUk9EIiwidGFyZ2V0R2VvZ3JhcGh5IjoiTkEiLCJyZWdpb24iOiJOb3J0aCBBbWVyaWNhIiwianRpIjoiMTUwYTQ0OTktZjIyYi00YWVhLWIzY2UtYWM2YWY1NjVjNjk5IiwiaXNzIjoid3NzOi8vZ2F0ZXdheXMucGluZ29uZS5jb20iLCJpYXQiOjE2MjYyODEyMTZ9.JJ9wwqTxQWUwz2vmU0yE54xuYff51xbirzZuEUxd8GDzV45bnpbmx460CY8g9ccdmOjvfVF4RPPsawpKuMZH271tDlLZl67iknxDVWBZSih9K6v0RAmsmNriR4OyOFOkGrULCIz3ISyPWeItp1AVuue_8guWR63KzYg32aPC4SgmOrc2myq9N6XNU2H1KybETbG_s5-VU_cUqaXn7GUzhL2_W6CSVrrlE1cYfjC7pxMKFm4vvIw_KcNYVGO1K6oYgzRZ4A8toQHIdlGB8L-wkCt442LdC93OjoQdkLuGzmXnO8BUohWea-Dn35gGHoH-H1BRQTya_H9AKyWMxCw-vg';
+  var copyToClipboard = useCopyToClipboard(textToCopy);
+  return ___EmotionJSX(Box, {
+    bg: "accent.99",
+    py: "md",
+    px: "xl"
+  }, ___EmotionJSX(Text, {
+    sx: {
+      wordBreak: 'break-all'
+    }
+  }, textToCopy), ___EmotionJSX(Button, {
+    variant: "inline",
+    my: "lg",
+    onPress: copyToClipboard,
+    "aria-label": "Copy Text To Clipboard"
+  }, "Copy To Clipboard"));
+};

package/lib/recipes/CountryPicker.stories.js

@@ -0,0 +1,140 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { countries as countriesObj } from 'countries-list';
+import Box from '../components/Box';
+import ComboBoxField from '../components/ComboBoxField';
+import Input from '../components/Input';
+import { Item } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/CountryPicker'
+};
+
+var validatePhoneNumber = function validatePhoneNumber(str) {
+  var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
+  return reg.test(str);
+};
+
+var sx = {
+  wrapperBox: {
+    width: '100%',
+    maxWidth: 500,
+    position: 'relative'
+  },
+  comboBoxFieldWrapperOpen: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '100%'
+  },
+  comboBoxFieldWrapperClose: {
+    position: 'absolute',
+    transition: '0.2s width ease',
+    width: '110px'
+  },
+  inputWrapper: {
+    width: '100%',
+    marginLeft: '110px'
+  }
+};
+export var Default = function Default() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchValue = _useState4[0],
+      setSearchValue = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      phoneCodeValue = _useState6[0],
+      setPhoneCodeValue = _useState6[1];
+
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedKey = _useState8[0],
+      setSelectedKey = _useState8[1];
+
+  var _useState9 = useState(''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      phoneNumber = _useState10[0],
+      setPhoneNumber = _useState10[1];
+
+  var getInputValue = function getInputValue() {
+    if (isOpen) return searchValue;
+    return phoneCodeValue || searchValue;
+  };
+
+  var inputHandler = function inputHandler(value) {
+    setSearchValue(value);
+
+    if (!value) {
+      setSelectedKey(null);
+      setPhoneCodeValue('');
+    }
+  };
+
+  var selectionHandler = function selectionHandler(key) {
+    setSelectedKey(key);
+
+    if (key) {
+      setPhoneCodeValue("+".concat(countriesObj[key].phone.split(',')[0]));
+    } else {
+      setSearchValue('');
+      setPhoneCodeValue('');
+    }
+
+    setIsOpen(false);
+  };
+
+  var keyHandler = function keyHandler(e) {
+    if (e.keyCode !== 13) setIsOpen(true);
+  };
+
+  var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
+    var value = e.target.value;
+
+    if (value === '' || validatePhoneNumber(value)) {
+      setPhoneNumber(value);
+    }
+  };
+
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.wrapperBox
+  }, ___EmotionJSX(ComboBoxField, {
+    mt: -5,
+    width: "100%",
+    isOpen: isOpen,
+    onOpenChange: setIsOpen,
+    wrapperProps: {
+      sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
+    },
+    controlProps: {
+      'aria-label': 'Country Picker'
+    },
+    defaultItems: _Object$entries(countriesObj),
+    inputValue: getInputValue(),
+    onInputChange: inputHandler,
+    selectedKey: selectedKey,
+    onSelectionChange: selectionHandler,
+    onKeyUp: keyHandler,
+    menuTrigger: "focus"
+  }, function (item) {
+    var _context, _context2;
+
+    return ___EmotionJSX(Item, {
+      key: item[0]
+    }, _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
+  }), ___EmotionJSX(Box, {
+    sx: sx.inputWrapper
+  }, ___EmotionJSX(Input, {
+    placeholder: "Phone number...",
+    onChange: onPhoneNumberValueChange,
+    value: phoneNumber
+  })));
+};

package/lib/recipes/DatePicker.stories.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import CalendarIcon from 'mdi-react/CalendarIcon';
+import moment from 'moment';
+import { Box, Icon, IconButton, TextField, useOverlayPosition, useOverlayTrigger, useOverlayTriggerState } from '../index';
+import statuses from '../utils/devUtils/constants/statuses';
+import PopoverContainer from '../components/PopoverContainer';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/DatePicker'
+};
+var sx = {
+  calendarIcon: {
+    position: 'absolute',
+    right: 5,
+    top: 8,
+    width: 28,
+    height: 28
+  }
+};
+export var Default = function Default() {
+  var dateFormat = 'YYYY-MM-DD';
+
+  var _useState = useState(moment('2021-01-01', 'YYYY-MM-DD')),
+      _useState2 = _slicedToArray(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  var _useState3 = useState(date.format(dateFormat)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var triggerRef = React.useRef();
+  var overlayRef = React.useRef();
+  var popoverState = useOverlayTriggerState({});
+
+  var _useOverlayTrigger = useOverlayTrigger({
+    type: 'dialog'
+  }, popoverState, triggerRef),
+      triggerProps = _useOverlayTrigger.triggerProps,
+      overlayProps = _useOverlayTrigger.overlayProps;
+
+  var _useOverlayPosition = useOverlayPosition({
+    targetRef: triggerRef,
+    overlayRef: overlayRef,
+    offset: 15,
+    isOpen: popoverState.isOpen,
+    onClose: popoverState.close,
+    shouldUpdatePosition: true
+  }),
+      positionProps = _useOverlayPosition.overlayProps;
+
+  var handleCalendarIconPress = useCallback(function () {
+    return popoverState.open();
+  }, []);
+  var handleInputChange = useCallback(function (_ref) {
+    var value = _ref.target.value;
+    setInputValue(value);
+  }, []);
+  var handleOnBlur = useCallback(function (_ref2) {
+    var value = _ref2.target.value;
+    var dateFromInput = moment(value);
+
+    if (dateFromInput.isValid()) {
+      setDate(dateFromInput);
+      setInputValue(dateFromInput.format(dateFormat));
+      setError(false);
+    } else {
+      setError(true);
+    }
+  }, []);
+  var handleCalendarChange = useCallback(function (newDate) {
+    setDate(moment(newDate));
+    setInputValue(moment(newDate).format(dateFormat));
+    setError(false);
+  }, []);
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: 300
+    },
+    variant: "boxes.dataPicker"
+  }, ___EmotionJSX(TextField, {
+    slots: {
+      inContainer: ___EmotionJSX(IconButton, _extends({
+        "aria-label": "calendar-button",
+        sx: sx.calendarIcon,
+        onPress: handleCalendarIconPress,
+        ref: triggerRef
+      }, triggerProps), ___EmotionJSX(Icon, {
+        icon: CalendarIcon,
+        size: 20
+      }))
+    },
+    onChange: handleInputChange,
+    onBlur: handleOnBlur,
+    helperText: error ? 'Invalid Date' : 'yyyy-mm-dd',
+    status: error ? statuses.ERROR : statuses.DEFAULT,
+    value: inputValue,
+    "aria-label": "data-picker-input"
+  }), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
+    ref: overlayRef,
+    isOpen: popoverState.isOpen,
+    onClose: popoverState.close,
+    hasNoArrow: true,
+    isDismissable: true
+  }), ___EmotionJSX(Box, {
+    variant: "boxes.datePicker"
+  }, ___EmotionJSX(Calendar, {
+    onChange: handleCalendarChange,
+    value: date.toDate()
+  }))));
+};

package/lib/recipes/DraggableBox.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
+import FormTextboxIcon from 'mdi-react/FormTextboxIcon';
+import Box from '../components/Box';
+import Icon from '../components/Icon';
+import Text from '../components/Text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/DraggableBox'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    py: "sm",
+    px: "xs",
+    sx: {
+      boxShadow: 'standard',
+      ':hover': {
+        cursor: 'grab'
+      }
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: DragVerticalIcon,
+    size: 22,
+    color: "neutral.60"
+  }), ___EmotionJSX(Icon, {
+    icon: FormTextboxIcon,
+    size: 22,
+    ml: "sm"
+  }), ___EmotionJSX(Text, {
+    fontWeight: 500,
+    ml: "md"
+  }, "Text Input"));
+};