@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/Menu/HoverMenu.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as MenuStories from '@/Components/Menu/Menu.stories';
+import { HoverMenu } from '@/Components/Menu/HoverMenu';
+import { Icon } from '@/Components/Icon/Icon';
+import { faCogs } from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+import type { ReactElement  } from 'react';
+
+const meta = {
+    component: HoverMenu,
+    argTypes: {
+        children: {
+            control: false,
+        },
+        items: {
+            control: false,
+        },
+    },
+} satisfies Meta<typeof HoverMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        openToSide: false,
+        children: <Icon icon={faCogs} />,
+        items: MenuStories.Default.args?.children as ReactElement,
+    },
+};

package/src/Components/Menu/HoverMenu.tsx

@@ -1,35 +1,42 @@
-import {withMemo} from "../../helper/withMemo";
-import React, {useCallback, useRef, useState} from "react";
-import {Clickable} from "../Clickable/Clickable";
-import classNames from "classnames";
-import styles from "./menu.scss";
-import {RbmChildWithoutString, RbmComponentProps, WithNoStringAndChildrenProps} from "../RbmComponentProps";
-import {Menu} from "./Menu";
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Menu } from '@/Components/Menu/Menu';
+import { withMemo } from '@/helper/withMemo';
+import React, { useCallback, useRef, useState } from 'react';
+import classNames from 'classnames';
+import styles from '@/Components/Menu/menu.module.scss';
+import type {
+    RbmChildWithoutString,
+    RbmComponentProps,
+    WithNoStringAndChildrenProps,
+} from '@/Components/RbmComponentProps';
 
-export type HoverMenuProps = RbmComponentProps<{
-    items: RbmChildWithoutString,
-    openToSide?: boolean;
-    onClick?: () => void | boolean;
-    onClose?: () => void;
-}, WithNoStringAndChildrenProps>;
+export type HoverMenuProps = RbmComponentProps<
+    {
+        items: RbmChildWithoutString;
+        openToSide?: boolean;
+        onClick?: () => void | boolean;
+        onClose?: () => void;
+    },
+    WithNoStringAndChildrenProps
+>;
 
 export const HoverMenu = withMemo(function HoverMenu({
-                                                         children,
-                                                         items,
-                                                         className,
-                                                         style,
-                                                         onClick,
-                                                         onClose,
-                                                         openToSide
-                                                     }: HoverMenuProps) {
+    children,
+    items,
+    className,
+    style,
+    onClick,
+    onClose,
+    openToSide,
+}: HoverMenuProps) {
     // Refs
 
     // States/Variables/Selectors
     const hoverItemRef = useRef<HTMLDivElement>(null);
 
     const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState({x: 0, y: 0});
-    const [offset, setOffset] = useState({x: 0, y: 0});
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
 
     // Dispatch
 
@@ -38,13 +45,13 @@ export const HoverMenu = withMemo(function HoverMenu({
         if (!hoverItemRef.current) {
             return;
         }
-        const {top, left, bottom, right, width, height} = hoverItemRef.current.getBoundingClientRect();
+        const { top, left, bottom, right, width, height } = hoverItemRef.current.getBoundingClientRect();
         if (openToSide) {
-            setPosition({x: right, y: top});
-            setOffset({x: width, y: -height});
+            setPosition({ x: right, y: top });
+            setOffset({ x: width, y: -height });
         } else {
-            setPosition({x: left, y: bottom});
-            setOffset({x: -width, y: height});
+            setPosition({ x: left, y: bottom });
+            setOffset({ x: -width, y: height });
         }
     }, [openToSide]);
 
@@ -70,20 +77,29 @@ export const HoverMenu = withMemo(function HoverMenu({
 
     // RenderFunctions
 
-    return <Clickable
-        onMouseEnter={open}
-        onMouseLeave={close}
-        useReactOnMouseLeave={true}
-        onClick={onClickInner}
-        className={classNames(styles.hoverMenu, {[styles.open]: isOpen}, className)}
-        style={style}
-        ref={hoverItemRef}
-        __allowChildren="all"
-    >
-        {children}
-        <Menu x={position.x} y={position.y} isOpen={true} onClose={close} offsetX={offset.x} offsetY={offset.y}
-              className={classNames({[styles.hidden]: !isOpen})}>
-            {items}
-        </Menu>
-    </Clickable>;
-}, styles);
+    return (
+        <Clickable
+            onMouseEnter={open}
+            onMouseLeave={close}
+            useReactOnMouseLeave={true}
+            onClick={onClickInner}
+            className={classNames(styles.hoverMenu, { [styles.open]: isOpen }, className)}
+            style={style}
+            ref={hoverItemRef}
+            __allowChildren="all"
+        >
+            {children}
+            <Menu
+                x={position.x}
+                y={position.y}
+                isOpen={true}
+                onClose={close}
+                offsetX={offset.x}
+                offsetY={offset.y}
+                className={classNames({ [styles.hidden]: !isOpen })}
+            >
+                {items}
+            </Menu>
+        </Clickable>
+    );
+});

package/src/Components/Menu/Menu.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Menu } from '@/Components/Menu/Menu';
+import { MenuDivider } from '@/Components/Menu/MenuDivider';
+import { MenuItem } from '@/Components/Menu/MenuItem';
+import { Submenu } from '@/Components/Menu/Submenu';
+import { faCog, faCogs, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+import React from 'react';
+import type { MenuProps } from '@/Components/Menu/Menu';
+
+const meta = {
+    component: Menu,
+    argTypes: {
+        children: {
+            control: false,
+        },
+    },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+
+type Story = StoryObj<MenuProps>;
+
+export const Default: Story = {
+    args: {
+        isOpen: true,
+        x: 100,
+        y: 100,
+        children: (
+            <>
+                <MenuItem onClick={fn()} icon={faHome}>
+                    One
+                </MenuItem>
+                <MenuItem onClick={fn()} active={true} icon={faUser}>
+                    Two
+                </MenuItem>
+                <MenuItem onClick={fn()} icon={faCog}>
+                    Three
+                </MenuItem>
+                <MenuDivider />
+                <Submenu label="Submenu" icon={faCogs}>
+                    <MenuItem onClick={fn()} icon={faHome}>
+                        Sub One
+                    </MenuItem>
+                    <MenuItem onClick={fn()} icon={faUser}>
+                        Sub Two
+                    </MenuItem>
+                    <MenuItem onClick={fn()} icon={faCog}>
+                        Sub Three
+                    </MenuItem>
+                </Submenu>
+                <MenuItem onClick={fn()} icon={faUser} disabled={true}>
+                    Four
+                </MenuItem>
+                <MenuItem onClick={fn()} icon={faCog}>
+                    Five
+                </MenuItem>
+                <MenuDivider />
+                <MenuItem iconColor="green" onClick={fn()} icon={faUser}>
+                    Six
+                </MenuItem>
+                <MenuItem iconColor="green" onClick={fn()} icon={faCog} disabled={true}>
+                    Seven
+                </MenuItem>
+            </>
+        ),
+    },
+};

package/src/Components/Menu/Menu.tsx

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { IconSource } from '../Icon/Icon';
-import { Block } from '../Layout/Block';
-import classNames from 'classnames';
-import styles from './menu.scss';
+import { Block } from '@/Components/Layout/Block';
+import { MenuCloseContextProvider } from '@/Components/Menu/MenuCloseContext';
+import { MenuItem } from '@/Components/Menu/MenuItem';
+import { createPortal } from 'react-dom';
+import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
 import { useEffect, useRef, useState } from 'react';
-import { withRenderBrowserOnly } from '../../helper/withRenderBrowserOnly';
-import { useWindow } from '../../WindowContext/WindowContext';
-import { MenuItem } from "./MenuItem";
-import { MenuCloseContextProvider } from "./MenuCloseContext";
-import { createPortal } from "react-dom";
-import { useClientLayoutEffect } from "../Hooks/useClientLayoutEffect";
+import { useWindow } from '@/WindowContext/WindowContext';
+import { withMemo } from '@/helper/withMemo';
+import { withRenderBrowserOnly } from '@/helper/withRenderBrowserOnly';
+import classNames from 'classnames';
+import styles from '@/Components/Menu/menu.module.scss';
+import type { IconSource } from '@/Components/Icon/Icon';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type MenuItemType = {
     label: string;
-    icon?: IconSource | { icon: IconSource, color: string };
+    icon?: IconSource | { icon: IconSource; color: string };
     key: string;
     className?: string;
     callback: () => void;
@@ -23,33 +23,31 @@ export type MenuItemType = {
     onMouseLeave?: () => void;
 };
 
-export type MenuProps = RbmComponentProps<
-    {
-        items?: MenuItemType[];
-        x: number;
-        y: number;
-        isOpen: boolean;
-        onClose: () => void,
-        offsetX?: number,
-        offsetY?: number
-    }
->;
+export type MenuProps = RbmComponentProps<{
+    items?: MenuItemType[];
+    x: number;
+    y: number;
+    isOpen: boolean;
+    onClose: () => void;
+    offsetX?: number;
+    offsetY?: number;
+}>;
 
-export const MENU_CONTAINER_CLASS = "rbm-menu-container";
+export const MENU_CONTAINER_CLASS = 'rbm-menu-container';
 
 export const Menu = withMemo(
     withRenderBrowserOnly(function Menu({
-                                            className,
-                                            style,
-                                            items,
-                                            y,
-                                            x,
-                                            isOpen,
-                                            onClose,
-                                            children,
-                                            offsetY = 0,
-                                            offsetX = 0,
-                                        }: MenuProps) {
+        className,
+        style,
+        items,
+        y,
+        x,
+        isOpen,
+        onClose,
+        children,
+        offsetY = 0,
+        offsetX = 0,
+    }: MenuProps) {
         // Variables
 
         // Refs
@@ -76,11 +74,11 @@ export const Menu = withMemo(
                         onClose();
                     }
                 };
-                window?.addEventListener('mousedown', listener, {capture: true});
-                window?.addEventListener('touchstart', listener, {capture: true});
+                window?.addEventListener('mousedown', listener, { capture: true });
+                window?.addEventListener('touchstart', listener, { capture: true });
                 return () => {
-                    window?.removeEventListener('mousedown', listener, {capture: true});
-                    window?.removeEventListener('touchstart', listener, {capture: true});
+                    window?.removeEventListener('mousedown', listener, { capture: true });
+                    window?.removeEventListener('touchstart', listener, { capture: true });
                 };
             }
             return undefined;
@@ -94,7 +92,7 @@ export const Menu = withMemo(
             if (!elem) {
                 elem = window?.document.body;
             }
-            elem?.appendChild(portalContainer);
+            elem?.append(portalContainer);
         }, [isOpen, portalContainer, window?.document.body]);
 
         useClientLayoutEffect(() => {
@@ -105,20 +103,19 @@ export const Menu = withMemo(
 
             const updateInnerPositions = () => {
                 const computedStyle = getComputedStyle(menuElement);
-                const height = parseFloat(computedStyle.height);
+                const height = Number.parseFloat(computedStyle.height);
                 let newY = y;
                 if (newY > (window?.innerHeight ?? 0) - height) {
                     newY -= height + offsetY;
                 }
                 setInnerY(Math.max(0, newY));
 
-                const width = parseFloat(computedStyle.width);
+                const width = Number.parseFloat(computedStyle.width);
                 let newX = x;
                 if (newX > (window?.innerWidth ?? 0) - width) {
                     newX -= width + offsetX;
                 }
                 setInnerX(Math.max(0, newX));
-
             };
 
             const observer = new ResizeObserver(() => {
@@ -145,28 +142,40 @@ export const Menu = withMemo(
                     <MenuCloseContextProvider value={onClose}>
                         <Block
                             className={classNames(className, styles.menu)}
-                            style={{...style, top: innerY, left: innerX}}
+                            style={{ ...style, top: innerY, left: innerX }}
                             ref={menuRef}
                             __allowChildren="all"
                         >
                             {items?.map((item) => {
-                                const icon = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.icon : item.icon;
-                                const iconColor = (!!item.icon && typeof item.icon === "object" && "color" in item.icon) ? item.icon.color : undefined;
-
-                                return <MenuItem key={item.key}
-                                                 onClick={item.callback}
-                                                 className={classNames(styles.item, item.className)}
-                                                 onMouseEnter={item.onMouseEnter}
-                                                 icon={icon}
-                                                 iconColor={iconColor}
-                                                 onMouseLeave={item.onMouseLeave}>{item.label}</MenuItem>;
+                                const icon =
+                                    !!item.icon && typeof item.icon === 'object' && 'color' in item.icon
+                                        ? item.icon.icon
+                                        : item.icon;
+                                const iconColor =
+                                    !!item.icon && typeof item.icon === 'object' && 'color' in item.icon
+                                        ? item.icon.color
+                                        : undefined;
+
+                                return (
+                                    <MenuItem
+                                        key={item.key}
+                                        onClick={item.callback}
+                                        className={classNames(styles.item, item.className)}
+                                        onMouseEnter={item.onMouseEnter}
+                                        icon={icon}
+                                        iconColor={iconColor}
+                                        onMouseLeave={item.onMouseLeave}
+                                    >
+                                        {item.label}
+                                    </MenuItem>
+                                );
                             })}
                             {children}
                         </Block>
-                    </MenuCloseContextProvider>
-                    , portalContainer)}
+                    </MenuCloseContextProvider>,
+                    portalContainer,
+                )}
             </>
         );
     }),
-    styles
 );

package/src/Components/Menu/MenuCloseContext.ts

@@ -1,4 +1,4 @@
-import React, {useContext} from "react";
+import React, { useContext } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const MenuCloseContext = React.createContext<() => void>(() => {});

package/src/Components/Menu/MenuDivider.tsx

@@ -1,7 +1,7 @@
-import {withMemo} from "../../helper/withMemo";
-import {Block} from "../Layout/Block";
-import styles from "./menu.scss";
-import React from "react";
+import { Block } from '@/Components/Layout/Block';
+import { withMemo } from '@/helper/withMemo';
+import React from 'react';
+import styles from '@/Components/Menu/menu.module.scss';
 
 export const MenuDivider = withMemo(function MenuDivider() {
     // Refs
@@ -18,5 +18,5 @@ export const MenuDivider = withMemo(function MenuDivider() {
 
     // RenderFunctions
 
-    return <Block className={styles.divider}/>;
-}, styles);
+    return <Block className={styles.divider} />;
+});

package/src/Components/Menu/MenuItem.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MenuItem } from '@/Components/Menu/MenuItem';
+import { faCog, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+
+const meta = {
+    component: MenuItem,
+    argTypes: {
+        icon: {
+            control: { type: 'select' },
+            options: ['none', 'home', 'settings', 'user'],
+            mapping: {
+                none: undefined,
+                home: faHome,
+                settings: faCog,
+                user: faUser,
+            },
+        },
+    },
+} satisfies Meta<typeof MenuItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        active: false,
+        children: 'Menu Item',
+        disabled: false,
+        onClick: fn(),
+        icon: faHome,
+    },
+};

package/src/Components/Menu/MenuItem.tsx

@@ -1,47 +1,56 @@
-import {Icon, IconSource} from "../Icon/Icon";
-import {withMemo} from "../../helper/withMemo";
-import {Clickable} from "../Clickable/Clickable";
-import classNames from "classnames";
-import styles from "./menu.scss";
-import {Text} from "../Text/Text";
-import React, {ReactNode, useCallback} from "react";
-import {RbmComponentProps, WithChildren} from "../RbmComponentProps";
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Icon } from '@/Components/Icon/Icon';
+import { Text } from '@/Components/Text/Text';
+import { useMenuClose } from '@/Components/Menu/MenuCloseContext';
+import { withMemo } from '@/helper/withMemo';
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import styles from '@/Components/Menu/menu.module.scss';
+import type { IconSource } from '@/Components/Icon/Icon';
+import type { RbmComponentProps, WithChildren } from '@/Components/RbmComponentProps';
+import type { ReactNode } from 'react';
+
 import Element = React.JSX.Element;
-import {useMenuClose} from "./MenuCloseContext";
-import {Block} from "../Layout/Block";
 
-export type MenuItemProps<Item = undefined> = RbmComponentProps<{
-    icon?: IconSource;
-    iconColor?: string;
-    className?: string;
-    children: string | ReactNode
-    disabled?: boolean;
-    active?: boolean;
-} & ({
-    onClick: (item: Item) => void;
-    onMouseEnter?: (item: Item) => void;
-    onMouseLeave?: (item: Item) => void;
-    item?: undefined
-} | {
-    onClick: (item: Item) => void;
-    onMouseEnter?: (item: Item) => void;
-    onMouseLeave?: (item: Item) => void;
-    item: Item
-}), WithChildren>
+export type MenuItemProps<Item = undefined> = RbmComponentProps<
+    {
+        icon?: IconSource;
+        iconColor?: string;
+        className?: string;
+        children: string | ReactNode;
+        disabled?: boolean;
+        active?: boolean;
+    } & (
+        | {
+              onClick: (item: Item) => void;
+              onMouseEnter?: (item: Item) => void;
+              onMouseLeave?: (item: Item) => void;
+              item?: undefined;
+          }
+        | {
+              onClick: (item: Item) => void;
+              onMouseEnter?: (item: Item) => void;
+              onMouseLeave?: (item: Item) => void;
+              item: Item;
+          }
+    ),
+    WithChildren
+>;
 
 export const MenuItem = withMemo(function MenuItem<Item>({
-                                                             children,
-                                                             icon,
-                                                             iconColor,
-                                                             className,
-                                                             onClick,
-                                                             onMouseEnter,
-                                                             onMouseLeave,
-                                                             active,
-                                                             item,
-                                                             disabled = false,
-                                                             ...props
-                                                         }: MenuItemProps<Item>) {
+    children,
+    icon,
+    iconColor,
+    className,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    active,
+    item,
+    disabled = false,
+    ...props
+}: MenuItemProps<Item>) {
     // Refs
 
     // States/Variables/Selectors
@@ -75,21 +84,23 @@ export const MenuItem = withMemo(function MenuItem<Item>({
     // Effects
 
     // Other
-    const childElements = typeof children === "string" ? <Text>{children}</Text> : children as Element;
+    const childElements = typeof children === 'string' ? <Text>{children}</Text> : (children as Element);
 
     // RenderFunctions
 
-    return <Clickable
-        className={classNames(styles.item, {[styles.disabled]: disabled, [styles.active]: active}, className)}
-        {...props}
-        onClick={onClickInner}
-        onMouseEnter={onMouseEnterInner}
-        onMouseLeave={onMouseLeaveInner}
-        __allowChildren="all"
-    >
-        <Block className={classNames(styles.itemChildren)}>
-            {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon}/>}
-            {childElements}
-        </Block>
-    </Clickable>;
-}, styles, "text");
+    return (
+        <Clickable
+            className={classNames(styles.item, { [styles.disabled]: disabled, [styles.active]: active }, className)}
+            {...props}
+            onClick={onClickInner}
+            onMouseEnter={onMouseEnterInner}
+            onMouseLeave={onMouseLeaveInner}
+            __allowChildren="all"
+        >
+            <Block className={classNames(styles.itemChildren)}>
+                {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon} />}
+                {childElements}
+            </Block>
+        </Clickable>
+    );
+}, 'text');