@plutonhq/core-frontend 0.0.1

package/dist/components/common/form/Select/Select.module.scss.js

@@ -0,0 +1,40 @@
+const e = "Select-module__selectField___yw1fC", l = "Select-module__search___wtQEu", _ = "Select-module__dropdown___yVMyh", d = "Select-module__selected___23unc", t = "Select-module__dropBtn___PjaL7", s = "Select-module__lists___Ku92Z", c = "Select-module__disabledItem___5o-zr", o = "Select-module__selectedItem___Na0JQ", i = "Select-module__dropdownDisabled___CdzQJ", n = "Select-module__selectFieldFull___oI-sk", r = "Select-module__selectFieldLarge___8tjSI", a = "Select-module__selectFieldDisabled___aKtm0", m = "Select-module__fieldHasError___6oLaV", u = "Select-module__selectFieldOpen___flbsT", F = "Select-module__selectFieldInline___qhK9L", S = "Select-module__fieldInner___ZrBvI", I = "Select-module__selectFieldMini___3CJjf", p = {
+  selectField: e,
+  search: l,
+  dropdown: _,
+  selected: d,
+  dropBtn: t,
+  lists: s,
+  disabledItem: c,
+  selectedItem: o,
+  dropdownDisabled: i,
+  selectFieldFull: n,
+  selectFieldLarge: r,
+  selectFieldDisabled: a,
+  fieldHasError: m,
+  selectFieldOpen: u,
+  selectFieldInline: F,
+  fieldInner: S,
+  selectFieldMini: I
+};
+export {
+  p as default,
+  c as disabledItem,
+  t as dropBtn,
+  _ as dropdown,
+  i as dropdownDisabled,
+  m as fieldHasError,
+  S as fieldInner,
+  s as lists,
+  l as search,
+  e as selectField,
+  a as selectFieldDisabled,
+  n as selectFieldFull,
+  F as selectFieldInline,
+  r as selectFieldLarge,
+  I as selectFieldMini,
+  u as selectFieldOpen,
+  d as selected,
+  o as selectedItem
+};
+//# sourceMappingURL=Select.module.scss.js.map

package/dist/components/common/form/Select/Select.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/components/common/form/SizePicker/SizePicker.d.ts

@@ -0,0 +1,13 @@
+type SizePickerProps = {
+    label?: string;
+    description?: string;
+    customClasses?: string;
+    fieldValue: string;
+    inline?: boolean;
+    hint?: string;
+    type?: 'restic' | 'rclone';
+    onUpdate: (value: string) => void;
+};
+declare const SizePicker: ({ label, description, customClasses, inline, fieldValue, type, hint, onUpdate, }: SizePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default SizePicker;
+//# sourceMappingURL=SizePicker.d.ts.map

package/dist/components/common/form/SizePicker/SizePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/SizePicker/SizePicker.tsx"],"names":[],"mappings":"AAOA,KAAK,eAAe,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,kFASjB,eAAe,4CAoEjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/common/form/SizePicker/SizePicker.js

@@ -0,0 +1,60 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { useState as u } from "react";
+import p from "../../Icon/Icon.js";
+import l from "./SizePicker.module.scss.js";
+import C from "../FormField/FormField.js";
+const M = ({
+  label: v,
+  description: h,
+  customClasses: $ = "",
+  inline: t = !1,
+  fieldValue: i = "",
+  type: s = "restic",
+  hint: b = "",
+  onUpdate: a
+}) => {
+  const [c, d] = u(() => i ? parseInt(i, 10) : void 0), [n, k] = u(() => {
+    const e = i.slice(-2);
+    return e === "ki" || e === "mi" || e === "gi" || e === "ti" || e === "K" || e === "M" || e === "G" || e === "T" ? e : s === "rclone" ? "M" : "mi";
+  }), z = (e) => {
+    const o = e === "" ? void 0 : Number(e);
+    d(o), a(o ? `${o}${n}` : "");
+  }, f = (e) => {
+    k(e), c && a(`${c}${e}`);
+  }, g = [
+    { label: "KB", value: s === "rclone" ? "K" : "ki" },
+    { label: "MB", value: s === "rclone" ? "M" : "mi" },
+    { label: "GB", value: s === "rclone" ? "G" : "gi" },
+    { label: "TB", value: s === "rclone" ? "T" : "ti" }
+  ];
+  return /* @__PURE__ */ r(
+    C,
+    {
+      type: "sizePicker",
+      label: v,
+      description: h,
+      hint: b,
+      inline: t,
+      classes: `${l.sizePicker} ${t ? l.sizePickerInline : ""} ${$}`,
+      children: /* @__PURE__ */ m("div", { className: l.inputGroup, children: [
+        /* @__PURE__ */ r("input", { type: "number", min: 0, value: c ?? "", onChange: (e) => z(e.target.value), className: l.numberInput }),
+        /* @__PURE__ */ r("ul", { className: l.unitSelector, children: g.map((e) => /* @__PURE__ */ m(
+          "li",
+          {
+            className: `${l.unit} ${n === e.value ? l.selected : ""}`,
+            onClick: () => f(e.value),
+            children: [
+              n === e.value && /* @__PURE__ */ r(p, { type: "check", size: 10 }),
+              e.label
+            ]
+          },
+          e.value
+        )) })
+      ] })
+    }
+  );
+};
+export {
+  M as default
+};
+//# sourceMappingURL=SizePicker.js.map

package/dist/components/common/form/SizePicker/SizePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizePicker.js","sources":["../../../../../src/components/common/form/SizePicker/SizePicker.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport Icon from '../../Icon/Icon';\r\nimport classes from './SizePicker.module.scss';\r\nimport FormField from '../FormField/FormField';\r\n\r\ntype SizeUnit = 'ki' | 'mi' | 'gi' | 'ti' | 'K' | 'M' | 'G' | 'T';\r\n\r\ntype SizePickerProps = {\r\n   label?: string;\r\n   description?: string;\r\n   customClasses?: string;\r\n   fieldValue: string;\r\n   inline?: boolean;\r\n   hint?: string;\r\n   type?: 'restic' | 'rclone';\r\n   onUpdate: (value: string) => void;\r\n};\r\n\r\nconst SizePicker = ({\r\n   label,\r\n   description,\r\n   customClasses = '',\r\n   inline = false,\r\n   fieldValue = '',\r\n   type = 'restic',\r\n   hint = '',\r\n   onUpdate,\r\n}: SizePickerProps) => {\r\n   const [size, setSize] = useState<number | undefined>(() => (fieldValue ? parseInt(fieldValue, 10) : undefined));\r\n   const [unit, setUnit] = useState<SizeUnit>(() => {\r\n      const lastTwoChars = fieldValue.slice(-2) as SizeUnit;\r\n      return lastTwoChars === 'ki' ||\r\n         lastTwoChars === 'mi' ||\r\n         lastTwoChars === 'gi' ||\r\n         lastTwoChars === 'ti' ||\r\n         lastTwoChars === 'K' ||\r\n         lastTwoChars === 'M' ||\r\n         lastTwoChars === 'G' ||\r\n         lastTwoChars === 'T'\r\n         ? lastTwoChars\r\n         : type === 'rclone'\r\n           ? 'M'\r\n           : 'mi';\r\n   });\r\n\r\n   const handleSizeChange = (value: string) => {\r\n      const numValue = value === '' ? undefined : Number(value);\r\n      setSize(numValue);\r\n      if (numValue) {\r\n         onUpdate(`${numValue}${unit}`);\r\n      } else {\r\n         onUpdate('');\r\n      }\r\n   };\r\n\r\n   const handleUnitChange = (newUnit: SizeUnit) => {\r\n      setUnit(newUnit);\r\n      if (size) {\r\n         onUpdate(`${size}${newUnit}`);\r\n      }\r\n   };\r\n\r\n   const units: { label: string; value: SizeUnit }[] = [\r\n      { label: 'KB', value: type === 'rclone' ? 'K' : 'ki' },\r\n      { label: 'MB', value: type === 'rclone' ? 'M' : 'mi' },\r\n      { label: 'GB', value: type === 'rclone' ? 'G' : 'gi' },\r\n      { label: 'TB', value: type === 'rclone' ? 'T' : 'ti' },\r\n   ];\r\n\r\n   return (\r\n      <FormField\r\n         type=\"sizePicker\"\r\n         label={label}\r\n         description={description}\r\n         hint={hint}\r\n         inline={inline}\r\n         classes={`${classes.sizePicker} ${inline ? classes.sizePickerInline : ''} ${customClasses}`}\r\n      >\r\n         <div className={classes.inputGroup}>\r\n            <input type=\"number\" min={0} value={size ?? ''} onChange={(e) => handleSizeChange(e.target.value)} className={classes.numberInput} />\r\n            <ul className={classes.unitSelector}>\r\n               {units.map((unitOption) => (\r\n                  <li\r\n                     key={unitOption.value}\r\n                     className={`${classes.unit} ${unit === unitOption.value ? classes.selected : ''}`}\r\n                     onClick={() => handleUnitChange(unitOption.value)}\r\n                  >\r\n                     {unit === unitOption.value && <Icon type=\"check\" size={10} />}\r\n                     {unitOption.label}\r\n                  </li>\r\n               ))}\r\n            </ul>\r\n         </div>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default SizePicker;\r\n"],"names":["SizePicker","label","description","customClasses","inline","fieldValue","type","hint","onUpdate","size","setSize","useState","unit","setUnit","lastTwoChars","handleSizeChange","value","numValue","handleUnitChange","newUnit","units","jsx","FormField","classes","jsxs","unitOption","Icon"],"mappings":";;;;;AAkBA,MAAMA,IAAa,CAAC;AAAA,EACjB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,QAAAC,IAAS;AAAA,EACT,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,UAAAC;AACH,MAAuB;AACpB,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAA6B,MAAON,IAAa,SAASA,GAAY,EAAE,IAAI,MAAU,GACxG,CAACO,GAAMC,CAAO,IAAIF,EAAmB,MAAM;AAC9C,UAAMG,IAAeT,EAAW,MAAM,EAAE;AACxC,WAAOS,MAAiB,QACrBA,MAAiB,QACjBA,MAAiB,QACjBA,MAAiB,QACjBA,MAAiB,OACjBA,MAAiB,OACjBA,MAAiB,OACjBA,MAAiB,MACfA,IACAR,MAAS,WACP,MACA;AAAA,EACV,CAAC,GAEKS,IAAmB,CAACC,MAAkB;AACzC,UAAMC,IAAWD,MAAU,KAAK,SAAY,OAAOA,CAAK;AACxD,IAAAN,EAAQO,CAAQ,GAEbT,EADCS,IACQ,GAAGA,CAAQ,GAAGL,CAAI,KAElB,EAFoB;AAAA,EAInC,GAEMM,IAAmB,CAACC,MAAsB;AAC7C,IAAAN,EAAQM,CAAO,GACXV,KACDD,EAAS,GAAGC,CAAI,GAAGU,CAAO,EAAE;AAAA,EAElC,GAEMC,IAA8C;AAAA,IACjD,EAAE,OAAO,MAAM,OAAOd,MAAS,WAAW,MAAM,KAAA;AAAA,IAChD,EAAE,OAAO,MAAM,OAAOA,MAAS,WAAW,MAAM,KAAA;AAAA,IAChD,EAAE,OAAO,MAAM,OAAOA,MAAS,WAAW,MAAM,KAAA;AAAA,IAChD,EAAE,OAAO,MAAM,OAAOA,MAAS,WAAW,MAAM,KAAA;AAAA,EAAK;AAGxD,SACG,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,MAAK;AAAA,MACL,OAAArB;AAAA,MACA,aAAAC;AAAA,MACA,MAAAK;AAAA,MACA,QAAAH;AAAA,MACA,SAAS,GAAGmB,EAAQ,UAAU,IAAInB,IAASmB,EAAQ,mBAAmB,EAAE,IAAIpB,CAAa;AAAA,MAEzF,UAAA,gBAAAqB,EAAC,OAAA,EAAI,WAAWD,EAAQ,YACrB,UAAA;AAAA,QAAA,gBAAAF,EAAC,WAAM,MAAK,UAAS,KAAK,GAAG,OAAOZ,KAAQ,IAAI,UAAU,CAAC,MAAMM,EAAiB,EAAE,OAAO,KAAK,GAAG,WAAWQ,EAAQ,aAAa;AAAA,QACnI,gBAAAF,EAAC,QAAG,WAAWE,EAAQ,cACnB,UAAAH,EAAM,IAAI,CAACK,MACT,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YAEE,WAAW,GAAGD,EAAQ,IAAI,IAAIX,MAASa,EAAW,QAAQF,EAAQ,WAAW,EAAE;AAAA,YAC/E,SAAS,MAAML,EAAiBO,EAAW,KAAK;AAAA,YAE/C,UAAA;AAAA,cAAAb,MAASa,EAAW,SAAS,gBAAAJ,EAACK,KAAK,MAAK,SAAQ,MAAM,IAAI;AAAA,cAC1DD,EAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UALPA,EAAW;AAAA,QAAA,CAOrB,EAAA,CACJ;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGT;"}

package/dist/components/common/form/SizePicker/SizePicker.module.scss

@@ -0,0 +1,82 @@
+@use '../../../../styles/fields.scss';
+
+.sizePicker {
+   .inputGroup {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+   }
+
+   .numberInput {
+      width: 70px;
+      padding: 8px 12px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      text-align: center;
+
+      &:focus {
+         outline: none;
+         border-color: var(--line-active-color);
+      }
+   }
+
+   .unitSelector {
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      overflow: hidden;
+   }
+
+   .unit {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 6px 12px;
+      font-size: 0.75rem;
+      width: 34px;
+      cursor: pointer;
+      color: var(--content-text-color);
+      background: transparent;
+      border-right: 1px solid var(--line-color);
+      transition: all 0.2s ease;
+
+      &:last-child {
+         border-right: none;
+      }
+
+      &:hover {
+         background: var(--background-color);
+      }
+
+      &.selected {
+         color: var(--primary-color);
+         background-color: var(--primary-color-light);
+      }
+   }
+
+   &.sizePickerInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+      }
+      .input {
+         width: 50%;
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .sizePicker .unit {
+      padding: 6px;
+   }
+}

package/dist/components/common/form/SizePicker/SizePicker.module.scss.js

@@ -0,0 +1,20 @@
+const e = "SizePicker-module__sizePicker___AbjCQ", i = "SizePicker-module__inputGroup___LjYtx", _ = "SizePicker-module__numberInput___qZMGs", n = "SizePicker-module__unitSelector___4-9UQ", c = "SizePicker-module__unit___ckT94", t = "SizePicker-module__selected___JTgaT", u = "SizePicker-module__sizePickerInline___DnMq2", r = {
+  sizePicker: e,
+  inputGroup: i,
+  numberInput: _,
+  unitSelector: n,
+  unit: c,
+  selected: t,
+  sizePickerInline: u
+};
+export {
+  r as default,
+  i as inputGroup,
+  _ as numberInput,
+  t as selected,
+  e as sizePicker,
+  u as sizePickerInline,
+  c as unit,
+  n as unitSelector
+};
+//# sourceMappingURL=SizePicker.module.scss.js.map

package/dist/components/common/form/SizePicker/SizePicker.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizePicker.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/common/form/StoragePicker/StoragePicker.d.ts

@@ -0,0 +1,18 @@
+type storageItem = {
+    name: string;
+    id: string;
+    type: string;
+};
+interface StoragePickerProps {
+    storagePath?: string;
+    storageId?: string;
+    disabled?: boolean;
+    deviceId?: string;
+    onUpdate: (val: {
+        storage: storageItem;
+        path: string;
+    }) => void;
+}
+declare const StoragePicker: ({ onUpdate, storagePath, storageId, disabled, deviceId }: StoragePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default StoragePicker;
+//# sourceMappingURL=StoragePicker.d.ts.map

package/dist/components/common/form/StoragePicker/StoragePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoragePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/StoragePicker/StoragePicker.tsx"],"names":[],"mappings":"AAQA,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,UAAU,kBAAkB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAED,QAAA,MAAM,aAAa,GAAI,0DAAuE,kBAAkB,4CAqF/G,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/common/form/StoragePicker/StoragePicker.js

@@ -0,0 +1,77 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useState as d, useMemo as O, useEffect as h } from "react";
+import s from "./StoragePicker.module.scss.js";
+import U from "../Select/Select.js";
+import { useGetStorages as x } from "../../../../services/storage.js";
+import M from "../Input/Input.js";
+import b from "../../FolderPicker/FolderPicker.js";
+import j from "../../Icon/Icon.js";
+const $ = ({ onUpdate: S, storagePath: v = "", storageId: f, disabled: a = !1, deviceId: k }) => {
+  const [e, m] = d(), [P, u] = d(!1), [i, g] = d(() => v), { data: c } = x(), l = [...(c == null ? void 0 : c.result) || []], N = O(() => l.map(({ name: r, id: n, type: F }) => ({
+    label: r,
+    value: n.toString(),
+    image: /* @__PURE__ */ o("img", { src: `/providers/${F}.png` })
+  })), [l]), y = (t) => {
+    console.log("storageID :", t);
+    const r = l.find((n) => n.id == t);
+    (r || t === "local") && m(r);
+  };
+  return h(() => {
+    if (l.length > 0 && f) {
+      const t = l.find((r) => r.id === f);
+      m(t);
+    }
+  }, [c]), h(() => {
+    e && S({ storage: e, path: i });
+  }, [e, i]), /* @__PURE__ */ p("div", { className: s.storagePicker, children: [
+    /* @__PURE__ */ o("div", { className: s.storagePickerInput, children: /* @__PURE__ */ p("div", { children: [
+      /* @__PURE__ */ o("div", { className: s.storage, children: /* @__PURE__ */ o(
+        U,
+        {
+          fieldValue: e != null && e.id ? e.id : "",
+          options: [{ label: "Select Storage", value: "", icon: "storages" }, ...N],
+          onUpdate: y,
+          full: !0,
+          disabled: a
+        }
+      ) }),
+      /* @__PURE__ */ p("div", { className: s.path, children: [
+        /* @__PURE__ */ o(
+          M,
+          {
+            disabled: a,
+            fieldValue: i,
+            onUpdate: (t) => g(t),
+            placeholder: "folder-or-bucket/subfolder",
+            full: !0
+          }
+        ),
+        (e == null ? void 0 : e.type) && !a && e.type === "local" && /* @__PURE__ */ o(
+          "button",
+          {
+            className: s.fileManagerBtn,
+            "data-tooltip-id": "appTooltip",
+            "data-tooltip-content": "Open FileManager to Select Directory",
+            "data-tooltip-place": "top",
+            onClick: () => u(!0),
+            children: /* @__PURE__ */ o(j, { type: "folders", size: 16 })
+          }
+        )
+      ] })
+    ] }) }),
+    P && !a && /* @__PURE__ */ o(
+      b,
+      {
+        deviceId: k || "main",
+        title: "Select Path",
+        selected: i,
+        close: () => u(!1),
+        onSelect: (t) => g(t)
+      }
+    )
+  ] });
+};
+export {
+  $ as default
+};
+//# sourceMappingURL=StoragePicker.js.map

package/dist/components/common/form/StoragePicker/StoragePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoragePicker.js","sources":["../../../../../src/components/common/form/StoragePicker/StoragePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\r\nimport classes from './StoragePicker.module.scss';\r\nimport Select from '../Select/Select';\r\nimport { useGetStorages } from '../../../../services/storage';\r\nimport Input from '../Input/Input';\r\nimport FolderPicker from '../../FolderPicker/FolderPicker';\r\nimport Icon from '../../Icon/Icon';\r\n\r\ntype storageItem = { name: string; id: string; type: string };\r\n\r\ninterface StoragePickerProps {\r\n   storagePath?: string;\r\n   storageId?: string;\r\n   disabled?: boolean;\r\n   deviceId?: string;\r\n   onUpdate: (val: { storage: storageItem; path: string }) => void;\r\n}\r\n\r\nconst StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false, deviceId }: StoragePickerProps) => {\r\n   const [slectedStorage, setSelectedStorage] = useState<null | storageItem>();\r\n   const [showFolderPicker, setShowFolderPicker] = useState(false);\r\n   const [path, setPath] = useState(() => storagePath);\r\n\r\n   const { data: allStorageData } = useGetStorages();\r\n   const allUserStorages = (allStorageData?.result as storageItem[]) || [];\r\n   const allStorages = [...allUserStorages];\r\n\r\n   const storageOptions = useMemo(() => {\r\n      const storageOpts = allStorages.map(({ name, id, type }) => ({\r\n         label: name,\r\n         value: id.toString(),\r\n         image: <img src={`/providers/${type}.png`} />,\r\n      }));\r\n      return storageOpts;\r\n   }, [allStorages]);\r\n\r\n   const selectStorage = (storageID: string) => {\r\n      console.log('storageID :', storageID);\r\n      const theStorage = allStorages.find((s) => s.id == storageID);\r\n      if (theStorage || storageID === 'local') {\r\n         setSelectedStorage(theStorage);\r\n      }\r\n   };\r\n\r\n   useEffect(() => {\r\n      if (allStorages.length > 0 && storageId) {\r\n         const currentStorage = allStorages.find((s) => s.id === storageId);\r\n         setSelectedStorage(currentStorage);\r\n      }\r\n   }, [allStorageData]);\r\n\r\n   useEffect(() => {\r\n      if (slectedStorage) {\r\n         onUpdate({ storage: slectedStorage, path });\r\n      }\r\n   }, [slectedStorage, path]);\r\n\r\n   return (\r\n      <div className={classes.storagePicker}>\r\n         <div className={classes.storagePickerInput}>\r\n            <div>\r\n               <div className={classes.storage}>\r\n                  <Select\r\n                     fieldValue={slectedStorage?.id ? slectedStorage.id : ''}\r\n                     options={[{ label: 'Select Storage', value: '', icon: 'storages' }, ...storageOptions]}\r\n                     onUpdate={selectStorage}\r\n                     full={true}\r\n                     disabled={disabled}\r\n                  />\r\n               </div>\r\n               <div className={classes.path}>\r\n                  <Input\r\n                     disabled={disabled}\r\n                     fieldValue={path}\r\n                     onUpdate={(val) => setPath(val)}\r\n                     placeholder=\"folder-or-bucket/subfolder\"\r\n                     full={true}\r\n                  />\r\n                  {slectedStorage?.type && !disabled && slectedStorage.type === 'local' && (\r\n                     <button\r\n                        className={classes.fileManagerBtn}\r\n                        data-tooltip-id=\"appTooltip\"\r\n                        data-tooltip-content=\"Open FileManager to Select Directory\"\r\n                        data-tooltip-place=\"top\"\r\n                        onClick={() => setShowFolderPicker(true)}\r\n                     >\r\n                        <Icon type=\"folders\" size={16} />\r\n                     </button>\r\n                  )}\r\n               </div>\r\n            </div>\r\n         </div>\r\n         {showFolderPicker && !disabled && (\r\n            <FolderPicker\r\n               deviceId={deviceId || 'main'}\r\n               title=\"Select Path\"\r\n               selected={path}\r\n               close={() => setShowFolderPicker(false)}\r\n               onSelect={(newVal) => setPath(newVal)}\r\n            />\r\n         )}\r\n      </div>\r\n   );\r\n};\r\n\r\nexport default StoragePicker;\r\n"],"names":["StoragePicker","onUpdate","storagePath","storageId","disabled","deviceId","slectedStorage","setSelectedStorage","useState","showFolderPicker","setShowFolderPicker","path","setPath","allStorageData","useGetStorages","allStorages","storageOptions","useMemo","name","id","type","jsx","selectStorage","storageID","theStorage","s","useEffect","currentStorage","jsxs","classes","Select","Input","val","Icon","FolderPicker","newVal"],"mappings":"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"}

package/dist/components/common/form/StoragePicker/StoragePicker.module.scss

@@ -0,0 +1,114 @@
+.storagePicker {
+   width: 100%;
+
+   .storagePickerInput {
+      width: 100%;
+      padding: 8px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      box-sizing: border-box;
+      .storage {
+         width: 35%;
+         cursor: pointer;
+         img {
+            height: 18px;
+            width: auto;
+            margin-right: 5px;
+            vertical-align: top;
+         }
+         :global([class*='_dropdown_']) {
+            width: 100%;
+         }
+      }
+      .path {
+         width: calc(65% - 10px);
+         margin-left: 10px;
+         position: relative;
+         .fileManagerBtn {
+            position: absolute;
+            right: 1px;
+            top: 1px;
+            padding: 8px;
+            cursor: pointer;
+            color: var(--icon-color);
+            &:hover {
+               color: var(--primary-color);
+            }
+         }
+         div[class*='_inputField_'] input {
+            padding: 10px 12px;
+         }
+      }
+      & > div {
+         border-radius: 4px;
+         box-sizing: border-box;
+         font-size: 0.75rem;
+         display: flex;
+
+         button {
+            padding: 3px 8px;
+            background-color: var(--background-color);
+            color: var(--content-text-color);
+            font-size: 0.75rem;
+            border-radius: 4px;
+            margin-left: 5px;
+         }
+      }
+   }
+}
+
+.pickerContent {
+   .field {
+      margin-bottom: 20px;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+   }
+
+   label {
+      font-weight: 600;
+      margin-bottom: 8px;
+      font-size: 0.75rem;
+      width: 55%;
+   }
+   .pickerFooter {
+      margin-top: 20px;
+      justify-content: right;
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      button {
+         background-color: var(--line-color);
+         color: var(--content-text-color);
+         padding: 8px 16px;
+         border-radius: 4px;
+         font-size: 0.75rem;
+         transition: all 0.12s linear;
+         &:nth-child(2) {
+            background-color: var(--primary-color);
+            color: var(--primary-text-color);
+            &:hover {
+               background-color: var(--primary-hover-color);
+            }
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .storagePicker {
+      .storagePickerInput > div {
+         display: flex;
+         flex-direction: column;
+         .storage {
+            width: 100%;
+            margin-bottom: 10px;
+         }
+         .path {
+            width: 100%;
+            margin-left: 0px;
+         }
+      }
+   }
+}

package/dist/components/common/form/StoragePicker/StoragePicker.module.scss.js

@@ -0,0 +1,16 @@
+const e = "StoragePicker-module__storagePicker___atAT-", t = "StoragePicker-module__storagePickerInput___fKE2K", r = "StoragePicker-module__storage___NYY0F", a = "StoragePicker-module__path___clqI-", o = "StoragePicker-module__fileManagerBtn___K-IRB", _ = {
+  storagePicker: e,
+  storagePickerInput: t,
+  storage: r,
+  path: a,
+  fileManagerBtn: o
+};
+export {
+  _ as default,
+  o as fileManagerBtn,
+  a as path,
+  r as storage,
+  e as storagePicker,
+  t as storagePickerInput
+};
+//# sourceMappingURL=StoragePicker.module.scss.js.map

package/dist/components/common/form/StoragePicker/StoragePicker.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StoragePicker.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/common/form/TagsInput/TagsInput.d.ts

@@ -0,0 +1,13 @@
+type TagsInputProps = {
+    label?: string;
+    description?: string;
+    customClasses?: string;
+    icon?: string;
+    type?: string;
+    inline?: boolean;
+    fieldValue: string[];
+    onUpdate: (f: string[]) => void;
+};
+declare const TagsInput: ({ label, description, customClasses, fieldValue, onUpdate, icon, type, inline }: TagsInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TagsInput;
+//# sourceMappingURL=TagsInput.d.ts.map

package/dist/components/common/form/TagsInput/TagsInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/TagsInput/TagsInput.tsx"],"names":[],"mappings":"AAKA,KAAK,cAAc,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,iFAAmG,cAAc,4CAgEnI,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/common/form/TagsInput/TagsInput.js

@@ -0,0 +1,51 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { useState as d, useEffect as A } from "react";
+import n from "./TagsInput.module.scss.js";
+import N from "../../Icon/Icon.js";
+import D from "../FormField/FormField.js";
+const E = ({ label: u, description: h, customClasses: f = "", fieldValue: a = [], onUpdate: c, icon: v, type: i = "tag", inline: y }) => {
+  const [s, o] = d(() => Array.isArray(a) ? a : []), [l, g] = d("");
+  A(() => {
+    Array.isArray(a) && o(a);
+  }, [a]);
+  const m = (t) => {
+    if (t.length > 1) {
+      const e = [...s, t];
+      o(e), g(""), c(e);
+    }
+  }, T = (t) => {
+    const e = s.filter((w) => t !== w);
+    o(e), c(e);
+  }, x = (t) => {
+    if (t.target.value.includes(",")) {
+      const e = t.target.value.replace(",", "");
+      m(e);
+    } else
+      g(t.target.value);
+  }, $ = (t) => {
+    t.key === "Enter" && (t.preventDefault(), m(l));
+  };
+  return /* @__PURE__ */ r(D, { type: "tags", label: u, description: h, inline: y, classes: `${n.tagField} ${f}`, children: /* @__PURE__ */ p("div", { className: n.tagBox, children: [
+    s.map((t, e) => /* @__PURE__ */ p("div", { className: n.tag, children: [
+      /* @__PURE__ */ r(N, { size: 13, type: v || "tags" }),
+      " ",
+      t,
+      " ",
+      /* @__PURE__ */ r("i", { title: "Remove", onClick: () => T(t), children: "✖" })
+    ] }, t + e)),
+    /* @__PURE__ */ r("div", { className: n.textInput, children: /* @__PURE__ */ r(
+      "input",
+      {
+        type: "text",
+        value: l,
+        onChange: (t) => x(t),
+        onKeyDown: $,
+        placeholder: `${i}${s.length + 1}, ${i}${s.length + 2}`
+      }
+    ) })
+  ] }) });
+};
+export {
+  E as default
+};
+//# sourceMappingURL=TagsInput.js.map

package/dist/components/common/form/TagsInput/TagsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.js","sources":["../../../../../src/components/common/form/TagsInput/TagsInput.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react';\r\nimport classes from './TagsInput.module.scss';\r\nimport Icon from '../../Icon/Icon';\r\nimport FormField from '../FormField/FormField';\r\n\r\ntype TagsInputProps = {\r\n   label?: string;\r\n   description?: string;\r\n   customClasses?: string;\r\n   icon?: string;\r\n   type?: string;\r\n   inline?: boolean;\r\n   fieldValue: string[];\r\n   onUpdate: (f: string[]) => void;\r\n};\r\n\r\nconst TagsInput = ({ label, description, customClasses = '', fieldValue = [], onUpdate, icon, type = 'tag', inline }: TagsInputProps) => {\r\n   const [tags, setTags] = useState<string[]>(() => (Array.isArray(fieldValue) ? fieldValue : []));\r\n   const [newTag, setNewTag] = useState('');\r\n\r\n   useEffect(() => {\r\n      if (Array.isArray(fieldValue)) {\r\n         setTags(fieldValue);\r\n      }\r\n   }, [fieldValue]);\r\n\r\n   const addTag = (tag: string) => {\r\n      if (tag.length > 1) {\r\n         const updated = [...tags, tag];\r\n         setTags(updated);\r\n         setNewTag('');\r\n         onUpdate(updated);\r\n      }\r\n   };\r\n\r\n   const removeTag = (t: string) => {\r\n      const updatedTags = tags.filter((tag) => t !== tag);\r\n      setTags(updatedTags);\r\n      onUpdate(updatedTags);\r\n   };\r\n\r\n   const updateTag = (e: ChangeEvent<HTMLInputElement>) => {\r\n      if (e.target.value.includes(',')) {\r\n         const tagValue = e.target.value.replace(',', '');\r\n         addTag(tagValue);\r\n      } else {\r\n         setNewTag(e.target.value);\r\n      }\r\n   };\r\n\r\n   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Enter') {\r\n         e.preventDefault();\r\n         addTag(newTag);\r\n      }\r\n   };\r\n\r\n   return (\r\n      <FormField type={'tags'} label={label} description={description} inline={inline} classes={`${classes.tagField} ${customClasses}`}>\r\n         <div className={classes.tagBox}>\r\n            {tags.map((t, i) => (\r\n               <div className={classes.tag} key={t + i}>\r\n                  <Icon size={13} type={icon || 'tags'} /> {t}{' '}\r\n                  <i title=\"Remove\" onClick={() => removeTag(t)}>\r\n                     ✖\r\n                  </i>\r\n               </div>\r\n            ))}\r\n            <div className={classes.textInput}>\r\n               <input\r\n                  type=\"text\"\r\n                  value={newTag}\r\n                  onChange={(e) => updateTag(e)}\r\n                  onKeyDown={handleKeyDown}\r\n                  placeholder={`${type}${tags.length + 1}, ${type}${tags.length + 2}`}\r\n               />\r\n            </div>\r\n         </div>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default TagsInput;\r\n"],"names":["TagsInput","label","description","customClasses","fieldValue","onUpdate","icon","type","inline","tags","setTags","useState","newTag","setNewTag","useEffect","addTag","tag","updated","removeTag","updatedTags","updateTag","e","tagValue","handleKeyDown","FormField","classes","i","jsx","Icon"],"mappings":";;;;;AAgBA,MAAMA,IAAY,CAAC,EAAE,OAAAC,GAAO,aAAAC,GAAa,eAAAC,IAAgB,IAAI,YAAAC,IAAa,CAAA,GAAI,UAAAC,GAAU,MAAAC,GAAM,MAAAC,IAAO,OAAO,QAAAC,QAA6B;AACtI,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAmB,MAAO,MAAM,QAAQP,CAAU,IAAIA,IAAa,EAAG,GACxF,CAACQ,GAAQC,CAAS,IAAIF,EAAS,EAAE;AAEvC,EAAAG,EAAU,MAAM;AACb,IAAI,MAAM,QAAQV,CAAU,KACzBM,EAAQN,CAAU;AAAA,EAExB,GAAG,CAACA,CAAU,CAAC;AAEf,QAAMW,IAAS,CAACC,MAAgB;AAC7B,QAAIA,EAAI,SAAS,GAAG;AACjB,YAAMC,IAAU,CAAC,GAAGR,GAAMO,CAAG;AAC7B,MAAAN,EAAQO,CAAO,GACfJ,EAAU,EAAE,GACZR,EAASY,CAAO;AAAA,IACnB;AAAA,EACH,GAEMC,IAAY,CAAC,MAAc;AAC9B,UAAMC,IAAcV,EAAK,OAAO,CAACO,MAAQ,MAAMA,CAAG;AAClD,IAAAN,EAAQS,CAAW,GACnBd,EAASc,CAAW;AAAA,EACvB,GAEMC,IAAY,CAACC,MAAqC;AACrD,QAAIA,EAAE,OAAO,MAAM,SAAS,GAAG,GAAG;AAC/B,YAAMC,IAAWD,EAAE,OAAO,MAAM,QAAQ,KAAK,EAAE;AAC/C,MAAAN,EAAOO,CAAQ;AAAA,IAClB;AACG,MAAAT,EAAUQ,EAAE,OAAO,KAAK;AAAA,EAE9B,GAEME,IAAgB,CAACF,MAAuC;AAC3D,IAAIA,EAAE,QAAQ,YACXA,EAAE,eAAA,GACFN,EAAOH,CAAM;AAAA,EAEnB;AAEA,2BACIY,GAAA,EAAU,MAAM,QAAQ,OAAAvB,GAAc,aAAAC,GAA0B,QAAAM,GAAgB,SAAS,GAAGiB,EAAQ,QAAQ,IAAItB,CAAa,IAC3H,4BAAC,OAAA,EAAI,WAAWsB,EAAQ,QACpB,UAAA;AAAA,IAAAhB,EAAK,IAAI,CAAC,GAAGiB,wBACV,OAAA,EAAI,WAAWD,EAAQ,KACrB,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAA,EAAK,MAAM,IAAI,MAAMtB,KAAQ,QAAQ;AAAA,MAAE;AAAA,MAAE;AAAA,MAAG;AAAA,MAC7C,gBAAAqB,EAAC,OAAE,OAAM,UAAS,SAAS,MAAMT,EAAU,CAAC,GAAG,UAAA,IAAA,CAE/C;AAAA,IAAA,KAJ+B,IAAIQ,CAKtC,CACF;AAAA,IACD,gBAAAC,EAAC,OAAA,EAAI,WAAWF,EAAQ,WACrB,UAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,MAAK;AAAA,QACL,OAAOf;AAAA,QACP,UAAU,CAACS,MAAMD,EAAUC,CAAC;AAAA,QAC5B,WAAWE;AAAA,QACX,aAAa,GAAGhB,CAAI,GAAGE,EAAK,SAAS,CAAC,KAAKF,CAAI,GAAGE,EAAK,SAAS,CAAC;AAAA,MAAA;AAAA,IAAA,EACpE,CACH;AAAA,EAAA,EAAA,CACH,EAAA,CACH;AAEN;"}

package/dist/components/common/form/TagsInput/TagsInput.module.scss

@@ -0,0 +1,54 @@
+.tagField {
+   width: 100%;
+
+   .tagBox {
+      width: 100%;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      padding: 7px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      box-sizing: border-box;
+   }
+
+   .tag {
+      background: var(--background-color);
+      border: 1px solid var(--line-color);
+      font-size: 0.75rem;
+      padding: 0px 10px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+      span {
+         position: relative;
+         top: 2px;
+         opacity: 0.5;
+      }
+      i {
+         font-style: normal;
+         padding: 2px;
+         cursor: pointer;
+         opacity: 0.5;
+         &:hover {
+            opacity: 0.8;
+         }
+      }
+   }
+
+   .textInput {
+      input {
+         border: none;
+         font-size: 0.75rem;
+         font-family: inherit;
+         padding: 5px;
+         background-color: var(--content-background-color);
+         &:focus {
+            outline: none;
+            border: none;
+         }
+      }
+   }
+}

package/dist/components/common/form/TagsInput/TagsInput.module.scss.js

@@ -0,0 +1,14 @@
+const t = "TagsInput-module__tagField___oM6pv", _ = "TagsInput-module__tagBox___Rcrc2", a = "TagsInput-module__tag___WK-3P", o = "TagsInput-module__textInput___9vEMq", e = {
+  tagField: t,
+  tagBox: _,
+  tag: a,
+  textInput: o
+};
+export {
+  e as default,
+  a as tag,
+  _ as tagBox,
+  t as tagField,
+  o as textInput
+};
+//# sourceMappingURL=TagsInput.module.scss.js.map

package/dist/components/common/form/TagsInput/TagsInput.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}