@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

package/lib/cjs/recipes/AttributeMapping.stories.js

@@ -1,488 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.EditRow = exports.Edit = exports.DisplayWithError = exports.DisplayRow = exports.Display = void 0;
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
-var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
-var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
-var _uuid = require("uuid");
-var _index = require("../index");
-var _figmaLinks = require("../utils/designUtils/figmaLinks.ts");
-var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
-var _react2 = require("@emotion/react");
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var _default = exports["default"] = {
-  title: 'Recipes/Attribute Mappings'
-};
-var sx = {
-  alertCircleIcon: {
-    position: 'absolute',
-    right: '4px',
-    top: '4px',
-    fill: 'critical.bright'
-  },
-  badge: {
-    alignSelf: 'center',
-    border: '1px solid',
-    borderColor: 'neutral.80',
-    backgroundColor: 'white',
-    marginLeft: 'sm',
-    '& span': {
-      lineHeight: 1,
-      color: 'text.primary'
-    }
-  },
-  container: {
-    px: 'sm',
-    pt: 'sm',
-    pb: 'lg',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
-  calloutSx: {
-    width: '450px',
-    marginBottom: 'xs',
-    paddingRight: 'md'
-  },
-  createIconButton: {
-    marginLeft: 'xs'
-  },
-  fieldColumnTitle: {
-    fontWeight: 3,
-    fontSize: 'md',
-    lineHeight: '18px',
-    marginBottom: 'xs'
-  },
-  fieldColumnTitleWrapper: {
-    width: 'calc(50% - 22px)'
-  },
-  fieldRowWrapper: {
-    alignItems: 'center',
-    marginTop: 'sm'
-  },
-  separator: {
-    width: '20px',
-    margin: '0 2px'
-  }
-};
-var editSx = {
-  comboBoxFieldWrapper: {
-    width: '275px',
-    '& .is-float-label .field-control-input': {
-      pt: '11px',
-      pb: '11px'
-    }
-  },
-  comboBoxField: {
-    maxHeight: '40px'
-  },
-  rowTitle: {
-    fontWeight: 3,
-    fontSize: 'md',
-    width: '275px',
-    minWidth: '153px',
-    mr: 'sm'
-  },
-  lastRowTitle: {
-    fontWeight: 3,
-    fontSize: 'md',
-    width: '135px',
-    textAlign: 'center'
-  },
-  editAttributesBox: {
-    bg: 'accent.99',
-    p: 'md',
-    pr: '12px',
-    pt: 'sm'
-  },
-  scrollBox: {
-    mt: 'md',
-    maxHeight: '700px'
-  },
-  checkbox: {
-    '& .field-control-input': {
-      margin: 0
-    }
-  }
-};
-var helperTextId = (0, _uuid.v4)();
-var Display = exports.Display = function Display() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    sx: sx.container
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: {
-      width: '100%'
-    }
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.fieldColumnTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.fieldColumnTitle
-  }, "Application")), (0, _react2.jsx)(_index.Box, {
-    sx: sx.fieldColumnTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.fieldColumnTitle
-  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(DisplayRow, {
-    withBadge: true,
-    leftValue: "username",
-    rightValue: "User ID"
-  }), (0, _react2.jsx)(DisplayRow, {
-    leftValue: "firstName",
-    rightValue: "Given Name"
-  }), (0, _react2.jsx)(DisplayRow, {
-    leftValue: "lastName",
-    rightValue: "Family Name"
-  }), (0, _react2.jsx)(DisplayRow, {
-    leftValue: "population",
-    rightValue: "Population"
-  })));
-};
-Display.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.attributeMappings.display
-  }
-};
-var DisplayWithError = exports.DisplayWithError = function DisplayWithError() {
-  var withError = true;
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Callout, {
-    status: _statuses["default"].ERROR,
-    sx: sx.calloutSx
-  }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", (0, _react2.jsx)(_index.Link, {
-    href: "https://pingidentity.com",
-    target: "_blank",
-    "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
-    variant: "app"
-  }, ' ', "Read More"))), (0, _react2.jsx)(_index.Box, {
-    sx: sx.container
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: {
-      width: '100%'
-    }
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: sx.fieldColumnTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.fieldColumnTitle
-  }, "Application")), (0, _react2.jsx)(_index.Box, {
-    sx: sx.fieldColumnTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.fieldColumnTitle
-  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(DisplayRow, {
-    withBadge: true,
-    leftValue: "username",
-    rightValue: "User ID"
-  }), (0, _react2.jsx)(DisplayRow, {
-    leftValue: "firstName",
-    rightValue: "Given Name"
-  }), (0, _react2.jsx)(DisplayRow, {
-    leftValue: "lastName",
-    rightValue: "Family Name"
-  }), (0, _react2.jsx)(DisplayRow, {
-    withError: withError,
-    leftValue: "population",
-    rightValue: "Population"
-  })));
-};
-DisplayWithError.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'link-in-text-block',
-        enabled: false
-      }]
-    }
-  }
-};
-var Edit = exports.Edit = function Edit() {
-  var defaultRows = [{
-    leftValue: 'username',
-    rightValue: 'User ID',
-    name: 'first default'
-  }, {
-    leftValue: 'firstName',
-    rightValue: 'Given Name',
-    name: 'second default'
-  }, {
-    leftValue: 'lastName',
-    rightValue: 'Family Name',
-    name: 'third default'
-  }, {
-    leftValue: 'population',
-    rightValue: 'Population',
-    name: 'fourth default'
-  }];
-  var _useState = (0, _react.useState)(defaultRows),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    rows = _useState2[0],
-    setRows = _useState2[1];
-  var removeRow = function removeRow(rowIndex) {
-    var _context;
-    var newArray = (0, _filter["default"])(rows).call(rows, function (row, index) {
-      return rowIndex !== index;
-    });
-    setRows((0, _concat["default"])(_context = []).call(_context, newArray));
-  };
-  var updateRow = function updateRow(rowIndex, value, attribute) {
-    var _context2;
-    var newArray = (0, _map["default"])(rows).call(rows, function (row, index) {
-      if (rowIndex === index) {
-        var thisRow = rows[index];
-        thisRow[attribute] = value;
-        return thisRow;
-      }
-      return row;
-    });
-    setRows((0, _concat["default"])(_context2 = []).call(_context2, newArray));
-  };
-  return (0, _react2.jsx)(_index.Box, {
-    maxWidth: "735px"
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: editSx.editAttributesBox
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: editSx.rowTitle
-  }, "Application"), (0, _react2.jsx)(_index.Text, {
-    sx: editSx.rowTitle
-  }, "PingOne"), (0, _react2.jsx)(_index.Text, {
-    sx: editSx.lastRowTitle
-  }, "Required")), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      mr: '3px'
-    }
-  }, (0, _react2.jsx)(_index.Separator, {
-    sx: {
-      mb: 0,
-      mt: 'sm'
-    }
-  })), (0, _react2.jsx)(_index.ScrollBox, {
-    sx: editSx.scrollBox
-  }, (0, _react2.jsx)(_index.Box, null, (0, _map["default"])(rows).call(rows, function (row, index) {
-    return (0, _react2.jsx)(EditRow, (0, _extends2["default"])({}, row, {
-      index: index,
-      removeRow: removeRow,
-      updateRow: updateRow,
-      key: "row container ".concat(row.name)
-    }));
-  })))));
-};
-Edit.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.attributeMappings.edit
-  }
-};
-var DisplayRow = exports.DisplayRow = function DisplayRow(props) {
-  var _props$withBadge = props.withBadge,
-    withBadge = _props$withBadge === void 0 ? false : _props$withBadge,
-    withError = props.withError,
-    _props$leftValue = props.leftValue,
-    leftValue = _props$leftValue === void 0 ? 'UserId' : _props$leftValue,
-    _props$rightValue = props.rightValue,
-    rightValue = _props$rightValue === void 0 ? 'mdorey' : _props$rightValue;
-  return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.fieldRowWrapper
-  }, (0, _react2.jsx)(_index.TextField, {
-    isReadOnly: true,
-    value: leftValue,
-    labelProps: {
-      mb: 0
-    },
-    controlProps: {
-      variant: 'input.small',
-      'aria-label': "input ".concat(leftValue),
-      sx: {
-        width: '165px'
-      }
-    },
-    "aria-labelledby": withError && helperTextId,
-    slots: withError && {
-      inContainer: (0, _react2.jsx)(_index.Icon, {
-        icon: _AlertCircleIcon["default"],
-        sx: sx.alertCircleIcon,
-        title: {
-          name: 'Alert Circle Icon'
-        }
-      })
-    }
-  }), (0, _react2.jsx)(_index.Separator, {
-    sx: sx.separator
-  }), (0, _react2.jsx)(_index.TextField, {
-    isReadOnly: true,
-    value: rightValue,
-    labelProps: {
-      mb: 0
-    },
-    controlProps: {
-      variant: 'input.small',
-      'aria-label': "input ".concat(rightValue),
-      sx: {
-        width: '165px'
-      }
-    }
-  }), withBadge && (0, _react2.jsx)(_index.Badge, {
-    label: "Required",
-    sx: sx.badge
-  }));
-};
-var EditRow = exports.EditRow = function EditRow(props) {
-  var isNewRow = props.isNewRow,
-    index = props.index,
-    leftValue = props.leftValue,
-    rightValue = props.rightValue,
-    _props$updateRow = props.updateRow,
-    updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
-    _props$removeRow = props.removeRow,
-    removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow;
-  var leftItems = [{
-    name: 'username',
-    id: '1'
-  }, {
-    name: 'firstName',
-    id: '2'
-  }, {
-    name: 'lastName',
-    id: '3'
-  }, {
-    name: 'population',
-    id: '4'
-  }];
-  var rightItems = [{
-    name: 'User ID',
-    id: '1'
-  }, {
-    name: 'Given Name',
-    id: '2'
-  }, {
-    name: 'Family Name',
-    id: '3'
-  }, {
-    name: 'Population',
-    id: '4'
-  }];
-  var rowRef = (0, _react.useRef)();
-  var comboBoxFieldRef = (0, _react.useRef)();
-  var setLeftInputValue = function setLeftInputValue(value) {
-    updateRow(index, value, 'leftValue');
-  };
-  var setRightInputValue = function setRightInputValue(value) {
-    updateRow(index, value, 'rightValue');
-  };
-  (0, _react.useEffect)(function () {
-    if (isNewRow) {
-      comboBoxFieldRef.current.focus();
-      comboBoxFieldRef.current.scrollIntoView();
-    }
-  }, []);
-  return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignItems: "center",
-    mb: "sm",
-    gap: "sm",
-    ref: rowRef
-  }, (0, _react2.jsx)(_index.Box, {
-    sx: editSx.comboBoxFieldWrapper
-  }, (0, _react2.jsx)(_index.ComboBoxField, {
-    ref: comboBoxFieldRef,
-    items: leftItems,
-    labelMode: "float",
-    id: "leftInputField ".concat(index),
-    key: "leftInputField ".concat(index),
-    labelProps: {
-      mb: 0
-    },
-    "aria-label": "selection field",
-    controlProps: {
-      sx: editSx.comboBoxField
-    },
-    containerProps: {
-      width: '100%',
-      maxWidth: '275px'
-    },
-    inputValue: leftValue,
-    onInputChange: setLeftInputValue
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name,
-      "data-id": item.name
-    }, item.name);
-  })), (0, _react2.jsx)(_index.Box, {
-    sx: editSx.comboBoxFieldWrapper
-  }, (0, _react2.jsx)(_index.ComboBoxField, {
-    items: rightItems,
-    labelMode: "float",
-    id: "rightInputField ".concat(index),
-    key: "rightInputField ".concat(index),
-    labelProps: {
-      mb: 0
-    },
-    "aria-label": "selection field",
-    controlProps: {
-      sx: editSx.comboBoxField
-    },
-    containerProps: {
-      width: '100%',
-      maxWidth: '275px'
-    },
-    inputValue: rightValue,
-    onInputChange: setRightInputValue
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name,
-      "data-id": item.name
-    }, item.name);
-  })), (0, _react2.jsx)(_index.Box, {
-    width: "135px"
-  }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: {
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  }, (0, _react2.jsx)(_index.IconButton, {
-    sx: {
-      alignSelf: 'center'
-    },
-    "aria-label": "icon button with tooltip",
-    title: "Advanced Expression"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CogsIcon["default"],
-    size: "sm",
-    title: {
-      name: 'Cogs Icon'
-    }
-  })), (0, _react2.jsx)(_index.CheckboxField, {
-    "aria-label": "required checkbox",
-    containerProps: {
-      sx: editSx.checkbox
-    }
-  }), (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "icon button with tooltip",
-    title: "Delete",
-    onPress: function onPress() {
-      return removeRow(index);
-    }
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _DeleteIcon["default"],
-    color: "neutral.30",
-    size: "24px",
-    title: {
-      name: 'Delete Icon'
-    }
-  })))));
-};