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/modal/Modal.stories.tsx

@@ -1,26 +1,23 @@
 /* eslint-disable no-console */
-// Modal.stories.ts|tsx
-
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StoryObj, StoryFn, Meta } from "@storybook/react";
 import Modal, { ModalAction, ModalButtonStyle } from "./Modal";
 
-//👇 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: "Modal",
   component: Modal,
-} as ComponentMeta<typeof Modal>;
+} satisfies Meta<typeof Modal>;
+
+export default meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Modal> = (args) => (
+const Template: StoryFn<typeof Modal> = (args) => (
   <Modal {...args}>Basic text content</Modal>
 );
 
-export const Default = Template.bind({});
-
 const confirmModalActions: ModalAction[] = [
   {
     id: "1",
@@ -39,10 +36,14 @@ const confirmModalActions: ModalAction[] = [
   },
 ];
 
-Default.args = {
-  title: "Basic text title",
-  isOpen: true,
-  actions: confirmModalActions,
+export const Default = {
+  render: Template,
+
+  args: {
+    title: "Basic text title",
+    isOpen: true,
+    actions: confirmModalActions,
+  },
 };
 
 const customModalActions: ModalAction[] = [
@@ -65,52 +66,55 @@ const customModalActions: ModalAction[] = [
   },
 ];
 
-export const CustomModal: ComponentStory<typeof Modal> = (args) => (
-  <Modal {...args}>
-    <div>
-      <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-        Custom Modal Content
-      </p>
-      <button
-        className="bg-cyan-500 p-2"
-        type="button"
-        onClick={() => console.log("just a button")}
-      >
-        Just a button
-      </button>
-    </div>
-  </Modal>
-);
-
-CustomModal.args = {
-  title: (
-    <div>
-      Custom <span className="text-red-500"> Title</span>
-    </div>
+export const CustomModal: StoryObj<typeof Modal> = {
+  render: (args) => (
+    <Modal {...args}>
+      <div>
+        <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          Custom Modal Content
+        </p>
+        <button
+          className="bg-cyan-500 p-2"
+          type="button"
+          onClick={() => console.log("just a button")}
+        >
+          Just a button
+        </button>
+      </div>
+    </Modal>
   ),
-  isOpen: true,
-  actions: customModalActions,
+
+  args: {
+    title: (
+      <div>
+        Custom <span className="text-red-500"> Title</span>
+      </div>
+    ),
+    isOpen: true,
+    actions: customModalActions,
+  },
 };
 
-export const AutoScrollWhenContentIsMoreThan500Height: ComponentStory<
-  typeof Modal
-> = (args) => (
-  <Modal {...args}>
-    <div
-      style={{
-        height: "1000px",
-        width: "50%",
-        backgroundColor: "skyblue",
-      }}
-    >
-      This div height is 1000 px so we can see a vertical scroll to the right of
-      it.
-    </div>
-  </Modal>
-);
+export const AutoScrollWhenContentIsMoreThan500Height: StoryObj<typeof Modal> =
+  {
+    render: (args) => (
+      <Modal {...args}>
+        <div
+          style={{
+            height: "1000px",
+            width: "50%",
+            backgroundColor: "skyblue",
+          }}
+        >
+          This div height is 1000 px so we can see a vertical scroll to the
+          right of it.
+        </div>
+      </Modal>
+    ),
 
-AutoScrollWhenContentIsMoreThan500Height.args = {
-  title: "Auto Scroll when content is more than 500px height",
-  isOpen: true,
-  actions: confirmModalActions,
-};
+    args: {
+      title: "Auto Scroll when content is more than 500px height",
+      isOpen: true,
+      actions: confirmModalActions,
+    },
+  };