@pingux/astro 2.2.0 → 2.3.0-alpha.1

package/lib/cjs/components/DatePicker/DatePicker.stories.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UnavailableDates = exports.Success = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _date = require("@internationalized/date");
+var _utils = require("@react-aria/utils");
+var _addonActions = require("@storybook/addon-actions");
+var _index = require("../../index");
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var _default = {
+  title: 'Form/DatePicker',
+  component: _DatePicker["default"],
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: _objectSpread({
+    defaultValue: {
+      control: {
+        type: 'text'
+      }
+    },
+    value: {
+      table: {
+        disable: true
+      }
+    },
+    hasAutoFocus: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    hasFormatHelpText: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    isDisabled: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    isReadOnly: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    isRequired: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Example label'
+    },
+    maxValue: {
+      control: {
+        type: 'text'
+      }
+    },
+    minValue: {
+      control: {
+        type: 'text'
+      }
+    },
+    onChange: {
+      defaultValue: null,
+      action: 'handleChange'
+    }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], args);
+};
+exports.Default = Default;
+var DefaultValue = function DefaultValue(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    defaultValue: "2022-08-10"
+  }));
+};
+exports.DefaultValue = DefaultValue;
+var Controlled = function Controlled(args) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    value: date,
+    onChange: (0, _utils.chain)(setDate, (0, _addonActions.actions)('onChange'))
+  })), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    mt: "sm"
+  }, (0, _react2.jsx)(_index.Button, {
+    mr: "sm",
+    onPress: function onPress() {
+      return setDate((0, _date.parseDate)('2022-08-10'));
+    }
+  }, "Change value"), (0, _react2.jsx)(_index.Button, {
+    onPress: function onPress() {
+      return setDate(null);
+    }
+  }, "Clear")));
+};
+exports.Controlled = Controlled;
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    isDisabled: true
+  }));
+};
+exports.Disabled = Disabled;
+var ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    isReadOnly: true
+  }));
+};
+exports.ReadOnly = ReadOnly;
+var UnavailableDates = function UnavailableDates(args) {
+  var unavailableRanges = [['2022-07-29', '2022-08-05'], ['2022-08-15', '2022-08-20'], ['2022-08-25', '2022-08-26']];
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    unavailableRanges: unavailableRanges,
+    defaultValue: "2022-08-10"
+  }));
+};
+exports.UnavailableDates = UnavailableDates;
+var MinimumDate = function MinimumDate(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    defaultValue: "2022-08-17",
+    minValue: "2022-08-10"
+  }));
+};
+exports.MinimumDate = MinimumDate;
+var MaximumDate = function MaximumDate(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    defaultValue: "2022-08-03",
+    maxValue: "2022-08-10"
+  }));
+};
+exports.MaximumDate = MaximumDate;
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    isRequired: true
+  }));
+};
+exports.Required = Required;
+var FormatHelperText = function FormatHelperText(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    hasFormatHelpText: true
+  }));
+};
+exports.FormatHelperText = FormatHelperText;
+var DefaultOpen = function DefaultOpen(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    isDefaultOpen: true
+  }));
+};
+exports.DefaultOpen = DefaultOpen;
+var Error = function Error(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    status: "error",
+    helperText: "Here is some helpful text..."
+  }));
+};
+exports.Error = Error;
+var Success = function Success(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    status: "success",
+    helperText: "Here is some helpful text..."
+  }));
+};
+exports.Success = Success;

package/lib/cjs/components/DatePicker/DatePicker.styles.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.containedIcon = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Buttons = require("../Button/Buttons.styles");
+var _Input = require("../Input/Input.styles");
+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) { (0, _defineProperty2["default"])(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; }
+var inSlotContainer = _objectSpread(_objectSpread({}, _Input.input.fieldControlWrapper), {}, {
+  position: 'relative',
+  width: 'fit-content'
+});
+var inputField = _objectSpread(_objectSpread({}, _Input.input), {}, {
+  width: 'auto',
+  pr: 'xl',
+  position: 'relative',
+  '&:focus-within:not(.is-read-only)': _objectSpread({}, _Buttons.defaultFocus),
+  ':hover': {
+    cursor: 'text'
+  },
+  '&.is-read-only': {
+    backgroundColor: 'accent.95',
+    border: 'none'
+  }
+});
+var containedIcon = {
+  position: 'absolute',
+  right: 5,
+  width: 28,
+  height: 28,
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+exports.containedIcon = containedIcon;
+var segment = {
+  '&:focus-visible': {
+    outline: '1px solid',
+    outlineColor: 'active',
+    borderRadius: 2
+  }
+};
+var _default = {
+  inSlotContainer: inSlotContainer,
+  inputField: inputField,
+  containedIcon: containedIcon,
+  segment: segment
+};
+exports["default"] = _default;