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

@@ -14,31 +14,26 @@
  * @see https://storybook.js.org/docs/react/writing-stories/introduction
  */
 
-import { ComponentStory } from "@storybook/react";
-import Badge, { BadgeProps } from "./Badge";
+import { Meta } from "@storybook/react";
+import Badge from "./Badge";
 
-// We create a generic template for the component.
-
-const Template: ComponentStory<typeof Badge> = (args: BadgeProps) => (
-  <Badge {...args} />
-);
-// We export the story, and we pass the template to it. For now,
-// we are only going to use the default story.
-export const Default = Template.bind({});
-// We set the props for the story. Recall that the props are the same as the
-// ones in BadgeProps, which we impoted.
-Default.args = {
-  type: "success",
-  children: "Success",
-};
 // We set the metadata for the story.
 // Refer to https://storybook.js.org/docs/react/writing-stories/introduction
 // for more information.
-export default {
+const meta = {
   title: "Badge",
   component: Badge,
   args: {
     type: "success",
     children: "Success",
   },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    type: "success",
+    children: "Success",
+  },
 };