chore: rename Sidebar exports

packages/fuselage/src/components/SidebarV2/Sidebar.stories.tsx

@@ -2,28 +2,28 @@ import { action } from '@storybook/addon-actions';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import {
-  Sidebar,
-  SidebarAccordion,
-  SidebarAccordionItem,
-  SidebarBanner,
-  SidebarCollapseGroup,
-  SidebarFooterContent,
-  SidebarItemAction,
-  SidebarLink,
-  SidebarItemBadge,
-  SidebarMedia,
-  SidebarMediaTitle,
-  SidebarMediaController,
-  SidebarListItem,
-  SidebarSection,
-  SidebarFooter,
+  SidebarV2 as Sidebar,
+  SidebarV2Accordion as SidebarAccordion,
+  SidebarV2AccordionItem as SidebarAccordionItem,
+  SidebarV2Banner as SidebarBanner,
+  SidebarV2CollapseGroup as SidebarCollapseGroup,
+  SidebarV2FooterContent as SidebarFooterContent,
+  SidebarV2ItemAction as SidebarItemAction,
+  SidebarV2Link as SidebarLink,
+  SidebarV2ItemBadge as SidebarItemBadge,
+  SidebarV2Media as SidebarMedia,
+  SidebarV2MediaTitle as SidebarMediaTitle,
+  SidebarV2MediaController as SidebarMediaController,
+  SidebarV2ListItem as SidebarListItem,
+  SidebarV2Section as SidebarSection,
+  SidebarV2Footer as SidebarFooter,
 } from '.';
 import { IconButton, TextInput, Icon, Box } from '../..';
 import { Condensed } from './SidebarItem/SidebarItem.stories';
 import { GenericNoAvatarItem, MenuTemplate } from './helpers';
 
 export default {
-  title: 'Navigation/Sidebar',
+  title: 'Navigation/SidebarV2',
   component: Sidebar,
 } as Meta<typeof Sidebar>;
 

packages/fuselage/src/components/SidebarV2/SidebarFooter/index.ts

@@ -1,2 +1,2 @@
-export * as SidebarV2Footer from './SidebarFooter';
-export * as SidebarV2FooterContent from './SidebarFooterContent';
+export { SidebarFooter as SidebarV2Footer } from './SidebarFooter';
+export { SidebarFooterContent as SidebarV2FooterContent } from './SidebarFooterContent';

packages/fuselage/src/components/SidebarV2/SidebarItem/SidebarItem.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { SidebarListItem } from '../..';
+import { SidebarV2ListItem as SidebarListItem } from '../..';
 import {
   GenericCondensedItem,
   GenericExtendedItem,
@@ -9,7 +9,7 @@ import {
 } from '../helpers';
 
 export default {
-  title: 'Navigation/Sidebar/Item',
+  title: 'Navigation/SidebarV2/Item',
   component: SidebarListItem,
   decorators,
 } satisfies Meta<typeof SidebarListItem>;

packages/fuselage/src/components/SidebarV2/SidebarItem/index.ts

@@ -1,13 +1,13 @@
-export * as SidebarV2Item from './SidebarItem';
-export * as SidebarV2ItemAction from './SidebarItemAction';
-export * as SidebarV2ItemAvatarWrapper from './SidebarItemAvatarWrapper';
-export * as SidebarV2ItemBadge from './SidebarItemBadge';
-export * as SidebarV2ItemIcon from './SidebarItemIcon';
-export * as SidebarV2ItemMenu from './SidebarItemMenu';
-export * as SidebarV2ItemTitle from './SidebarItemTitle';
-export * as SidebarV2ItemRow from './SidebarItemRow';
-export * as SidebarV2ItemCol from './SidebarItemCol';
-export * as SidebarV2ItemTimestamp from './SidebarItemTimestamp';
-export * as SidebarV2ListItem from './SidebarListItem';
-export * as SidebarV2ItemContent from './SidebarItemContent';
-export * as SidebarV2ItemStatusBullet from './SidebarItemStatusBullet';
+export { SidebarItem as SidebarV2Item } from './SidebarItem';
+export { SidebarItemAction as SidebarV2ItemAction } from './SidebarItemAction';
+export { SidebarItemAvatarWrapper as SidebarV2ItemAvatarWrapper } from './SidebarItemAvatarWrapper';
+export { SidebarItemBadge as SidebarV2ItemBadge } from './SidebarItemBadge';
+export { SidebarItemIcon as SidebarV2ItemIcon } from './SidebarItemIcon';
+export { SidebarItemMenu as SidebarV2ItemMenu } from './SidebarItemMenu';
+export { SidebarItemTitle as SidebarV2ItemTitle } from './SidebarItemTitle';
+export { SidebarItemRow as SidebarV2ItemRow } from './SidebarItemRow';
+export { SidebarItemCol as SidebarV2ItemCol } from './SidebarItemCol';
+export { SidebarItemTimestamp as SidebarV2ItemTimestamp } from './SidebarItemTimestamp';
+export { SidebarListItem as SidebarV2ListItem } from './SidebarListItem';
+export { SidebarItemContent as SidebarV2ItemContent } from './SidebarItemContent';
+export { SidebarItemStatusBullet as SidebarV2ItemStatusBullet } from './SidebarItemStatusBullet';

packages/fuselage/src/components/SidebarV2/SidebarMedia/SidebarMedia.stories.tsx

@@ -1,17 +1,17 @@
 import type { StoryFn, Meta } from '@storybook/react';
 
 import {
-  Sidebar,
-  SidebarMedia,
-  SidebarMediaTitle,
-  SidebarMediaController,
+  SidebarV2 as Sidebar,
+  SidebarV2Media as SidebarMedia,
+  SidebarV2MediaTitle as SidebarMediaTitle,
+  SidebarV2MediaController as SidebarMediaController,
   Box,
   IconButton,
 } from '../..';
 import { GenericCallItem } from '../helpers';
 
 export default {
-  title: 'Navigation/Sidebar/Media',
+  title: 'Navigation/SidebarV2/Media',
   component: Sidebar,
 } satisfies Meta<typeof Sidebar>;
 

packages/fuselage/src/components/SidebarV2/SidebarMedia/index.ts

@@ -1,3 +1,3 @@
-export * as SidebarV2Media from './SidebarMedia';
-export * as SidebarV2MediaController from './SidebarMediaController';
-export * as SidebarV2MediaTitle from './SidebarMediaTitle';
+export { SidebarMedia as SidebarV2Media } from './SidebarMedia';
+export { SidebarMediaController as SidebarV2MediaController } from './SidebarMediaController';
+export { SidebarMediaTitle as SidebarV2MediaTitle } from './SidebarMediaTitle';

packages/fuselage/src/components/SidebarV2/helpers.tsx

@@ -2,26 +2,26 @@ import type { Decorator } from '@storybook/react';
 import type { ComponentProps, ReactElement } from 'react';
 
 import {
-  Sidebar,
-  SidebarAccordion,
-  SidebarAccordionItem,
-  SidebarActions,
-  SidebarButtonGroup,
-  SidebarCollapseGroup,
-  SidebarFooter,
-  SidebarFooterContent,
-  SidebarItem,
-  SidebarItemAvatarWrapper,
-  SidebarItemBadge,
-  SidebarItemCol,
-  SidebarItemContent,
-  SidebarItemIcon,
-  SidebarItemMenu,
-  SidebarItemRow,
-  SidebarItemStatusBullet,
-  SidebarItemTimestamp,
-  SidebarItemTitle,
-  SidebarListItem,
+  SidebarV2,
+  SidebarV2Accordion,
+  SidebarV2AccordionItem,
+  SidebarV2Actions,
+  SidebarV2ButtonGroup,
+  SidebarV2CollapseGroup,
+  SidebarV2Footer,
+  SidebarV2FooterContent,
+  SidebarV2Item,
+  SidebarV2ItemAvatarWrapper,
+  SidebarV2ItemBadge,
+  SidebarV2ItemCol,
+  SidebarV2ItemContent,
+  SidebarV2ItemIcon,
+  SidebarV2ItemMenu,
+  SidebarV2ItemRow,
+  SidebarV2ItemStatusBullet,
+  SidebarV2ItemTimestamp,
+  SidebarV2ItemTitle,
+  SidebarV2ListItem,
 } from '.';
 import { Avatar, Box, IconButton, MenuV2 as Menu, MenuItem } from '../..';
 
@@ -54,21 +54,23 @@ export const MenuTemplate = () => (
 );
 
 export const GenericCondensedItem = ({ i = 0 }: { i: number }) => (
-  <SidebarListItem>
-    <SidebarItem selected={i === 2} href='#'>
-      <SidebarItemAvatarWrapper>
+  <SidebarV2ListItem>
+    <SidebarV2Item selected={i === 2} href='#'>
+      <SidebarV2ItemAvatarWrapper>
         <Avatar size='x20' url={leterAvatarUrls[i % 4]} alt='avatar' />
-      </SidebarItemAvatarWrapper>
-      <SidebarItemIcon highlighted={i % 2 !== 0} icon='balloons' />
-      <SidebarItemTitle unread={i % 2 !== 0}>{names[i % 10]}</SidebarItemTitle>
+      </SidebarV2ItemAvatarWrapper>
+      <SidebarV2ItemIcon highlighted={i % 2 !== 0} icon='balloons' />
+      <SidebarV2ItemTitle unread={i % 2 !== 0}>
+        {names[i % 10]}
+      </SidebarV2ItemTitle>
       {i % 2 !== 0 && (
-        <SidebarItemBadge
+        <SidebarV2ItemBadge
           title='unread messages'
           children={Math.floor(Math.random() * 10) + 1}
         />
       )}
       {i === 0 && (
-        <SidebarActions>
+        <SidebarV2Actions>
           <IconButton aria-label='phone' tiny secondary success icon='phone' />
           <IconButton
             aria-label='phone-off'
@@ -77,87 +79,87 @@ export const GenericCondensedItem = ({ i = 0 }: { i: number }) => (
             danger
             icon='phone-off'
           />
-        </SidebarActions>
+        </SidebarV2Actions>
       )}
-      <SidebarItemMenu children={<MenuTemplate />} />
-    </SidebarItem>
-  </SidebarListItem>
+      <SidebarV2ItemMenu children={<MenuTemplate />} />
+    </SidebarV2Item>
+  </SidebarV2ListItem>
 );
 
 export const GenericNoAvatarItem = ({ i = 0 }: { i: number }) => (
-  <SidebarListItem>
-    <SidebarItem href='#'>
-      <SidebarItemStatusBullet status='online' />
-      <SidebarItemTitle>{names[i % 10]}</SidebarItemTitle>
-      <SidebarItemBadge
+  <SidebarV2ListItem>
+    <SidebarV2Item href='#'>
+      <SidebarV2ItemStatusBullet status='online' />
+      <SidebarV2ItemTitle>{names[i % 10]}</SidebarV2ItemTitle>
+      <SidebarV2ItemBadge
         title='unread messages'
         children={Math.floor(Math.random() * 10) + 1}
       />
-      <SidebarItemMenu children={<MenuTemplate />} />
-    </SidebarItem>
-  </SidebarListItem>
+      <SidebarV2ItemMenu children={<MenuTemplate />} />
+    </SidebarV2Item>
+  </SidebarV2ListItem>
 );
 
 export const GenericMediumItem = ({ i = 0 }: { i: number }) => (
-  <SidebarListItem>
-    <SidebarItem href='#'>
-      <SidebarItemAvatarWrapper>
+  <SidebarV2ListItem>
+    <SidebarV2Item href='#'>
+      <SidebarV2ItemAvatarWrapper>
         <Avatar size='x28' url={leterAvatarUrls[i % 4]} alt='avatar' />
-      </SidebarItemAvatarWrapper>
-      <SidebarItemIcon icon='team' />
-      <SidebarItemTitle>{names[i % 10]}</SidebarItemTitle>
-      <SidebarItemBadge
+      </SidebarV2ItemAvatarWrapper>
+      <SidebarV2ItemIcon icon='team' />
+      <SidebarV2ItemTitle>{names[i % 10]}</SidebarV2ItemTitle>
+      <SidebarV2ItemBadge
         title='unread messages'
         children={Math.floor(Math.random() * 10) + 1}
       />
-      <SidebarItemMenu children={<MenuTemplate />} />
-    </SidebarItem>
-  </SidebarListItem>
+      <SidebarV2ItemMenu children={<MenuTemplate />} />
+    </SidebarV2Item>
+  </SidebarV2ListItem>
 );
 
 export const GenericExtendedItem = ({ i = 0 }: { i: number }) => (
-  <SidebarListItem>
-    <SidebarItem href='#'>
-      <SidebarItemAvatarWrapper>
+  <SidebarV2ListItem>
+    <SidebarV2Item href='#'>
+      <SidebarV2ItemAvatarWrapper>
         <Avatar size='x36' url={leterAvatarUrls[i % 4]} alt='avatar' />
-      </SidebarItemAvatarWrapper>
+      </SidebarV2ItemAvatarWrapper>
 
-      <SidebarItemCol>
-        <SidebarItemRow>
-          <SidebarItemIcon icon='team' />
-          <SidebarItemTitle>{names[i % 10]}</SidebarItemTitle>
-          <SidebarItemTimestamp>12:00</SidebarItemTimestamp>
-        </SidebarItemRow>
+      <SidebarV2ItemCol>
+        <SidebarV2ItemRow>
+          <SidebarV2ItemIcon icon='team' />
+          <SidebarV2ItemTitle>{names[i % 10]}</SidebarV2ItemTitle>
+          <SidebarV2ItemTimestamp>12:00</SidebarV2ItemTimestamp>
+        </SidebarV2ItemRow>
 
-        <SidebarItemRow>
-          <SidebarItemContent>No messages yet</SidebarItemContent>
-          <SidebarItemBadge
+        <SidebarV2ItemRow>
+          <SidebarV2ItemContent>No messages yet</SidebarV2ItemContent>
+          <SidebarV2ItemBadge
             title='unread messages'
             children={Math.floor(Math.random() * 10) + 1}
           />
-          <SidebarItemMenu children={<MenuTemplate />} />
-        </SidebarItemRow>
-      </SidebarItemCol>
-    </SidebarItem>
-  </SidebarListItem>
+          <SidebarV2ItemMenu children={<MenuTemplate />} />
+        </SidebarV2ItemRow>
+      </SidebarV2ItemCol>
+    </SidebarV2Item>
+  </SidebarV2ListItem>
 );
 
 export const GenericCallItem = ({
   i = 0,
   ...props
-}: { i?: number } & ComponentProps<typeof SidebarItem>) => (
-  <SidebarItem {...props}>
-    <SidebarItemAvatarWrapper>
+}: { i?: number } & ComponentProps<typeof SidebarV2Item>) => (
+  <SidebarV2Item {...props}>
+    <SidebarV2ItemAvatarWrapper>
       <Avatar size='x36' url={leterAvatarUrls[i % 4]} alt='avatar' />
-    </SidebarItemAvatarWrapper>
+    </SidebarV2ItemAvatarWrapper>
 
-    <SidebarItemCol>
-      <SidebarItemTitle>{names[i % 10]}</SidebarItemTitle>
-      <SidebarItemContent>Calling</SidebarItemContent>
-    </SidebarItemCol>
+    <SidebarV2ItemCol>
+      <SidebarV2ItemTitle>{names[i % 10]}</SidebarV2ItemTitle>
+      <SidebarV2ItemContent>Calling</SidebarV2ItemContent>
+    </SidebarV2ItemCol>
 
-    <SidebarItemRow>
-      <SidebarButtonGroup>
+    <SidebarV2ItemRow>
+      <SidebarV2ButtonGroup>
         <IconButton
           small
           icon='phone-off'
@@ -166,37 +168,39 @@ export const GenericCallItem = ({
           aria-label='phone-off'
         />
         <IconButton small icon='phone' secondary success aria-label='phone' />
-      </SidebarButtonGroup>
-    </SidebarItemRow>
-  </SidebarItem>
+      </SidebarV2ButtonGroup>
+    </SidebarV2ItemRow>
+  </SidebarV2Item>
 );
 
 export const decorators: Decorator[] = [
   (fn): ReactElement => (
     <Box h='90vh' w='x280'>
-      <Sidebar>
-        <SidebarAccordion>
-          <SidebarAccordionItem
+      <SidebarV2>
+        <SidebarV2Accordion>
+          <SidebarV2AccordionItem
             title='Label'
             defaultExpanded
-            badge={<SidebarItemBadge children='99+' variant='danger' />}
+            badge={<SidebarV2ItemBadge children='99+' variant='danger' />}
           >
-            <SidebarCollapseGroup
+            <SidebarV2CollapseGroup
               title='Label'
               defaultExpanded
-              badge={<SidebarItemBadge children='99+' variant='danger' />}
+              badge={<SidebarV2ItemBadge children='99+' variant='danger' />}
             >
               {fn()}
-            </SidebarCollapseGroup>
-          </SidebarAccordionItem>
-        </SidebarAccordion>
-        <SidebarFooter>
-          <SidebarFooterContent>Powered by Rocket.Chat</SidebarFooterContent>
-          <SidebarFooterContent color='titles-labels'>
+            </SidebarV2CollapseGroup>
+          </SidebarV2AccordionItem>
+        </SidebarV2Accordion>
+        <SidebarV2Footer>
+          <SidebarV2FooterContent>
+            Powered by Rocket.Chat
+          </SidebarV2FooterContent>
+          <SidebarV2FooterContent color='titles-labels'>
             Free edition
-          </SidebarFooterContent>
-        </SidebarFooter>
-      </Sidebar>
+          </SidebarV2FooterContent>
+        </SidebarV2Footer>
+      </SidebarV2>
     </Box>
   ),
 ];