You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey, I'm new to Storybook. I'm currently displaying an array of components into a custom Docs page UI, but I'm trying to figure out how I can make a copy code snippet button, as well as add custom tags to each component for easier search via Storybook's searchbar. I assume it would be from importing the buttonDisabled.stories.tsx, but Idk what methods Storybook exposes to achieve the results mentioned above. Here's my current setup:
// _Buttons.mdx"use client"importButtonDisabledfrom"./buttonDisabled"// I assume the next line would be needed, but I don't know how to achieve the copy code button from here...importbuttonDisabledfrom"./buttonDisabled.stories.tsx"constButtonsArray: ButtonArrayType=[{name: "Button Disabled",component: ButtonDisabled,},]// And then I map over the array into a custom UI...constButtons=()=>{return(<>ButtonsArray.map((button)=>{// You get the idea.<>{button.component()}</>})</>)}exportdefualtButton
I have a custom Docs file, that imports the standard tsx file itself.
{/* Button_Docs.mdx */}
# This is my Custom Button Docs Page
<Buttons/>
So like I mentioned above, I'm looking to integrate Storybook's Copy Code button into my custom UI, as well as apply "tags" to each component to be able to better search for components. Thank you ahead of time!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
Hey, I'm new to Storybook. I'm currently displaying an array of components into a custom Docs page UI, but I'm trying to figure out how I can make a copy code snippet button, as well as add custom tags to each component for easier search via Storybook's searchbar. I assume it would be from importing the
buttonDisabled.stories.tsx
, but Idk what methods Storybook exposes to achieve the results mentioned above. Here's my current setup:SimpleComponent:
My Storybook file looks like this:
I import all the buttons into an object:
I have a custom Docs file, that imports the standard tsx file itself.
So like I mentioned above, I'm looking to integrate Storybook's
Copy Code
button into my custom UI, as well as apply "tags" to each component to be able to better search for components. Thank you ahead of time!Additional information
Next.js. App router.
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions