componentdriven / csf Goto Github PK

The readme says that installing this package is done as @componentdriven/csf. But the 0.1.0 release was done for @storybook/csf

Hi, I found that I am getting a lot of typescript errors in my app after updating to storybook 6.5.0-alpha.50, and I think it's due to #33 now being included. I'd like to try to understand what I should do to resolve this. cc/ @tmeasday

First, here's how I've been typing my stories. I've taken an approach based on storybookjs/storybook#13747 (comment).

import type { Meta, StoryObj } from '@storybook/react';

export type CSF3<M extends Meta> = M extends {
  component: React.ComponentType<infer Props>;
  args: infer D;
}
  ? // Make the args which weren't in meta required
    { args: Omit<Props, keyof D> } & StoryObj<Props>
  : // If there are no args in the meta, make sure all props are specified in story
  M extends {
      component: React.ComponentType<infer Props>;
    }
  ? { args: Props } & StoryObj<Props>
  : never;

Then, in my story, I use it like so:

import type { CSF3, StoryObj } from '@dn-types/storybook';
import { Label, Input } from '../index';
import { HelpTip } from './HelpTip';

const meta = {
  title: 'Atoms/forms/<HelpTip>',
  component: HelpTip,
};
export default meta;

type Story = CSF3<typeof meta>;

export const WithLabelAndInput: Story = {
  render(args) {
    return (
      <div className="mt-32">
        <Label htmlFor="foo" className="mb-8">
          This is a label
          <HelpTip {...args} />
        </Label>
        <Input id="foo" />
      </div>
    );
  },
  args: {
    children: 'This is helpful text.',
  },
};

That used to work pretty well. The type of args in the story was passed to render, but now those args are just Args which is basically just "an object with anything in it". So <HelpTip {...args} /> fails with Property 'children' is missing in type '{}' but required in type 'Props'.

Is there some other way I should be typing my stories? I've never been completely clear how to get good type coverage in stories, and the approach above was the closest I could get to a sane method, which will error if I do not provide all the needed props either through the default meta object, or the story itself.

Versions of lodash lower than 4.17.21 are being flagged with security vulnerabilities. (see https://snyk.io/vuln/npm:lodash)

Bumping the package's lodash dependency version to 4.17.21 solves this 😄

Hi,

this project doesn't (yet) reflect upcoming changes in Storybook 6.0, at least:

• removal of story object (replaced by hoisting properties directly to the function object)
• args & globalArgs introduction, and the signature of the story becoming (args, context) (by default)

Is the purpose of the next branch to include those ASAP (i.e. PR is welcome), or will they be postponed till 6.0 is out of beta ?

Thanks

I don't see any license declared for this, and no license file. Can one be decided on and added to the repository?

Hi, in my app i want to write stories modules according to CSF but without Storybook.

I want to parse my stories files and get some info:

• title
• parameters
• story names
• story source code
• story parameters
• ...

Currently i use babel parser and just search some basic data.

Is there any official parser for it?

I'm attempting to use BackstopJS to take visual regression tests of stories. In order to do that, I'm trying to get a list of generated Storybook story IDs that I can pass to the preview iframe for visual snapshot testing.

It's not clear from the documentation of these utilities how a story file (CSF) is converted to a list of story IDs. Is there a different Storybook utility that consumes these utilities? What documents the conversion of CSF-to-IDs?

In blog posts, it mentions that MDX compiles down to CSF. But it doesn't say how or how to define MDX features within a CSF.

The use case is that MDX is hard to debug. It doesn't have auto-complete or TypeScript support, and we sometimes get errors that are not easy to reason about. Whereas CSF is usually more straightforward with more logical errors.

However, there doesn't seem to be any clear API / spec for CSF anywhere. This repo points to https://storybook.js.org/docs/react/api/csf and there it says there's an "open standard" which points to this repo. But what is the spec exactly? What are all available exports and the supported object keys? How does one provide documentation in between stories? How does MDX compile / transpile to CSF?

There is a way to have non-story exports in es6 modules, but it's a bit cumbersome. I'm wondering if it would be easier to say that only exports which are functions are stories, and to ignore other exports? There is probably a reason this isn't the case, but it's not clear from the documentation. It even says

With CSF, every named export in the file represents a story function by default.

so it seems like only functions can be stories. It wouldn't be too difficult then to ignore exports where typeof potentialStory !== 'function', right?

So far this is one of the only storybook packages which does not publish ESM files. It would be great if it could, so vite doesn't have to pre-bundle from cjs to esm.

What’s the best approach for programmatically generated stories?

For example, something like this

stories.forEach(story => {
 exports[story.name] = { 
   // story values here
 }
})

I can’t seem to get a solution with module.exports, export default, export const, exports etc.

Note: This pattern is supported by storiesOf.