admin管理员组

文章数量:1026088

Storyboard Docs - "Copy Code" and "tags" integrations in custom doc pages

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:

// Button.tsx
export const Button = () => {
    return (
        <button disabled>Click Here</button>
    )
}

My Storybook file looks like this:

// Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react"
import { fn } from "@storybook/test"
import ButtonDisabled from "./buttonDisabled"

const meta = {
    title: "Component Libraries/Buttons/Button Disabled",
    component: ButtonDisabled,
    args: { onClick: fn() },
} satisfies Meta<typeof ButtonDisabled>

export default meta
type Story = StoryObj<typeof meta>

export const buttonDisabled: Story = {
    args: {
        primary: true,
        label: "Button Disabled",
    },
}

I import all the buttons into an object:

// _Buttons.mdx
"use client"
import ButtonDisabled from "./buttonDisabled"
// I assume the next line would be needed, but I don't know how to achieve the copy code button from here...
import buttonDisabled from "./buttonDisabled.stories.tsx"

const ButtonsArray: ButtonArrayType = [
    {
        name: "Button Disabled",
        component: ButtonDisabled,
    },
]

// And then I map over the array into a custom UI...

const Buttons = () => {
    return (
        <>
            ButtonsArray.map((button) => { 
                // You get the idea.
                <>
                    // Where the copy code button would sit
                    {buttonponent()}
                </>
            })
        </>
    )
}

export defualt Button

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!

Storyboard Docs - "Copy Code" and "tags" integrations in custom doc pages

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:

// Button.tsx
export const Button = () => {
    return (
        <button disabled>Click Here</button>
    )
}

My Storybook file looks like this:

// Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react"
import { fn } from "@storybook/test"
import ButtonDisabled from "./buttonDisabled"

const meta = {
    title: "Component Libraries/Buttons/Button Disabled",
    component: ButtonDisabled,
    args: { onClick: fn() },
} satisfies Meta<typeof ButtonDisabled>

export default meta
type Story = StoryObj<typeof meta>

export const buttonDisabled: Story = {
    args: {
        primary: true,
        label: "Button Disabled",
    },
}

I import all the buttons into an object:

// _Buttons.mdx
"use client"
import ButtonDisabled from "./buttonDisabled"
// I assume the next line would be needed, but I don't know how to achieve the copy code button from here...
import buttonDisabled from "./buttonDisabled.stories.tsx"

const ButtonsArray: ButtonArrayType = [
    {
        name: "Button Disabled",
        component: ButtonDisabled,
    },
]

// And then I map over the array into a custom UI...

const Buttons = () => {
    return (
        <>
            ButtonsArray.map((button) => { 
                // You get the idea.
                <>
                    // Where the copy code button would sit
                    {buttonponent()}
                </>
            })
        </>
    )
}

export defualt Button

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!

本文标签：