Feat/dropdown menu

src/components/ui/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,22 @@
+import DropdownMenuRoot from './fragments/DropdownMenuRoot';
+import DropdownMenuTrigger from './fragments/DropdownMenuTrigger';
+import DropdownMenuContent from './fragments/DropdownMenuContent';
+import DropdownMenuPortal from './fragments/DropdownMenuPortal';
+import DropdownMenuItem from './fragments/DropdownMenuItem';
+import DropdownMenuSub from './fragments/DropdownMenuSub';
+import DropdownMenuSubTrigger from './fragments/DropdownMenuSubTrigger';
+
+const DropdownMenu = () => {
+    console.warn('Direct usage of DropdownMenu is not supported. Please use DropdownMenu.Root, DropdownMenu.Item instead.');
+    return null;
+};
+
+DropdownMenu.Root = DropdownMenuRoot;
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Portal = DropdownMenuPortal;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.Sub = DropdownMenuSub;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+
+export default DropdownMenu;

src/components/ui/DropdownMenu/contexts/DropdownMenuContext.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import React from 'react';
+
+export interface DropdownMenuContextProps {
+    rootClass: string
+}
+
+const DropdownMenuContext = React.createContext<DropdownMenuContextProps|null>(null);
+
+export default DropdownMenuContext;

src/components/ui/DropdownMenu/fragments/DropdownMenuContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import MenuPrimitive, { MenuPrimitiveProps } from '~/core/primitives/Menu/MenuPrimitive';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+import clsx from 'clsx';
+
+export type DropdownMenuContentProps = {
+  children: React.ReactNode;
+  className?: string;
+} & MenuPrimitiveProps.Content;
+
+const DropdownMenuContent = ({ children, className }:DropdownMenuContentProps) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.log('DropdownMenuContent should be used in the DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
+    return (
+        <MenuPrimitive.Content className={clsx(`${rootClass}-content`, className)}>
+            {children}
+        </MenuPrimitive.Content>
+    );
+};
+
+export default DropdownMenuContent;

src/components/ui/DropdownMenu/fragments/DropdownMenuItem.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MenuPrimitive, { MenuPrimitiveProps } from '~/core/primitives/Menu/MenuPrimitive';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+import clsx from 'clsx';
+
+export type DropdownMenuItemProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+} & MenuPrimitiveProps.Item;
+
+const DropdownMenuItem = ({ children, className, label }:DropdownMenuItemProps) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.log('DropdownMenuItem should be used in the DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
+    return (
+        <MenuPrimitive.Item className={clsx(`${rootClass}-item`, className)} label={label}>
+            {children}
+        </MenuPrimitive.Item>
+    );
+};
+
+export default DropdownMenuItem;

src/components/ui/DropdownMenu/fragments/DropdownMenuPortal.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import MenuPrimitive from '~/core/primitives/Menu/MenuPrimitive';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+
+export type DropdownMenuPortalProps = {
+  children: React.ReactNode;
+}
+
+const DropdownMenuPortal = ({ children }:DropdownMenuPortalProps) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.log('DropdownMenuPortal should be used in the DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
+    return (
+        <MenuPrimitive.Portal>
+            {children}
+        </MenuPrimitive.Portal>
+    );
+};
+
+export default DropdownMenuPortal;

src/components/ui/DropdownMenu/fragments/DropdownMenuRoot.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import MenuPrimitive, { MenuPrimitiveProps } from '~/core/primitives/Menu/MenuPrimitive';
+import { customClassSwitcher } from '~/core';
+import clsx from 'clsx';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+
+export type DropdownMenuRootProps = {
+  children: React.ReactNode;
+  customRootClass?: string;
+  className?: string;
+} & MenuPrimitiveProps.Root;
+
+const COMPONENT_NAME = 'DropdownMenu';
+
+const DropdownMenuRoot = ({ children, customRootClass, className }:DropdownMenuRootProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    return (
+        <DropdownMenuContext.Provider value={{ rootClass }} >
+            <MenuPrimitive.Root className={clsx(`${rootClass}-root`, className)}>
+                {children}
+            </MenuPrimitive.Root>
+        </DropdownMenuContext.Provider>
+    );
+};
+
+export default DropdownMenuRoot;

src/components/ui/DropdownMenu/fragments/DropdownMenuSub.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import MenuPrimitive, { MenuPrimitiveProps } from '~/core/primitives/Menu/MenuPrimitive';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+import clsx from 'clsx';
+
+export type DropdownMenuSubProps = {
+  children: React.ReactNode;
+  className?: string;
+} & MenuPrimitiveProps.Sub;
+
+const DropdownMenuSub = ({ children, className }:DropdownMenuSubProps) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.log('DropdownMenuSub should be used in the DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
+    return (
+        <MenuPrimitive.Sub className={clsx(`${rootClass}-sub`, className)}>
+            {children}
+        </MenuPrimitive.Sub>
+    );
+};
+
+export default DropdownMenuSub;

src/components/ui/DropdownMenu/fragments/DropdownMenuSubTrigger.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import MenuPrimitive, { MenuPrimitiveProps } from '~/core/primitives/Menu/MenuPrimitive';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+import clsx from 'clsx';
+
+export type DropdownMenuSubTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+} & MenuPrimitiveProps.Trigger;
+
+const DropdownMenuSubTrigger = ({ children, className }:DropdownMenuSubTriggerProps) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.log('DropdownMenuSubTrigger should be used in the DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
+    return (
+        <MenuPrimitive.Trigger className={clsx(`${rootClass}-sub-trigger`, className)}>
+            {children}
+        </MenuPrimitive.Trigger>
+    );
+};
+
+export default DropdownMenuSubTrigger;

src/components/ui/DropdownMenu/fragments/DropdownMenuTrigger.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import MenuPrimitive, { MenuPrimitiveProps } from '~/core/primitives/Menu/MenuPrimitive';
+import DropdownMenuContext from '../contexts/DropdownMenuContext';
+import clsx from 'clsx';
+
+export type DropdownMenuTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+} & MenuPrimitiveProps.Trigger;
+
+const DropdownMenuTrigger = ({ children, className }:DropdownMenuTriggerProps) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) {
+        console.log('DropdownMenuTrigger should be used in the DropdownMenuRoot');
+        return null;
+    }
+    const { rootClass } = context;
+    return (
+        <MenuPrimitive.Trigger className={clsx(`${rootClass}-trigger`, className)}>
+            {children}
+        </MenuPrimitive.Trigger>
+    );
+};
+
+export default DropdownMenuTrigger;

src/components/ui/DropdownMenu/stories/DropdownMenu.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import DropdownMenu from '../DropdownMenu';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export default {
+    title: 'WIP/DropdownMenu',
+    component: DropdownMenu
+};
+
+const ChevronRight =() => <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+
+const Hamburger = () => <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+export const Basic: Story = {
+    render: () => (
+        <SandboxEditor>
+            <DropdownMenu.Root customRootClass="" >
+                <DropdownMenu.Trigger ><Hamburger /></DropdownMenu.Trigger>
+                <DropdownMenu.Portal>
+                    <DropdownMenu.Content >
+                        <DropdownMenu.Item  label="Profile">Profile</DropdownMenu.Item>
+                        <DropdownMenu.Item  label="Settings">Settings</DropdownMenu.Item>
+                        <DropdownMenu.Item  label="Notifications">Notifications</DropdownMenu.Item>
+                        <DropdownMenu.Sub >
+                            <DropdownMenu.SubTrigger >More Options <ChevronRight /></DropdownMenu.SubTrigger>
+                            <DropdownMenu.Content >
+                                <DropdownMenu.Item  label="Help Center">Help Center</DropdownMenu.Item>
+                                <DropdownMenu.Item  label="Feedback">Feedback</DropdownMenu.Item>
+                                <DropdownMenu.Item label="About">About</DropdownMenu.Item>
+                                <DropdownMenu.Sub >
+                                    <DropdownMenu.SubTrigger >Legal <ChevronRight /></DropdownMenu.SubTrigger>
+                                    <DropdownMenu.Content >
+                                        <DropdownMenu.Item  label="Terms of Service">Terms of Service</DropdownMenu.Item>
+                                        <DropdownMenu.Item  label="Privacy Policy">Privacy Policy</DropdownMenu.Item>
+                                        <DropdownMenu.Item  label="Licenses">Licenses</DropdownMenu.Item>
+                                    </DropdownMenu.Content>
+                                </DropdownMenu.Sub>
+                                <DropdownMenu.Item  label="Contact">Contact</DropdownMenu.Item>
+                                <DropdownMenu.Item  label="Support">Support</DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                        </DropdownMenu.Sub>
+                        <DropdownMenu.Item  label="Logout">Logout</DropdownMenu.Item>
+                        <DropdownMenu.Item  label="Switch Account">Switch Account</DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+        </SandboxEditor>
+    )
+};

src/core/primitives/Floater/index.tsx

@@ -1,11 +1,23 @@
-import { FloatingOverlay, FloatingPortal, FloatingFocusManager, useFloating, FloatingArrow, arrow, useRole, useInteractions, useDismiss, useHover, useFocus, flip, shift, hide, offset, useMergeRefs } from '@floating-ui/react';
+import { FloatingOverlay, FloatingPortal, FloatingNode, safePolygon, FloatingTree, FloatingList, useClick, useTypeahead, useListNavigation, useFloatingParentNodeId, useListItem, autoUpdate, useFloatingTree, FloatingFocusManager, useFloating, useFloatingNodeId, FloatingArrow, arrow, useRole, useInteractions, useDismiss, useHover, useFocus, flip, shift, hide, offset, useMergeRefs } from '@floating-ui/react';
 
 const Floater = {
     Portal: FloatingPortal,
     Overlay: FloatingOverlay,
     FocusManager: FloatingFocusManager,
     useFloating,
     Arrow: FloatingArrow,
+    useFloatingNodeId,
+    useListItem,
+    useTypeahead,
+    safePolygon,
+    useListNavigation,
+    useFloatingParentNodeId,
+    useFloatingTree,
+    FloatingNode,
+    FloatingTree,
+    FloatingList,
+    autoUpdate,
+    useClick,
     arrow,
     useRole,
     useFocus,

src/core/primitives/Menu/MenuPrimitive.tsx

@@ -0,0 +1,28 @@
+import MenuPrimitiveRoot, { MenuPrimitiveRootProps } from './fragments/MenuPrimitiveRoot';
+import MenuPrimitiveItem, { MenuPrimitiveItemProps } from './fragments/MenuPrimitiveItem';
+import MenuPrimitiveTrigger, { MenuPrimitiveTriggerProps } from './fragments/MenuPrimitiveTrigger';
+import MenuPrimitiveContent, { MenuPrimitiveContentProps } from './fragments/MenuPrimitiveContent';
+import MenuPrimitiveSub, { MenuPrimitiveSubProps } from './fragments/MenuPrimitiveSub';
+import MenuPrimitivePortal from './fragments/MenuPrimitivePortal';
+
+const MenuPrimitive = () => {
+    console.warn('Direct usage of MenuPrimitive is not supported. Please use MenuPrimitive.Root, MenuPrimitive.Item instead.');
+    return null;
+};
+
+MenuPrimitive.Root = MenuPrimitiveRoot;
+MenuPrimitive.Item = MenuPrimitiveItem;
+MenuPrimitive.Trigger = MenuPrimitiveTrigger;
+MenuPrimitive.Content = MenuPrimitiveContent;
+MenuPrimitive.Sub = MenuPrimitiveSub;
+MenuPrimitive.Portal = MenuPrimitivePortal;
+
+export namespace MenuPrimitiveProps {
+    export type Root = MenuPrimitiveRootProps;
+    export type Item = MenuPrimitiveItemProps;
+    export type Trigger = MenuPrimitiveTriggerProps;
+    export type Content = MenuPrimitiveContentProps;
+    export type Sub = MenuPrimitiveSubProps;
+}
+
+export default MenuPrimitive;

src/core/primitives/Menu/contexts/MenuPrimitiveRootContext.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+
+export interface MenuPrimitiveRootPrimitiveContextProps {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  refs: {
+    reference: React.MutableRefObject<Element | null>;
+    floating: React.MutableRefObject<HTMLElement | null>;
+    domReference: React.MutableRefObject<Element | null>;
+    setReference(node: Element | null): void;
+    setFloating(node: HTMLElement | null): void;
+    setPositionReference(node: Element): void;
+  };
+  floatingStyles: React.CSSProperties;
+  getReferenceProps: (userProps?: any) => any;
+  getFloatingProps: (userProps?: any) => any;
+  getItemProps: (userProps?: any) => any;
+  activeIndex: number | null;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
+  listRef: React.MutableRefObject<any[]>;
+  elementsRef: React.MutableRefObject<any[]>;
+  labelsRef: React.MutableRefObject<any[]>;
+  virtualItemRef: React.MutableRefObject<any>;
+  nodeId: any;
+  isNested: boolean;
+  floatingContext: any;
+}
+
+const MenuPrimitiveRootPrimitiveContext = React.createContext<MenuPrimitiveRootPrimitiveContextProps|null>(null);
+
+export default MenuPrimitiveRootPrimitiveContext;

src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+import Floater from '~/core/primitives/Floater';
+import MenuPrimitiveRootContext from '../contexts/MenuPrimitiveRootContext';
+
+export type MenuPrimitiveContentProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const MenuPrimitiveContent = ({ children, className }: MenuPrimitiveContentProps) => {
+    const context = useContext(MenuPrimitiveRootContext);
+    if (!context || !context.isOpen) return null;
+    const { isOpen, refs, floatingStyles, getFloatingProps, elementsRef, labelsRef, nodeId, isNested, floatingContext } = context;
+
+    return (
+
+        <Floater.FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+            <Floater.FocusManager
+                context={floatingContext}
+                modal={false}
+                initialFocus={isNested ? -1 : 0}
+                returnFocus={!isNested}
+            >
+                <div
+                    ref={refs.setFloating}
+                    style={floatingStyles}
+                    {...getFloatingProps()}
+                    className={className}
+                >
+                    {children}
+                </div>
+            </Floater.FocusManager>
+        </Floater.FloatingList>
+
+    );
+};
+export default MenuPrimitiveContent;