feat(redmine 1305754): create a floating menu

.changeset/lazy-coins-camp.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+Creating a floating menu

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx

@@ -0,0 +1,34 @@
+export const floatingMenuLabelMock = {
+  children: [
+    {
+      hasModal: true,
+      href: '',
+      id: 0,
+      text: 'Document',
+    },
+    {
+      hasModal: false,
+      href: 'https://mantine.dev#1',
+      id: 1,
+      text: 'Favoris ',
+    },
+    {
+      hasModal: true,
+      href: '',
+      id: 2,
+      text: 'Archives',
+    },
+    {
+      hasModal: false,
+      href: 'https://mantine.dev#2',
+      id: 3,
+      text: 'Contrats',
+    },
+    {
+      hasModal: true,
+      href: '',
+      id: 4,
+      text: 'Aide',
+    },
+  ],
+};

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css

@@ -0,0 +1,121 @@
+.floatingMenuContainer {
+  position: fixed;
+  bottom: 0;
+  justify-content: center;
+  align-items: self-start;
+  flex-direction: row;
+  background-color: white;
+  width: 100%;
+  gap: 5px;
+  z-index: 190;
+
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    justify-content: space-evenly;
+    flex-direction: column;
+    top: 50%;
+    width: 56px;
+    height: max-content;
+    box-shadow: -6px 6px 7px 3px #00000008;
+    transform: translateY(-50%);
+  }
+}
+
+.positionLeft {
+  left: 0;
+  border-radius: 0px 8px 8px 0px;
+  .floatingMenuItem {
+    left: calc(-138px + 56px);
+    transition: left 0.3s ease;
+  }
+
+  .floatingMenuItem {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .isOpened {
+    justify-content: flex-start;
+    border-radius: 0px 28px 28px 0px;
+    left: 0;
+  }
+  .floatingMenuButton {
+    span {
+      justify-content: flex-start;
+      flex-direction: row-reverse;
+    }
+  }
+}
+
+.positionRight {
+  right: 0;
+  border-radius: 8px 0px 0px 8px;
+
+  .floatingMenuItem {
+    right: 0;
+    transition: right 0.3s ease;
+  }
+
+  .isOpened {
+    flex-direction: column;
+    border-radius: 28px 0px 0px 28px;
+    right: calc(138px - 56px);
+  }
+}
+
+.floatingMenuItem {
+  position: relative;
+  padding: 10px 5px;
+  justify-content: space-between;
+  height: 100%;
+
+  span {
+    flex-direction: column;
+    max-width: 84px;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: center;
+  }
+
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    width: 138px;
+    padding: 0 15px;
+    height: 56px;
+
+    span {
+      flex-direction: row;
+      max-width: 100%;
+    }
+  }
+}
+
+.isOpened {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: var(--mantine-color-cyan-9);
+
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+
+    svg {
+      flex: 1 0 25px;
+    }
+  }
+}
+
+.floatingMenuButton {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+
+  @mixin larger-than $mantine-breakpoint-xs {
+    height: 59px;
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+  }
+}

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FloatingMenu as Cmp } from './FloatingMenu';
+import { floatingMenuLabelMock } from './FloatingMenu.mock';
+
+const meta = {
+  component: Cmp,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  title: '3-custom/Components/FloatingMenu',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const FloatingMenu: IStory = {
+  args: {
+    items: floatingMenuLabelMock.children,
+    position: 'Right',
+  },
+};

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.tsx

@@ -0,0 +1,131 @@
+'use client';
+import type { ReactElement } from 'react';
+
+import { ActionIcon, Flex, Group, Modal, Text } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import {
+  CalendarBlank,
+  FileText,
+  Newspaper,
+  Question,
+  Star,
+} from '@phosphor-icons/react';
+import { useState } from 'react';
+
+import classes from './FloatingMenu.module.css';
+
+type IMenuPosition = 'Left' | 'Right';
+
+export interface IMenuItems {
+  hasModal: boolean;
+  href: string;
+  id: number;
+  text: string;
+}
+
+export interface IFloatingMenuProps {
+  items?: IMenuItems[];
+  position?: IMenuPosition;
+}
+
+export function FloatingMenu({
+  position = 'Right',
+  items,
+}: IFloatingMenuProps): ReactElement {
+  const [openedItem, setOpenedItem] = useState<number | null>(null);
+  const [hoveredItem, setHoveredItem] = useState<number | null>(null);
+
+  const handleOpen = (index: number) => () => {
+    setOpenedItem(openedItem === index ? null : index);
+  };
+
+  const handleMouseEnter = (index: number) => () => {
+    setHoveredItem(index);
+  };
+
+  const handleClose: () => void = () => {
+    setOpenedItem(null);
+    setHoveredItem(null);
+  };
+
+  const icons = [FileText, Star, Newspaper, CalendarBlank, Question];
+
+  const matches = useMediaQuery('(max-width: 36em)');
+  const positionClass = !matches
+    ? position === 'Right'
+      ? classes.positionRight
+      : classes.positionLeft
+    : '';
+
+  return (
+    <Flex
+      bg="white"
+      className={`${classes.floatingMenuContainer} ${positionClass}`}
+      mih={50}
+      wrap="wrap"
+    >
+      {items?.map((item, index) => {
+        const Icon = icons[index];
+
+        return (
+          <Group
+            key={`${index + index}`}
+            className={`${classes.floatingMenuItem} ${
+              openedItem === index || hoveredItem === index
+                ? classes.isOpened
+                : ''
+            }`}
+            justify="center"
+            onClick={item.hasModal ? handleOpen(index) : undefined}
+            onMouseEnter={handleMouseEnter(index)}
+            onMouseLeave={() => setHoveredItem(null)}
+          >
+            <ActionIcon
+              aria-label={item.text}
+              className={`${classes.floatingMenuButton}`}
+              color={
+                openedItem === index || hoveredItem === index
+                  ? 'white'
+                  : 'black'
+              }
+              component={item.hasModal ? 'button' : 'a'}
+              display="flex"
+              href={!item.hasModal ? item.href : ''}
+              variant="transparent"
+            >
+              <Icon size={24} />
+              {hoveredItem === index || matches ? (
+                <Text
+                  ml={!matches && position === 'Right' ? '10px' : ''}
+                  mr={!matches && position === 'Left' ? '10px' : ''}
+                  mt={matches ? '10px' : ''}
+                  size="12px"
+                  style={{ width: '100%' }}
+                  truncate="end"
+                >
+                  {item.text}
+                </Text>
+              ) : (
+                ''
+              )}
+            </ActionIcon>
+
+            {item.hasModal ? (
+              <Modal
+                onClose={handleClose}
+                opened={openedItem === index}
+                overlayProps={{
+                  backgroundOpacity: 0.3,
+                }}
+              >
+                {item.text}
+              </Modal>
+            ) : (
+              ''
+            )}
+          </Group>
+        );
+      })}
+    </Flex>
+  );
+}

packages/haring-react/src/index.tsx

@@ -28,6 +28,7 @@ export type { IButtonListProps } from './Components/ButtonList/ButtonList';
 export { ButtonList } from './Components/ButtonList/ButtonList';
 export { ActionBar } from './Components/ActionBar/ActionBar';
 export type { IActionBarProps } from './Components/ActionBar/ActionBar';
+export { FloatingMenu } from './Components/FloatingMenu/FloatingMenu';
 export { ActionList } from './Components/ActionList/ActionList';
 export type {
   IActionListProps,