@tanstack/cta-ui-base 0.24.1 → 0.25.0

package/dist/components/sidebar-items/add-ons.js

@@ -9,6 +9,7 @@ import AddOnInfoDialog from '../add-on-info-dialog';
 const addOnTypeLabels = {
     toolchain: 'Toolchain',
     'add-on': 'Add-on',
+    host: 'Hosting Provider',
     example: 'Example',
 };
 export default function SelectedAddOns() {

package/dist/store/add-ons.d.ts

@@ -3,5 +3,6 @@ export declare function getAddOnStatus(availableAddOns: Array<AddOnInfo>, chosen
     [k: string]: {
         enabled: boolean;
         selected: boolean;
+        isSingleSelect: string | undefined;
     };
 };

package/dist/store/add-ons.js

@@ -5,6 +5,7 @@ export function getAddOnStatus(availableAddOns, chosenAddOns, originalAddOns) {
             selected: false,
             enabled: true,
             dependedUpon: false,
+            isSingleSelect: addOn.type === 'host' ? addOn.type : undefined,
         });
     }
     // Guard against cycles in the dependency graph. The results won't be great. But it won't crash.
@@ -54,6 +55,7 @@ export function getAddOnStatus(availableAddOns, chosenAddOns, originalAddOns) {
         {
             enabled: addOn.enabled,
             selected: addOn.selected,
+            isSingleSelect: addOn.isSingleSelect,
         },
     ]));
 }

package/dist/store/project.d.ts

@@ -33,6 +33,7 @@ export declare function useAddOns(): {
         [k: string]: {
             enabled: boolean;
             selected: boolean;
+            isSingleSelect: string | undefined;
         };
     };
 };

package/dist/store/project.js

@@ -105,16 +105,36 @@ export function useAddOns() {
     const toggleAddOn = useCallback((addOnId) => {
         if (!ready)
             return;
-        if (addOnState[addOnId].enabled) {
-            if (addOnState[addOnId].selected) {
-                useMutableAddOns.setState((state) => ({
-                    userSelectedAddOns: state.userSelectedAddOns.filter((addOn) => addOn !== addOnId),
-                }));
+        if (addOnState[addOnId].isSingleSelect) {
+            if (!addOnState[addOnId].selected) {
+                // Find the currently selected addOn with the same isSingleSelect value and unselect it
+                const singleSelectType = addOnState[addOnId].isSingleSelect;
+                const currentlySelected = Object.keys(addOnState).find((id) => id !== addOnId &&
+                    addOnState[id].isSingleSelect === singleSelectType &&
+                    addOnState[id].selected);
+                useMutableAddOns.setState((state) => {
+                    let newUserSelectedAddOns = state.userSelectedAddOns.filter((id) => id !== currentlySelected);
+                    if (!newUserSelectedAddOns.includes(addOnId)) {
+                        newUserSelectedAddOns = [...newUserSelectedAddOns, addOnId];
+                    }
+                    return {
+                        userSelectedAddOns: newUserSelectedAddOns,
+                    };
+                });
             }
-            else {
-                useMutableAddOns.setState((state) => ({
-                    userSelectedAddOns: [...state.userSelectedAddOns, addOnId],
-                }));
+        }
+        else {
+            if (addOnState[addOnId].enabled) {
+                if (addOnState[addOnId].selected) {
+                    useMutableAddOns.setState((state) => ({
+                        userSelectedAddOns: state.userSelectedAddOns.filter((addOn) => addOn !== addOnId),
+                    }));
+                }
+                else {
+                    useMutableAddOns.setState((state) => ({
+                        userSelectedAddOns: [...state.userSelectedAddOns, addOnId],
+                    }));
+                }
             }
         }
     }, [ready, addOnState]);

package/package.json

@@ -36,7 +36,7 @@
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.0.2",
     "zustand": "^5.0.3",
-    "@tanstack/cta-engine": "0.24.1"
+    "@tanstack/cta-engine": "0.25.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
@@ -45,6 +45,6 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.4"
   },
-  "version": "0.24.1",
+  "version": "0.25.0",
   "scripts": {}
 }

package/src/components/sidebar-items/add-ons.tsx

@@ -14,6 +14,7 @@ import type { AddOnInfo } from '../../types'
 const addOnTypeLabels: Record<string, string> = {
   toolchain: 'Toolchain',
   'add-on': 'Add-on',
+  host: 'Hosting Provider',
   example: 'Example',
 }
 

package/src/store/add-ons.ts

@@ -11,6 +11,7 @@ export function getAddOnStatus(
       enabled: boolean
       selected: boolean
       dependedUpon: boolean
+      isSingleSelect: string | undefined
     }
   >()
 
@@ -19,6 +20,7 @@ export function getAddOnStatus(
       selected: false,
       enabled: true,
       dependedUpon: false,
+      isSingleSelect: addOn.type === 'host' ? addOn.type : undefined,
     })
   }
 
@@ -75,6 +77,7 @@ export function getAddOnStatus(
       {
         enabled: addOn.enabled,
         selected: addOn.selected,
+        isSingleSelect: addOn.isSingleSelect,
       },
     ]),
   )

package/src/store/project.ts

@@ -140,17 +140,42 @@ export function useAddOns() {
   const toggleAddOn = useCallback(
     (addOnId: string) => {
       if (!ready) return
-      if (addOnState[addOnId].enabled) {
-        if (addOnState[addOnId].selected) {
-          useMutableAddOns.setState((state) => ({
-            userSelectedAddOns: state.userSelectedAddOns.filter(
-              (addOn) => addOn !== addOnId,
-            ),
-          }))
-        } else {
-          useMutableAddOns.setState((state) => ({
-            userSelectedAddOns: [...state.userSelectedAddOns, addOnId],
-          }))
+
+      if (addOnState[addOnId].isSingleSelect) {
+        if (!addOnState[addOnId].selected) {
+          // Find the currently selected addOn with the same isSingleSelect value and unselect it
+          const singleSelectType = addOnState[addOnId].isSingleSelect
+          const currentlySelected = Object.keys(addOnState).find(
+            (id) =>
+              id !== addOnId &&
+              addOnState[id].isSingleSelect === singleSelectType &&
+              addOnState[id].selected,
+          )
+          useMutableAddOns.setState((state) => {
+            let newUserSelectedAddOns = state.userSelectedAddOns.filter(
+              (id) => id !== currentlySelected, // remove the previously selected one
+            )
+            if (!newUserSelectedAddOns.includes(addOnId)) {
+              newUserSelectedAddOns = [...newUserSelectedAddOns, addOnId]
+            }
+            return {
+              userSelectedAddOns: newUserSelectedAddOns,
+            }
+          })
+        }
+      } else {
+        if (addOnState[addOnId].enabled) {
+          if (addOnState[addOnId].selected) {
+            useMutableAddOns.setState((state) => ({
+              userSelectedAddOns: state.userSelectedAddOns.filter(
+                (addOn) => addOn !== addOnId,
+              ),
+            }))
+          } else {
+            useMutableAddOns.setState((state) => ({
+              userSelectedAddOns: [...state.userSelectedAddOns, addOnId],
+            }))
+          }
         }
       }
     },

package/src/types.d.ts

@@ -32,7 +32,7 @@ export type AddOnInfo = {
   id: string
   name: string
   description: string
-  type: 'add-on' | 'example' | 'starter' | 'toolchain'
+  type: 'add-on' | 'example' | 'starter' | 'toolchain' | 'host'
   modes: Array<string>
   smallLogo?: string
   logo?: string