apps/docs/snippets/story.mdx
export const Story = ({ id, framework = "react", width = "100%", height = "250", hero = false }) => {
const BRANCH = 'experimental';
const STORYBOOKS = {
react: {
localPort: 6006,
productionHost: '5fc05e08a4a65d0021ae0bf2',
},
vue: {
localPort: 6008,
productionHost: '6989440ed560d70abcd6bcc7',
},
vanilla: {
localPort: 6007,
productionHost: '69892d294eb9040f0d29aa81',
},
solid: {
localPort: 6009,
productionHost: '698944444eb9040f0d2a0217',
},
svelte: {
localPort: 6010,
productionHost: '69910d2a631cb57638616dcd',
},
};
const config = STORYBOOKS[framework] ?? STORYBOOKS.react;
const host = typeof window !== 'undefined' && window.location?.hostname === 'localhost' ? //localhost:${config.localPort} : https://${BRANCH}--${config.productionHost}.chromatic.com;
const dark = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
return (
<Frame>
<iframe src={${host}/iframe.html?args=&id=${id}&viewMode=story&dark=${dark}&hero=${hero}} width={width} height={height} />
</Frame>
);
};