Migrated Storybook notation from CSF2 to CSF3 (#487)

* Migrate common directory to CSF3 notation

* Migrate InstalledPackages directory to CSF3 notation

* Migrate modal directory to CSF3 notation

* Migrate repository directory to CSF3 notation

* Migrate others components to CSF3 notation

* Fix lint error in repository directory

frontend/src/components/TabsBar.stories.tsx

@@ -1,39 +1,33 @@
-// TabsBar.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import TabsBar from "./TabsBar";
 
-//👇 This default export determines where your story goes in the story list
-export default {
+const meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: "TabsBar",
   component: TabsBar,
-} as ComponentMeta<typeof TabsBar>;
+} satisfies Meta<typeof TabsBar>;
 
-//👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof TabsBar> = (args) => (
-  <TabsBar {...args} />
-);
+export default meta;
 
-export const Default = Template.bind({});
-
-Default.args = {
-  tabs: [
-    {
-      name: "tab1",
-      component: <div className="w-250 h-250 bg-green-400">tab1</div>,
-    },
-    {
-      name: "tab2",
-      component: <div className="w-250 h-250 bg-red-400">tab2</div>,
-    },
-    {
-      name: "tab3",
-      component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
-    },
-  ],
-  activeTab: "tab1",
+export const Default = {
+  args: {
+    tabs: [
+      {
+        name: "tab1",
+        component: <div className="w-250 h-250 bg-green-400">tab1</div>,
+      },
+      {
+        name: "tab2",
+        component: <div className="w-250 h-250 bg-red-400">tab2</div>,
+      },
+      {
+        name: "tab3",
+        component: <div className="w-250 h-250 bg-blue-400">tab3</div>,
+      },
+    ],
+    activeTab: "tab1",
+  },
 };