fix: warnings/errors in storybook

Author: tobeycodes

apps/docs/.storybook/main.ts

@@ -8,15 +8,13 @@ function getAbsolutePath(value: string): string {
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/experimental-addon-test"),
+    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-storysource"),
     getAbsolutePath("@storybook/addon-designs"),
     getAbsolutePath("@storybook/addon-themes"),
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-queryparams"),
-    getAbsolutePath("@storybook/addon-backgrounds"),
     getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("storybook-dark-mode"),
   ],

apps/docs/package.json

@@ -11,10 +11,8 @@
     "@company/config-tailwind": "workspace:*",
     "@company/config-typescript": "workspace:*",
     "@storybook/addon-a11y": "8.6.4",
-    "@storybook/addon-backgrounds": "8.6.4",
     "@storybook/addon-designs": "8.2.0",
     "@storybook/addon-essentials": "8.6.4",
-    "@storybook/addon-onboarding": "8.6.4",
     "@storybook/addon-queryparams": "7.0.1",
     "@storybook/addon-storysource": "8.6.4",
     "@storybook/addon-themes": "8.6.4",

apps/docs/src/image.stories.ts

@@ -26,5 +26,6 @@ export const Default: Story = {
     },
     width: 350,
     height: 350,
+    priority: true,
   },
 };

apps/docs/vite.config.ts

@@ -4,4 +4,7 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [storybookNextJsPlugin(), tailwindcss()],
+  optimizeDeps: {
+    include: ["sb-original/default-loader", "sb-original/image-context"],
+  },
 });

packages/ui/src/components/hero.tsx

@@ -16,6 +16,6 @@ export const Hero = ({ title, description, link, image }: HeroProps) => (
     <h2>{title}</h2>
     <p>{description}</p>
     <Link {...link} />
-    <Image image={image} width={350} height={350} />
+    <Image image={image} width={350} height={350} priority={true} />
   </div>
 );