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

package/lib/hooks/useField/useField.test.js

@@ -0,0 +1,219 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+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 _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { renderHook, act } from '@testing-library/react-hooks';
+import useField from './useField';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { modes as labelModes } from '../../components/Label/constants';
+var defaultProps = {
+  autocomplete: 'off',
+  className: 'test',
+  containerProps: {
+    id: 'test'
+  },
+  controlProps: {
+    id: 'test'
+  },
+  defaultValue: 'test',
+  hasAutoFocus: true,
+  id: 'test',
+  isDefaultSelected: true,
+  isDisabled: true,
+  isReadOnly: true,
+  isRequired: true,
+  isSelected: true,
+  label: 'test',
+  name: 'test',
+  placeholder: 'test',
+  role: 'test',
+  statusClasses: {
+    isTested: true
+  },
+  type: 'test',
+  value: 'test'
+};
+test('default useField', function () {
+  renderHook(function () {
+    return useField();
+  });
+});
+test('should return props objects for field components', function () {
+  var _context, _context2;
+
+  var _renderHook = renderHook(function () {
+    return useField(defaultProps);
+  }),
+      result = _renderHook.result;
+
+  var _result$current = result.current,
+      fieldContainerProps = _result$current.fieldContainerProps,
+      fieldControlProps = _result$current.fieldControlProps,
+      fieldLabelProps = _result$current.fieldLabelProps;
+  expect(fieldContainerProps).toEqual({
+    className: 'field-container has-value',
+    id: defaultProps.containerProps.id,
+    onBlur: expect.any(Function),
+    onFocus: expect.any(Function),
+    sx: expect.objectContaining({
+      position: 'relative'
+    })
+  });
+  expect(fieldControlProps).toEqual({
+    autocomplete: defaultProps.autocomplete,
+    autoFocus: defaultProps.hasAutoFocus,
+    className: _concatInstanceProperty(_context = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context, statuses.DEFAULT, " is-tested"),
+    defaultSelected: true,
+    defaultValue: defaultProps.defaultValue,
+    disabled: true,
+    id: defaultProps.id,
+    isFocused: false,
+    readOnly: true,
+    required: true,
+    onBlur: expect.any(Function),
+    onChange: expect.any(Function),
+    onFocus: expect.any(Function),
+    name: defaultProps.name,
+    placeholder: defaultProps.placeholder,
+    role: defaultProps.role,
+    type: defaultProps.type,
+    value: defaultProps.value,
+    'aria-label': undefined,
+    'aria-labelledby': expect.any(String)
+  });
+  expect(fieldLabelProps).toEqual({
+    children: defaultProps.label,
+    className: _concatInstanceProperty(_context2 = "".concat(defaultProps.className, " is-disabled is-read-only is-")).call(_context2, statuses.DEFAULT, " is-tested"),
+    id: expect.any(String),
+    htmlFor: expect.any(String),
+    isRequired: true
+  });
+});
+test('should return isFloatLabelActive class for container', function () {
+  var _renderHook2 = renderHook(function (initialProps) {
+    return useField(_objectSpread(_objectSpread({}, initialProps), {}, {
+      placeholder: null
+    }));
+  }, {
+    initialProps: defaultProps
+  }),
+      result = _renderHook2.result,
+      rerender = _renderHook2.rerender; // Does not have the class if the label mode is not set to float
+
+
+  expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the value is valid and label mode is float
+
+  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    labelMode: labelModes.FLOAT
+  }));
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the value is invalid
+
+  act(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: undefined
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the container has focus within it
+
+  act(function () {
+    return result.current.fieldContainerProps.onFocus({});
+  });
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active'); // Does not have the class if the container loses focus within it
+
+  act(function () {
+    return result.current.fieldContainerProps.onBlur({
+      currentTarget: {
+        contains: jest.fn()
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).not.toContain('is-float-label-active'); // Has the class if the mode is float and the isFloatLabelActive containerProp is passed in
+
+  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    labelMode: labelModes.FLOAT,
+    containerProps: {
+      isFloatLabelActive: true
+    }
+  }));
+  expect(result.current.fieldContainerProps.className).toContain('is-float-label-active');
+});
+test('should return isLeftLabel class for container', function () {
+  var _renderHook3 = renderHook(function (initialProps) {
+    return useField(initialProps);
+  }, {
+    initialProps: defaultProps
+  }),
+      result = _renderHook3.result,
+      rerender = _renderHook3.rerender; // Does not have the class if the label mode is not set to left
+
+
+  expect(result.current.fieldContainerProps.className).not.toContain('is-left-label'); // Has the class if the value is valid and label mode is left
+
+  rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+    labelMode: labelModes.LEFT
+  }));
+  expect(result.current.fieldContainerProps.className).toContain('is-left-label');
+});
+test('should return hasValue class for container when onChange updates internal state', function () {
+  var onChange = jest.fn();
+  var numCalls = 0;
+
+  var _renderHook4 = renderHook(function () {
+    return useField(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      defaultValue: null,
+      placeholder: null,
+      onChange: onChange,
+      value: ''
+    }));
+  }),
+      result = _renderHook4.result; // Empty string is not a valid value
+
+
+  expect(result.current.fieldContainerProps.className).not.toContain('has-value'); // 0 should be a valid value
+
+  act(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: 0
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).toContain('has-value');
+  numCalls += 1; // undefined is not a valid value
+
+  act(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: undefined
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).not.toContain('has-value');
+  numCalls += 1; // a non-empty string is a valid value
+
+  act(function () {
+    return result.current.fieldControlProps.onChange({
+      target: {
+        value: 'a'
+      }
+    });
+  });
+  expect(result.current.fieldContainerProps.className).toContain('has-value');
+  numCalls += 1; // the original onChange should be called each time
+
+  expect(numCalls).toBeGreaterThan(0);
+  expect(onChange).toHaveBeenCalledTimes(numCalls);
+});

package/lib/hooks/useImageUploadState/index.js

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

package/lib/hooks/useImageUploadState/useImageUploadState.js

@@ -0,0 +1,128 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+var useImageUploadState = function useImageUploadState() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var inputRef = arguments.length > 1 ? arguments[1] : undefined;
+  var existingImage = props.previewImage,
+      defaultPreviewNode = props.defaultPreviewImage,
+      fileTypes = props.fileTypes,
+      onChange = props.onChange,
+      previewHeight = props.previewHeight,
+      previewWidth = props.previewWidth;
+  var defaultPreviewImage = useMemo(function () {
+    return typeof defaultPreviewNode === 'string' ? defaultPreviewNode : null;
+  }, [defaultPreviewNode]);
+
+  var _useState = useState(existingImage || defaultPreviewImage),
+      _useState2 = _slicedToArray(_useState, 2),
+      previewImage = _useState2[0],
+      setPreviewImage = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isMenuOpen = _useState4[0],
+      setIsMenuOpen = _useState4[1];
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isImageType = _useState6[0],
+      setIsImageType = _useState6[1];
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      fileName = _useState8[0],
+      setFileName = _useState8[1];
+
+  useEffect(function () {
+    return setPreviewImage(existingImage || defaultPreviewImage);
+  }, [existingImage, defaultPreviewImage]);
+  var pressPreviewButton = useCallback(function () {
+    if (previewImage && previewImage !== defaultPreviewImage) {
+      setIsMenuOpen(true);
+    } else {
+      inputRef.current.click();
+    }
+  }, [defaultPreviewImage, previewImage, inputRef]);
+  var handleInputChange = useCallback(function (event) {
+    var _event$target, _event$target$files$, _event$target$files$$;
+
+    var eventFileType = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$files$ = _event$target.files[0]) === null || _event$target$files$ === void 0 ? void 0 : (_event$target$files$$ = _event$target$files$.type) === null || _event$target$files$$ === void 0 ? void 0 : _event$target$files$$.split('/')[0];
+
+    if (fileTypes === null || fileTypes === void 0 ? void 0 : _includesInstanceProperty(fileTypes).call(fileTypes, eventFileType)) {
+      if (onChange && typeof onChange === 'function') {
+        onChange(event);
+      } // If existing image is not undefined, we rely on consumers to handle this themselves.
+
+
+      if (existingImage === undefined) {
+        if (eventFileType === 'image') {
+          var _event$target2;
+
+          setIsImageType(true);
+          var reader = new FileReader();
+
+          reader.onload = function (_ref) {
+            var result = _ref.target.result;
+            setPreviewImage(result);
+          };
+
+          reader.readAsDataURL((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.files[0]);
+        } else {
+          var _event$target3, _event$target3$files$;
+
+          setIsImageType(false);
+          setFileName((_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : (_event$target3$files$ = _event$target3.files[0]) === null || _event$target3$files$ === void 0 ? void 0 : _event$target3$files$.name);
+        }
+      }
+    }
+  }, []);
+  var handleOpenMenuChange = useCallback(function (isOpen) {
+    if (isOpen && previewImage && previewImage !== defaultPreviewImage) {
+      setIsMenuOpen(true);
+    } else {
+      setIsMenuOpen(false);
+    }
+  }, [defaultPreviewImage, previewImage]);
+  var removePreview = useCallback(function () {
+    return setPreviewImage(defaultPreviewImage);
+  }, [defaultPreviewImage]);
+  var showFileDialog = useCallback(function () {
+    var _inputRef$current;
+
+    return inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+  }, [inputRef]);
+  var handleLabelClick = useCallback(function (e) {
+    e.preventDefault();
+
+    if (previewImage && previewImage !== defaultPreviewImage) {
+      setIsMenuOpen(true);
+    } else {
+      showFileDialog();
+    }
+  }, [previewImage, defaultPreviewImage]);
+  var widthHeightSx = useMemo(function () {
+    return {
+      height: previewHeight,
+      width: previewWidth
+    };
+  }, [previewHeight, previewWidth]);
+  return {
+    defaultPreviewImage: defaultPreviewImage,
+    defaultPreviewNode: defaultPreviewNode,
+    fileName: fileName,
+    handleInputChange: handleInputChange,
+    handleLabelClick: handleLabelClick,
+    handleOpenMenuChange: handleOpenMenuChange,
+    isImageType: isImageType,
+    isMenuOpen: isMenuOpen,
+    pressPreviewButton: pressPreviewButton,
+    previewImage: previewImage,
+    removePreview: removePreview,
+    showFileDialog: showFileDialog,
+    widthHeightSx: widthHeightSx
+  };
+};
+
+export default useImageUploadState;

package/lib/hooks/useLabelHeight/index.js

@@ -0,0 +1 @@
+export { default } from './useLabelHeight';

package/lib/hooks/useLabelHeight/useLabelHeight.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+
+var useLabelHeight = function useLabelHeight(_ref) {
+  var _labelRef$current2, _inputRef$current2;
+
+  var labelRef = _ref.labelRef,
+      inputRef = _ref.inputRef;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLabelHigher = _useState2[0],
+      setIsLabelHigher = _useState2[1];
+
+  useEffect(function () {
+    var _labelRef$current, _inputRef$current;
+
+    if ((labelRef === null || labelRef === void 0 ? void 0 : (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.offsetHeight) > (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.offsetHeight)) {
+      setIsLabelHigher(true);
+    } else {
+      setIsLabelHigher(false);
+    }
+  }, [labelRef === null || labelRef === void 0 ? void 0 : (_labelRef$current2 = labelRef.current) === null || _labelRef$current2 === void 0 ? void 0 : _labelRef$current2.offsetHeight, inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.offsetHeight]);
+  return {
+    isLabelHigher: isLabelHigher
+  };
+};
+
+export default useLabelHeight;

package/lib/hooks/useModalState/index.js

@@ -0,0 +1 @@
+export { default } from './useModalState';

package/lib/hooks/useModalState/useModalState.js

@@ -0,0 +1,24 @@
+import { useOverlayTriggerState } from '@react-stately/overlays';
+/**
+ * Returns state-related data and functions for use with a Modal component.
+ * @param {Object} [props] Properties provided to the state
+ * @param {Boolean} [props.isDefaultOpen] Whether the modal is open by default (uncontrolled).
+ * @param {Boolean} [props.isOpen] Whether the modal is currently open (controlled).
+ * @param {Function} [props.onOpenChange] Handler that is called when the open state changes.
+ * `(isOpen: boolean) => void`
+ * @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
+ */
+
+var useModalState = function useModalState() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
+      onOpenChange = props.onOpenChange;
+  return useOverlayTriggerState({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
+};
+
+export default useModalState;

package/lib/hooks/useModalState/useModalState.test.js

@@ -0,0 +1,118 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useModalState from './useModalState';
+test('default return', function () {
+  var _renderHook = renderHook(function () {
+    return useModalState();
+  }),
+      result = _renderHook.result;
+
+  expect(result.current).toEqual(expect.objectContaining({
+    isOpen: false,
+    open: expect.any(Function),
+    close: expect.any(Function),
+    toggle: expect.any(Function)
+  }));
+});
+test('isDefaultOpen returns uncontrolled state', function () {
+  var _renderHook2 = renderHook(function () {
+    return useModalState({
+      isDefaultOpen: true
+    });
+  }),
+      result = _renderHook2.result;
+
+  expect(result.current).toEqual(expect.objectContaining({
+    isOpen: true,
+    open: expect.any(Function),
+    close: expect.any(Function),
+    toggle: expect.any(Function)
+  }));
+  act(function () {
+    return result.current.close();
+  });
+  expect(result.current.isOpen).toBe(false);
+  act(function () {
+    return result.current.open();
+  });
+  expect(result.current.isOpen).toBe(true);
+  act(function () {
+    return result.current.toggle();
+  });
+  expect(result.current.isOpen).toBe(false);
+});
+test('isOpen when true returns controlled state', function () {
+  var _renderHook3 = renderHook(function () {
+    return useModalState({
+      isOpen: true
+    });
+  }),
+      result = _renderHook3.result;
+
+  expect(result.current).toEqual(expect.objectContaining({
+    isOpen: true,
+    open: expect.any(Function),
+    close: expect.any(Function),
+    toggle: expect.any(Function)
+  }));
+  act(function () {
+    return result.current.close();
+  });
+  expect(result.current.isOpen).not.toBe(false);
+  act(function () {
+    return result.current.toggle();
+  });
+  expect(result.current.isOpen).not.toBe(false);
+});
+test('isOpen when false returns controlled state', function () {
+  var _renderHook4 = renderHook(function () {
+    return useModalState({
+      isOpen: false
+    });
+  }),
+      result = _renderHook4.result;
+
+  expect(result.current).toEqual(expect.objectContaining({
+    isOpen: false,
+    open: expect.any(Function),
+    close: expect.any(Function),
+    toggle: expect.any(Function)
+  }));
+  act(function () {
+    return result.current.open();
+  });
+  expect(result.current.isOpen).not.toBe(true);
+  act(function () {
+    return result.current.toggle();
+  });
+  expect(result.current.isOpen).not.toBe(true);
+});
+test('onOpenChange callback is triggered', function () {
+  var onOpenChange = jest.fn();
+
+  var _renderHook5 = renderHook(function () {
+    return useModalState({
+      onOpenChange: onOpenChange
+    });
+  }),
+      result = _renderHook5.result;
+
+  expect(result.current).toEqual(expect.objectContaining({
+    isOpen: false,
+    open: expect.any(Function),
+    close: expect.any(Function),
+    toggle: expect.any(Function)
+  }));
+  expect(onOpenChange).not.toHaveBeenCalled();
+  act(function () {
+    return result.current.open();
+  });
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+  act(function () {
+    return result.current.close();
+  });
+  expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+  act(function () {
+    return result.current.toggle();
+  });
+  expect(onOpenChange).toHaveBeenNthCalledWith(3, true);
+});

package/lib/hooks/useOverlayPanelState/index.js

@@ -0,0 +1 @@
+export { default } from './useOverlayPanelState';

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -0,0 +1,43 @@
+import { useOverlayTriggerState } from '@react-stately/overlays';
+/**
+ * Returns state-related data and functions for use with a Modal component.
+ * @param {Object} [props] Properties provided to the state
+ * @param {Boolean} [props.isDefaultOpen] Whether the modal is open by default (uncontrolled).
+ * @param {Boolean} [props.isOpen] Whether the modal is currently open (controlled).
+ * @param {Function} [props.onOpenChange] Handler that is called when the open state changes.
+ * `(isOpen: boolean) => void`
+ * @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
+ */
+
+var useOverlayPanelState = function useOverlayPanelState() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
+      onOpenChange = props.onOpenChange;
+  var state = useOverlayTriggerState({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
+
+  var onClose = function onClose(stateProp, triggerRef, onCloseProp) {
+    if (stateProp) {
+      stateProp.close();
+    }
+
+    if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+      triggerRef.current.focus();
+    }
+
+    if (onCloseProp) {
+      onCloseProp();
+    }
+  };
+
+  return {
+    state: state,
+    onClose: onClose
+  };
+};
+
+export default useOverlayPanelState;

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useOverlayPanelState from './useOverlayPanelState';
+test('default useOverlayPanelState', function () {
+  var _renderHook = renderHook(function () {
+    return useOverlayPanelState();
+  }),
+      result = _renderHook.result;
+
+  expect(result.current).toEqual(expect.objectContaining({
+    state: {
+      open: expect.any(Function),
+      close: expect.any(Function),
+      toggle: expect.any(Function),
+      isOpen: expect.any(Boolean)
+    },
+    onClose: expect.any(Function)
+  }));
+});

package/lib/hooks/useProgressiveState/index.js

@@ -0,0 +1 @@
+export { default } from './useProgressiveState';

package/lib/hooks/useProgressiveState/useProgressiveState.js

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+/**
+ * A custom hook that provides stateful capabilities when the associated prop is not supplied
+ * @param {*} prop The intended prop to be controlled by state
+ * @param {*} initial The initial state value, used only if the given prop is undefined
+ */
+
+var useProgressiveState = function useProgressiveState(prop, initial) {
+  var controlledState = useState(initial);
+
+  if (prop === undefined) {
+    return controlledState;
+  }
+
+  return [prop, function () {}];
+};
+
+export default useProgressiveState;