Closed timthedev07 closed 1 month ago
Hey, @timthedev07, thanks for reporting it. It would require some changes to the library export. Feel free to do it if someone is interested in working on this.
BTW, this is something that we already knew, but good to have it as a reported issue so we can track it.
Ideally, I would expect to have something like:
import Button, { ButtonTheme, ButtonProps } from 'flowbite-react/components/button';
Is this still an issue if you add optimizePackageImports: ["flowbite-react"]
?
import { accordionTheme } from './components/Accordion/theme';
import { alertTheme } from './components/Alert/theme';
import { avatarTheme } from './components/Avatar/theme';
import { badgeTheme } from './components/Badge/theme';
import { blockquoteTheme } from './components/Blockquote/theme';
import { breadcrumbTheme } from './components/Breadcrumb/theme';
import { buttonGroupTheme, buttonTheme } from './components/Button/theme';
import { cardTheme } from './components/Card/theme';
import { carouselTheme } from './components/Carousel/theme';
import { checkboxTheme } from './components/Checkbox/theme';
import { darkThemeToggleTheme } from './components/DarkThemeToggle/theme';
import { datePickerTheme } from './components/Datepicker/theme';
import { dropdownTheme } from './components/Dropdown/theme';
import { fileInputTheme } from './components/FileInput/theme';
import { floatingLabelTheme } from './components/FloatingLabel/theme';
import { footerTheme } from './components/Footer/theme';
import { helperTextTheme } from './components/HelperText/theme';
import { kbdTheme } from './components/Kbd/theme';
import { labelTheme } from './components/Label/theme';
import { listTheme } from './components/List/theme';
import { listGroupTheme } from './components/ListGroup/theme';
import { modalTheme } from './components/Modal/theme';
import { navbarTheme } from './components/Navbar/theme';
import { paginationTheme } from './components/Pagination/theme';
import { progressTheme } from './components/Progress/theme';
import { radioTheme } from './components/Radio/theme';
import { rangeSliderTheme } from './components/RangeSlider/theme';
import { ratingAdvancedTheme, ratingTheme } from './components/Rating/theme';
import { selectTheme } from './components/Select/theme';
import { sidebarTheme } from './components/Sidebar/theme';
import { spinnerTheme } from './components/Spinner/theme';
import { tableTheme } from './components/Table/theme';
import { tabTheme } from './components/Tabs/theme';
import { textInputTheme } from './components/TextInput/theme';
import { textareaTheme } from './components/Textarea/theme';
import { timelineTheme } from './components/Timeline/theme';
import { toastTheme } from './components/Toast/theme';
import { toggleSwitchTheme } from './components/ToggleSwitch/theme';
import { tooltipTheme } from './components/Tooltip/theme';
export const theme = {
accordion: accordionTheme,
alert: alertTheme,
avatar: avatarTheme,
badge: badgeTheme,
blockquote: blockquoteTheme,
breadcrumb: breadcrumbTheme,
button: buttonTheme,
buttonGroup: buttonGroupTheme,
card: cardTheme,
carousel: carouselTheme,
checkbox: checkboxTheme,
datepicker: datePickerTheme,
darkThemeToggle: darkThemeToggleTheme,
dropdown: dropdownTheme,
fileInput: fileInputTheme,
floatingLabel: floatingLabelTheme,
footer: footerTheme,
helperText: helperTextTheme,
kbd: kbdTheme,
label: labelTheme,
listGroup: listGroupTheme,
list: listTheme,
modal: modalTheme,
navbar: navbarTheme,
pagination: paginationTheme,
progress: progressTheme,
radio: radioTheme,
rangeSlider: rangeSliderTheme,
rating: ratingTheme,
ratingAdvanced: ratingAdvancedTheme,
select: selectTheme,
textInput: textInputTheme,
textarea: textareaTheme,
toggleSwitch: toggleSwitchTheme,
sidebar: sidebarTheme,
spinner: spinnerTheme,
table: tableTheme,
tabs: tabTheme,
timeline: timelineTheme,
toast: toastTheme,
tooltip: tooltipTheme,
};
First thing I've noticed is that the theme file might be something to be reviewed, I'm not sure if it is affecting the other components exports, but, definitely would take a look into separating the themes exports/imports into separated files.
I'll try to dig into the cause of the components tree shaking as well.
Glad to share I'm making some progress on it.
Excited to see this coming!
Are you able to build the next.js project with the flowbite-react as dependency? Mine fails... https://github.com/themesberg/flowbite-react/issues/1285 Perhaps some components when used crash it.
Fixed in https://github.com/themesberg/flowbite-react/pull/1264, u can now import components just like @rluders was suggesting earlier, eg:
import { Button, ButtonProps, FlowbiteButtonTheme } from "flowbite-react/components/Button";
Steps to reproduce
Current behavior
All components are imported.
Expected behavior
Only the desired component should show up.
Context