@plutonhq/core-frontend 0.0.1

package/dist/components/Storage/StorageItem/StorageItem.js

@@ -0,0 +1,149 @@
+import { jsxs as t, jsx as e, Fragment as l } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { toast as C } from "react-toastify";
+import i from "../../common/Icon/Icon.js";
+import o from "./StorageItem.module.scss.js";
+import { formatBytes as $ } from "../../../utils/helpers.js";
+import b from "../EditStorage/EditStorage.js";
+import P from "../../common/Modal/Modal.js";
+import { useDeleteStorage as x, useVerifyStorage as A } from "../../../services/storage.js";
+import B from "../../common/ActionModal/ActionModal.js";
+const H = ({ storage: n, layout: N }) => {
+  var M;
+  const [m, a] = d(!1), [h, g] = d(!1), [f, p] = d(!1), [u, S] = d(!1), { id: y, name: z, type: k, plans: w = [], usedSize: E = 200, storageTypeName: R } = n, v = x(), s = A(), c = y === "local", V = () => {
+    v.mutate(n.id, {
+      onError: (r) => {
+        console.log("error :", r == null ? void 0 : r.message), C.error(r.message || "Error Removing Storage!");
+      },
+      onSuccess: (r) => {
+        console.log("Success :", r), C.success("Removed Storage Successfully!", { autoClose: 5e3 }), close();
+      }
+    });
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `${o.storage} ${N === "grid" ? o.storageGrid : o.storageList} ${h || f || u ? o.storageEditing : ""}`,
+      children: [
+        /* @__PURE__ */ t("div", { className: o.leftContent, children: [
+          /* @__PURE__ */ e("div", { className: o.storageType, children: /* @__PURE__ */ e("img", { src: `providers/${k}.png` }) }),
+          /* @__PURE__ */ t("div", { className: o.content, children: [
+            /* @__PURE__ */ t("div", { className: o.title, onClick: () => !c && g(!0), children: [
+              /* @__PURE__ */ e("h4", { children: z }),
+              " ",
+              c && /* @__PURE__ */ e(i, { type: "lock", size: 14 })
+            ] }),
+            /* @__PURE__ */ e("div", { children: R })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: o.rightContent, children: [
+          /* @__PURE__ */ t("div", { className: o.info, children: [
+            /* @__PURE__ */ e(i, { type: "backup", size: 14 }),
+            " ",
+            /* @__PURE__ */ t("i", { children: [
+              w.length,
+              " Plans"
+            ] })
+          ] }),
+          /* @__PURE__ */ t("div", { className: o.info, children: [
+            /* @__PURE__ */ e(i, { type: "disk", size: 14 }),
+            " ",
+            /* @__PURE__ */ e("i", { children: $(E) })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: `${o.moreBtn} ${m ? o.moreBtnActive : ""}`,
+              onClick: () => a(!m),
+              disabled: c,
+              children: /* @__PURE__ */ e(i, { type: "dots-vertical", size: 14 })
+            }
+          )
+        ] }),
+        m && /* @__PURE__ */ e("div", { className: o.settings, children: !c && /* @__PURE__ */ t(l, { children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => {
+                g(!0), a(!1);
+              },
+              children: [
+                /* @__PURE__ */ e(i, { type: "edit-settings", size: 14 }),
+                " Edit"
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => {
+                S(!0), a(!1), s.mutate(n.id);
+              },
+              children: [
+                /* @__PURE__ */ e(i, { type: "verify", size: 14 }),
+                " Verify"
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => {
+                p(!0), a(!1);
+              },
+              children: [
+                /* @__PURE__ */ e(i, { type: "trash", size: 14 }),
+                " Remove"
+              ]
+            }
+          )
+        ] }) }),
+        h && /* @__PURE__ */ e(b, { close: () => g(!1), storage: n }),
+        u && /* @__PURE__ */ e(
+          P,
+          {
+            title: `Verifying Storage "${n.name}"`,
+            closeModal: () => !s.isPending && S(!1),
+            width: "600px",
+            children: /* @__PURE__ */ t("div", { className: o.verifyModalContent, children: [
+              s.isPending && /* @__PURE__ */ t(l, { children: [
+                /* @__PURE__ */ e(i, { type: "loading", size: 16 }),
+                " Verifying Remote Storage Connection..."
+              ] }),
+              s.isSuccess && /* @__PURE__ */ t(l, { children: [
+                /* @__PURE__ */ e(i, { type: "check", color: "teal", size: 14 }),
+                " Verification Successful! This Remote Storage Connection is Working Perfectly!"
+              ] }),
+              s.isError && /* @__PURE__ */ t(l, { children: [
+                /* @__PURE__ */ e(i, { type: "error", color: "indianred", size: 16 }),
+                " Error Verifying Remote Storage Connection!",
+                " ",
+                ((M = s.error) == null ? void 0 : M.toString()) || ""
+              ] })
+            ] })
+          }
+        ),
+        f && /* @__PURE__ */ e(
+          B,
+          {
+            title: "Remove Storage",
+            message: /* @__PURE__ */ e(l, { children: "Are you sure you want to delete this Storage?" }),
+            closeModal: () => p(!1),
+            primaryAction: {
+              title: "Yes, Remove Storage",
+              type: "danger",
+              icon: "trash",
+              isPending: v.isPending,
+              action: () => V()
+            }
+          }
+        )
+      ]
+    },
+    y
+  );
+};
+export {
+  H as default
+};
+//# sourceMappingURL=StorageItem.js.map

package/dist/components/Storage/StorageItem/StorageItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageItem.js","sources":["../../../../src/components/Storage/StorageItem/StorageItem.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { toast } from 'react-toastify';\r\nimport Icon from '../../common/Icon/Icon';\r\nimport classes from './StorageItem.module.scss';\r\nimport { Storage } from '../../../@types/storages';\r\nimport { formatBytes } from '../../../utils/helpers';\r\nimport EditStorage from '../EditStorage/EditStorage';\r\nimport Modal from '../../common/Modal/Modal';\r\nimport { useDeleteStorage, useVerifyStorage } from '../../../services/storage';\r\nimport ActionModal from '../../common/ActionModal/ActionModal';\r\n\r\ninterface StorageItemProps {\r\n   storage: Storage;\r\n   layout: 'list' | 'grid';\r\n}\r\n\r\nconst StorageItem = ({ storage, layout }: StorageItemProps) => {\r\n   const [showSettings, setShowSettings] = useState(false);\r\n   const [showEditModal, setShowEditModal] = useState(false);\r\n   const [showDeleteModal, setShowDeleteModal] = useState(false);\r\n   const [showVerifyModal, setShowVerifyModal] = useState(false);\r\n   const { id, name, type, plans = [], usedSize = 200, storageTypeName } = storage;\r\n   const deleteStorageMutation = useDeleteStorage();\r\n   const verifyStorageMutation = useVerifyStorage();\r\n   const isLocalStorage = id === 'local';\r\n\r\n   const removeStorage = () => {\r\n      deleteStorageMutation.mutate(storage.id, {\r\n         onError: (error: Error) => {\r\n            console.log('error :', error?.message);\r\n            toast.error(error.message || `Error Removing Storage!`);\r\n         },\r\n         onSuccess: (data: any) => {\r\n            console.log('Success :', data);\r\n            toast.success(`Removed Storage Successfully!`, { autoClose: 5000 });\r\n            close();\r\n         },\r\n      });\r\n   };\r\n\r\n   return (\r\n      <div\r\n         key={id}\r\n         className={`${classes.storage} ${layout === 'grid' ? classes.storageGrid : classes.storageList} ${showEditModal || showDeleteModal || showVerifyModal ? classes.storageEditing : ''}`}\r\n      >\r\n         <div className={classes.leftContent}>\r\n            <div className={classes.storageType}>\r\n               <img src={`providers/${type}.png`} />\r\n            </div>\r\n\r\n            <div className={classes.content}>\r\n               <div className={classes.title} onClick={() => !isLocalStorage && setShowEditModal(true)}>\r\n                  <h4>{name}</h4> {isLocalStorage && <Icon type=\"lock\" size={14} />}\r\n               </div>\r\n               <div>{storageTypeName}</div>\r\n            </div>\r\n         </div>\r\n         <div className={classes.rightContent}>\r\n            <div className={classes.info}>\r\n               <Icon type=\"backup\" size={14} /> <i>{plans.length} Plans</i>\r\n            </div>\r\n            <div className={classes.info}>\r\n               <Icon type=\"disk\" size={14} /> <i>{formatBytes(usedSize)}</i>\r\n            </div>\r\n            <button\r\n               className={`${classes.moreBtn} ${showSettings ? classes.moreBtnActive : ''}`}\r\n               onClick={() => setShowSettings(!showSettings)}\r\n               disabled={isLocalStorage}\r\n            >\r\n               <Icon type=\"dots-vertical\" size={14} />\r\n            </button>\r\n         </div>\r\n         {showSettings && (\r\n            <div className={classes.settings}>\r\n               {!isLocalStorage && (\r\n                  <>\r\n                     <button\r\n                        onClick={() => {\r\n                           setShowEditModal(true);\r\n                           setShowSettings(false);\r\n                        }}\r\n                     >\r\n                        <Icon type=\"edit-settings\" size={14} /> Edit\r\n                     </button>\r\n                     <button\r\n                        onClick={() => {\r\n                           setShowVerifyModal(true);\r\n                           setShowSettings(false);\r\n                           verifyStorageMutation.mutate(storage.id);\r\n                        }}\r\n                     >\r\n                        <Icon type=\"verify\" size={14} /> Verify\r\n                     </button>\r\n                     <button\r\n                        onClick={() => {\r\n                           setShowDeleteModal(true);\r\n                           setShowSettings(false);\r\n                        }}\r\n                     >\r\n                        <Icon type=\"trash\" size={14} /> Remove\r\n                     </button>\r\n                  </>\r\n               )}\r\n            </div>\r\n         )}\r\n         {showEditModal && <EditStorage close={() => setShowEditModal(false)} storage={storage} />}\r\n         {showVerifyModal && (\r\n            <Modal\r\n               title={`Verifying Storage \"${storage.name}\"`}\r\n               closeModal={() => !verifyStorageMutation.isPending && setShowVerifyModal(false)}\r\n               width=\"600px\"\r\n            >\r\n               <div className={classes.verifyModalContent}>\r\n                  {verifyStorageMutation.isPending && (\r\n                     <>\r\n                        <Icon type=\"loading\" size={16} /> Verifying Remote Storage Connection...\r\n                     </>\r\n                  )}\r\n                  {verifyStorageMutation.isSuccess && (\r\n                     <>\r\n                        <Icon type=\"check\" color=\"teal\" size={14} /> Verification Successful! This Remote Storage Connection is Working Perfectly!\r\n                     </>\r\n                  )}\r\n                  {verifyStorageMutation.isError && (\r\n                     <>\r\n                        <Icon type=\"error\" color=\"indianred\" size={16} /> Error Verifying Remote Storage Connection!{' '}\r\n                        {verifyStorageMutation.error?.toString() || ''}\r\n                     </>\r\n                  )}\r\n               </div>\r\n            </Modal>\r\n         )}\r\n         {showDeleteModal && (\r\n            <ActionModal\r\n               title={`Remove Storage`}\r\n               message={<>{`Are you sure you want to delete this Storage?`}</>}\r\n               closeModal={() => setShowDeleteModal(false)}\r\n               primaryAction={{\r\n                  title: `Yes, Remove Storage`,\r\n                  type: 'danger',\r\n                  icon: 'trash',\r\n                  isPending: deleteStorageMutation.isPending,\r\n                  action: () => removeStorage(),\r\n               }}\r\n            />\r\n         )}\r\n      </div>\r\n   );\r\n};\r\nexport default StorageItem;\r\n"],"names":["StorageItem","storage","layout","showSettings","setShowSettings","useState","showEditModal","setShowEditModal","showDeleteModal","setShowDeleteModal","showVerifyModal","setShowVerifyModal","id","name","type","plans","usedSize","storageTypeName","deleteStorageMutation","useDeleteStorage","verifyStorageMutation","useVerifyStorage","isLocalStorage","removeStorage","error","toast","data","jsxs","classes","jsx","Icon","formatBytes","Fragment","EditStorage","Modal","_a","ActionModal"],"mappings":"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"}

package/dist/components/Storage/StorageItem/StorageItem.module.scss

@@ -0,0 +1,231 @@
+.storage {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   padding: 10px;
+   margin-bottom: 20px;
+   gap: 10px;
+   border-radius: 7px;
+   background-color: var(--content-background-color);
+   color: var(--content-text-color-light);
+   box-shadow: 0 0 15px var(--content-shadow-color);
+   position: relative;
+   transition: all 0.2s linear;
+   &:hover {
+      box-shadow: 0 0 20px var(--content-shadow-color);
+   }
+   &.storageEditing {
+      box-shadow: 0 0 2px var(--primary-color);
+   }
+}
+
+.leftContent {
+   flex-basis: 40%;
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+}
+.rightContent {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   flex-basis: 60%;
+   justify-content: right;
+   gap: 10px;
+}
+
+.storageType {
+   display: flex;
+   align-items: center;
+   margin-right: 10px;
+   margin-left: 5px;
+   width: 28px;
+   height: 28px;
+   background: var(--light-grey);
+   padding: 5px;
+   border-radius: 5px;
+   justify-content: center;
+   img {
+      max-width: 24px;
+   }
+}
+
+.content {
+   display: flex;
+   flex-direction: column;
+   cursor: pointer;
+   color: var(--content-text-color-light);
+   &:hover {
+      color: inherit;
+      h4 {
+         color: var(--primary-color);
+      }
+   }
+}
+
+.title {
+   display: flex;
+   flex-direction: row;
+   h4 {
+      margin: 0;
+      margin-bottom: 2px;
+      color: var(--content-text-color);
+      display: flex;
+      align-items: center;
+   }
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-left: 5px;
+      opacity: 0.5;
+   }
+}
+
+.info {
+   margin-right: 30px;
+   display: flex;
+   align-items: center;
+   :global(.icon) {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+      opacity: 0.5;
+   }
+   i {
+      font-style: normal;
+   }
+}
+
+.moreBtn {
+   color: var(--content-text-color-light);
+   padding: 3px 6px;
+   border-radius: 4px;
+   &.moreBtnActive {
+      background-color: var(--primary-color-light);
+      color: var(--primary-color);
+   }
+}
+
+.settings {
+   position: absolute;
+   z-index: 99;
+   top: 45px;
+   right: 15px;
+   display: flex;
+   flex-direction: column;
+   justify-content: left;
+   width: 120px;
+   text-align: left;
+   align-items: center;
+   background: var(--content-background-color);
+   border: 1px solid var(--line-color);
+   border-radius: 6px;
+   button {
+      padding: 6px 10px;
+      width: 100%;
+      text-align: left;
+      color: var(--content-text-color-light);
+      &:hover {
+         background-color: var(--primary-color-light);
+         color: var(--primary-color);
+      }
+   }
+}
+
+.verifyModalContent {
+   position: relative;
+   padding-bottom: 20px;
+}
+
+.removeModalContent {
+   position: relative;
+   .deleteLoader {
+      position: absolute;
+      z-index: 9;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      background-color: var(--content-background-color);
+      opacity: 0.7;
+      cursor: default;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+   }
+   .removeModalActions {
+      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: 6px 12px;
+         border-radius: 4px;
+         transition: all 0.12s linear;
+         &:nth-child(2) {
+            background-color: var(--error-button-color);
+            color: var(--error-active-text);
+         }
+         &:hover {
+            filter: brightness(105%);
+         }
+      }
+   }
+}
+
+.storageGrid {
+   width: 100%;
+   margin: 0;
+   flex-direction: column;
+   align-items: baseline;
+   padding: 0;
+   padding-bottom: 12px;
+   .leftContent {
+      padding: 12px;
+      width: 100%;
+      box-sizing: border-box;
+   }
+   .rightContent {
+      width: 100%;
+      flex-basis: unset;
+      justify-content: flex-start;
+      padding: 6px 10px;
+      box-sizing: border-box;
+      background: var(--primary-color-lighter);
+      .moreBtn {
+         margin-left: auto;
+      }
+   }
+   .settings {
+      bottom: 10px;
+      top: auto;
+      right: 40px;
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .storage {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+   }
+
+   .rightContent {
+      width: 100%;
+      justify-content: flex-start;
+      border-top: 1px solid var(--line-color);
+      padding-top: 10px;
+      margin-top: 10px;
+      gap: 0;
+      button.moreBtn {
+         margin-left: auto;
+      }
+   }
+
+   .settings {
+      right: 35px;
+   }
+}

package/dist/components/Storage/StorageItem/StorageItem.module.scss.js

@@ -0,0 +1,32 @@
+const t = "StorageItem-module__storage___86hwJ", e = "StorageItem-module__storageEditing___buFWB", o = "StorageItem-module__leftContent___HhG4p", _ = "StorageItem-module__rightContent___8-52g", n = "StorageItem-module__storageType___lGMZg", r = "StorageItem-module__content___GHza-", g = "StorageItem-module__title___-gkwR", s = "StorageItem-module__info___-1zlf", a = "StorageItem-module__moreBtn___fL2Js", m = "StorageItem-module__moreBtnActive___YUB8a", i = "StorageItem-module__settings___GcRtP", l = "StorageItem-module__verifyModalContent___-64Ti", d = "StorageItem-module__storageGrid___28nrV", c = {
+  storage: t,
+  storageEditing: e,
+  leftContent: o,
+  rightContent: _,
+  storageType: n,
+  content: r,
+  title: g,
+  info: s,
+  moreBtn: a,
+  moreBtnActive: m,
+  settings: i,
+  verifyModalContent: l,
+  storageGrid: d
+};
+export {
+  r as content,
+  c as default,
+  s as info,
+  o as leftContent,
+  a as moreBtn,
+  m as moreBtnActive,
+  _ as rightContent,
+  i as settings,
+  t as storage,
+  e as storageEditing,
+  d as storageGrid,
+  n as storageType,
+  g as title,
+  l as verifyModalContent
+};
+//# sourceMappingURL=StorageItem.module.scss.js.map

package/dist/components/Storage/StorageItem/StorageItem.module.scss.js.map

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

package/dist/components/Storage/StorageSettings/StorageSettings.d.ts

@@ -0,0 +1,10 @@
+import { storageOptionField } from '../../../@types/storages';
+type StorageSettingsProps = {
+    fields: storageOptionField[];
+    settings: Record<string, string | number | boolean>;
+    errors?: Record<string, string>;
+    onUpdate: (newSettings: StorageSettingsProps['settings']) => void;
+};
+declare const StorageSettings: ({ fields, onUpdate, settings, errors }: StorageSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default StorageSettings;
+//# sourceMappingURL=StorageSettings.d.ts.map

package/dist/components/Storage/StorageSettings/StorageSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/Storage/StorageSettings/StorageSettings.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAO9D,KAAK,oBAAoB,GAAG;IACzB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,WAAW,EAAE,oBAAoB,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,wCAA6C,oBAAoB,4CA2JzF,CAAC;AACF,eAAe,eAAe,CAAC"}

package/dist/components/Storage/StorageSettings/StorageSettings.js

@@ -0,0 +1,139 @@
+import { jsxs as s, Fragment as b, jsx as u } from "react/jsx-runtime";
+import { useState as T, useEffect as N } from "react";
+import h from "../../common/form/Input/Input.js";
+import V from "../../common/form/Tristate/Tristate.js";
+import C from "../../common/form/SizePicker/SizePicker.js";
+import S from "../../common/form/Toggle/Toggle.js";
+import t from "./StorageSettings.module.scss.js";
+import x from "../../common/form/NumberInput/NumberInput.js";
+import f from "../../common/form/Select/Select.js";
+import { shouldDisplayStorageField as w } from "../../../utils/helpers.js";
+import I from "../../common/form/PasswordField/PasswordField.js";
+const L = ({ fields: i, onUpdate: o, settings: l, errors: v = {} }) => {
+  const [c, p] = T({});
+  return N(() => {
+    const e = {};
+    i.forEach((r) => {
+      r.allowCustom && r.fieldType === "select" && (e[r.value] = l[r.value] === "custom" || c[r.value] || !1);
+    }), p(e);
+  }, [i]), /* @__PURE__ */ s(b, { children: [
+    i.map((e) => {
+      if (!w(e, l, i))
+        return null;
+      const r = e.description + `
+` + (e.default ? `Default: ${e.default}` : ""), n = e.label + (e.required ? "*" : "");
+      if (e.fieldType === "bool")
+        return /* @__PURE__ */ u("div", { className: t.field, children: /* @__PURE__ */ u(
+          S,
+          {
+            label: n,
+            inline: !0,
+            hint: r,
+            fieldValue: l[e.value] || !1,
+            onUpdate: (a) => o({ ...l, [e.value]: a }),
+            error: v[e.value] || ""
+          }
+        ) }, e.value);
+      if (e.authFieldType && ["input", "string"].includes(e.fieldType))
+        return /* @__PURE__ */ u("div", { className: t.field, children: /* @__PURE__ */ u(
+          I,
+          {
+            label: n,
+            inline: !0,
+            hint: r,
+            fieldValue: l[e.value] || "",
+            onUpdate: (a) => o({ ...l, [e.value]: a }),
+            error: v[e.value] || ""
+          }
+        ) }, e.value);
+      if (["input", "string", "time", "duration", "encoding", "bits", "spaceseplist", "commaseplist"].includes(e.fieldType))
+        return /* @__PURE__ */ u("div", { className: t.field, children: /* @__PURE__ */ u(
+          h,
+          {
+            label: n,
+            inline: !0,
+            hint: r,
+            fieldValue: l[e.value] || "",
+            onUpdate: (a) => o({ ...l, [e.value]: a }),
+            error: v[e.value] || ""
+          }
+        ) }, e.value);
+      if (e.fieldType === "int")
+        return /* @__PURE__ */ u("div", { className: t.field, children: /* @__PURE__ */ u(
+          x,
+          {
+            label: n,
+            inline: !0,
+            fieldValue: l[e.value] || "",
+            hint: r,
+            onUpdate: (a) => o({ ...l, [e.value]: a }),
+            error: v[e.value] || ""
+          }
+        ) }, e.value);
+      if (e.fieldType === "tristate")
+        return /* @__PURE__ */ u("div", { className: t.field, children: /* @__PURE__ */ u(
+          V,
+          {
+            label: n,
+            inline: !0,
+            fieldValue: l[e.value] || "",
+            options: [
+              { label: "On", value: "true" },
+              { label: "Off", value: "false" },
+              { label: "Unset", value: "unset" }
+            ],
+            hint: r,
+            onUpdate: (a) => o({ ...l, [e.value]: a })
+          }
+        ) }, e.value);
+      if (e.fieldType === "sizesuffix")
+        return /* @__PURE__ */ u("div", { className: t.field, children: /* @__PURE__ */ u(
+          C,
+          {
+            label: n,
+            inline: !0,
+            fieldValue: l[e.value] || "",
+            hint: r,
+            onUpdate: (a) => o({ ...l, [e.value]: a })
+          }
+        ) }, e.value);
+      if (e.fieldType === "select" && e.options) {
+        const a = e.options.find((m) => m.value === "custom");
+        return /* @__PURE__ */ u(b, { children: /* @__PURE__ */ s("div", { className: t.field, children: [
+          /* @__PURE__ */ u(
+            f,
+            {
+              label: n,
+              options: e.options,
+              fieldValue: c[e.value] && (a != null && a.value) ? a == null ? void 0 : a.value : l[e.value] || "",
+              hint: r,
+              onUpdate: (m) => {
+                e.allowCustom && p((y) => ({
+                  ...y,
+                  [e.value]: m === "custom"
+                })), o({ ...l, [e.value]: m });
+              },
+              error: v[e.value] || ""
+            }
+          ),
+          e.allowCustom && c[e.value] && /* @__PURE__ */ u("div", { className: t.field, style: { margin: "20px 0" }, children: /* @__PURE__ */ u(
+            h,
+            {
+              label: (a == null ? void 0 : a.label) || "Insert Custom",
+              inline: !0,
+              fieldValue: l[e.value] || "",
+              onUpdate: (m) => o({ ...l, [e.value]: m }),
+              error: v[e.value] || ""
+            }
+          ) }, e.value)
+        ] }, e.value) });
+      }
+      return null;
+    }),
+    " "
+  ] });
+};
+export {
+  L as default
+};
+//# sourceMappingURL=StorageSettings.js.map

package/dist/components/Storage/StorageSettings/StorageSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageSettings.js","sources":["../../../../src/components/Storage/StorageSettings/StorageSettings.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport Input from '../../common/form/Input/Input';\r\nimport Tristate from '../../common/form/Tristate/Tristate';\r\nimport SizePicker from '../../common/form/SizePicker/SizePicker';\r\nimport Toggle from '../../common/form/Toggle/Toggle';\r\nimport { storageOptionField } from '../../../@types/storages';\r\nimport classes from './StorageSettings.module.scss';\r\nimport NumberInput from '../../common/form/NumberInput/NumberInput';\r\nimport Select from '../../common/form/Select/Select';\r\nimport { shouldDisplayStorageField } from '../../../utils/helpers';\r\nimport PasswordField from '../../common/form/PasswordField/PasswordField';\r\n\r\ntype StorageSettingsProps = {\r\n   fields: storageOptionField[];\r\n   settings: Record<string, string | number | boolean>;\r\n   errors?: Record<string, string>;\r\n   onUpdate: (newSettings: StorageSettingsProps['settings']) => void;\r\n};\r\n\r\nconst StorageSettings = ({ fields, onUpdate, settings, errors = {} }: StorageSettingsProps) => {\r\n   const [customFieldsActive, setCustomFieldsActive] = useState<Record<string, boolean>>({});\r\n\r\n   // Initialize the custom fields state when settings change\r\n   useEffect(() => {\r\n      const initialCustomFields: Record<string, boolean> = {};\r\n\r\n      fields.forEach((field) => {\r\n         if (field.allowCustom && field.fieldType === 'select') {\r\n            // Check if this field previously had custom selected\r\n            initialCustomFields[field.value] = settings[field.value] === 'custom' || customFieldsActive[field.value] || false;\r\n         }\r\n      });\r\n\r\n      setCustomFieldsActive(initialCustomFields);\r\n   }, [fields]);\r\n   return (\r\n      <>\r\n         {fields.map((field) => {\r\n            // Skip rendering if conditions aren't met\r\n            if (!shouldDisplayStorageField(field, settings, fields)) {\r\n               return null;\r\n            }\r\n            const hint = field.description + '\\n' + (field.default ? `Default: ${field.default}` : '');\r\n            const fieldLabel = field.label + (field.required ? '*' : '');\r\n            if (field.fieldType === 'bool') {\r\n               return (\r\n                  <div key={field.value} className={classes.field}>\r\n                     <Toggle\r\n                        label={fieldLabel}\r\n                        inline={true}\r\n                        hint={hint}\r\n                        fieldValue={(settings[field.value] as boolean) || false}\r\n                        onUpdate={(newVal: boolean) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                        error={errors[field.value] || ''}\r\n                     />\r\n                  </div>\r\n               );\r\n            }\r\n            if (field.authFieldType && ['input', 'string'].includes(field.fieldType)) {\r\n               return (\r\n                  <div key={field.value} className={classes.field}>\r\n                     <PasswordField\r\n                        label={fieldLabel}\r\n                        inline={true}\r\n                        hint={hint}\r\n                        fieldValue={(settings[field.value] as string) || ''}\r\n                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                        error={errors[field.value] || ''}\r\n                     />\r\n                  </div>\r\n               );\r\n            }\r\n            if (['input', 'string', 'time', 'duration', 'encoding', 'bits', 'spaceseplist', 'commaseplist'].includes(field.fieldType)) {\r\n               return (\r\n                  <div key={field.value} className={classes.field}>\r\n                     <Input\r\n                        label={fieldLabel}\r\n                        inline={true}\r\n                        hint={hint}\r\n                        fieldValue={(settings[field.value] as string) || ''}\r\n                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                        error={errors[field.value] || ''}\r\n                     />\r\n                  </div>\r\n               );\r\n            }\r\n\r\n            if (field.fieldType === 'int') {\r\n               return (\r\n                  <div key={field.value} className={classes.field}>\r\n                     <NumberInput\r\n                        label={fieldLabel}\r\n                        inline={true}\r\n                        fieldValue={(settings[field.value] as number) || ''}\r\n                        hint={hint}\r\n                        onUpdate={(newVal) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                        error={errors[field.value] || ''}\r\n                     />\r\n                  </div>\r\n               );\r\n            }\r\n            if (field.fieldType === 'tristate') {\r\n               return (\r\n                  <div key={field.value} className={classes.field}>\r\n                     <Tristate\r\n                        label={fieldLabel}\r\n                        inline={true}\r\n                        fieldValue={(settings[field.value] as string) || ''}\r\n                        options={[\r\n                           { label: 'On', value: 'true' },\r\n                           { label: 'Off', value: 'false' },\r\n                           { label: 'Unset', value: 'unset' },\r\n                        ]}\r\n                        hint={hint}\r\n                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                     />\r\n                  </div>\r\n               );\r\n            }\r\n            if (field.fieldType === 'sizesuffix') {\r\n               return (\r\n                  <div key={field.value} className={classes.field}>\r\n                     <SizePicker\r\n                        label={fieldLabel}\r\n                        inline={true}\r\n                        fieldValue={(settings[field.value] as string) || ''}\r\n                        hint={hint}\r\n                        onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                     />\r\n                  </div>\r\n               );\r\n            }\r\n            if (field.fieldType === 'select' && field.options) {\r\n               const customField = field.options.find((o) => o.value === 'custom');\r\n               return (\r\n                  <>\r\n                     <div key={field.value} className={classes.field}>\r\n                        <Select\r\n                           label={fieldLabel}\r\n                           options={field.options}\r\n                           fieldValue={\r\n                              customFieldsActive[field.value] && customField?.value ? customField?.value : (settings[field.value] as string) || ''\r\n                           }\r\n                           hint={hint}\r\n                           onUpdate={(newVal: string) => {\r\n                              if (field.allowCustom) {\r\n                                 setCustomFieldsActive((prev) => ({\r\n                                    ...prev,\r\n                                    [field.value]: newVal === 'custom',\r\n                                 }));\r\n                              }\r\n                              onUpdate({ ...settings, [field.value]: newVal });\r\n                           }}\r\n                           error={errors[field.value] || ''}\r\n                        />\r\n                        {field.allowCustom && customFieldsActive[field.value] && (\r\n                           <div key={field.value} className={classes.field} style={{ margin: '20px 0' }}>\r\n                              <Input\r\n                                 label={customField?.label || 'Insert Custom'}\r\n                                 inline={true}\r\n                                 fieldValue={(settings[field.value] as string) || ''}\r\n                                 onUpdate={(newVal: string) => onUpdate({ ...settings, [field.value]: newVal })}\r\n                                 error={errors[field.value] || ''}\r\n                              />\r\n                           </div>\r\n                        )}\r\n                     </div>\r\n                  </>\r\n               );\r\n            }\r\n            return null;\r\n         })}{' '}\r\n      </>\r\n   );\r\n};\r\nexport default StorageSettings;\r\n"],"names":["StorageSettings","fields","onUpdate","settings","errors","customFieldsActive","setCustomFieldsActive","useState","useEffect","initialCustomFields","field","jsxs","Fragment","shouldDisplayStorageField","hint","fieldLabel","jsx","classes","Toggle","newVal","PasswordField","Input","NumberInput","Tristate","SizePicker","customField","o","Select","prev"],"mappings":"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"}

package/dist/components/Storage/StorageSettings/StorageSettings.module.scss

@@ -0,0 +1,29 @@
+.field {
+   margin-bottom: 20px;
+   width: 100%;
+   position: relative;
+   .fieldErrorLabel {
+      position: absolute;
+      right: 10px;
+      top: 15px;
+      background-color: var(--error-bg-active);
+      color: var(--error-active-text);
+      padding: 1px 12px;
+      border-radius: 20px;
+      font-size: 0.75rem;
+      letter-spacing: 0.2px;
+      z-index: 2;
+   }
+
+   .fileManagerBtn {
+      position: absolute;
+      right: 0;
+      top: -3px;
+      padding: 10px;
+      cursor: pointer;
+      color: var(--icon-color);
+      &:hover {
+         color: var(--primary-color);
+      }
+   }
+}

package/dist/components/Storage/StorageSettings/StorageSettings.module.scss.js

@@ -0,0 +1,8 @@
+const e = "StorageSettings-module__field___a53P5", s = {
+  field: e
+};
+export {
+  s as default,
+  e as field
+};
+//# sourceMappingURL=StorageSettings.module.scss.js.map

package/dist/components/Storage/StorageSettings/StorageSettings.module.scss.js.map

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