chore: replace deprecated addon-knobs with addon-controls

packages/orbit-components/.storybook/preview.tsx

@@ -6,7 +6,7 @@ import {
   Subtitle,
   Description,
   Primary,
-  // Controls,
+  Controls,
   // Story,
   Stories,
   // Source,
@@ -49,12 +49,9 @@ const preview: Preview = {
           <Title />
           <Description />
           <Subtitle />
-          {/* <Story /> */}
-          {/* <Controls /> */}
           <Primary />
-          {/* <Source /> */}
-          <Stories />
-          {/* <Controls /> */}
+          <Controls />
+          <Stories includePrimary={false} />
         </>
       ),
       // source: {

packages/orbit-components/src/AirportIllustration/AirportIllustration.stories.tsx

@@ -1,36 +1,67 @@
-import React from "react";
-import { select, text } from "@storybook/addon-knobs";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import { NAMES } from "./consts.mts";
 import { SIZE_OPTIONS } from "../primitives/IllustrationPrimitive";
 import { SPACINGS_AFTER } from "../common/consts";
-import type { Name } from "./types";
 
 import AirportIllustration from ".";
 
-export default {
+const meta: Meta<typeof AirportIllustration> = {
   title: "AirportIllustration",
+  component: AirportIllustration,
+  parameters: {
+    componentSubtitle: "Explore our new set of Airport illustrations for Kiwi.com.",
+  },
 };
 
-export const Playground = () => {
-  const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.MEDIUM);
-  const name = select("Name", NAMES, "BGYFastTrack") as Name;
-  const dataTest = text("dataTest", "test");
-  const alt = text("alt", "null");
-  const spaceAfter = select("spaceAfter", Object.values(SPACINGS_AFTER), SPACINGS_AFTER.SMALL);
-  return (
-    <AirportIllustration
-      size={size}
-      name={name}
-      dataTest={dataTest}
-      spaceAfter={spaceAfter}
-      alt={alt}
-    />
-  );
-};
+export default meta;
+type Story = StoryObj<typeof AirportIllustration>;
 
-Playground.story = {
-  parameters: {
-    info: "Explore our new set of Airportillustrations for Kiwi.com.",
+export const Playground: Story = {
+  args: {
+    size: SIZE_OPTIONS.MEDIUM,
+    name: "BGYFastTrack",
+    dataTest: "test",
+    alt: "null",
+    spaceAfter: SPACINGS_AFTER.SMALL,
+  },
+  argTypes: {
+    size: {
+      name: "size",
+      options: Object.values(SIZE_OPTIONS),
+      control: {
+        type: "select",
+      },
+      table: {
+        defaultValue: { summary: "medium" },
+        type: { summary: "string" },
+      },
+    },
+    name: {
+      name: "name",
+      options: NAMES,
+      control: {
+        type: "select",
+      },
+    },
+    dataTest: {
+      name: "dataTest",
+      control: {
+        type: "text",
+      },
+    },
+    alt: {
+      name: "alt",
+      control: {
+        type: "text",
+      },
+    },
+    spaceAfter: {
+      name: "spaceAfter",
+      options: Object.values(SPACINGS_AFTER),
+      control: {
+        type: "select",
+      },
+    },
   },
 };