✨(frontend) add onboarding modal with help menu button

integrate onboarding feature accessible from left panel help menu

Author: Ovgodd

src/frontend/apps/impress/package.json

@@ -36,7 +36,7 @@
     "@fontsource/material-icons": "5.2.7",
     "@gouvfr-lasuite/cunningham-react": "4.1.0",
     "@gouvfr-lasuite/integration": "1.0.3",
-    "@gouvfr-lasuite/ui-kit": "0.18.7",
+    "@gouvfr-lasuite/ui-kit": "0.19.5",
     "@hocuspocus/provider": "3.4.3",
     "@mantine/core": "8.3.12",
     "@mantine/hooks": "8.3.12",

src/frontend/apps/impress/src/assets/icons/wand-and-stars.svg

@@ -14,6 +14,7 @@ import { useLeftPanelStore } from '../stores';
 
 import { LeftPanelContent } from './LeftPanelContent';
 import { LeftPanelHeader } from './LeftPanelHeader';
+import { LeftPanelHelpMenu } from './LeftPanelHelpMenu';
 
 const MobileLeftPanelStyle = createGlobalStyle`
   body {
@@ -57,6 +58,14 @@ export const LeftPanel = () => {
             <LeftPanelHeader />
           </Box>
           <LeftPanelContent />
+          <SeparatedSection showSeparator={false}>
+            <Box
+              $padding={{ horizontal: 'sm', vertical: 'xs' }}
+              $justify="flex-start"
+            >
+              <LeftPanelHelpMenu />
+            </Box>
+          </SeparatedSection>
         </Box>
       )}
 
@@ -91,6 +100,14 @@ export const LeftPanel = () => {
             >
               <LeftPanelHeader />
               <LeftPanelContent />
+              <SeparatedSection showSeparator={false}>
+                <Box
+                  $padding={{ horizontal: 'sm', vertical: 'xs' }}
+                  $justify="flex-start"
+                >
+                  <LeftPanelHelpMenu />
+                </Box>
+              </SeparatedSection>
               <SeparatedSection showSeparator={false}>
                 <Box
                   $justify="center"

src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx

@@ -0,0 +1,112 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import {
+  DropdownMenu,
+  DropdownMenuOption,
+  OnboardingModal,
+  OnboardingStep,
+} from '@gouvfr-lasuite/ui-kit';
+import { type MouseEvent, useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import WandAndStarsIcon from '@/assets/icons/wand-and-stars.svg';
+import { Box, Icon } from '@/components';
+
+export const LeftPanelHelpMenu = () => {
+  const { t } = useTranslation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = useCallback(() => {
+    setIsModalOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setIsModalOpen(false);
+  }, []);
+
+  const toggleMenu = useCallback(
+    (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsMenuOpen((open) => !open);
+    },
+    [],
+  );
+
+  const steps = useMemo<OnboardingStep[]>(
+    () => [
+      {
+        icon: <Icon iconName="edit" $size="20px" aria-hidden="true" />,
+        title: t('Onboarding step 1 title'),
+        description: t('Onboarding step 1 description'),
+      },
+      {
+        icon: <Icon iconName="account_tree" $size="20px" aria-hidden="true" />,
+        title: t('Onboarding step 2 title'),
+        description: t('Onboarding step 2 description'),
+      },
+      {
+        icon: <Icon iconName="share" $size="20px" aria-hidden="true" />,
+        title: t('Onboarding step 3 title'),
+        description: t('Onboarding step 3 description'),
+      },
+    ],
+    [t],
+  );
+
+  const options = useMemo<DropdownMenuOption[]>(
+    () => [
+      {
+        label: t('Onboarding'),
+        icon: <WandAndStarsIcon aria-hidden="true" />,
+        callback: openModal,
+      },
+    ],
+    [openModal, t],
+  );
+
+  return (
+    <>
+      <Box
+        $css={css`
+          .c__dropdown-menu-trigger {
+            display: flex;
+            justify-content: flex-start;
+          }
+        `}
+      >
+        <DropdownMenu
+          options={options}
+          isOpen={isMenuOpen}
+          onOpenChange={setIsMenuOpen}
+        >
+          <Button
+            aria-label={t('Open onboarding menu')}
+            color="neutral"
+            variant="tertiary"
+            iconPosition="left"
+            icon={
+              <Icon
+                $withThemeInherited
+                iconName="help_outline"
+                aria-hidden="true"
+              />
+            }
+            onClick={toggleMenu}
+          />
+        </DropdownMenu>
+      </Box>
+
+      <OnboardingModal
+        isOpen={isModalOpen}
+        appName={t('Docs')}
+        mainTitle={t('Docs onboarding title')}
+        steps={steps}
+        hideContent
+        onClose={closeModal}
+        onComplete={closeModal}
+      />
+    </>
+  );
+};