@pingux/astro 1.2.1 → 1.3.0

package/lib/components/ArrayField/ArrayField.stories.js

@@ -0,0 +1,196 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { OverlayProvider } from '@react-aria/overlays';
+import { v4 as uuid } from 'uuid';
+import { ArrayField, ArrayFieldDeleteButton, Item, SelectField, TextField } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/ArrayField',
+  parameters: {
+    actions: {
+      argTypesRegex: '^on.*'
+    },
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      defaultValue: 'Array field label',
+      control: {
+        type: 'text'
+      }
+    },
+    helperText: {
+      defaultValue: 'Helper text info...',
+      control: {
+        type: 'text'
+      }
+    },
+    addButtonLabel: {
+      defaultValue: '+ Add field',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+var defaultData = [{
+  id: uuid(),
+  value: 'Hello'
+}, {
+  id: uuid(),
+  value: 'World'
+}];
+export var Uncontrolled = function Uncontrolled(_ref) {
+  var args = _extends({}, _ref);
+
+  return ___EmotionJSX(ArrayField, _extends({
+    defaultValue: defaultData,
+    renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return ___EmotionJSX(TextField, _extends({
+        "aria-label": "Text field",
+        value: fieldValue,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    },
+    sx: {
+      width: '400px'
+    }
+  }, args));
+};
+export var Controlled = function Controlled() {
+  var defaultDataSelectField = [{
+    id: uuid(),
+    fieldValue: 'red',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
+        defaultSelectedKey: fieldValue,
+        onSelectionChange: function onSelectionChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        width: "100%",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps), ___EmotionJSX(Item, {
+        key: "red"
+      }, "Red"), ___EmotionJSX(Item, {
+        key: "blue"
+      }, "Blue"), ___EmotionJSX(Item, {
+        key: "yellow"
+      }, "Yellow")));
+    }
+  }, {
+    id: uuid(),
+    fieldValue: 'black',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
+        defaultSelectedKey: fieldValue,
+        onSelectionChange: function onSelectionChange(key) {
+          return onFieldValueChange(key, id);
+        },
+        width: "100%",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps), ___EmotionJSX(Item, {
+        key: "orange"
+      }, "Orange"), ___EmotionJSX(Item, {
+        key: "purple"
+      }, "Purple"), ___EmotionJSX(Item, {
+        key: "black"
+      }, "Black")));
+    }
+  }];
+  var defaultEmptyField = {
+    id: uuid(),
+    fieldValue: 'blue',
+    onComponentRender: function onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
+      return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
+        defaultSelectedKey: fieldValue,
+        onSelectionChange: function onSelectionChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        width: "100%",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: isDisabled,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps), ___EmotionJSX(Item, {
+        key: "blue"
+      }, "Blue"), ___EmotionJSX(Item, {
+        key: "teal"
+      }, "Teal"), ___EmotionJSX(Item, {
+        key: "turquoise"
+      }, "Turquoise")));
+    }
+  };
+
+  var _React$useState = React.useState(defaultDataSelectField),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      fieldValues = _React$useState2[0],
+      setFieldValues = _React$useState2[1];
+
+  function handleOnChange(values) {
+    setFieldValues(values);
+  }
+
+  function handleOnAdd() {
+    setFieldValues(function (oldValues) {
+      var _context;
+
+      return _concatInstanceProperty(_context = []).call(_context, oldValues, [defaultEmptyField]);
+    });
+  }
+
+  function handleOnDelete(fieldId) {
+    setFieldValues(function (oldValues) {
+      return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
+        var id = _ref2.id;
+        return id !== fieldId;
+      });
+    });
+  }
+
+  return ___EmotionJSX(ArrayField, {
+    value: fieldValues,
+    helperText: "Here is some helpful text...",
+    onAdd: handleOnAdd,
+    onChange: handleOnChange,
+    onDelete: handleOnDelete,
+    sx: {
+      width: '400px'
+    }
+  });
+};

package/lib/components/ArrayField/ArrayField.test.js

@@ -0,0 +1,185 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import ArrayField from './ArrayField';
+import ArrayFieldDeleteButton from './ArrayFieldDeleteButton';
+import TextField from '../TextField';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+jest.mock('uuid', function () {
+  return {
+    v4: function v4() {
+      return 'testid';
+    }
+  };
+});
+var defaultData = [{
+  id: '1',
+  value: 'Hello'
+}, {
+  id: '2',
+  value: 'World'
+}];
+var defaultProps = {
+  defaultValue: defaultData
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ArrayField, _extends({}, defaultProps, props)));
+};
+
+var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+  return ___EmotionJSX(TextField, _extends({
+    label: "Text field",
+    value: value,
+    onChange: function onChange(e) {
+      return onFieldValueChange(e, id);
+    },
+    mr: "xs",
+    slots: {
+      inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+        isDisabled: false,
+        onDelete: function onDelete() {
+          return onFieldDelete(id);
+        }
+      })
+    }
+  }, otherFieldProps));
+};
+
+test('displays multiple text fields', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange,
+    renderField: renderField
+  });
+  expect(screen.getAllByLabelText('Text field')).toHaveLength(2);
+});
+test('adds one text field and new empty field is added', function () {
+  getComponent({
+    renderField: renderField
+  });
+  fireEvent.click(screen.getByText('+ Add'));
+  expect(screen.getAllByLabelText('Text field')).toHaveLength(3);
+});
+test('onAdd callback is fired when adding field', function () {
+  var onAdd = jest.fn();
+  getComponent({
+    onAdd: onAdd,
+    renderField: renderField
+  });
+  fireEvent.click(screen.getByText('+ Add'));
+  expect(onAdd).toHaveBeenCalled();
+});
+test('deletes one text field and only one field is left', function () {
+  getComponent({
+    renderField: renderField
+  });
+  fireEvent.click(screen.getAllByRole('button')[0]);
+  expect(screen.getByLabelText('Text field')).toBeInTheDocument();
+});
+test('onDelete callback is fired when deleting field', function () {
+  var onDelete = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
+  getComponent({
+    value: value,
+    defaultValue: defaultValue,
+    onDelete: onDelete,
+    renderField: renderField
+  });
+  fireEvent.click(screen.getAllByRole('button')[0]);
+  expect(onDelete).toHaveBeenCalled();
+});
+test('Values are changed in text field', function () {
+  getComponent({
+    renderField: renderField
+  });
+  fireEvent.change(screen.getAllByLabelText('Text field')[0], {
+    target: {
+      value: '123'
+    }
+  });
+  expect(screen.getByDisplayValue('123')).toBeInTheDocument();
+});
+test('onChange gets called when field values are changed', function () {
+  var onChange = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
+  getComponent({
+    value: value,
+    onChange: onChange,
+    renderField: renderField,
+    defaultValue: defaultValue
+  });
+  fireEvent.change(screen.getAllByLabelText('Text field')[0], {
+    target: {
+      value: '123'
+    }
+  });
+  expect(onChange).toHaveBeenNthCalledWith(1, [{
+    id: '1',
+    value: '123'
+  }, {
+    id: '2',
+    value: 'World'
+  }]);
+});
+test('onComponentRender displays fields correctly', function () {
+  var onChange = jest.fn();
+  var componentRenderData = [{
+    id: '1',
+    value: 'Hello',
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+      return ___EmotionJSX(TextField, _extends({
+        label: "Text field",
+        value: value,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: false,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    }
+  }, {
+    id: '2',
+    value: 'World',
+    onComponentRender: function onComponentRender(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
+      return ___EmotionJSX(TextField, _extends({
+        label: "Text field 2",
+        value: value,
+        onChange: function onChange(e) {
+          return onFieldValueChange(e, id);
+        },
+        mr: "xs",
+        slots: {
+          inContainer: ___EmotionJSX(ArrayFieldDeleteButton, {
+            isDisabled: false,
+            onDelete: function onDelete() {
+              return onFieldDelete(id);
+            }
+          })
+        }
+      }, otherFieldProps));
+    }
+  }];
+  render(___EmotionJSX(ArrayField, {
+    defaultValue: componentRenderData,
+    onChange: onChange
+  }));
+  expect(screen.getByLabelText('Text field')).toBeInTheDocument();
+  expect(screen.getByLabelText('Text field 2')).toBeInTheDocument();
+});
+test('creates empty field when no data passed', function () {
+  render(___EmotionJSX(ArrayField, {
+    renderField: renderField
+  }));
+  expect(screen.getByLabelText('Text field')).toBeInTheDocument();
+});

package/lib/components/ArrayField/ArrayFieldDeleteButton.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TrashIcon from 'mdi-react/TrashIcon';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
+  var label = _ref.label,
+      isDisabled = _ref.isDisabled,
+      id = _ref.id,
+      onDelete = _ref.onDelete;
+  return ___EmotionJSX(IconButton, {
+    onPress: function onPress() {
+      return onDelete(id);
+    },
+    isDisabled: isDisabled,
+    sx: {
+      position: 'absolute',
+      right: -35,
+      width: 32,
+      height: 32,
+      top: 5,
+      cursor: 'pointer'
+    },
+    title: label
+  }, ___EmotionJSX(Icon, {
+    icon: TrashIcon,
+    size: 20,
+    color: "neutral.40"
+  }));
+};
+
+ArrayFieldDeleteButton.propTypes = {
+  label: PropTypes.string,
+  id: PropTypes.number,
+  isDisabled: PropTypes.bool,
+  onDelete: PropTypes.func
+};
+ArrayFieldDeleteButton.defaultProps = {
+  label: 'Delete field'
+};
+export default ArrayFieldDeleteButton;

package/lib/components/ArrayField/index.js

@@ -0,0 +1,2 @@
+export { default } from './ArrayField';
+export { default as ArrayFieldDeleteButton } from './ArrayFieldDeleteButton';

package/lib/components/CodeView/CodeView.js

@@ -22,9 +22,9 @@ import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import github from 'prism-react-renderer/themes/github';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
+import codeView from '../../styles/variants/codeView';
 /**
  * Component for code syntax highlighting.
  * Built on top of [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
@@ -61,7 +61,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
-    theme: github,
+    theme: codeView.theme,
     code: (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '',
     language: language
   }), function (_ref) {

package/lib/components/ListView/ListView.stories.js

@@ -734,6 +734,9 @@ InfiniteLoadingList.parameters = {
     description: {
       story: 'Note: Keep in mind the maxHeight may impact when the scroll callback is triggered. If you notice it\'s being called too often, try adjusting that value or loading more objects to prevent this behavior.'
     }
+  },
+  chromatic: {
+    delay: 5000
   }
 };
 export var MultipleSelection = function MultipleSelection(_ref6) {

package/lib/components/Loader/Loader.stories.js

@@ -31,7 +31,7 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Loader, args);
 };
-export var LoaderWithMostCommonColor = function LoaderWithMostCommonColor() {
+export var CustomColor = function CustomColor() {
   return ___EmotionJSX(Loader, {
     color: "neutral.60"
   });

package/lib/components/Modal/Modal.js

@@ -24,7 +24,7 @@ import Box from '../Box';
 import IconButton from '../IconButton';
 import Icon from '../Icon';
 import Text from '../Text';
-import { useStatusClasses } from '../../hooks';
+import { useStatusClasses, useDeprecationWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
@@ -85,6 +85,9 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
+  useDeprecationWarning('The "dark" variant for Modal will be deprecated in Astro-UI 2.0.0.', {
+    isActive: others.variant === 'modal.dark'
+  });
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "modal.container"

package/lib/components/Modal/Modal.stories.js

@@ -1,8 +1,7 @@
 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 React from 'react';
 import { useModalState } from '../../hooks';
-import { OverlayProvider, Box, Button, Text, Modal, TextField } from '../../index';
+import { OverlayProvider, Box, Button, Text, Modal } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Modal',
@@ -12,7 +11,7 @@ export default {
       control: {
         type: 'text'
       },
-      defaultValue: 'Delete Group'
+      defaultValue: 'Continue'
     },
     role: {},
     id: {
@@ -20,7 +19,9 @@ export default {
         type: 'text'
       }
     },
-    hasCloseButton: {},
+    hasCloseButton: {
+      defaultValue: true
+    },
     isClosedOnBlur: {},
     isDismissable: {},
     isKeyboardDismissDisabled: {},
@@ -68,16 +69,6 @@ export default {
 };
 export var Default = function Default(args) {
   var state = useModalState();
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var onTextFieldChange = useCallback(function (_ref) {
-    var value = _ref.target.value;
-    setInputValue(value.toUpperCase());
-  }, []);
   return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
@@ -88,56 +79,16 @@ export var Default = function Default(args) {
       onClose: state.close
     }), ___EmotionJSX(Text, {
       pt: "lg"
-    }, "Deleting a group ", ___EmotionJSX("strong", null, "\"Marketing\""), " cannot be undone. Users will lose access to the applications."), ___EmotionJSX(Text, {
-      pt: "lg"
-    }, "Type the word DELETE to confirm deletion of this group"), ___EmotionJSX(TextField, {
-      value: inputValue,
-      onChange: onTextFieldChange,
-      "aria-label": "user input"
-    }), ___EmotionJSX(Box, {
-      isRow: true,
-      pt: "lg",
-      mr: "auto"
-    }, ___EmotionJSX(Button, {
-      variant: "critical",
-      onPress: state.close,
-      mr: "md",
-      isDisabled: Boolean(inputValue !== 'DELETE'),
-      "aria-label": "Delete"
-    }, "Delete"), ___EmotionJSX(Button, {
-      onPress: state.close,
-      "aria-label": "Cancel"
-    }, "Cancel"))))
-  );
-};
-export var DarkVariant = function DarkVariant() {
-  var state = useModalState();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
-    // readers when a modal opens.
-    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
-      onPress: state.open,
-      "aria-label": "Open modal"
-    }, "Open Modal"), state.isOpen && ___EmotionJSX(Modal, {
-      variant: "modal.dark",
-      title: "Question",
-      isOpen: state.isOpen,
-      onClose: state.close,
-      isDismissable: true,
-      hasCloseButton: true
-    }, ___EmotionJSX(Text, {
-      variant: "subtitle",
-      color: "white",
-      pt: "lg"
-    }, "Would you ever really just click a button?"), ___EmotionJSX(Box, {
+    }, "Do you want to continue with this action that you\u2018re performing?"), ___EmotionJSX(Box, {
       isRow: true,
       pt: "lg",
       mr: "auto"
     }, ___EmotionJSX(Button, {
       variant: "primary",
-      mr: "md",
       onPress: state.close,
-      "aria-label": "Yes"
-    }, "Yes"), ___EmotionJSX(Button, {
+      mr: "md",
+      "aria-label": "Continue"
+    }, "Continue"), ___EmotionJSX(Button, {
       variant: "link",
       onPress: state.close,
       "aria-label": "Cancel"

package/lib/components/NavBar/NavBar.js

@@ -1,4 +1,7 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { NavBarContext } from '../../context/NavBarContext';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import Box from '../Box/Box';
 /**
  * Composed component that spreads children.
@@ -14,11 +17,29 @@ import Box from '../Box/Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var NavBar = function NavBar(props) {
-  return ___EmotionJSX(Box, {
-    variant: "boxes.navBar",
+  var defaultSelectedKeys = props.defaultSelectedKeys;
+
+  var _useState = useState(defaultSelectedKeys),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  return ___EmotionJSX(NavBarContext.Provider, {
+    value: {
+      selectedKeys: selectedKeys,
+      setSelectedKeys: setSelectedKeys
+    }
+  }, ___EmotionJSX(Box, {
+    variant: "navBar.container",
     role: "navigation",
     as: "nav"
-  }, props.children);
+  }, props.children));
 };
 
+NavBar.propTypes = {
+  defaultSelectedKeys: isIterableProp
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
 export default NavBar;