feat(redmine 1257478): added ResponsiveTabs component (#42)

.changeset/wicked-ways-arrive.md

@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': minor
+---
+
+Added `ResponsiveTabs` component

packages/react-front-kit/src/Components/DropdownButton/DropdownButton.tsx

@@ -8,13 +8,21 @@ import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import { useId, useState } from 'react';
 
 export interface IDropdownButtonProps extends MenuProps {
+  /** Override default menu target with custom component*/
+  buttonComponent?: ReactNode;
   children?: ReactNode;
-  label: string;
+  label?: string;
 }
 
 /** Additional props will be forwarded to the [Mantine Menu component](https://mantine.dev/core/menu) */
 export function DropdownButton(props: IDropdownButtonProps): ReactElement {
-  const { children, label, position = 'bottom-start', ...menuProps } = props;
+  const {
+    buttonComponent,
+    children,
+    label,
+    position = 'bottom-start',
+    ...menuProps
+  } = props;
   const [opened, setOpened] = useState(false);
   const id = useId();
 
@@ -27,12 +35,14 @@ export function DropdownButton(props: IDropdownButtonProps): ReactElement {
       {...menuProps}
     >
       <Menu.Target>
-        <Button
-          data-testid="button"
-          rightIcon={opened ? <CaretUp /> : <CaretDown />}
-        >
-          {label}
-        </Button>
+        {buttonComponent ?? (
+          <Button
+            data-testid="button"
+            rightIcon={opened ? <CaretUp /> : <CaretDown />}
+          >
+            {label}
+          </Button>
+        )}
       </Menu.Target>
       <Menu.Dropdown data-testid="dropdown">{children}</Menu.Dropdown>
     </Menu>

packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx

@@ -0,0 +1,33 @@
+import { Tabs } from '@mantine/core';
+
+export const contents = (
+  <>
+    <Tabs.Panel value="1">First Content</Tabs.Panel>
+    <Tabs.Panel value="2">Second Content</Tabs.Panel>
+    <Tabs.Panel value="3">Third Content</Tabs.Panel>
+    <Tabs.Panel value="4">Fourth Content</Tabs.Panel>
+    <Tabs.Panel value="5">Overflow 1 Content</Tabs.Panel>
+    <Tabs.Panel value="6">Overflow 2 Content</Tabs.Panel>
+  </>
+);
+
+export const tabs = [
+  <Tabs.Tab key={1} id="tab-1" value="1">
+    First
+  </Tabs.Tab>,
+  <Tabs.Tab key={2} data-testid="test-tab" id="tab-1" value="2">
+    Second
+  </Tabs.Tab>,
+  <Tabs.Tab key={3} value="3">
+    Third
+  </Tabs.Tab>,
+  <Tabs.Tab key={4} value="4">
+    Fourth
+  </Tabs.Tab>,
+  <Tabs.Tab key={5} value="5">
+    Overflow 1
+  </Tabs.Tab>,
+  <Tabs.Tab key={6} value="6">
+    Overflow 2
+  </Tabs.Tab>,
+];

packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+import { sleep } from '@smile/react-front-kit-shared/src/storybook-utils';
+import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ResponsiveTabs as Cmp } from './ResponsiveTabs';
+import { contents, tabs } from './ResponsiveTabs.mock';
+
+const meta = {
+  component: Cmp,
+  tags: ['autodocs'],
+  title: '3-custom/Components/ResponsiveTabs',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+function Wrapper({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <div
+      style={{
+        border: '1px solid darkgrey',
+        boxSizing: 'content-box',
+        height: 250,
+        margin: 'auto',
+        overflow: 'hidden',
+        padding: 30,
+        resize: 'both',
+        width: 300,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const ResponsiveTabs: IStory = {
+  args: {
+    children: contents,
+    defaultValue: '1',
+    tabs,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('First Content')).toBeVisible();
+    await userEvent.click(canvas.getAllByTestId('test-tab')[1]);
+    await sleep(200);
+    await expect(canvas.getByText('Second Content')).toBeVisible();
+  },
+  render: ({ children, ...props }) => (
+    <Wrapper>
+      <Cmp {...props}>{children}</Cmp>
+    </Wrapper>
+  ),
+};