@comet/cms-admin 9.0.0-beta.2 → 9.0.0-beta.4

package/lib/contentScope/__stories__/ContentScopeSelect.stories.js

@@ -0,0 +1,655 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { AppHeader, AppHeaderMenuButton, CometLogo, FillSpace } from "@comet/admin";
+import { Domain, Language } from "@comet/admin-icons";
+import { ListItemIcon, ListItemText } from "@mui/material";
+import { useState } from "react";
+import { findTextMatches, MarkedMatches } from "../../common/MarkedMatches";
+import { ContentScopeSelect } from "../ContentScopeSelect";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var config = {
+  component: ContentScopeSelect,
+  title: "contentScope/ContentScopeSelect",
+  decorators: [function (Story) {
+    return /*#__PURE__*/_jsxs(AppHeader, {
+      position: "relative",
+      headerHeight: 60,
+      children: [/*#__PURE__*/_jsx(AppHeaderMenuButton, {}), /*#__PURE__*/_jsx(CometLogo, {}), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsx(Story, {})]
+    });
+  }]
+};
+export default config;
+export var Basic = {
+  render: function render() {
+    var _useState = useState({
+        domain: "main"
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main"
+        },
+        label: {
+          domain: "Main"
+        }
+      }, {
+        scope: {
+          domain: "secondary"
+        },
+        label: {
+          domain: "Secondary"
+        }
+      }, {
+        scope: {
+          domain: "tertiary"
+        },
+        label: {
+          domain: "Tertiary"
+        }
+      }]
+    });
+  }
+};
+export var MultipleDimensions = {
+  render: function render() {
+    var _useState3 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }]
+    });
+  },
+  name: "Multiple dimensions"
+};
+export var Searchable = {
+  render: function render() {
+    var _useState5 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      searchable: true
+    });
+  }
+};
+export var Groups = {
+  render: function render() {
+    var _useState7 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      value = _useState8[0],
+      setValue = _useState8[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      groupBy: "domain",
+      searchable: true
+    });
+  }
+};
+export var CustomIcon = {
+  render: function render() {
+    var _useState9 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState0 = _slicedToArray(_useState9, 2),
+      value = _useState0[0],
+      setValue = _useState0[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      icon: /*#__PURE__*/_jsx(Language, {})
+    });
+  },
+  name: "Custom icon"
+};
+export var CustomRenderOption = {
+  render: function render() {
+    var _useState1 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState10 = _slicedToArray(_useState1, 2),
+      value = _useState10[0],
+      setValue = _useState10[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      renderOption: function renderOption(option) {
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Domain, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            primary: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [option.label.domain, " \u2013 ", option.label.language]
+            })
+          })]
+        });
+      }
+    });
+  },
+  name: "Custom renderOption"
+};
+export var CustomRenderOptionWithSearchHighlighting = {
+  render: function render() {
+    var _useState11 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      value = _useState12[0],
+      setValue = _useState12[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      searchable: true,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      renderOption: function renderOption(option, query) {
+        var text = "".concat(option.label.domain, " \u2013 ").concat(option.label.language);
+        var matches = findTextMatches(text, query);
+        return /*#__PURE__*/_jsx(ListItemText, {
+          primary: /*#__PURE__*/_jsx(MarkedMatches, {
+            text: text,
+            matches: matches
+          })
+        });
+      }
+    });
+  },
+  name: "Custom renderOption with search highlighting"
+};
+export var CustomRenderSelectedOption = {
+  render: function render() {
+    var _useState13 = useState({
+        domain: "main",
+        language: "en"
+      }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      value = _useState14[0],
+      setValue = _useState14[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          domain: "main",
+          language: "en"
+        },
+        label: {
+          domain: "Main",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "main",
+          language: "de"
+        },
+        label: {
+          domain: "Main",
+          language: "German"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "en"
+        },
+        label: {
+          domain: "Secondary",
+          language: "English"
+        }
+      }, {
+        scope: {
+          domain: "secondary",
+          language: "de"
+        },
+        label: {
+          domain: "Secondary",
+          language: "German"
+        }
+      }],
+      renderSelectedOption: function renderSelectedOption(option) {
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [option.label.domain, ": ", option.label.language]
+        });
+      }
+    });
+  },
+  name: "Custom renderSelectedOption"
+};
+export var ThreeDimensions = {
+  render: function render() {
+    var _useState15 = useState({
+        company: "a-inc",
+        country: "at",
+        language: "de"
+      }),
+      _useState16 = _slicedToArray(_useState15, 2),
+      value = _useState16[0],
+      setValue = _useState16[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          company: "a-inc",
+          country: "at",
+          language: "de"
+        },
+        label: {
+          company: "A Inc.",
+          country: "Austria",
+          language: "German"
+        }
+      }, {
+        scope: {
+          company: "a-inc",
+          country: "at",
+          language: "en"
+        },
+        label: {
+          company: "A Inc.",
+          country: "Austria",
+          language: "English"
+        }
+      }, {
+        scope: {
+          company: "b-inc",
+          country: "at",
+          language: "de"
+        },
+        label: {
+          company: "B Inc.",
+          country: "Austria",
+          language: "German"
+        }
+      }, {
+        scope: {
+          company: "b-inc",
+          country: "at",
+          language: "en"
+        },
+        label: {
+          company: "B Inc.",
+          country: "Austria",
+          language: "English"
+        }
+      }, {
+        scope: {
+          company: "c-inc",
+          country: "ch",
+          language: "de"
+        },
+        label: {
+          company: "C Inc.",
+          country: "Switzerland",
+          language: "German"
+        }
+      }, {
+        scope: {
+          company: "c-inc",
+          country: "ch",
+          language: "en"
+        },
+        label: {
+          company: "C Inc.",
+          country: "Switzerland",
+          language: "English"
+        }
+      }, {
+        scope: {
+          company: "c-inc",
+          country: "ch",
+          language: "fr"
+        },
+        label: {
+          company: "C Inc.",
+          country: "Switzerland",
+          language: "French"
+        }
+      }],
+      groupBy: "company",
+      searchable: true
+    });
+  },
+  name: "Three dimensions"
+};
+export var GroupingWithOptionalScopeParts = {
+  render: function render() {
+    var _useState17 = useState({
+        country: "at"
+      }),
+      _useState18 = _slicedToArray(_useState17, 2),
+      value = _useState18[0],
+      setValue = _useState18[1];
+    return /*#__PURE__*/_jsx(ContentScopeSelect, {
+      value: value,
+      onChange: setValue,
+      options: [{
+        scope: {
+          country: "at"
+        },
+        label: {
+          country: "AT Overview"
+        }
+      }, {
+        scope: {
+          country: "de"
+        },
+        label: {
+          country: "DE Overview"
+        }
+      }, {
+        scope: {
+          country: "at",
+          company: "a-inc"
+        },
+        label: {
+          country: "Austria",
+          company: "A Inc."
+        }
+      }, {
+        scope: {
+          country: "at",
+          company: "b-inc"
+        },
+        label: {
+          country: "Austria",
+          company: "B Inc."
+        }
+      }, {
+        scope: {
+          country: "de",
+          company: "a-inc"
+        },
+        label: {
+          country: "Germany",
+          company: "A Inc."
+        }
+      }, {
+        scope: {
+          country: "de",
+          company: "b-inc"
+        },
+        label: {
+          country: "Germany",
+          company: "B Inc."
+        }
+      }],
+      groupBy: "country",
+      searchable: true,
+      renderOption: function renderOption(option, query, isSelected) {
+        var text;
+        if (option.scope.company === undefined) {
+          var _option$label$country, _option$label;
+          text = (_option$label$country = (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.country) !== null && _option$label$country !== void 0 ? _option$label$country : option.scope.country;
+        } else {
+          var _option$label$company, _option$label2;
+          text = (_option$label$company = (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.company) !== null && _option$label$company !== void 0 ? _option$label$company : option.scope.company;
+        }
+        var matches = findTextMatches(text, query);
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Domain, {})
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            slotProps: {
+              primary: {
+                variant: isSelected ? "subtitle2" : "body2"
+              }
+            },
+            sx: {
+              margin: 0
+            },
+            primary: /*#__PURE__*/_jsx(MarkedMatches, {
+              text: text,
+              matches: matches
+            })
+          })]
+        });
+      }
+    });
+  },
+  name: "Grouping with optional scope parts"
+};

package/lib/contentScope/noContentScopeFallback/NoContentScopeFallback.d.ts

@@ -1,3 +1,3 @@
-import { type FunctionComponent } from "react";
+import type { FunctionComponent } from "react";
 export declare const NoContentScopeFallback: FunctionComponent;
 //# sourceMappingURL=NoContentScopeFallback.d.ts.map

package/lib/contentScope/noContentScopeFallback/NoContentScopeFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoContentScopeFallback.d.ts","sourceRoot":"","sources":["../../../src/contentScope/noContentScopeFallback/NoContentScopeFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO/C,eAAO,MAAM,sBAAsB,EAAE,iBAqEpC,CAAC"}
+{"version":3,"file":"NoContentScopeFallback.d.ts","sourceRoot":"","sources":["../../../src/contentScope/noContentScopeFallback/NoContentScopeFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO/C,eAAO,MAAM,sBAAsB,EAAE,iBAqEpC,CAAC"}

package/lib/contentScope/noContentScopeFallback/__stories__/NoContentScopeFallback.stories.js

@@ -0,0 +1,7 @@
+import { NoContentScopeFallback } from "../NoContentScopeFallback";
+var config = {
+  component: NoContentScopeFallback,
+  title: "contentScope/noContentScopeFallback/NoContentScopeFallback"
+};
+export default config;
+export var Default = {};

package/lib/contentScope/utils/defaultCreatePath.d.ts

@@ -1,4 +1,4 @@
-import { type ContentScopeValues } from "../Provider";
+import type { ContentScopeValues } from "../Provider";
 /**
  * Generates default paths based on the provided content scope values.
  *

package/lib/contentScope/utils/defaultCreatePath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultCreatePath.d.ts","sourceRoot":"","sources":["../../../src/contentScope/utils/defaultCreatePath.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,YAkB3D"}
+{"version":3,"file":"defaultCreatePath.d.ts","sourceRoot":"","sources":["../../../src/contentScope/utils/defaultCreatePath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,YAkB3D"}

package/lib/contentScope/utils/groupObjectsIntoArrays.d.ts

@@ -1,4 +1,4 @@
-import { type ContentScopeValues } from "../Provider";
+import type { ContentScopeValues } from "../Provider";
 /**
  * Groups objects into arrays based on their keys.
  *

package/lib/contentScope/utils/groupObjectsIntoArrays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"groupObjectsIntoArrays.d.ts","sourceRoot":"","sources":["../../../src/contentScope/utils/groupObjectsIntoArrays.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,kBAAkB,SAWhE"}
+{"version":3,"file":"groupObjectsIntoArrays.d.ts","sourceRoot":"","sources":["../../../src/contentScope/utils/groupObjectsIntoArrays.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,kBAAkB,SAWhE"}