RSC - patches (#1075)

* fix: add `'use client'` to `Banner.CollapseButton` due to having event handlers * fix: add `'use client'` to `Sidebar` due to having context * fix: add `'use client'` to `SidebarItemGroup` due to having context * fix: add support for individual import since compound components do not work in server components * fix: tests + imports of deprecated `Tabs.Group` compound component; update docs --------- Co-authored-by: Sebastian Sutu <[email protected]>
themesberg · Oct 19, 2023 · 2e1202c · 2e1202c · vercel · Oct 19, 2023
1 parent cac6148
commit 2e1202c
Show file tree

Hide file tree

Showing 17 changed files with 82 additions and 70 deletions.
diff --git a/app/docs/components/tabs/tabs.mdx b/app/docs/components/tabs/tabs.mdx
@@ -20,7 +20,7 @@ import { Tabs } from 'flowbite-react';
 
 ## Default tabs
 
-Add the `<Tabs.Item>` child component to the `<Tabs.Group>` component to create a tab item and you can add any type of markup and React components inside of it and it will be shown when clicking on the associated tab item.
+Add the `<Tabs.Item>` child component to the `<Tabs>` component to create a tab item and you can add any type of markup and React components inside of it and it will be shown when clicking on the associated tab item.
 
 You can also choose to add the `active` prop to the `<Tabs.Item>` component to make it active by default and set the title of the tab item using the `title` prop.
 
@@ -33,7 +33,7 @@ import { MdDashboard } from 'react-icons/md';"
   importFlowbiteReact="Tabs"
   title="Default tabs"
 >
-  <Tabs.Group aria-label="Default tabs" style="default">
+  <Tabs aria-label="Default tabs" style="default">
     <Tabs.Item active title="Profile" icon={HiUserCircle}>
       This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
       Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -57,12 +57,12 @@ import { MdDashboard } from 'react-icons/md';"
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 </CodePreview>
 
 ## Tabs with underline
 
-Pass the `style="underline"` prop to the `<Tabs.Group>` component to make the tabs have an underline style.
+Pass the `style="underline"` prop to the `<Tabs>` component to make the tabs have an underline style.
 
 <CodePreview
   githubPage="Tab/Tabs"
@@ -71,7 +71,7 @@ import { MdDashboard } from 'react-icons/md';"
   importFlowbiteReact="Tabs"
   title="Tabs with underline"
 >
-  <Tabs.Group aria-label="Tabs with underline" style="underline">
+  <Tabs aria-label="Tabs with underline" style="underline">
     <Tabs.Item active title="Profile" icon={HiUserCircle}>
       This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
       Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -95,7 +95,7 @@ import { MdDashboard } from 'react-icons/md';"
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 </CodePreview>
 
 ## Tabs with icons
@@ -109,7 +109,7 @@ import { MdDashboard } from 'react-icons/md';"
   importFlowbiteReact="Tabs"
   title="Tabs with icons"
 >
-  <Tabs.Group aria-label="Tabs with icons" style="underline">
+  <Tabs aria-label="Tabs with icons" style="underline">
     <Tabs.Item active title="Profile" icon={HiUserCircle}>
       This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
       Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -133,15 +133,15 @@ import { MdDashboard } from 'react-icons/md';"
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 </CodePreview>
 
 ## Tabs with pills
 
-Add the `style="pills"` prop to the `<Tabs.Group>` component to make the tabs have a pills style with rounded corners as an alternative style.
+Add the `style="pills"` prop to the `<Tabs>` component to make the tabs have a pills style with rounded corners as an alternative style.
 
 <CodePreview githubPage="Tab/Tabs" importFlowbiteReact="Tabs" title="Pills tabs">
-  <Tabs.Group aria-label="Pills" style="pills">
+  <Tabs aria-label="Pills" style="pills">
     <Tabs.Item active title="Tab 1">
       <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
     </Tabs.Item>
@@ -157,12 +157,12 @@ Add the `style="pills"` prop to the `<Tabs.Group>` component to make the tabs ha
     <Tabs.Item disabled title="Tab 5">
       <p className="text-sm text-gray-500 dark:text-gray-400">Content 5</p>
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 </CodePreview>
 
 ## Full width tabs
 
-Make the tabs span the full width of their container, pass the `style="fullWidth"` prop to the `<Tabs.Group>`
+Make the tabs span the full width of their container, pass the `style="fullWidth"` prop to the `<Tabs>`
 
 <CodePreview
   githubPage="Tab/Tabs"
@@ -171,7 +171,7 @@ import { MdDashboard } from 'react-icons/md';"
   importFlowbiteReact="Tabs"
   title="Full width tabs"
 >
-  <Tabs.Group aria-label="Full width tabs" style="fullWidth">
+  <Tabs aria-label="Full width tabs" style="fullWidth">
     <Tabs.Item active title="Profile" icon={HiUserCircle}>
       This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
       Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -195,15 +195,15 @@ import { MdDashboard } from 'react-icons/md';"
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 </CodePreview>
 
 ## React state options
 
 Here's an example on how you can set the activate tab programatically using the React state variables and functions of `activateTab` and `setActivateTab`.
 
 <CodePreview
-  code={`<Tabs.Group
+  code={`<Tabs
   aria-label="Default tabs"
   style="default"
   ref={props.tabsRef}
@@ -232,7 +232,7 @@ Here's an example on how you can set the activate tab programatically using the
   <Tabs.Item disabled title="Disabled">
     Disabled content
   </Tabs.Item>
-</Tabs.Group>
+</Tabs>
 <div className="pb-4 pt-2 text-sm text-gray-500 dark:text-gray-400">Active tab: {props.activeTab}</div>
 <Button.Group>
   <Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(0)}>
@@ -259,7 +259,7 @@ import { MdDashboard } from 'react-icons/md';"
   importFlowbiteReact="Button, Tabs, type TabsRef"
   title="Set active tab programmatically"
 >
-  <Tabs.Group
+  <Tabs
     aria-label="Default tabs"
     style="default"
     ref={props.tabsRef}
@@ -288,7 +288,7 @@ import { MdDashboard } from 'react-icons/md';"
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
   <div className="pb-4 pt-2 text-sm text-gray-500 dark:text-gray-400">Active tab: {props.activeTab}</div>
   <Button.Group>
     <Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(0)}>

diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts
@@ -1,3 +1,4 @@
 export * from './Accordion';
-export type { AccordionPanelProps } from './AccordionPanel';
-export type { AccordionTitleProps } from './AccordionTitle';
+export * from './AccordionContent';
+export * from './AccordionPanel';
+export * from './AccordionTitle';
diff --git a/src/components/Banner/BannerCollapseButton.tsx b/src/components/Banner/BannerCollapseButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { FC, MouseEventHandler } from 'react';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';

diff --git a/src/components/Datepicker/index.ts b/src/components/Datepicker/index.ts
@@ -1,4 +1,2 @@
-import { WeekStart } from './helpers';
-
 export * from './Datepicker';
-export { WeekStart };
+export { WeekStart } from './helpers';
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
@@ -1,2 +1,4 @@
 export * from './Dropdown';
-export type { DropdownItemProps } from './DropdownItem';
+export * from './DropdownDivider';
+export * from './DropdownHeader';
+export * from './DropdownItem';
diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts
@@ -1,5 +1,5 @@
 export * from './Navbar';
-export type { NavbarBrandProps } from './NavbarBrand';
-export type { NavbarCollapseProps } from './NavbarCollapse';
-export type { NavbarLinkProps } from './NavbarLink';
-export type { NavbarToggleProps } from './NavbarToggle';
+export * from './NavbarBrand';
+export * from './NavbarCollapse';
+export * from './NavbarLink';
+export * from './NavbarToggle';
diff --git a/src/components/Rating/index.ts b/src/components/Rating/index.ts
@@ -1,3 +1,3 @@
 export * from './Rating';
-export type { RatingAdvancedProps } from './RatingAdvanced';
-export type { RatingStarProps } from './RatingStar';
+export * from './RatingAdvanced';
+export * from './RatingStar';
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';

diff --git a/src/components/Sidebar/SidebarItemGroup.tsx b/src/components/Sidebar/SidebarItemGroup.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { getTheme } from '../../theme-store';

diff --git a/src/components/Sidebar/index.ts b/src/components/Sidebar/index.ts
@@ -1,5 +1,7 @@
 export * from './Sidebar';
-export type { SidebarCTAProps } from './SidebarCTA';
-export type { SidebarCollapseProps } from './SidebarCollapse';
-export type { SidebarItemProps } from './SidebarItem';
-export type { SidebarLogoProps } from './SidebarLogo';
+export * from './SidebarCTA';
+export * from './SidebarCollapse';
+export * from './SidebarItem';
+export * from './SidebarItemGroup';
+export * from './SidebarItems';
+export * from './SidebarLogo';
diff --git a/src/components/Tab/Tabs.spec.tsx b/src/components/Tab/Tabs.spec.tsx
@@ -155,7 +155,7 @@ interface TestTabsProps {
 
 // eslint-disable-next-line react/display-name
 const TestTabs = forwardRef<TabsRef, TestTabsProps>(({ onActiveTabChange }, ref) => (
-  <Tabs.Group aria-label="Test tabs" onActiveTabChange={onActiveTabChange} ref={ref}>
+  <Tabs aria-label="Test tabs" onActiveTabChange={onActiveTabChange} ref={ref}>
     <Tabs.Item title="Profile" icon={HiUserCircle}>
       Profile content
     </Tabs.Item>
@@ -171,22 +171,22 @@ const TestTabs = forwardRef<TabsRef, TestTabsProps>(({ onActiveTabChange }, ref)
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 ));
 
 // eslint-disable-next-line react/display-name
 const TestConditionalTabs = forwardRef<TabsRef, TestTabsProps>(({ condition }) => (
-  <Tabs.Group aria-label="Test tabs">
+  <Tabs aria-label="Test tabs">
     {condition && (
       <Tabs.Item title="Profile" icon={HiUserCircle}>
         Profile content
       </Tabs.Item>
     )}
-  </Tabs.Group>
+  </Tabs>
 ));
 
 const TestTabsDifferentActiveItem: FC = () => (
-  <Tabs.Group aria-label="Test tabs">
+  <Tabs aria-label="Test tabs">
     <Tabs.Item title="Profile" icon={HiUserCircle}>
       Profile content
     </Tabs.Item>
@@ -202,11 +202,11 @@ const TestTabsDifferentActiveItem: FC = () => (
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 
 const TestTabsLastActiveItem: FC = () => (
-  <Tabs.Group aria-label="Test tabs">
+  <Tabs aria-label="Test tabs">
     <Tabs.Item title="Profile" icon={HiUserCircle}>
       Profile content
     </Tabs.Item>
@@ -222,7 +222,7 @@ const TestTabsLastActiveItem: FC = () => (
     <Tabs.Item active title="Still working">
       Completely functional content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 
 const tabs = () => screen.queryAllByRole('tab');

diff --git a/src/components/Tab/Tabs.stories.tsx b/src/components/Tab/Tabs.stories.tsx
@@ -2,11 +2,11 @@ import type { Meta } from '@storybook/react';
 import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
 import { MdDashboard } from 'react-icons/md';
 import type { TabsProps } from './Tabs';
-import { Tabs, TabsComponent } from './Tabs';
+import { Tabs } from './Tabs';
 
 export default {
   title: 'Components/Tabs',
-  component: TabsComponent,
+  component: Tabs,
   args: {
     className: 'bg-white rounded-lg dark:bg-gray-800 dark:text-white',
   },
@@ -22,35 +22,35 @@ export default {
 } as Meta;
 
 export const Default = (args: TabsProps): JSX.Element => (
-  <Tabs.Group {...args}>
+  <Tabs {...args}>
     <Tabs.Item title="Profile">Profile content</Tabs.Item>
     <Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
     <Tabs.Item title="Settings">Settings content</Tabs.Item>
     <Tabs.Item title="Contacts">Contacts content</Tabs.Item>
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 
 export const WithUnderline = (args: TabsProps): JSX.Element => (
-  <Tabs.Group {...args}>
+  <Tabs {...args}>
     <Tabs.Item title="Profile">Profile content</Tabs.Item>
     <Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
     <Tabs.Item title="Settings">Settings content</Tabs.Item>
     <Tabs.Item title="Contacts">Contacts content</Tabs.Item>
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 WithUnderline.args = {
   style: 'underline',
 };
 WithUnderline.storyName = 'With underline';
 
 export const WithIcons = (args: TabsProps): JSX.Element => (
-  <Tabs.Group {...args}>
+  <Tabs {...args}>
     <Tabs.Item title="Profile" icon={HiUserCircle}>
       Profile content
     </Tabs.Item>
@@ -66,38 +66,38 @@ export const WithIcons = (args: TabsProps): JSX.Element => (
     <Tabs.Item disabled={true} title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 WithIcons.args = {
   style: 'underline',
 };
 WithIcons.storyName = 'With icons';
 
 export const Pills = (args: TabsProps): JSX.Element => (
-  <Tabs.Group {...args}>
+  <Tabs {...args}>
     <Tabs.Item title="Profile">Profile content</Tabs.Item>
     <Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
     <Tabs.Item title="Settings">Settings content</Tabs.Item>
     <Tabs.Item title="Contacts">Contacts content</Tabs.Item>
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 Pills.args = {
   style: 'pills',
 };
 
 export const FullWidth = (args: TabsProps): JSX.Element => (
-  <Tabs.Group {...args}>
+  <Tabs {...args}>
     <Tabs.Item title="Profile">Profile content</Tabs.Item>
     <Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
     <Tabs.Item title="Settings">Settings content</Tabs.Item>
     <Tabs.Item title="Contacts">Contacts content</Tabs.Item>
     <Tabs.Item disabled title="Disabled">
       Disabled content
     </Tabs.Item>
-  </Tabs.Group>
+  </Tabs>
 );
 FullWidth.args = {
   style: 'fullWidth',

diff --git a/src/components/Tab/Tabs.tsx b/src/components/Tab/Tabs.tsx
@@ -64,7 +64,7 @@ export interface TabsRef {
   setActiveTab: (activeTab: number) => void;
 }
 
-export const TabsComponent = forwardRef<TabsRef, TabsProps>(
+const TabsComponent = forwardRef<TabsRef, TabsProps>(
   (
     { children, className, onActiveTabChange, style = 'default', theme: customTheme = {}, ...props },
     ref: ForwardedRef<TabsRef>,
@@ -179,5 +179,8 @@ export const TabsComponent = forwardRef<TabsRef, TabsProps>(
   },
 );
 
-TabsComponent.displayName = 'Tabs.Group';
-export const Tabs = { Group: TabsComponent, Item: TabItem };
+TabsComponent.displayName = 'Tabs';
+
+export const Tabs = Object.assign(TabsComponent, {
+  Item: TabItem,
+});
diff --git a/src/components/Tab/index.ts b/src/components/Tab/index.ts
@@ -1,2 +1,2 @@
-export type { TabItemProps } from './TabItem';
+export * from './TabItem';
 export * from './Tabs';