@auto-engineer/generate-react-client 1.64.0 → 1.66.0

package/dist/starter/.storybook/manager.ts

@@ -1,20 +1,20 @@
+import { UPDATE_DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
 import { addons } from 'storybook/manager-api';
 import { create } from 'storybook/theming';
-import { STORY_CHANGED } from 'storybook/internal/core-events';
-import { UPDATE_DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
 
 // Get initial theme from localStorage (dark mode addon) or URL parameter
 const urlParams = new URLSearchParams(window.location.search);
 const urlTheme = urlParams.get('theme');
 const getStoredDarkMode = (): boolean => {
-  try {
-    const stored = localStorage.getItem('sb-addon-themes-3');
-    if (stored) {
-      const parsed = JSON.parse(stored);
-      return parsed?.current === 'dark';
-    }
-  } catch {}
-  return false;
+	try {
+		const stored = localStorage.getItem('sb-addon-themes-3');
+		if (stored) {
+			const parsed = JSON.parse(stored);
+			return parsed?.current === 'dark';
+		}
+	} catch {}
+	return false;
 };
 const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
 
@@ -22,143 +22,143 @@ const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
 // Analyzed from screenshots - app has slight blue undertone in grays
 
 const lightTheme = create({
-  base: 'light',
-  brandTitle: ' ',
-  brandUrl: '/',
-  brandImage: '/blank.svg',
-
-  // App background colors - matching your app's blue-tinted sidebar
-  appBg: '#f0f3f9',           // sidebar background (blue-tinted like your app)
-  appContentBg: '#ffffff',    // main content area
-  appPreviewBg: '#ffffff',    // preview/canvas background
-  appBorderColor: '#e2e8f0',  // borders (blue-tinted)
-  appBorderRadius: 10,        // 0.625rem = 10px
-
-  // Text colors - dark gray, not blue
-  textColor: '#2d3748',       // dark gray text for sidebar items
-  textMutedColor: '#718096',  // muted gray text
-  textInverseColor: '#f7fafc',// inverse text
-
-  // Toolbar/UI colors
-  barBg: '#f0f3f9',           // toolbar background (blue-tinted)
-  barTextColor: '#2d3748',    // toolbar text (dark gray)
-  barHoverColor: '#1a202c',   // toolbar hover
-  barSelectedColor: '#1a202c',// toolbar selected
-
-  // Form colors
-  inputBg: '#ffffff',         // input background
-  inputBorder: '#e2e8f0',     // input border
-  inputTextColor: '#2d3748',  // input text
-
-  // Button colors
-  buttonBg: '#edf2f7',        // button background
-  buttonBorder: '#e2e8f0',    // button border
-
-  // Boolean inputs
-  booleanBg: '#edf2f7',
-  booleanSelectedBg: '#2d3748',
-
-  // Grid colors for canvas
-  gridCellSize: 10,
-
-  // Color for links/interactive items - override the blue
-  colorPrimary: '#2d3748',
-  colorSecondary: '#4a5568',
+	base: 'light',
+	brandTitle: ' ',
+	brandUrl: '/',
+	brandImage: '/blank.svg',
+
+	// App background colors - matching your app's blue-tinted sidebar
+	appBg: '#f0f3f9', // sidebar background (blue-tinted like your app)
+	appContentBg: '#ffffff', // main content area
+	appPreviewBg: '#ffffff', // preview/canvas background
+	appBorderColor: '#e2e8f0', // borders (blue-tinted)
+	appBorderRadius: 10, // 0.625rem = 10px
+
+	// Text colors - dark gray, not blue
+	textColor: '#2d3748', // dark gray text for sidebar items
+	textMutedColor: '#718096', // muted gray text
+	textInverseColor: '#f7fafc', // inverse text
+
+	// Toolbar/UI colors
+	barBg: '#f0f3f9', // toolbar background (blue-tinted)
+	barTextColor: '#2d3748', // toolbar text (dark gray)
+	barHoverColor: '#1a202c', // toolbar hover
+	barSelectedColor: '#1a202c', // toolbar selected
+
+	// Form colors
+	inputBg: '#ffffff', // input background
+	inputBorder: '#e2e8f0', // input border
+	inputTextColor: '#2d3748', // input text
+
+	// Button colors
+	buttonBg: '#edf2f7', // button background
+	buttonBorder: '#e2e8f0', // button border
+
+	// Boolean inputs
+	booleanBg: '#edf2f7',
+	booleanSelectedBg: '#2d3748',
+
+	// Grid colors for canvas
+	gridCellSize: 10,
+
+	// Color for links/interactive items - override the blue
+	colorPrimary: '#2d3748',
+	colorSecondary: '#4a5568',
 });
 
 const darkTheme = create({
-  base: 'dark',
-  brandTitle: ' ',
-  brandUrl: '/',
-  brandImage: '/blank.svg',
-
-  // App background colors - matching app's dark blue-tinted theme
-  appBg: '#1a1f2e',           // sidebar background (blue-tinted dark)
-  appContentBg: '#131620',    // main content area (darker)
-  appPreviewBg: '#131620',    // preview/canvas background
-  appBorderColor: '#2a3142',  // borders (blue-tinted)
-  appBorderRadius: 10,
-
-  // Text colors - light gray, not blue
-  textColor: '#e2e8f0',       // light gray text
-  textMutedColor: '#a0aec0',  // muted gray text
-  textInverseColor: '#1a1f2e',// inverse text
-
-  // Toolbar/UI colors
-  barBg: '#1a1f2e',           // toolbar background
-  barTextColor: '#e2e8f0',    // toolbar text (light gray)
-  barHoverColor: '#f7fafc',   // toolbar hover
-  barSelectedColor: '#f7fafc',// toolbar selected
-
-  // Form colors
-  inputBg: '#242938',         // input background
-  inputBorder: '#3d4663',     // input border
-  inputTextColor: '#e2e8f0',  // input text
-
-  // Button colors
-  buttonBg: '#242938',        // button background
-  buttonBorder: '#3d4663',    // button border
-
-  // Boolean inputs
-  booleanBg: '#242938',
-  booleanSelectedBg: '#e2e8f0',
-
-  // Grid colors for canvas
-  gridCellSize: 10,
-
-  // Color for links/interactive items - override the blue
-  colorPrimary: '#e2e8f0',
-  colorSecondary: '#a0aec0',
+	base: 'dark',
+	brandTitle: ' ',
+	brandUrl: '/',
+	brandImage: '/blank.svg',
+
+	// App background colors - matching app's dark blue-tinted theme
+	appBg: '#1a1f2e', // sidebar background (blue-tinted dark)
+	appContentBg: '#131620', // main content area (darker)
+	appPreviewBg: '#131620', // preview/canvas background
+	appBorderColor: '#2a3142', // borders (blue-tinted)
+	appBorderRadius: 10,
+
+	// Text colors - light gray, not blue
+	textColor: '#e2e8f0', // light gray text
+	textMutedColor: '#a0aec0', // muted gray text
+	textInverseColor: '#1a1f2e', // inverse text
+
+	// Toolbar/UI colors
+	barBg: '#1a1f2e', // toolbar background
+	barTextColor: '#e2e8f0', // toolbar text (light gray)
+	barHoverColor: '#f7fafc', // toolbar hover
+	barSelectedColor: '#f7fafc', // toolbar selected
+
+	// Form colors
+	inputBg: '#242938', // input background
+	inputBorder: '#3d4663', // input border
+	inputTextColor: '#e2e8f0', // input text
+
+	// Button colors
+	buttonBg: '#242938', // button background
+	buttonBorder: '#3d4663', // button border
+
+	// Boolean inputs
+	booleanBg: '#242938',
+	booleanSelectedBg: '#e2e8f0',
+
+	// Grid colors for canvas
+	gridCellSize: 10,
+
+	// Color for links/interactive items - override the blue
+	colorPrimary: '#e2e8f0',
+	colorSecondary: '#a0aec0',
 });
 
 const customTheme = initialIsDark ? darkTheme : lightTheme;
 
 addons.setConfig({
-  theme: customTheme,
-  sidebar: {
-    collapsedRoots: ['ui-components'],
-  },
-  showPanel: false,
+	theme: customTheme,
+	sidebar: {
+		collapsedRoots: ['ui-components'],
+	},
+	showPanel: false,
 });
 
 // Set default story to Design System Overview if no path specified
 if (!urlParams.has('path')) {
-  const newUrl = new URL(window.location.href);
-  newUrl.searchParams.set('path', '/story/design-system-overview--default');
-  window.history.replaceState({}, '', newUrl.toString());
+	const newUrl = new URL(window.location.href);
+	newUrl.searchParams.set('path', '/story/design-system-overview--default');
+	window.history.replaceState({}, '', newUrl.toString());
 }
 
 // Register addon to handle navigation sync and theme after Storybook is ready
 addons.register('url-sync', (api) => {
-  const channel = api.getChannel();
-  if (!channel) return;
-
-  // Set initial dark mode state (pass string "dark" or "light", not boolean)
-  if (initialIsDark) {
-    channel.emit(UPDATE_DARK_MODE_EVENT_NAME, 'dark');
-  }
-
-  // Report navigation changes to parent window for URL bar sync
-  channel.on(STORY_CHANGED, (storyId: string) => {
-    if (window.parent !== window) {
-      window.parent.postMessage({ type: 'storybook-navigation', storyId }, '*');
-    }
-  });
-
-  // Listen for theme changes from parent window
-  window.addEventListener('message', (event) => {
-    if (event.data?.type === 'storybook-theme-change' && event.data?.theme) {
-      const isDark = event.data.theme === 'dark';
-      // Update the dark mode addon
-      channel.emit(UPDATE_DARK_MODE_EVENT_NAME, event.data.theme);
-      // Update the Storybook manager theme
-      addons.setConfig({
-        theme: isDark ? darkTheme : lightTheme,
-      });
-      // Update CSS theme selector and background
-      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
-      document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
-      document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
-    }
-  });
+	const channel = api.getChannel();
+	if (!channel) return;
+
+	// Set initial dark mode state (pass string "dark" or "light", not boolean)
+	if (initialIsDark) {
+		channel.emit(UPDATE_DARK_MODE_EVENT_NAME, 'dark');
+	}
+
+	// Report navigation changes to parent window for URL bar sync
+	channel.on(STORY_CHANGED, (storyId: string) => {
+		if (window.parent !== window) {
+			window.parent.postMessage({ type: 'storybook-navigation', storyId }, '*');
+		}
+	});
+
+	// Listen for theme changes from parent window
+	window.addEventListener('message', (event) => {
+		if (event.data?.type === 'storybook-theme-change' && event.data?.theme) {
+			const isDark = event.data.theme === 'dark';
+			// Update the dark mode addon
+			channel.emit(UPDATE_DARK_MODE_EVENT_NAME, event.data.theme);
+			// Update the Storybook manager theme
+			addons.setConfig({
+				theme: isDark ? darkTheme : lightTheme,
+			});
+			// Update CSS theme selector and background
+			document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+			document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
+			document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+		}
+	});
 });

package/dist/starter/.storybook/preview-head.html

@@ -1,7 +1,7 @@
 <style>
   /* Immediate CSS-based dark mode detection - no JS needed for initial paint */
   html, body {
-    transition: none !important;
+    transition: none;
     background-color: #FFFFFF;
     color-scheme: light;
   }
@@ -14,13 +14,13 @@
   }
   /* When .dark class is set by JS */
   html.dark, html.dark body {
-    background-color: #1a1f2e !important;
-    color-scheme: dark !important;
+    background-color: #1a1f2e;
+    color-scheme: dark;
   }
   /* When .light class is set by JS (overrides prefers-color-scheme) */
   html.light, html.light body {
-    background-color: #FFFFFF !important;
-    color-scheme: light !important;
+    background-color: #FFFFFF;
+    color-scheme: light;
   }
 
   /* Fix inner iframe loading states */
@@ -29,8 +29,8 @@
   html.dark .sb-wrapper,
   html.dark #storybook-root,
   html.dark #storybook-docs {
-    background-color: #1a1f2e !important;
-    color-scheme: dark !important;
+    background-color: #1a1f2e;
+    color-scheme: dark;
   }
 
   /* Make spinner transparent in both light and dark mode */
@@ -38,18 +38,18 @@
   .sb-loader *,
   [class*="loader"],
   [class*="loader"] * {
-    fill: transparent !important;
-    background: transparent !important;
-    background-color: transparent !important;
+    fill: transparent;
+    background: transparent;
+    background-color: transparent;
   }
 
   /* Set dark background on all iframes in dark mode to reduce flash from external content */
   html.dark iframe {
-    background-color: #1a1f2e !important;
+    background-color: #1a1f2e;
   }
 </style>
 <script>
-  (function() {
+  (() => {
     var isDark = false;
     var stored, parsed, urlParams, urlTheme;
     try {

package/dist/starter/.storybook/preview.tsx

@@ -1,42 +1,42 @@
+import { DocsContainer } from '@storybook/addon-docs/blocks';
 import type { Preview } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+import { initialize, mswLoader } from 'msw-storybook-addon';
 import type { PropsWithChildren } from 'react';
 import { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
-import { DocsContainer } from '@storybook/addon-docs/blocks';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
-import { initialize, mswLoader } from 'msw-storybook-addon';
 import '../src/index.css';
 
 initialize({
-  onUnhandledRequest: 'bypass',
+	onUnhandledRequest: 'bypass',
 });
 
 // Apply theme to the preview iframe (for component styling and background)
 const applyTheme = (isDark: boolean) => {
-  if (isDark) {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-  // Update background color to match Storybook theme
-  document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
-  document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+	if (isDark) {
+		document.documentElement.classList.add('dark');
+	} else {
+		document.documentElement.classList.remove('dark');
+	}
+	// Update background color to match Storybook theme
+	document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
+	document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
 };
 
 // Get initial theme from URL parameter or localStorage
 const urlParams = new URLSearchParams(window.location.search);
 const urlTheme = urlParams.get('theme');
 const getStoredDarkMode = (): boolean => {
-  try {
-    const stored = localStorage.getItem('sb-addon-themes-3');
-    if (stored) {
-      const parsed = JSON.parse(stored);
-      return parsed?.current === 'dark';
-    }
-  } catch {}
-  return false;
+	try {
+		const stored = localStorage.getItem('sb-addon-themes-3');
+		if (stored) {
+			const parsed = JSON.parse(stored);
+			return parsed?.current === 'dark';
+		}
+	} catch {}
+	return false;
 };
 const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
 applyTheme(initialIsDark);
@@ -44,77 +44,77 @@ applyTheme(initialIsDark);
 // Listen to dark mode addon changes and sync with our CSS class
 const channel = addons.getChannel();
 channel.on(DARK_MODE_EVENT_NAME, (isDark: boolean) => {
-  applyTheme(isDark);
+	applyTheme(isDark);
 });
 
 const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
-    },
-  },
+	defaultOptions: {
+		queries: {
+			retry: false,
+		},
+	},
 });
 
 // Themed docs container that responds to dark mode
 function ThemedDocsContainer({
-  children,
-  context,
+	children,
+	context,
 }: PropsWithChildren<{ context: Parameters<typeof DocsContainer>[0]['context'] }>) {
-  const [isDark, setIsDark] = useState(initialIsDark);
+	const [isDark, setIsDark] = useState(initialIsDark);
 
-  useEffect(() => {
-    const ch = addons.getChannel();
-    ch.on(DARK_MODE_EVENT_NAME, setIsDark);
-    return () => ch.off(DARK_MODE_EVENT_NAME, setIsDark);
-  }, []);
+	useEffect(() => {
+		const ch = addons.getChannel();
+		ch.on(DARK_MODE_EVENT_NAME, setIsDark);
+		return () => ch.off(DARK_MODE_EVENT_NAME, setIsDark);
+	}, []);
 
-  return (
-    <DocsContainer context={context} theme={isDark ? themes.dark : themes.light}>
-      {children}
-    </DocsContainer>
-  );
+	return (
+		<DocsContainer context={context} theme={isDark ? themes.dark : themes.light}>
+			{children}
+		</DocsContainer>
+	);
 }
 
 const preview: Preview = {
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <QueryClientProvider client={queryClient}>
-        <Story />
-      </QueryClientProvider>
-    ),
-  ],
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    viewport: {
-      defaultViewport: 'desktop',
-    },
-    layout: 'padded',
-    options: {
-      showPanel: false,
-      storySort: {
-        order: ['Design System', ['Overview', '*'], 'UI Components'],
-      },
-    },
-    darkMode: {
-      current: initialIsDark ? 'dark' : 'light',
-      stylePreview: true,
-      dark: themes.dark,
-      light: themes.light,
-    },
-    docs: {
-      container: ThemedDocsContainer,
-    },
-  },
-  initialGlobals: {
-    showPanel: false,
-  },
-  loaders: [mswLoader],
+	tags: ['autodocs'],
+	decorators: [
+		(Story) => (
+			<QueryClientProvider client={queryClient}>
+				<Story />
+			</QueryClientProvider>
+		),
+	],
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		viewport: {
+			defaultViewport: 'desktop',
+		},
+		layout: 'padded',
+		options: {
+			showPanel: false,
+			storySort: {
+				order: ['Design System', ['Overview', '*'], 'UI Components'],
+			},
+		},
+		darkMode: {
+			current: initialIsDark ? 'dark' : 'light',
+			stylePreview: true,
+			dark: themes.dark,
+			light: themes.light,
+		},
+		docs: {
+			container: ThemedDocsContainer,
+		},
+	},
+	initialGlobals: {
+		showPanel: false,
+	},
+	loaders: [mswLoader],
 };
 
 export default preview;