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!
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…