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

@@ -1,35 +1,28 @@
 /* eslint-disable no-console */
-// Status.stories.ts|tsx
+import { Meta } from "@storybook/react";
+import Button from "./Button";
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import Button, { ButtonProps } from "./Button";
-//👇 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: "Button",
   component: Button,
-} as ComponentMeta<typeof Button>;
+} satisfies Meta<typeof Button>;
 
-// Recall that Button has 'props' which is of type ButtonProps
-// We want to past theme to the story with the name 'Default', so we
-// create a template for it.
-// We want to declare default values for the props, so we create a
-// default args object.
-const Template: ComponentStory<typeof Button> = (args: ButtonProps) => (
-  <Button {...args} />
-);
-export const Default = Template.bind({});
-Default.args = {
-  children: (
-    <>
-      <span>&uarr;</span>
-      <span>Update</span>
-    </>
-  ),
-  onClick: () => {
-    console.log("click");
+export default meta;
+
+export const Default = {
+  args: {
+    children: (
+      <>
+        <span>&uarr;</span>
+        <span>Update</span>
+      </>
+    ),
+    onClick: () => {
+      console.log("click");
+    },
   },
 };