tanstack dev tools panel

apps/web-tss/src/components/ui/buttons/Button.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import * as OutlinedIcons from '../icons/NucleoIconOutlined';
-import { ArrowUp } from '../icons/NucleoIconOutlined';
 import { IconSelectOutlined } from '../icons/NucleoIconOutlined/iconStories';
 import { Button } from './Button';
 

apps/web-tss/src/components/ui/card/CollapisbleFileCard.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-import { Download, File, Image } from '../icons';
+import Download from '../icons/NucleoIconOutlined/download';
+import File from '../icons/NucleoIconOutlined/file';
+import Image from '../icons/NucleoIconOutlined/image';
 import { CollapisbleFileCard } from './CollapisbleFileCard';
 
 const meta: Meta<typeof CollapisbleFileCard> = {

apps/web-tss/src/components/ui/card/FileCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../buttons/Button';
-import { Grid } from '../icons';
+import Grid from '../icons/NucleoIconOutlined/grid';
 import { Text } from '../typography/Text';
 import { FileCard } from './FileCard';
 

apps/web-tss/src/components/ui/card/InfoCard.stories.tsx

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Bell } from '@/components/ui/icons';
+import Bell from '@/components/ui/icons/NucleoIconOutlined/bell';
 import { InfoCard } from './InfoCard';
 
 const meta: Meta<typeof InfoCard> = {

apps/web-tss/src/components/ui/icons/NucleoIcon.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import type React from 'react';
-import * as FilledIcons from './NucleoIconFilled';
-import { IconSelectFilled } from './NucleoIconFilled/iconStories';
-import * as OutlinedIcons from './NucleoIconOutlined';
-import { IconSelectOutlined } from './NucleoIconOutlined/iconStories';
-
-const TestComponent: React.FC<{
-  icon: string;
-  color: string;
-  size: '12px' | '16px' | '18px';
-  strokewidth?: number;
-  style?: 'outlined' | 'filled';
-}> = ({
-  icon = 'add-above',
-  color = '#000000',
-  size = '16px',
-  strokewidth = 1.3,
-  style = 'outlined',
-}) => {
-  const IconComponent =
-    style === 'outlined'
-      ? OutlinedIcons[icon as keyof typeof OutlinedIcons]
-      : FilledIcons[icon as keyof typeof FilledIcons];
-
-  if (!icon || !IconComponent) return null;
-
-  return (
-    <div className="flex items-center justify-center" style={{ fontSize: size, color: color }}>
-      <IconComponent strokewidth={strokewidth} />
-    </div>
-  );
-};
-
-const meta: Meta<typeof TestComponent> = {
-  title: 'UI/Icons/Nucleo',
-  component: TestComponent,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    icon: {
-      control: 'select',
-      options: IconSelectOutlined,
-      defaultValue: 'add-above',
-    },
-    color: {
-      control: 'color',
-      defaultValue: '#000000',
-    },
-    size: {
-      control: 'select',
-      options: ['12px', '16px', '18px'],
-    },
-    strokewidth: {
-      control: 'number',
-      defaultValue: 1.3,
-    },
-  },
-  args: {
-    icon: 'add-above',
-    color: '#000000',
-    size: '16px',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Outlined: Story = {
-  args: {
-    icon: 'add-above',
-    color: '#000000',
-    size: '16px',
-    style: 'outlined',
-  },
-};
-
-export const Filled: Story = {
-  args: {
-    icon: 'add-above',
-    color: '#000000',
-    size: '16px',
-    style: 'filled',
-  },
-  argTypes: {
-    icon: {
-      options: IconSelectFilled,
-    },
-  },
-};

apps/web-tss/src/components/ui/icons/index.ts

@@ -1 +1,4 @@
+// NOTE: Barrel exports removed to prevent loading ALL 7000+ icons
+// Import icons directly from their specific paths instead:
+// import IconName from '@/components/ui/icons/NucleoIconOutlined/icon-name';
 export * from './NucleoIconOutlined';

apps/web-tss/src/components/ui/inputs/InputTextAreaButton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-import { ArrowUp, ShapeSquare } from '../icons/NucleoIconFilled';
+import { ArrowUp, ShapeSquare } from '../icons';
 import { InputTextAreaButton } from './InputTextAreaButton';
 
 const meta: Meta<typeof InputTextAreaButton> = {

apps/web-tss/src/components/ui/inputs/InputTextAreaButton.tsx

@@ -1,10 +1,9 @@
 import { cva } from 'class-variance-authority';
 import React, { forwardRef } from 'react';
-import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { cn } from '@/lib/classMerge';
 import { Button } from '../buttons/Button';
-import { ShapeSquare } from '../icons/NucleoIconFilled';
 import { ArrowUp } from '../icons/NucleoIconOutlined';
+import ShapeSquare from '../icons/NucleoIconOutlined/shape-square';
 import { InputTextArea, type InputTextAreaProps } from './InputTextArea';
 
 const inputTextAreaButtonVariants = cva(

apps/web-tss/src/components/ui/list/BusterList/ListSelectedOptionPopup/ListSelectedOptionPopup.stories.tsx

@@ -2,7 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import { fn } from 'storybook/test';
 import { Button } from '@/components/ui/buttons';
-import { Cat, Dog, Garage } from '@/components/ui/icons';
+import Cat from '@/components/ui/icons/NucleoIconOutlined/cat';
+import Dog from '@/components/ui/icons/NucleoIconOutlined/dog';
+import Garage from '@/components/ui/icons/NucleoIconOutlined/garage';
 import { BusterListSelectedOptionPopupContainer } from './ListSelectedOptionPopup';
 
 const meta: Meta<typeof BusterListSelectedOptionPopupContainer> = {

apps/web-tss/src/integrations/tanstack-dev-tools/tanstack-devtools.tsx

@@ -1,5 +1,4 @@
-import type React from 'react';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
-import { lazy, Suspense, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 // Lazy load the actual devtools component
@@ -10,17 +9,17 @@ const LazyTanstackDevtools = lazy(() =>
 );
 
 // Export component with Suspense wrapper
-export const TanstackDevtools: React.FC = () => {
+export const TanstackDevtools: React.FC = React.memo(() => {
   // Track if we're on the client side
   const [mounted, setMounted] = useState(false);
-  const [useDevTools, setUseDevTools] = useState(false);
+  const [useDevTools, setUseDevTools] = useState(import.meta.env.DEV);
 
   useEffect(() => {
     // Set to true only after mount (client-side only)
     setMounted(true);
   }, []);
 
-  useHotkeys('shift+alt+d', () => {
+  useHotkeys('shift+a', () => {
     setUseDevTools(true);
   });
 
@@ -34,4 +33,6 @@ export const TanstackDevtools: React.FC = () => {
       <LazyTanstackDevtools />
     </Suspense>
   );
-};
+});
+
+TanstackDevtools.displayName = 'TanstackDevtools';

apps/web-tss/vite.config.ts

@@ -13,6 +13,17 @@ const config = defineConfig({
     tailwindcss(),
     tanstackStart({ customViteReactPlugin: true }),
     viteReact(),
+    // Custom plugin to exclude test and stories files in dev mode
+    {
+      name: 'exclude-test-stories',
+      resolveId(id) {
+        // Exclude .test and .stories files from being resolved
+        if (/\.(test|stories)\.(js|ts|jsx|tsx)$/.test(id)) {
+          return { id, external: true };
+        }
+        return null;
+      },
+    },
     !process.env.VITEST
       ? checker({
           typescript: true,
@@ -22,9 +33,19 @@ const config = defineConfig({
   ],
   build: {
     rollupOptions: {
+      // Exclude test and stories files from build
+      external: (id) => {
+        // Exclude .test and .stories files
+        return /\.(test|stories)\.(js|ts|jsx|tsx)$/.test(id);
+      },
       output: {
         // Force lodash and lodash-es into a dedicated vendor chunk
         manualChunks(id) {
+          // Skip chunking for test and stories files (they should be excluded anyway)
+          if (/\.(test|stories)\.(js|ts|jsx|tsx)$/.test(id)) {
+            return;
+          }
+
           if (id.includes('node_modules/lodash')) {
             return 'vendor-lodash';
           }