reactjs - How to implement Storybook + Custom Block (Gutenberg)?

Question

I basically need to create a storybook for some parsed HTML blocks. The thing is that some of these components receive the data straight from Redux, not from the props.

For instance:

Screen:

...

return (
    <>
      <PageTransition isLoading={loading} />
      <Main pageBackgroundColor={pageBackgroundColor}>
        {content}
      </Main>
    </>
  );

Parsing:

...
{
      replaceChildren: true,
      shouldProcessNode: (node) => {
        return node?.attribs?.['data-replace'] === 'overview';
      },
      processNode: () => {
        return <Overview />;
      },
    },
...

Component:

export const Overview = () => {
  const { client, brand, overview } = useSelector(state => state.workDetail);
  const brandName = brand || client;
  
  return (
    <section className={styles.overview}>
      <div className={styles.client}>
        <span className={styles.title}>Client / {client}</span>
      </div>
      <div className={styles.content}>
        <div>
        <span className={styles.title}>Brand / {brandName}</span>
        </div>
        <div className={styles['overview-content']}>
          {Parser.parse(overview)}
        </div>
      </div>
    </section>
  );
};

Story:

export default {
    title: "Components/Overview",
    component: Overview,
}

const Template = args => <Overview {...args} />;

export const Default = Template.bind({});
Default.args= {
    overview: "This is a test",
    brand: "Brand here",
    client: "Client name",
}

Default.parameters = {
    fetch: {
        json: {
            overview: ["This is a test"],
            brand: ["Brand here"],
            client: ["Client name"],
        }
    }
}

I've tried to follow the instructions on https://storybook.js.org/docs/react/workflows/build-pages-with-storybook, not sure if I did something wrong, but adding storybook-addon-apollo-client did not work. Also made an attempt with isomorphic-fetch but had no success.

Was one of these two the right way, and I was doing something wrong? Or actually I was following the wrong steps?

Not sure what I'm missing here... thanks for any tip!

Answer 1

等待大神答复