ArgsFromMeta utility and generic ArgsStoryFn RT #51

kasperpeulen · 2022-10-18T08:48:41Z

What I did:

ArgsFromMeta:

Added ArgsFromMeta type, this a type that can be used to infer the args from Meta that are unrelated to the component. It is used here:

https://github.com/storybookjs/storybook/blob/b42d9456cce20d06097d83f080f52ca65a9ba7b2/code/renderers/react/src/public-types.ts#L38-L59

export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
  render?: ArgsStoryFn<ReactFramework, any>;
  component?: infer Component;
  args?: infer DefaultArgs;
}
  ? Simplify<
      (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
        ArgsFromMeta<ReactFramework, MetaOrCmpOrArgs>
    > extends infer TArgs
    ? StoryAnnotations<
        ReactFramework,
        TArgs,
        SetOptional<TArgs, Extract<keyof TArgs, keyof (DefaultArgs & ActionArgs<TArgs>)>>
      >
    : never
  : MetaOrCmpOrArgs extends ComponentType<any>
  ? StoryAnnotations<
      ReactFramework,
      ComponentProps<MetaOrCmpOrArgs>,
      ComponentProps<MetaOrCmpOrArgs>
    >
  : StoryAnnotations<ReactFramework, MetaOrCmpOrArgs>;

Basically, when StoryObj accepts a meta (StoryObj<typeof meta>), we need to find out the args that are passed to render/loader/decorators, which will be used as the actual args for StoryObj. This is common across the implementation of StoryObj across frameworks, so therefore I put it here.

The inference of the args of the component is framework specific, so has to stay in the renderer code.

Upgraded to tsup
Also upgraded many other dependencies, and added some github workflows.

📦 Published PR as canary version: 0.0.2--canary.51.084d9eb.0

✨ Test out this PR locally via:

npm install @storybook/[email protected]
# or 
yarn add @storybook/[email protected]

IanVS · 2022-10-18T15:29:46Z

package.json

-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.9.0",


IanVS · 2022-10-18T15:32:47Z

tsconfig.json

    "lib": ["es2015", "es2017", "dom"],
-    "module": "commonjs",
+    "moduleResolution": "Node",
+    "module": "ES2022",


The storybook monorepo is still using:

"target": "ES2020", "module": "CommonJS",

This seems like quite a jump. Is this going to impact our chrome 100+ support target?

In the storybook monorepo the tsconfig isn't used to determine the compile target at all

Is it being used in this case? If so, is this the correct target?

It might not matter at all, depending on the source code. but let's play it safe and target 2020?

tomorrow, was a long day 😅

tmeasday

Looks good, although I'm not quite sure what it is for?

tmeasday · 2022-10-18T23:27:16Z

src/story.ts

+export type ArgsFromMeta<TFramework extends AnyFramework, Meta> = Meta extends {
+  render?: ArgsStoryFn<TFramework, infer RArgs>;
+  loaders?: (infer Loaders)[];
+  decorators?: (infer Decorators)[];
+}


Should we have a TS "test" for this? At the very least it would document what it is for :)

Hehe, yeah, good point, I have tests for it in this PR:
https://github.com/storybookjs/storybook/pull/19512/files
But maybe good to put a simple test here as well.

I was not really sure where to put this. I could also have put it somewhere in the monorepo. Because StoryObj will now use Meta(OrArgs) as generic (typeof meta), I will need something like this in the public types of every renderer (we use it now only for react and svelte). But because there is also framework-specific inference (to infer the args of the component or specific stuff for action arg inference) I can not put all of StoryObj in this package.

added a test now

yannbf · 2022-10-19T09:08:47Z

Hey @kasperpeulen this looks good but your PR has no description, would be nice to explain what's the purpose with some small example use cases. This might help anyone that wants to revisit this PR in the future

kasperpeulen · 2022-10-19T10:13:13Z

Hey @kasperpeulen this looks good but your PR has no description, would be nice to explain what's the purpose with some small example use cases. This might help anyone that wants to revisit this PR in the future

@yannbf Added a description and a test to make it a bit more clear hopefully 😅

shilman · 2023-04-03T07:25:34Z

🚀 PR was released in v0.1.0 🚀

ArgsFromMeta utility and generic ArgsStoryFn RT

768ca23

kasperpeulen requested a review from tmeasday October 18, 2022 08:48

use tsup and upgrade dependencies

23af5af

kasperpeulen force-pushed the kasper/csf-3-improvements branch from ceabbe7 to 23af5af Compare October 18, 2022 15:09

kasperpeulen mentioned this pull request Oct 18, 2022

Publish ESM #42

Closed

IanVS reviewed Oct 18, 2022

View reviewed changes

package.json

"@babel/cli": "^7.8.4",

"@babel/core": "^7.9.0",

"@babel/preset-env": "^7.9.5",

"@babel/preset-typescript": "^7.9.0",

Copy link

IanVS Oct 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😍

IanVS reviewed Oct 18, 2022

View reviewed changes

kasperpeulen mentioned this pull request Oct 18, 2022

Svelte: Improve CSF3 types storybookjs/storybook#19512

Merged

ndelangen approved these changes Oct 18, 2022

View reviewed changes

ndelangen assigned kasperpeulen Oct 18, 2022

tmeasday approved these changes Oct 18, 2022

View reviewed changes

add type test for ArgsFromMeta

26e6539

shilman merged commit 084d9eb into kasper/sb-738/csf-3 Oct 22, 2022

shilman deleted the kasper/csf-3-improvements branch October 22, 2022 08:38

shilman added the prerelease label Oct 22, 2022

This was referenced Oct 22, 2022

First attempt at bringing new types over #29

Merged

Add tags annotation at all levels #52

Merged

This was referenced Nov 4, 2022

Rework Framework type to contain canvasElement #53

Merged

Rename Framework to Renderer #54

Merged

Use builtin installation of actions/setup-node #55

Merged

This was referenced Nov 11, 2022

Revert stricter parameters #56

Merged

Add strict variants for Args and Paramters to CSF #57

Merged

Make sure that index signatures (used in decorators) don't cause unexpected types #58

Merged

shilman mentioned this pull request Dec 8, 2022

Fix bug with meta not working well as generic parameter for StoryObj #60

Merged

This was referenced Feb 16, 2023

replace lodash #62

Merged

Improve the startcase implementation to mimick lodash's version more closely #64

Merged

shilman mentioned this pull request Mar 31, 2023

Turn Args interfaces into types when passed to decorators #65

Merged

shilman added released and removed prerelease labels Apr 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ArgsFromMeta utility and generic ArgsStoryFn RT #51

ArgsFromMeta utility and generic ArgsStoryFn RT #51

kasperpeulen commented Oct 18, 2022 •

edited by shilman

Loading

IanVS Oct 18, 2022

IanVS Oct 18, 2022

ndelangen Oct 18, 2022

IanVS Oct 18, 2022

ndelangen Oct 18, 2022

kasperpeulen Oct 18, 2022

kasperpeulen Oct 18, 2022

kasperpeulen Oct 19, 2022

tmeasday left a comment

tmeasday Oct 18, 2022

kasperpeulen Oct 19, 2022

kasperpeulen Oct 19, 2022

yannbf commented Oct 19, 2022

kasperpeulen commented Oct 19, 2022

shilman commented Apr 3, 2023

ArgsFromMeta utility and generic ArgsStoryFn RT #51

ArgsFromMeta utility and generic ArgsStoryFn RT #51

Conversation

kasperpeulen commented Oct 18, 2022 • edited by shilman Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmeasday left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yannbf commented Oct 19, 2022

kasperpeulen commented Oct 19, 2022

shilman commented Apr 3, 2023

kasperpeulen commented Oct 18, 2022 •

edited by shilman

Loading