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

@@ -1,40 +1,42 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { Button } from "./Button";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+const meta = {
   title: "Example/Button",
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: "color" },
   },
-} as ComponentMeta<typeof Button>;
+} satisfies Meta<typeof Button>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export default meta;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: "Button",
+export const Primary = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: "Button",
+export const Secondary = {
+  args: {
+    label: "Button",
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: "large",
-  label: "Button",
+export const Large = {
+  args: {
+    size: "large",
+    label: "Button",
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: "small",
-  label: "Button",
+export const Small = {
+  args: {
+    size: "small",
+    label: "Button",
+  },
 };