Update stepper api

package-lock.json

@@ -9,14 +9,13 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "@codex-storage/marketplace-ui-components": "0.0.5",
+        "@codex-storage/marketplace-ui-components": "0.0.7",
         "@codex-storage/sdk-js": "0.0.4",
         "@sentry/react": "^8.31.0",
         "@tanstack/react-query": "^5.51.15",
         "@tanstack/react-router": "^1.58.7",
         "idb-keyval": "^6.2.1",
         "lucide-react": "^0.445.0",
-        "pretty-ms": "^9.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -342,9 +341,9 @@
       }
     },
     "node_modules/@codex-storage/marketplace-ui-components": {
-      "version": "0.0.5",
+      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.7.tgz",
-      "integrity": "sha512-YrT8glXA6Dt/gsgyALzhHYBVdCFlVFRaahkBAwvVV7rpnvh7eeIdObSq6+m4kyEGALLIh/wVZ4OIfD1bG0dXOQ==",
+      "integrity": "sha512-wN9b95uZ2W/24zYyrBY8xhN8KzEv9eSNanFdoaB6tRT9D4cG4bPwWbvH6x45Y7EBqZhK11uF6bEzM88do/kd1g==",
       "dependencies": {
         "lucide-react": "^0.441.0"
       },
@@ -3010,16 +3009,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-ms": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "dev": true,
@@ -3109,19 +3098,6 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
-    "node_modules/pretty-ms": {
-      "version": "9.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "parse-ms": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "dev": true,

package.json

@@ -23,14 +23,13 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "0.0.5",
+    "@codex-storage/marketplace-ui-components": "0.0.7",
     "@codex-storage/sdk-js": "0.0.4",
     "@sentry/react": "^8.31.0",
     "@tanstack/react-query": "^5.51.15",
     "@tanstack/react-router": "^1.58.7",
     "idb-keyval": "^6.2.1",
     "lucide-react": "^0.445.0",
-    "pretty-ms": "^9.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/components/Availability/AvailabilityConfirmation.tsx

@@ -12,12 +12,8 @@ export function AvailabilityConfirm({
 }: AvailabilityComponentProps) {
   useEffect(() => {
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: true,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: true,
     });
   }, [dispatch]);

src/components/Availability/AvailabilityCreate.css

@@ -0,0 +1,5 @@
+@media (min-width: 801px) {
+  .availabilityCreate .stepper-body {
+    width: 600px;
+  }
+}

src/components/Availability/AvailabilityCreate.tsx

@@ -15,6 +15,7 @@ import { STEPPER_DURATION } from "../../utils/constants";
 import { useAvailabilityMutation } from "./useAvailabilityMutation";
 import { AvailabilitySuccess } from "./AvailabilitySuccess";
 import { AvailabilityError } from "./AvailabilityError";
+import "./AvailabilityCreate.css";
 
 type Props = {
   space: CodexNodeSpace;
@@ -121,6 +122,7 @@ export function AvailabilityCreate({ space }: Props) {
 
       <Modal open={state.open} onClose={onClose} displayCloseButton={false}>
         <Stepper
+          className="availabilityCreate"
           titles={steps.current}
           state={state}
           dispatch={dispatch}

src/components/Availability/AvailabilityError.tsx

@@ -8,12 +8,8 @@ export function AvailabilityError({
 }: AvailabilityComponentProps) {
   useEffect(() => {
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: false,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: true,
     });
   }, [dispatch]);

src/components/Availability/AvailabilityForm.tsx

@@ -13,16 +13,12 @@ export function AvailabilityForm({
   space,
 }: AvailabilityComponentProps) {
   useEffect(() => {
-    const max = availabilityMax(space, availability.totalSizeUnit);
+    const max = availabilityMax(space);
-    const isValid = isAvailabilityValid(availability.totalSize, max);
+    const isValid = isAvailabilityValid(availability, max);
 
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: isValid,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: true,
     });
   }, [space, availability]);
@@ -48,7 +44,6 @@ export function AvailabilityForm({
   const onAvailablityChange = async (e: ChangeEvent<HTMLInputElement>) => {
     const element = e.currentTarget;
     const v = element.value;
-    const valid = element.checkValidity();
 
     onAvailabilityChange({
       [element.name]: v,
@@ -63,8 +58,9 @@ export function AvailabilityForm({
     });
   };
 
-  const max = availabilityMax(space, availability.totalSizeUnit);
+  const max = availabilityMax(space);
-  const isValid = isAvailabilityValid(availability.totalSize, max);
+  const isValid = isAvailabilityValid(availability, max);
+  console.info(isValid, max);
   const helper = isValid
     ? "Total size of availability's storage in bytes"
     : "The total size cannot exceed the space available.";

src/components/Availability/AvailabilitySuccess.tsx

@@ -6,12 +6,8 @@ import { useEffect } from "react";
 export function AvailabilitySuccess({ dispatch }: AvailabilityComponentProps) {
   useEffect(() => {
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: true,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: false,
     });
   }, [dispatch]);

src/components/StorageRequestSetup/StorageRequestDone.tsx

@@ -8,12 +8,8 @@ import { useEffect } from "react";
 export function StorageRequestDone({ dispatch }: StorageRequestComponentProps) {
   useEffect(() => {
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: true,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: false,
     });
   }, [dispatch]);

src/components/StorageRequestSetup/StorageRequestError.tsx

@@ -8,12 +8,8 @@ export function StorageRequestError({
 }: StorageRequestComponentProps) {
   useEffect(() => {
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: false,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: true,
     });
   }, [dispatch]);

src/components/StorageRequestSetup/StorageRequestFileChooser.tsx

@@ -21,12 +21,8 @@ export function StorageRequestFileChooser({
 
   useEffect(() => {
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: !!storageRequest.cid,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: true,
     });
   }, [dispatch, storageRequest]);

src/components/StorageRequestSetup/StorageRequestReview.tsx

@@ -58,12 +58,8 @@ export function StorageRequestReview({
     );
 
     dispatch({
-      type: "toggle-next",
+      type: "toggle-buttons",
       isNextEnable: !invalid,
-    });
-
-    dispatch({
-      type: "toggle-back",
       isBackEnable: true,
     });
   }, [dispatch, storageRequest]);