chore(OrbitProvider): migrate from CSF2 to CSF3

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

@@ -1,50 +1,68 @@
 import * as React from "react";
 import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Button from "../Button";
 import getTokens from "../getTokens";
 
 import OrbitProvider from ".";
 
-export function OwnTheme({ orbitTheme, customTheme }) {
-  return (
-    <OrbitProvider
-      theme={{ orbit: { ...getTokens(orbitTheme), ...customTheme } }}
-      useId={React.useId}
-    >
-      <Button onClick={action("onClick")}>Hello World!</Button>
-    </OrbitProvider>
-  );
+interface OrbitThemeCustomProps {
+  orbitTheme: {
+    palette: {
+      [key: string]: {
+        [colorName: string]: string;
+      };
+    };
+  };
+  customTheme: {
+    [key: string]: string;
+  };
 }
 
-OwnTheme.story = {
-  name: "Own theme",
+type OrbitProviderPropsAndCustomArgs = React.ComponentProps<typeof OrbitProvider> &
+  OrbitThemeCustomProps;
+
+const meta: Meta<OrbitProviderPropsAndCustomArgs> = {
+  title: "OrbitProvider",
+  component: OrbitProvider,
 
   parameters: {
-    info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
+    info: "Example how OrbitProvider component can be used. Visit Orbit.Kiwi for more detailed guidelines.",
   },
-};
 
-OwnTheme.args = {
-  orbitTheme: {
-    palette: {
-      product: {
-        light: "#ff9999",
-        lightHover: "#ff7f7f",
-        lightActive: "#ff6666",
-        normal: "#ff0000",
-        normalHover: "#e50000",
-        normalActive: "#cc0000",
-        dark: "#990000",
-        darkHover: "#720000",
-        darkActive: "#630000",
-        darker: "#530000",
+  args: {
+    orbitTheme: {
+      palette: {
+        product: {
+          light: "#ff9999",
+          lightHover: "#ff7f7f",
+          lightActive: "#ff6666",
+          normal: "#ff0000",
+          normalHover: "#e50000",
+          normalActive: "#cc0000",
+          dark: "#990000",
+          darkHover: "#720000",
+          darkActive: "#630000",
+          darker: "#530000",
+        },
       },
     },
+    customTheme: { black: "#000" },
   },
-  customTheme: { black: "#000" },
 };
 
-export default {
-  title: "OrbitProvider",
+type Story = StoryObj<OrbitProviderPropsAndCustomArgs>;
+
+export default meta;
+
+export const Default: Story = {
+  render: ({ orbitTheme, customTheme }) => (
+    <OrbitProvider
+      theme={{ orbit: { ...getTokens(orbitTheme), ...customTheme } }}
+      useId={React.useId}
+    >
+      <Button onClick={action("onClick")}>Hello World!</Button>
+    </OrbitProvider>
+  ),
 };