@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.2

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MenuItem } from '@/Components/Menu/MenuItem';
+import { Submenu } from '@/Components/Menu/Submenu';
+import { faBook, faCog, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+import React from 'react';
+import type { SubmenuProps } from '@/Components/Menu/Submenu';
+
+const meta = {
+    component: Submenu,
+    render: (args) => (
+        <Submenu {...args}>
+            <MenuItem icon={faHome} onClick={fn()}>
+                Eins
+            </MenuItem>
+            <MenuItem icon={faUser} onClick={fn()}>
+                Zwei
+            </MenuItem>
+            <MenuItem icon={faCog} onClick={fn()}>
+                Drei
+            </MenuItem>
+        </Submenu>
+    ),
+} satisfies Meta<typeof Submenu>;
+
+export default meta;
+
+type Story = StoryObj<SubmenuProps>;
+
+export const Default: Story = {
+    args: {
+        label: 'Submenu',
+        icon: faBook,
+        disabled: false,
+    },
+};

package/src/Components/Menu/Submenu.tsx

@@ -1,37 +1,42 @@
-import {RbmComponentProps, WithNoStringAndChildrenProps} from "../RbmComponentProps";
-import {Icon, IconSource} from "../Icon/Icon";
-import {Clickable} from "../Clickable/Clickable";
-import classNames from "classnames";
-import styles from "./menu.scss";
-import React, {useCallback, useRef, useState} from "react";
-import {Text} from "../Text/Text";
-import {withMemo} from "../../helper/withMemo";
-import {Block} from "../Layout/Block";
-import {useWindow} from "../../WindowContext/WindowContext";
-import {Flex} from "../Layout/Flex";
-import {Grow} from "../Layout/Grow";
-import {faChevronRight} from "@fortawesome/free-solid-svg-icons";
-import {MenuCloseContextProvider, useMenuClose} from "./MenuCloseContext";
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Flex } from '@/Components/Layout/Flex';
+import { Grow } from '@/Components/Layout/Grow';
+import { Icon } from '@/Components/Icon/Icon';
+import { MenuCloseContextProvider, useMenuClose } from '@/Components/Menu/MenuCloseContext';
+import { Text } from '@/Components/Text/Text';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { useWindow } from '@/WindowContext/WindowContext';
+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 { IconSource } from '@/Components/Icon/Icon';
+import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
 
-export type SubmenuProps = RbmComponentProps<{
-    label: string, icon?: IconSource;
-    iconColor?: string;
-    disabled?: boolean;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-}, WithNoStringAndChildrenProps>;
+export type SubmenuProps = RbmComponentProps<
+    {
+        label: string;
+        icon?: IconSource;
+        iconColor?: string;
+        disabled?: boolean;
+        onMouseEnter?: () => void;
+        onMouseLeave?: () => void;
+    },
+    WithNoStringAndChildrenProps
+>;
 
 export const Submenu = withMemo(function Submenu({
-                                                     children,
-                                                     label,
-                                                     icon,
-                                                     iconColor,
-                                                     className,
-                                                     style,
-                                                     disabled = false,
-                                                     onMouseEnter,
-                                                     onMouseLeave,
-                                                 }: SubmenuProps) {
+    children,
+    label,
+    icon,
+    iconColor,
+    className,
+    style,
+    disabled = false,
+    onMouseEnter,
+    onMouseLeave,
+}: SubmenuProps) {
     // Refs
 
     // States/Variables/Selectors
@@ -50,11 +55,11 @@ export const Submenu = withMemo(function Submenu({
         if (!submenuRef.current || !containerRef.current) {
             return;
         }
-        const {width, height} = getComputedStyle(containerRef.current);
-        const {right, top} = submenuRef.current.getBoundingClientRect();
+        const { width, height } = getComputedStyle(containerRef.current);
+        const { right, top } = submenuRef.current.getBoundingClientRect();
 
-        setOpenLeft(right + parseFloat(width) >= (window?.innerWidth ?? 0));
-        setOpenTop(top + parseFloat(height) >= (window?.innerHeight ?? 0));
+        setOpenLeft(right + Number.parseFloat(width) >= (window?.innerWidth ?? 0));
+        setOpenTop(top + Number.parseFloat(height) >= (window?.innerHeight ?? 0));
         setIsOpen(true);
         onMouseEnter?.();
     }, [onMouseEnter, window?.innerHeight, window?.innerWidth]);
@@ -76,26 +81,35 @@ export const Submenu = withMemo(function Submenu({
 
     // RenderFunctions
 
-    return <MenuCloseContextProvider value={closeAllMenus}>
-        <Clickable
-            onMouseEnter={recalculateSubmenuPosition}
-            onMouseLeave={closeSubmenu}
-            className={classNames(styles.item, styles.submenu, {
-                [styles.open]: isOpen,
-                [styles.openLeft]: openLeft,
-                [styles.openTop]: openTop,
-                [styles.disabled]: disabled
-            }, className)}
-            style={style}
-        >
-            <Flex ref={submenuRef} className={classNames(styles.itemChildren)} horizontal={true}>
-                {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon}/>}
-                <Grow><Text>{label}</Text></Grow>
-                <Icon icon={faChevronRight}/>
-            </Flex>
-            <Block className={styles.container} __allowChildren="all" ref={containerRef}>
-                {children}
-            </Block>
-        </Clickable>
-    </MenuCloseContextProvider>;
-}, styles);
+    return (
+        <MenuCloseContextProvider value={closeAllMenus}>
+            <Clickable
+                onMouseEnter={recalculateSubmenuPosition}
+                onMouseLeave={closeSubmenu}
+                className={classNames(
+                    styles.item,
+                    styles.submenu,
+                    {
+                        [styles.open]: isOpen,
+                        [styles.openLeft]: openLeft,
+                        [styles.openTop]: openTop,
+                        [styles.disabled]: disabled,
+                    },
+                    className,
+                )}
+                style={style}
+            >
+                <Flex ref={submenuRef} className={classNames(styles.itemChildren)} horizontal={true}>
+                    {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon} />}
+                    <Grow>
+                        <Text>{label}</Text>
+                    </Grow>
+                    <Icon icon={faChevronRight} />
+                </Flex>
+                <Block className={styles.container} __allowChildren="all" ref={containerRef}>
+                    {children}
+                </Block>
+            </Clickable>
+        </MenuCloseContextProvider>
+    );
+});

package/src/Components/Menu/{menu.scss → menu.module.scss}

@@ -1,9 +1,23 @@
+@use "../../scss/vars" as *;
+
+@include vars {
+  --menu-background: var(--foreground-primary);
+  --menu-border-color: var(--border-light);
+  --menu-divider-color: var(--border-light);
+  --menu-item-active-background: var(--foreground-tertiary);
+  --menu-item-hover-background: var(--foreground-secondary);
+  --submenu-background: var(--foreground-primary);
+  --submenu-border-color: var(--border-light);
+  --menu-z-index: 1002;
+  --submenu-z-index: 10;
+}
+
 .menu {
   position: fixed;
-  background: #ffffff;
-  border: 1px solid var(--border-light);
+  background: var(--menu-background);
+  border: 1px solid var(--menu-border-color);
   border-radius: 2px;
-  z-index: 1002;
+  z-index: var(--menu-z-index);
 
   &.hidden {
     visibility: hidden;
@@ -15,16 +29,15 @@
   margin-right: 4px;
   padding-top: 1px;
   margin-top: 1px;
-  border-top: 1px solid var(--border-light);
+  border-top: 1px solid var(--menu-divider-color);
 }
 
 .item {
   padding: 0 4px;
   display: flex;
-  //background: #ffffff;
 
   &.active {
-    background-color: #e1e1e1;
+    background: var(--menu-item-active-background);
   }
 
   .itemChildren {
@@ -33,7 +46,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    //border-top: 1px solid var(--border-light);
     white-space: nowrap;
 
     .icon {
@@ -51,7 +63,7 @@
   }
 
   &:hover {
-    background-color: #f5f5f5;
+    background-color: var(--menu-item-hover-background);
   }
 
   &:first-child > .itemChildren {
@@ -85,10 +97,10 @@
     position: absolute;
     top: 3px;
     left: calc(100% - 3px);
-    background: #ffffff;
-    border: 1px solid var(--border-light);
+    background: var(--submenu-background);
+    border: 1px solid var(--submenu-border-color);
     border-radius: 2px;
-    z-index: 10;
+    z-index: var(--submenu-z-index);
   }
 
   &.openLeft .container {

package/src/Components/Menu/useMenu.ts

@@ -1,5 +1,6 @@
-import { useCallback, useState, MouseEvent } from 'react';
-import { MenuProps } from './Menu';
+import { useCallback, useState } from 'react';
+import type { MenuProps } from '@/Components/Menu/Menu';
+import type { MouseEvent } from 'react';
 
 export function useMenu() {
     const [isOpen, setIsOpen] = useState(false);
@@ -9,7 +10,7 @@ export function useMenu() {
         setIsOpen(true);
     }, []);
 
-    const props: Omit<MenuProps, 'items'|"children"> = {
+    const props: Omit<MenuProps, 'items' | 'children'> = {
         isOpen,
         x: position.x,
         y: position.y,

package/src/Components/RbmComponentProps.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Recursive } from '../TypeHelpers';
-import { JSX } from "react/jsx-runtime";
+import type { CSSProperties, ReactNode } from 'react';
+import type { JSX } from 'react/jsx-runtime';
+import type { Recursive } from '@/TypeHelpers';
 
 export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =
@@ -27,10 +27,9 @@ export type WithStringProps = {
     children?: Recursive<string>;
 };
 
-export type WithChildren =
-    | {
-    children: ReactNode
-    __allowChildren?: "text"|"all"|"html";
+export type WithChildren = {
+    children: ReactNode;
+    __allowChildren?: 'text' | 'all' | 'html';
 };
 
 export type WithStringAndChildrenProps = {

package/src/Components/SizeCalculator/SizeCalculator.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { WithNoStringAndChildrenProps } from '../RbmComponentProps';
-import { InlineBlock } from '../Layout/InlineBlock';
+import { InlineBlock } from '@/Components/Layout/InlineBlock';
 import { useEffect, useRef } from 'react';
+import { withMemo } from '@/helper/withMemo';
+import type { WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
 
 export type SizeCalculatorProps = {
     onSize: (width: number, height: number) => void;

package/src/Components/SpoilerList/Spoiler/Spoiler.stories.tsx

@@ -0,0 +1,21 @@
+import { Spoiler } from '@/Components/SpoilerList/Spoiler/Spoiler';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: Spoiler,
+} satisfies Meta<typeof Spoiler>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        initialOpen: false,
+        noClosingAnimation: false,
+        noAnimation: false,
+        onlyTitleToggles: false,
+        title: 'Spoiler Title',
+        children: 'Some hidden Children',
+    },
+};

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -1,17 +1,20 @@
 import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { Flex } from '../../Layout/Flex';
-import { Grow } from '../../Layout/Grow';
-import { Text, TEXT_SIZE } from '../../Text/Text';
-import { Block } from '../../Layout/Block';
-import { Clickable } from '../../Clickable/Clickable';
-import styles from './spoiler.scss';
-import classNames from 'classnames';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
-import { Icon, IconSource } from '../../Icon/Icon';
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Flex } from '@/Components/Layout/Flex';
+import { Grow } from '@/Components/Layout/Grow';
+import { Icon } from '@/Components/Icon/Icon';
+import { TEXT_SIZE, Text } from '@/Components/Text/Text';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useListener } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
+import classNames from 'classnames';
+import styles from '@/Components/SpoilerList/Spoiler/spoiler.module.scss';
+import type { IconSource } from '@/Components/Icon/Icon';
+import type { MouseEvent, ReactNode } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { RbmComponentProps, WithChildren } from '@/Components/RbmComponentProps';
 
 export type SpoilerProps<OnClickData> = RbmComponentProps<
     {
@@ -23,23 +26,24 @@ export type SpoilerProps<OnClickData> = RbmComponentProps<
         noAnimation?: boolean;
         openIcon?: IconSource | null;
         closeIcon?: IconSource | null;
-    } & OptionalListener<'onClick', OnClickData>
+    } & OptionalListener<'onClick', OnClickData>,
+    WithChildren
 >;
 
-function Spoiler<OnClickData>({
-                                  title,
-                                  children,
-                                  initialOpen = false,
-                                  noClosingAnimation = false,
-                                  noAnimation = false,
-                                  openIcon = faChevronDown,
-                                  closeIcon = faChevronUp,
-                                  className,
-                                  onlyTitleToggles = false,
-                                  style,
-                                  open,
-                                  ...listenerProps
-                              }: SpoilerProps<OnClickData>) {
+export const Spoiler = withMemo(function Spoiler<OnClickData>({
+    title,
+    children,
+    initialOpen = false,
+    noClosingAnimation = false,
+    noAnimation = false,
+    openIcon = faChevronDown,
+    closeIcon = faChevronUp,
+    className,
+    onlyTitleToggles = false,
+    style,
+    open,
+    ...listenerProps
+}: SpoilerProps<OnClickData>) {
     // Variables
 
     // Refs
@@ -54,19 +58,20 @@ function Spoiler<OnClickData>({
     // Callbacks
     const onClickListener = useListener<'onClick', OnClickData, boolean>('onClick', listenerProps);
 
-    const toggleOpen = useCallback((ev: MouseEvent) => {
-        console.log("LOG-d target", ev.target);
-        if (open !== undefined) {
-            onClickListener?.(!open);
-        } else {
-            setIsInitialValue(false);
-            setIsOpen((old) => {
-                console.log("LOG-d toggleOpen", !old);
-                onClickListener?.(!old);
-                return !old;
-            });
-        }
-    }, [onClickListener, open]);
+    const toggleOpen = useCallback(
+        (ev: MouseEvent) => {
+            if (open !== undefined) {
+                onClickListener?.(!open);
+            } else {
+                setIsInitialValue(false);
+                setIsOpen((old) => {
+                    onClickListener?.(!old);
+                    return !old;
+                });
+            }
+        },
+        [onClickListener, open],
+    );
 
     // Effects
     useEffect(() => {
@@ -80,11 +85,11 @@ function Spoiler<OnClickData>({
         typeof title === 'string' || typeof title === 'number' ? <Text size={TEXT_SIZE.large}>{title}</Text> : title;
 
     // Render Functions
-    const icon = open ?? isOpen ? closeIcon : openIcon;
+    const icon = (open ?? isOpen) ? closeIcon : openIcon;
 
     return (
         <Clickable
-            onClick={onlyTitleToggles ? undefined: toggleOpen}
+            onClick={onlyTitleToggles ? undefined : toggleOpen}
             className={classNames(className, styles.spoiler, {
                 [styles.open]: open ?? isOpen,
                 [styles.noAnimation]: isInitialValue || noAnimation,
@@ -95,7 +100,7 @@ function Spoiler<OnClickData>({
             <Clickable onClick={toggleOpen}>
                 <Flex horizontal={true}>
                     <Grow __allowChildren="all">{titleComponent}</Grow>
-                    {icon ? <Icon icon={icon} className={styles.icon}/> : null}
+                    {icon ? <Icon icon={icon} className={styles.icon} /> : null}
                 </Flex>
             </Clickable>
             <Block className={styles.bodyContainer}>
@@ -105,8 +110,4 @@ function Spoiler<OnClickData>({
             </Block>
         </Clickable>
     );
-}
-
-// Need SpoilerMemo for autocompletion of phpstorm
-const SpoilerMemo = withMemo(Spoiler, styles, "all");
-export { SpoilerMemo as Spoiler };
+}, 'all');

package/src/Components/SpoilerList/Spoiler/{spoiler.scss → spoiler.module.scss}

@@ -1,10 +1,20 @@
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --spoiler-border-color: var(--border-light);
+  --spoiler-border-top-color: var(--spoiler-border-color);
+  --spoiler-border-bottom-color: var(--spoiler-border-color);
+}
+
 @keyframes spoilerContainerOpen {
   0% {
     height: 0;
   }
+
   1% {
     height: initial;
   }
+
   100% {
     height: initial;
   }
@@ -16,14 +26,16 @@
     transform: translateY(-100%);
     opacity: 0;
   }
+
   1% {
     height: initial;
     transform: translateY(-100%);
     opacity: 0;
   }
+
   100% {
     height: initial;
-    transform: none !important;
+    transform: none;
     opacity: 1;
   }
 }
@@ -32,9 +44,11 @@
   0% {
     height: initial;
   }
+
   99% {
     height: initial;
   }
+
   100% {
     height: 0;
   }
@@ -46,11 +60,13 @@
     transform: translateY(0%);
     opacity: 1;
   }
+
   99% {
     height: initial;
     transform: translateY(-100%);
     opacity: 0;
   }
+
   100% {
     height: 0;
     transform: translateY(-100%);
@@ -60,22 +76,37 @@
 
 .spoiler {
   display: block;
-  border-top: 1px solid var(--border-strong);
-  border-bottom: 1px solid var(--border-strong);
+  border-top: 1px solid var(--spoiler-border-top-color);
+  border-bottom: 1px solid var(--spoiler-border-bottom-color);
 
   .icon {
     margin-right: 0.5rem;
   }
 
-  &.open, &.open.noClosingAnimation {
+  .bodyContainer {
+    height: 0;
+    overflow: hidden;
+    animation-name: spoilerContainerClose;
+    animation-duration: 0.7s;
+    animation-fill-mode: forwards;
+
+    .body {
+      height: 0;
+      overflow: hidden;
+      transform-origin: left top;
+      transform: translateY(-100%);
+      animation-name: spoilerClose;
+      animation-duration: 0.7s;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  &.noClosingAnimation {
     .bodyContainer {
-      height: initial;
-      animation-name: spoilerContainerOpen;
+      animation-name: none;
 
       .body {
-        height: initial;
-        transform: none;
-        animation-name: spoilerOpen;
+        animation-name: none;
       }
     }
   }
@@ -90,31 +121,16 @@
     }
   }
 
-  &.noClosingAnimation {
+  &.open, &.open.noClosingAnimation {
     .bodyContainer {
-      animation-name: none;
+      height: initial;
+      animation-name: spoilerContainerOpen;
 
       .body {
-        animation-name: none;
+        height: initial;
+        transform: none;
+        animation-name: spoilerOpen;
       }
     }
   }
-
-  .bodyContainer {
-    height: 0;
-    overflow: hidden;
-    animation-name: spoilerContainerClose;
-    animation-duration: 0.7s;
-    animation-fill-mode: forwards;
-
-    .body {
-      height: 0;
-      overflow: hidden;
-      transform-origin: left top;
-      transform: translateY(-100%);
-      animation-name: spoilerClose;
-      animation-duration: 0.7s;
-      animation-fill-mode: forwards;
-    }
-  }
 }

package/src/Components/SpoilerList/SpoilerList.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { ReactElement } from 'react';
-import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { Block } from '../Layout/Block';
+import { Block } from '@/Components/Layout/Block';
+import { Spoiler } from '@/Components/SpoilerList/Spoiler/Spoiler';
+import { useSpoilerGroup } from '@/Components/SpoilerList/useSpoilerGroup';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { Spoiler } from './Spoiler/Spoiler';
-import { useSpoilerGroup } from './useSpoilerGroup';
+import type { RbmComponentProps, WithNoChildren } from '@/Components/RbmComponentProps';
+import type { ReactElement } from 'react';
 
 export type SpoilerItem<BodyData, TitleData = string> = {
     title: TitleData;
@@ -24,7 +24,7 @@ export type SpoilerListProps<BodyData, TitleData = string> = RbmComponentProps<
 
 const stringIdentity = (data: any) => data as string;
 
-function SpoilerList<BodyData, TitleData = string>({
+export const SpoilerList = withMemo(function SpoilerList<BodyData, TitleData = string>({
     data,
     renderBody,
     renderTitle = stringIdentity,
@@ -56,8 +56,4 @@ function SpoilerList<BodyData, TitleData = string>({
             ))}
         </Block>
     );
-}
-
-// Need SpoilerListMemo for autocompletion of phpstorm
-const SpoilerListMemo = withMemo(SpoilerList);
-export { SpoilerListMemo as SpoilerList };
+});