feat(fuselage): Contextualbar component

packages/fuselage/src/components/ContextualBar/ContextualBar.stories.tsx

@@ -0,0 +1,64 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+
+import ContextualBar from '.';
+import { Button, ButtonGroup } from '..';
+
+export default {
+  title: 'ContextualBar/ContextualBar',
+  component: ContextualBar,
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`ContextualBar\` has the purpose to persist and input information about the scope of the related page.
+				`,
+      },
+    },
+  },
+} as ComponentMeta<typeof ContextualBar>;
+
+export const Default: ComponentStory<typeof ContextualBar> = () => (
+  <ContextualBar
+    size='x400'
+    position='static'
+    height='x500'
+    border='2px solid red'
+  >
+    <ContextualBar.Header>
+      <ContextualBar.Button>
+        <ContextualBar.Icon name='chevron-right' />
+      </ContextualBar.Button>
+      <ContextualBar.Back onClick={() => console.log('back')} />
+      <ContextualBar.Title>Title</ContextualBar.Title>
+      <ContextualBar.Actions>
+        <ContextualBar.Action
+          title='Title'
+          name={'new-window'}
+          onClick={() => {}}
+        />
+        <ContextualBar.Action
+          title='Title'
+          name={'new-window'}
+          onClick={() => {}}
+        />
+        <ContextualBar.Close onClick={() => console.log('close')} />
+      </ContextualBar.Actions>
+    </ContextualBar.Header>
+    <ContextualBar.Content>Teste</ContextualBar.Content>
+    <ContextualBar.Footer>
+      <ButtonGroup stretch>
+        <Button secondary>Cancel</Button>
+        <Button primary>Save</Button>
+      </ButtonGroup>
+    </ContextualBar.Footer>
+  </ContextualBar>
+);
+
+export const Skeleton: ComponentStory<typeof ContextualBar> = () => (
+  <ContextualBar.Skeleton
+    size='x400'
+    position='static'
+    height='x500'
+    border='2px solid red'
+  />
+);

packages/fuselage/src/components/ContextualBar/ContextualBar.tsx

@@ -0,0 +1,39 @@
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import React, { memo } from 'react';
+
+import Box from '../Box';
+
+type ContextualBarProps = ComponentProps<typeof Box> & {
+  children: ReactNode;
+  size: string;
+  position: string;
+};
+
+const ContextualBar = ({
+  children,
+  size,
+  position,
+  ...props
+}: ContextualBarProps): ReactElement<ContextualBarProps> => (
+  <Box
+    rcx-vertical-bar
+    backgroundColor='surface'
+    display='flex'
+    flexDirection='column'
+    flexShrink={0}
+    width={size}
+    borderInlineStartWidth='2px'
+    borderInlineStartColor='neutral-300'
+    borderInlineStartStyle='solid'
+    height='full'
+    position={position}
+    zIndex={5}
+    insetInlineEnd={'none'}
+    insetBlockStart={'none'}
+    {...props}
+  >
+    {children}
+  </Box>
+);
+
+export default memo(ContextualBar);

packages/fuselage/src/components/ContextualBar/ContextualBarAction.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement, MouseEventHandler, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { ActionButton } from '../Button';
+import type { Icon } from '../Icon';
+
+const ContextualBarAction = ({
+  name,
+  ...props
+}: {
+  name: ComponentProps<typeof Icon>['name'];
+  title?: string;
+  onClick?: MouseEventHandler<HTMLOrSVGElement>;
+}): ReactElement => <ActionButton flexShrink={0} icon={name} {...props} tiny />;
+
+export default memo(ContextualBarAction);

packages/fuselage/src/components/ContextualBar/ContextualBarActions.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { ButtonGroup } from '../ButtonGroup';
+
+const ContextualBarActions = (
+  props: ComponentProps<typeof ButtonGroup>
+): ReactElement => <ButtonGroup medium {...props} />;
+
+export default memo(ContextualBarActions);

packages/fuselage/src/components/ContextualBar/ContextualBarBack.tsx

@@ -0,0 +1,17 @@
+// import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import ContextualBarAction from './ContextualBarAction';
+
+type ContextualBarBackProps = Partial<
+  ComponentProps<typeof ContextualBarAction>
+>;
+
+const ContextualBarBack = (props: ContextualBarBackProps): ReactElement => {
+  // const t = useTranslation();
+  const t = (text: string) => text;
+  return <ContextualBarAction {...props} title={t('Back')} name='arrow-back' />;
+};
+
+export default memo(ContextualBarBack);

packages/fuselage/src/components/ContextualBar/ContextualBarButton.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps, ReactElement } from 'react';
+import React, { memo } from 'react';
+
+import Button from '../Button';
+
+const ContextualBarButton = (
+  props: ComponentProps<typeof Button>
+): ReactElement => <Button small square flexShrink={0} {...props} />;
+
+export default memo(ContextualBarButton);

packages/fuselage/src/components/ContextualBar/ContextualBarClose.tsx

@@ -0,0 +1,25 @@
+// import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, ReactElement } from 'react';
+import React, { memo } from 'react';
+
+import ContextualBarAction from './ContextualBarAction';
+
+type ContextualBarCloseProps = Partial<
+  ComponentProps<typeof ContextualBarAction>
+>;
+
+const ContextualBarClose = (props: ContextualBarCloseProps): ReactElement => {
+  // const t = useTranslation();
+  const t = (text: string) => text;
+
+  return (
+    <ContextualBarAction
+      data-qa='VerticalBarActionClose'
+      {...props}
+      title={t('Close')}
+      name='cross'
+    />
+  );
+};
+
+export default memo(ContextualBarClose);

packages/fuselage/src/components/ContextualBar/ContextualBarContent.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react';
+import React, { forwardRef, memo } from 'react';
+
+import Box from '../Box';
+
+const ContextualBarContent = forwardRef<
+  HTMLElement,
+  ComponentProps<typeof Box>
+>(function PageContent(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      paddingInline='x24'
+      display='flex'
+      flexDirection='column'
+      overflowY='hidden'
+      height='full'
+      // rcx-vertical-bar__content
+      {...props}
+    />
+  );
+});
+
+export default memo(ContextualBarContent);

packages/fuselage/src/components/ContextualBar/ContextualBarFooter.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+import React, { forwardRef, memo } from 'react';
+
+import Box from '../Box';
+
+const ContextualBarFooter = forwardRef<HTMLElement, ComponentProps<typeof Box>>(
+  function ContextualBarFooter({ children, ...props }, ref) {
+    return (
+      <Box is='footer' p='x24' {...props} ref={ref}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+export default memo(ContextualBarFooter);

packages/fuselage/src/components/ContextualBar/ContextualBarHeader.tsx

@@ -0,0 +1,37 @@
+import type { FC, ReactNode, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import Box from '../Box';
+import Margins from '../Margins';
+
+const ContextualBarHeader: FC<{
+  children: ReactNode;
+  props?: ComponentProps<typeof Box>;
+}> = ({ children, ...props }) => (
+  <Box
+    display='flex'
+    alignItems='center'
+    minHeight='56px'
+    maxHeight='56px'
+    is='h3'
+    pi='x24'
+    borderBlockEndWidth='x2'
+    borderBlockColor='neutral-200'
+    {...props}
+  >
+    <Box
+      marginInline='neg-x4'
+      display='flex'
+      alignItems='center'
+      justifyContent='space-between'
+      fontScale='h4'
+      flexGrow={1}
+      overflow='hidden'
+      color='neutral-800'
+    >
+      <Margins inline='x4'>{children}</Margins>
+    </Box>
+  </Box>
+);
+
+export default memo(ContextualBarHeader);

packages/fuselage/src/components/ContextualBar/ContextualBarIcon.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import { Icon } from '../Icon';
+
+const ContextualBarIcon = (
+  props: ComponentProps<typeof Icon>
+): ReactElement => <Icon {...props} pi='x2' size='x24' />;
+
+export default memo(ContextualBarIcon);

packages/fuselage/src/components/ContextualBar/ContextualBarInnerContent.tsx

@@ -0,0 +1,19 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import Box from '../Box';
+
+const ContextualBarInnerContent = (
+  props: ComponentProps<typeof Box>
+): ReactElement => (
+  <Box
+    rcx-vertical-bar--inner-content
+    position='absolute'
+    height='full'
+    display='flex'
+    insetInline={0}
+    {...props}
+  />
+);
+
+export default memo(ContextualBarInnerContent);

packages/fuselage/src/components/ContextualBar/ContextualBarSkeleton.tsx

@@ -0,0 +1,33 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import ContextualBar from '.';
+import Box from '../Box';
+import { Skeleton } from '../Skeleton';
+
+type ContextualBarSkeletonProps = ComponentProps<typeof Box> & {
+  size: string;
+  position: string;
+};
+
+const ContextualBarSkeleton = ({
+  size,
+  position,
+  ...props
+}: ContextualBarSkeletonProps): ReactElement<ContextualBarSkeletonProps> => (
+  <ContextualBar {...props} width='100%' size={size} position={position}>
+    <ContextualBar.Header>
+      <Skeleton width='100%' />
+    </ContextualBar.Header>
+    <Box p='x24'>
+      <Skeleton width='32px' height='32px' variant='rect' /> <Skeleton />
+      {Array(5)
+        .fill(5)
+        .map((_, index) => (
+          <Skeleton key={index} />
+        ))}
+    </Box>
+  </ContextualBar>
+);
+
+export default memo(ContextualBarSkeleton);

packages/fuselage/src/components/ContextualBar/ContextualBarTitle.tsx

@@ -0,0 +1,12 @@
+import type { ReactElement, ComponentProps } from 'react';
+import React, { memo } from 'react';
+
+import Box from '../Box';
+
+const ContextualBarTitle = (
+  props: ComponentProps<typeof Box>
+): ReactElement => (
+  <Box flexShrink={1} flexGrow={1} withTruncatedText {...props} />
+);
+
+export default memo(ContextualBarTitle);

packages/fuselage/src/components/ContextualBar/index.tsx

@@ -0,0 +1,28 @@
+import ContextualBar from './ContextualBar';
+import ContextualBarAction from './ContextualBarAction';
+import ContextualBarActions from './ContextualBarActions';
+import ContextualBarBack from './ContextualBarBack';
+import ContextualBarButton from './ContextualBarButton';
+import ContextualBarClose from './ContextualBarClose';
+import ContextualBarContent from './ContextualBarContent';
+import ContextualBarFooter from './ContextualBarFooter';
+import ContextualBarHeader from './ContextualBarHeader';
+import ContextualBarIcon from './ContextualBarIcon';
+import ContextualBarInnerContent from './ContextualBarInnerContent';
+import ContextualBarSkeleton from './ContextualBarSkeleton';
+import ContextualBarTitle from './ContextualBarTitle';
+
+export default Object.assign(ContextualBar, {
+  Action: ContextualBarAction,
+  Actions: ContextualBarActions,
+  Back: ContextualBarBack,
+  Button: ContextualBarButton,
+  Close: ContextualBarClose,
+  Content: ContextualBarContent,
+  Footer: ContextualBarFooter,
+  Header: ContextualBarHeader,
+  Icon: ContextualBarIcon,
+  InnerContent: ContextualBarInnerContent,
+  Skeleton: ContextualBarSkeleton,
+  Title: ContextualBarTitle,
+});