Export more for header (#2996)

* export more items needed for dynamic header
* remove build mode that is no longer needed

invokeai/frontend/web/index.d.ts

@@ -1,4 +1,6 @@
 import React, { PropsWithChildren } from 'react';
+import { IAIPopoverProps } from '../web/src/common/components/IAIPopover';
+import { IAIIconButtonProps } from '../web/src/common/components/IAIIconButton';
 
 export {};
 
@@ -50,9 +52,27 @@ declare module '@invoke-ai/invoke-ai-ui' {
   declare class InvokeAiLogoComponent extends React.Component<InvokeAILogoComponentProps> {
     public constructor(props: InvokeAILogoComponentProps);
   }
+
+  declare class IAIPopover extends React.Component<IAIPopoverProps> {
+    public constructor(props: IAIPopoverProps);
+  }
+
+  declare class IAIIconButton extends React.Component<IAIIconButtonProps> {
+    public constructor(props: IAIIconButtonProps);
+  }
+
+  declare class SettingsModal extends React.Component<SettingsModalProps> {
+    public constructor(props: SettingsModalProps);
+  }
 }
 
 declare function Invoke(props: PropsWithChildren): JSX.Element;
 
-export { ThemeChanger, InvokeAiLogoComponent };
+export {
+  ThemeChanger,
+  InvokeAiLogoComponent,
+  IAIPopover,
+  IAIIconButton,
+  SettingsModal,
+};
 export = Invoke;

invokeai/frontend/web/package.json

@@ -6,7 +6,6 @@
     "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky",
     "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
     "build": "yarn run lint && vite build",
-    "build:package": "vite build --mode=package",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",

invokeai/frontend/web/src/common/components/IAIPopover.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react';
 import { memo, ReactNode } from 'react';
 
-type IAIPopoverProps = PopoverProps & {
+export type IAIPopoverProps = PopoverProps & {
   triggerComponent: ReactNode;
   triggerContainerProps?: BoxProps;
   children: ReactNode;

invokeai/frontend/web/src/exports.tsx

@@ -2,6 +2,15 @@ import Component from './component';
 
 import InvokeAiLogoComponent from './features/system/components/InvokeAILogoComponent';
 import ThemeChanger from './features/system/components/ThemeChanger';
+import IAIPopover from './common/components/IAIPopover';
+import IAIIconButton from './common/components/IAIIconButton';
+import SettingsModal from './features/system/components/SettingsModal/SettingsModal';
 
 export default Component;
-export { InvokeAiLogoComponent, ThemeChanger };
+export {
+  InvokeAiLogoComponent,
+  ThemeChanger,
+  IAIPopover,
+  IAIIconButton,
+  SettingsModal,
+};

invokeai/frontend/web/vite.config.ts

@@ -1,4 +1,3 @@
-import path from 'path';
 import react from '@vitejs/plugin-react-swc';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, PluginOption } from 'vite';
@@ -58,26 +57,6 @@ export default defineConfig(({ mode }) => {
         // sourcemap: true, // this can be enabled if needed, it adds ovwer 15MB to the commit
       },
     };
-  } else if (mode === 'package') {
-    return {
-      ...common,
-      build: {
-        ...common.build,
-        lib: {
-          entry: path.resolve(__dirname, 'src/exports.tsx'),
-          name: 'InvokeAI UI',
-          fileName: (format) => `invoke-ai-ui.${format}.js`,
-        },
-        rollupOptions: {
-          external: ['react', 'react-dom'],
-          output: {
-            globals: {
-              react: 'React',
-            },
-          },
-        },
-      },
-    };
   } else {
     return {
       ...common,