Incorrect element name in StoryBook

[Kye-NG]

Tab Element Name Incorrect.

Currently all the Tabs in storybook show Tab as the element name. https://react.daisyui.com/?path=/story/navigation-tabs--lifted

But Tab is not exported by react-daisyui.

The correct element name is Tabs.Tab like below:

Fix

Update storybook to show Tabs.Tab for Tab elements.

This is probably a good "first-fix" kind of ticket.

[benjitrosch]

Hi @Kye-NG, you can accomplish this with destructuring at the top of your file.

e.g.:

import { Tabs } from 'react-daisyui'

const { Tab } = Tabs

export default (props) => {
  return (
    <Tabs>
      <Tab value="one">Tab 1</Tab>
      <Tab value="two">Tab 2</Tab>
    </Tabs>
  )
}

[Kye-NG]

Thanks @benjitrosch Would it be a good idea to note this in StoryBook?

[benjitrosch]

Good question @Kye-NG— it might seem obvious to just include it, but I'm a little conflicted. Would love to hear your thoughts!

The Problem: At the moment, our stories show a preview of the component's code (local state, return value), but not the surrounding code from the .stories file. You can see that the Tab component gets destructured at the top of the file (https://github.com/daisyui/react-daisyui/blob/main/src/Tabs/Tabs.stories.tsx#L6), which means it would not be included in the code preview.

If we move it into the component's code, that would promote bad practices, and I'm concerned people would take that to be the "correct" way to access subcomponents.

Alternatively, we could rewrite all of the Storybook examples to remove destructuring of subcomponents, aka replace Tab with Tabs.Tab, which might be a little uglier/more verbose but would clear up all ambiguity about the component's origin.

[dev0T]

As someone that just started to get familiar with the code base, my opinion is that would be better if it was consistent, so your solution @benjitrosch of rewriting the Storybook examples would be the best.

For example, Stats, Steps and Table are shown in the examples as being accessed without being deconstructed. Select on the other hand is being deconstructed the same way as Tab is.