From 9a42035b0ccc1abf56c7ebb68718f1ed92112f2a Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 2 Feb 2026 18:56:47 -0700
Subject: [PATCH] Update and resolve storybook issues

---
 .storybook/preview.js       | 10 +++++++---
 stories/Progress.stories.js | 30 +++++++++++++++++-------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index aadfe40..333f813 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,7 @@
 import "../app/globals.css";
 import "./fonts.css";
+import { MessagesProvider } from "../app/contexts/MessagesContext";
+import messages from "../messages/en/index";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -13,9 +15,11 @@ const preview = {
   },
   decorators: [
     (Story) => (
-      <div className="font-inter">
-        <Story />
-      </div>
+      <MessagesProvider messages={messages}>
+        <div className="font-inter">
+          <Story />
+        </div>
+      </MessagesProvider>
     ),
   ],
 };
diff --git a/stories/Progress.stories.js b/stories/Progress.stories.js
index 2e3be3c..2e3ce5c 100644
--- a/stories/Progress.stories.js
+++ b/stories/Progress.stories.js
@@ -39,58 +39,62 @@ export const Default = {
   args: {
     progress: "3-2",
   },
-  render: (args) => <Progress {...args} />,
+  render: (args) => (
+    <div className="w-full max-w-[600px]">
+      <Progress {...args} />
+    </div>
+  ),
 };
 
 export const AllStates = {
   args: {},
   render: (_args) => (
     <div className="space-y-4 w-full max-w-[600px]">
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">1-0</p>
         <Progress {..._args} progress="1-0" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">1-1</p>
         <Progress {..._args} progress="1-1" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">1-2</p>
         <Progress {..._args} progress="1-2" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">1-3</p>
         <Progress {..._args} progress="1-3" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">1-4</p>
         <Progress {..._args} progress="1-4" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">1-5</p>
         <Progress {..._args} progress="1-5" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">2-0</p>
         <Progress {..._args} progress="2-0" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">2-1</p>
         <Progress {..._args} progress="2-1" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">2-2</p>
         <Progress {..._args} progress="2-2" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">3-0</p>
         <Progress {..._args} progress="3-0" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">3-1</p>
         <Progress {..._args} progress="3-1" />
       </div>
-      <div>
+      <div className="w-full">
         <p className="text-white mb-2">3-2</p>
         <Progress {..._args} progress="3-2" />
       </div>