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

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

@@ -0,0 +1,431 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.ReadOnlyField = exports.Error = exports.Default = exports.Controlled = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("../..");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+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; }
+
+var _default = {
+  title: 'Form/MultivaluesField',
+  component: _.MultivaluesField,
+  argTypes: {
+    direction: {
+      defaultValue: 'bottom'
+    },
+    hasAutoFocus: {},
+    hasNoStatusIndicator: {},
+    isDisabled: {},
+    isNotFlippable: {},
+    isReadOnly: {},
+    isRequired: {},
+    label: {
+      defaultValue: 'Field Label'
+    },
+    mode: {},
+    placeholder: {},
+    defaultSelectedKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    disabledKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    selectedKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    },
+    a11y: {
+      config: {
+        /** The "color-contrast" test ends with an "incomplete" status
+         * since pseudo-element applies to the same container as selected values.
+         * A  workaround to disable "color-contrast" incomplete tests.
+         */
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}, {
+  id: 4,
+  name: 'Frog',
+  key: 'Frog'
+}, {
+  id: 5,
+  name: 'Seal',
+  key: 'Seal'
+}, {
+  id: 6,
+  name: 'Orangutan',
+  key: 'Orangutan'
+}, {
+  id: 7,
+  name: 'Shark',
+  key: 'Shark'
+}];
+
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
+var Default = function Default(args) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Default = Default;
+
+var WithCustomValues = function WithCustomValues(args) {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items,
+    mode: "non-restrictive"
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithCustomValues = WithCustomValues;
+WithCustomValues.argTypes = {
+  mode: {
+    defaultValue: 'non-restrictive'
+  }
+};
+
+var WithDisabledKeys = function WithDisabledKeys(args) {
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    disabledKeys: ['Aardvark'],
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithDisabledKeys = WithDisabledKeys;
+
+var Uncontrolled = function Uncontrolled(args) {
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    defaultSelectedKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Uncontrolled = Uncontrolled;
+
+var Controlled = function Controlled(args) {
+  var _useState9 = (0, _react.useState)(['Aardvark', 'Snake']),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    label: "Field Label"
+  }, args, {
+    items: items,
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Controlled = Controlled;
+
+var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.Box, {
+    sx: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, (0, _react2.jsx)(_.Box, {
+    width: 300
+  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }))));
+};
+
+exports.WithCustomSize = WithCustomSize;
+
+var WithReadOnlyValues = function WithReadOnlyValues(args) {
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    readOnlyKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithReadOnlyValues = WithReadOnlyValues;
+
+var Error = function Error(args) {
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+      isOpen = _useState18[0],
+      setIsOpen = _useState18[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({}, args, {
+    items: items,
+    helperText: "Here is some helpful text...",
+    status: "error",
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.Error = Error;
+
+var ReadOnlyField = function ReadOnlyField(args) {
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
+      isOpen = _useState20[0],
+      setIsOpen = _useState20[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    items: items
+  }, args, {
+    isReadOnly: true,
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.ReadOnlyField = ReadOnlyField;