Add args and argTypes to context for Storybook compat (#449)

* Add args and argTypes to context for Storybook compat

* fix test

.changeset/five-cooks-shake.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": minor
+---
+
+Add args and argTypes to context for Storybook compat

e2e/decorators/src/legacy-params.stories.tsx

@@ -1,17 +1,30 @@
 import type { StoryDefault, Story } from "@ladle/react";
 
 export default {
+  args: {
+    flag: "czech",
+  },
+  argTypes: {
+    size: {
+      options: ["small", "medium", "big", "huuuuge"],
+      control: { type: "select" }, // or type: multi-select
+    },
+  },
   parameters: {
     one: 1,
     two: 2,
   },
   decorators: [
-    (Stories: React.FC, context) => (
-      <>
-        Decorator {context.parameters.one}
-        <Stories />
-      </>
-    ),
+    (Stories: React.FC, context) => {
+      console.log(context);
+      return (
+        <>
+          Decorator {context.parameters.one}
+          {context.args.flag}
+          <Stories />
+        </>
+      );
+    },
     (Stories: React.FC, context) => (
       <>
         Decorator {context.parameters.two}

e2e/decorators/tests/legacy-params.spec.ts

@@ -4,5 +4,7 @@ test("legacy parameters are passed as a context into decorators", async ({
   page,
 }) => {
   await page.goto("/?story=legacy-params--world");
-  await expect(page.locator("main")).toHaveText("Decorator 5Decorator 1world");
+  await expect(page.locator("main")).toHaveText(
+    "Decorator 5Decorator 1czechworld",
+  );
 });

e2e/decorators/tests/params.spec.ts

@@ -41,8 +41,8 @@ test("meta.json is correctly using defaults and overrides", async ({
         "legacy-params--world": {
           filePath: "src/legacy-params.stories.tsx",
           levels: ["Legacy params"],
-          locEnd: 26,
-          locStart: 24,
+          locEnd: 39,
+          locStart: 37,
           meta: {},
           name: "World",
         },

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "packageManager": "pnpm@8.6.1",
   "scripts": {
-    "lint": "eslint \"./packages/*/{lib,src}/**/*.{ts,tsx}\" --max-warnings=0",
+    "lint": "eslint \"./{packages,e2e}/*/{lib,src,tests}/**/*.{ts,tsx}\" --max-warnings=0",
     "test": "turbo run test --concurrency=1",
     "build": "turbo run build",
     "typecheck": "tsc",

packages/ladle/lib/app/src/compose-enhancers.tsx

@@ -48,9 +48,15 @@ export default function composeEnhancers(module: any, storyName: string) {
     const getBindedDecorator = (i: number) => {
       return React.useRef(() => {
         const context = useLadleContext();
+        const args: { [key: string]: any } = {};
+        Object.keys(context.globalState.control).forEach(
+          (key) => (args[key] = context.globalState.control[key].value),
+        );
         return decorators[i](i === 0 ? WithArgs : getBindedDecorator(i - 1), {
           ...context,
           parameters,
+          argTypes: props.argTypes,
+          args,
         });
       }).current;
     };

packages/ladle/lib/shared/types.ts

@@ -131,6 +131,8 @@ export type StoryProps = {
   dispatch: React.Dispatch<GlobalAction>;
   globalState: GlobalState;
   parameters: { [key: string]: any };
+  args: { [key: string]: any };
+  argTypes: { [key: string]: any };
 };
 
 export type StoryDecorator<P = {}> = (