radtools 0.1.0

package/templates/devtools/store/slices/assetsSlice.ts

@@ -0,0 +1,106 @@
+import { StateCreator } from 'zustand';
+import type { AssetFolder, AssetFile } from '../../types';
+
+export interface AssetsSlice {
+  // State
+  assets: AssetFolder | null;
+  selectedFolder: string | null;
+  uploadProgress: Record<string, number>;
+  isLoading: boolean;
+  
+  // Actions
+  setAssets: (assets: AssetFolder) => void;
+  setSelectedFolder: (path: string | null) => void;
+  setUploadProgress: (fileName: string, progress: number) => void;
+  clearUploadProgress: (fileName: string) => void;
+  refreshAssets: () => Promise<void>;
+  uploadAsset: (file: File, folder: string) => Promise<void>;
+  deleteAsset: (path: string) => Promise<void>;
+  optimizeAssets: (paths: string[]) => Promise<void>;
+}
+
+export const createAssetsSlice: StateCreator<AssetsSlice, [], [], AssetsSlice> = (set, get) => ({
+  assets: null,
+  selectedFolder: null,
+  uploadProgress: {},
+  isLoading: false,
+
+  setAssets: (assets) => set({ assets }),
+  
+  setSelectedFolder: (path) => set({ selectedFolder: path }),
+  
+  setUploadProgress: (fileName, progress) => set((state) => ({
+    uploadProgress: { ...state.uploadProgress, [fileName]: progress }
+  })),
+  
+  clearUploadProgress: (fileName) => set((state) => {
+    const { [fileName]: _, ...rest } = state.uploadProgress;
+    return { uploadProgress: rest };
+  }),
+
+  refreshAssets: async () => {
+    set({ isLoading: true });
+    try {
+      const res = await fetch('/api/devtools/assets');
+      const data = await res.json();
+      set({ assets: data.assets, isLoading: false });
+    } catch (error) {
+      set({ isLoading: false });
+    }
+  },
+
+  uploadAsset: async (file, folder) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('folder', folder);
+    
+    set((state) => ({
+      uploadProgress: { ...state.uploadProgress, [file.name]: 0 }
+    }));
+    
+    try {
+      const res = await fetch('/api/devtools/assets', {
+        method: 'POST',
+        body: formData,
+      });
+      
+      if (res.ok) {
+        set((state) => ({
+          uploadProgress: { ...state.uploadProgress, [file.name]: 100 }
+        }));
+        await get().refreshAssets();
+      }
+    } catch (error) {
+      // Failed to upload asset
+    } finally {
+      setTimeout(() => get().clearUploadProgress(file.name), 2000);
+    }
+  },
+
+  deleteAsset: async (path) => {
+    try {
+      await fetch('/api/devtools/assets', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path }),
+      });
+      await get().refreshAssets();
+    } catch (error) {
+      // Failed to delete asset
+    }
+  },
+
+  optimizeAssets: async (paths) => {
+    try {
+      await fetch('/api/devtools/assets/optimize', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ files: paths }),
+      });
+      await get().refreshAssets();
+    } catch (error) {
+      // Failed to optimize assets
+    }
+  },
+});
+

package/templates/devtools/store/slices/componentsSlice.ts

@@ -0,0 +1,59 @@
+import { StateCreator } from 'zustand';
+import type { DiscoveredComponent } from '../../types';
+
+export interface ComponentsSlice {
+  // State
+  components: DiscoveredComponent[];
+  isLoading: boolean;
+  lastScanned: string | null;
+  
+  // Actions
+  setComponents: (components: DiscoveredComponent[]) => void;
+  setIsLoading: (loading: boolean) => void;
+  scanComponents: () => Promise<void>;
+  refreshComponents: () => Promise<void>;
+}
+
+export const createComponentsSlice: StateCreator<ComponentsSlice, [], [], ComponentsSlice> = (set) => ({
+  components: [],
+  isLoading: false,
+  lastScanned: null,
+
+  setComponents: (components) => set({ 
+    components, 
+    lastScanned: new Date().toISOString() 
+  }),
+  
+  setIsLoading: (isLoading) => set({ isLoading }),
+
+  scanComponents: async () => {
+    set({ isLoading: true });
+    try {
+      const res = await fetch('/api/devtools/components');
+      const data = await res.json();
+      set({ 
+        components: data.components || [], 
+        lastScanned: new Date().toISOString(),
+        isLoading: false 
+      });
+    } catch (error) {
+      set({ isLoading: false });
+    }
+  },
+
+  refreshComponents: async () => {
+    set({ isLoading: true });
+    try {
+      const res = await fetch('/api/devtools/components');
+      const data = await res.json();
+      set({ 
+        components: data.components || [], 
+        lastScanned: new Date().toISOString(),
+        isLoading: false 
+      });
+    } catch (error) {
+      set({ isLoading: false });
+    }
+  },
+});
+

package/templates/devtools/store/slices/mockStatesSlice.ts

@@ -0,0 +1,77 @@
+import { StateCreator } from 'zustand';
+import type { MockState } from '../../types';
+
+export interface MockStatesSlice {
+  // State
+  mockStates: MockState[];
+  
+  // Actions
+  toggleMockState: (id: string) => void;
+}
+
+// Default preset states
+const defaultPresets: MockState[] = [
+  {
+    id: 'wallet-connected',
+    name: 'Wallet Connected',
+    description: 'Simulates a connected wallet',
+    category: 'wallet',
+    values: {
+      isConnected: true,
+      address: '0x1234567890abcdef1234567890abcdef12345678',
+      balance: '1.5',
+    },
+    active: false,
+  },
+  {
+    id: 'wallet-disconnected',
+    name: 'Wallet Disconnected',
+    description: 'Simulates a disconnected wallet',
+    category: 'wallet',
+    values: {
+      isConnected: false,
+      address: null,
+      balance: '0',
+    },
+    active: false,
+  },
+  {
+    id: 'token-hodler',
+    name: 'Token Hodler',
+    description: 'Simulates a user holding tokens',
+    category: 'wallet',
+    values: {
+      isConnected: true,
+      address: '0x1234567890abcdef1234567890abcdef12345678',
+      balance: '10.5',
+      hasTokens: true,
+    },
+    active: false,
+  },
+];
+
+export const createMockStatesSlice: StateCreator<MockStatesSlice, [], [], MockStatesSlice> = (set) => ({
+  mockStates: defaultPresets,
+
+  toggleMockState: (id) => set((state) => {
+    const targetState = state.mockStates.find((m) => m.id === id);
+    if (!targetState) return state;
+
+    // If activating, deactivate other states in the same category
+    const newActive = !targetState.active;
+    
+    return {
+      mockStates: state.mockStates.map((m) => {
+        if (m.id === id) {
+          return { ...m, active: newActive };
+        }
+        // Deactivate other states in the same category
+        if (newActive && m.category === targetState.category && m.active) {
+          return { ...m, active: false };
+        }
+        return m;
+      })
+    };
+  }),
+});
+

package/templates/devtools/store/slices/panelSlice.ts

@@ -0,0 +1,17 @@
+import { StateCreator } from 'zustand';
+
+export interface PanelSlice {
+  // Fullscreen state (NOT persisted)
+  isFullscreen: boolean;
+  toggleFullscreen: () => void;
+  setFullscreen: (value: boolean) => void;
+}
+
+export const createPanelSlice: StateCreator<PanelSlice, [], [], PanelSlice> = (set) => ({
+  isFullscreen: false,
+  
+  toggleFullscreen: () => set((state) => ({ isFullscreen: !state.isFullscreen })),
+  
+  setFullscreen: (value) => set({ isFullscreen: value }),
+});
+