@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.6

package/src/Components/Text/Text.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { TEXT_PRIO, TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { TEXT_PRIO, TEXT_SIZE, Text } from './Text';
 import React from 'react';
 
 const meta = {

package/src/Components/Text/Text.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Inline } from '@/Components/Layout/Inline';
+import { Inline } from '../Layout/Inline';
 import { JSX } from 'react/jsx-runtime';
-import { WrongChildError } from '@/WrongChildError';
+import { WrongChildError } from '../../WrongChildError';
 import classNames from 'classnames';
-import styles from '@/Components/Text/text.module.scss';
-import type { InlineProps } from '@/Components/Layout/Inline';
-import type { Recursive, ValueOf } from '@/TypeHelpers';
-import type { ViewProps } from '@/Components/Layout/View';
+import styles from './text.module.scss';
+import type { InlineProps } from '../Layout/Inline';
+import type { Recursive, ValueOf } from '../../TypeHelpers';
+import type { ViewProps } from '../Layout/View';
 import IntrinsicElements = JSX.IntrinsicElements;
 
 export const TEXT_PRIO = {

package/src/Components/Title/HoverTitle.tsx

@@ -0,0 +1,97 @@
+import { BaseInlineBlock } from '../Layout/BaseInlineBlock';
+import { useClientLayoutEffect } from '../Hooks/useClientLayoutEffect';
+import { useWindow } from '../../WindowContext/WindowContext';
+import { withMemo } from '../../helper/withMemo';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './hoverTitle.module.scss';
+import type { ReactElement, RefObject } from 'react';
+
+export type HoverTitleProps = {
+    children: ReactElement | undefined;
+    baseElement: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export const HoverTitle = withMemo(function HoverTitle({ children, baseElement, isOpen, onClose }: HoverTitleProps) {
+    // Refs
+    const titleRef = useRef<HTMLDivElement>(null);
+
+    // States/Variables/Selectors
+    const [top, setTop] = useState(0);
+    const [left, setLeft] = useState(0);
+
+    const window = useWindow();
+
+    // Callbacks
+
+    // Effects
+    useEffect(() => {
+        if (!isOpen) {
+            return undefined;
+        }
+        const listener = (e: MouseEvent | TouchEvent) => {
+            if (!titleRef.current?.contains(e.target as Node)) {
+                onClose();
+            }
+        };
+
+        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 });
+        };
+    }, [isOpen, onClose, window]);
+
+    useClientLayoutEffect(() => {
+        if (!titleRef.current || !baseElement.current || !isOpen) {
+            return undefined;
+        }
+        const titleElement = titleRef.current;
+        const base = baseElement.current;
+
+        const updateInnerPositions = () => {
+            const computedStyleElement = base.getBoundingClientRect();
+            const computedStyleTitle = getComputedStyle(titleElement);
+
+            const height = Number.parseFloat(computedStyleTitle.height);
+            let newY = computedStyleElement.top - height;
+            if (newY < 0) {
+                newY = computedStyleElement.top + computedStyleElement.height;
+            }
+            setTop(Math.min(window?.innerHeight ?? 1600, newY));
+
+            const width = Number.parseFloat(computedStyleTitle.width);
+            let newX = computedStyleElement.left;
+            if (newX > (window?.innerWidth ?? 0) - width) {
+                newX -= width;
+            }
+            setLeft(Math.max(0, newX));
+        };
+
+        const observer = new ResizeObserver(() => {
+            updateInnerPositions();
+        });
+        observer.observe(titleElement);
+        observer.observe(base);
+        updateInnerPositions();
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [window, baseElement, isOpen]);
+
+    // Other
+
+    // RenderFunctions
+    if (!isOpen || !children) {
+        return null;
+    }
+
+    return (
+        <BaseInlineBlock ref={titleRef} style={{ top, left }} className={styles.title}>
+            {children}
+        </BaseInlineBlock>
+    );
+});

package/src/Components/Title/Title.stories.tsx

@@ -0,0 +1,95 @@
+import { BaseIcon } from '../Icon/BaseIcon';
+import { Block } from '../Layout/Block';
+import { HoverMenu } from '../Menu/HoverMenu';
+import { MenuDivider } from '../Menu/MenuDivider';
+import { MenuItem } from '../Menu/MenuItem';
+import { Submenu } from '../Menu/Submenu';
+import { Text } from '../Text/Text';
+import { faCog, faCogs, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+import React from 'react';
+import type { HoverMenuProps } from '../Menu/HoverMenu';
+import type { StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    args: {
+        title: 'This is a title',
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: ({ title }: { title: string }) => {
+        return (
+            <Block title={title}>
+                <Text>Test</Text>
+            </Block>
+        );
+    },
+};
+
+export const WithElement: Story = {
+    render: ({ title }: { title: string }) => {
+        return (
+            <Block
+                title={
+                    <Block style={{ background: 'red', padding: 4 }} title="Inner Title">
+                        <Text>{title}</Text>
+                    </Block>
+                }
+            >
+                <Text>Test</Text>
+            </Block>
+        );
+    },
+};
+
+export const HoverMenuWithTitle: Story = {
+    args: {
+        openToSide: false,
+        children: <BaseIcon icon={faCogs} />,
+        items: (
+            <>
+                <MenuItem onClick={fn()} icon={faHome}>
+                    One
+                </MenuItem>
+                <MenuDivider />
+                <Submenu label="Submenu" icon={faCogs}>
+                    <MenuItem onClick={fn()} icon={faHome}>
+                        <Block title="Title">
+                            <Text>Has Title</Text>
+                        </Block>
+                    </MenuItem>
+                    <MenuItem onClick={fn()} icon={faHome}>
+                        <Block title="Title">
+                            <Text>Has Title</Text>
+                        </Block>
+                    </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>
+            </>
+        ),
+    },
+    render: (args: HoverMenuProps) => <HoverMenu {...args} />,
+};

package/src/Components/Title/hoverTitle.module.scss

@@ -0,0 +1,8 @@
+.title {
+  position: fixed;
+  background: var(--foreground-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 2px;
+  z-index: 1002;
+  padding: 2px 4px;
+}

package/src/Components/Title/withTitle.module.scss

@@ -0,0 +1,7 @@
+.titleContainer {
+  padding: 2px 4px;
+}
+
+.noInteraction {
+  pointer-events: none;
+}

package/src/Components/Title/withTitle.tsx

@@ -0,0 +1,48 @@
+import { HoverTitle } from './HoverTitle';
+import { TEXT_SIZE, Text } from '../Text/Text';
+import { useComposedRef } from '../Hooks/useComposedRef';
+import { useHoverMenu } from '../Menu/useHoverMenu';
+import { withMemo } from '../../helper/withMemo';
+import React, { useEffect, useRef } from 'react';
+import type { FunctionComponent, ReactElement, Ref } from 'react';
+
+export function withTitle<Props extends Record<string, any>>(Comp: FunctionComponent<Props>) {
+    return withMemo(
+        ({
+            title,
+            ref,
+            ...otherProps
+        }: Props & {
+            title?: string | ReactElement;
+            ref?: Ref<HTMLElement | null>;
+        }) => {
+            const titleRef = useRef<HTMLElement | null>(null);
+            const composedRef = useComposedRef(titleRef, ref);
+            const titleElement = typeof title === 'string' ? <Text size={TEXT_SIZE.small}>{title.trim()}</Text> : title;
+            const { isOpen, open, close } = useHoverMenu({ ref: titleRef });
+
+            useEffect(() => {
+                const element = titleRef.current;
+                if (!element || !title) {
+                    return undefined;
+                }
+                element.addEventListener('mouseenter', open);
+                element.addEventListener('mouseleave', close);
+
+                return () => {
+                    element.removeEventListener('mouseenter', open);
+                    element.removeEventListener('mouseleave', close);
+                };
+            }, [close, open, title]);
+
+            return (
+                <>
+                    <Comp {...(otherProps as Props)} ref={composedRef} />
+                    <HoverTitle baseElement={titleRef} isOpen={isOpen} onClose={close}>
+                        {titleElement}
+                    </HoverTitle>
+                </>
+            );
+        },
+    );
+}

package/src/Components/Toast/Toast.stories.tsx

@@ -1,4 +1,4 @@
-import { Toast } from '@/Components/Toast/Toast';
+import { Toast } from './Toast';
 import { fn } from 'storybook/test';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 

package/src/Components/Toast/Toast.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Clickable } from '@/Components/Clickable/Clickable';
+import { Clickable } from '../Clickable/Clickable';
 import { useCallback, useEffect, useState } from 'react';
-import { useListener } from '@/Components/Hooks/useListener';
-import { withMemo } from '@/helper/withMemo';
+import { useListener } from '../Hooks/useListener';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Toast/toast.module.scss';
-import type { Listener, OptionalListener } from '@/Components/Hooks/useListener';
-import type { RbmComponentProps, WithStringProps } from '@/Components/RbmComponentProps';
+import styles from './toast.module.scss';
+import type { Listener, OptionalListener } from '../Hooks/useListener';
+import type { RbmComponentProps, WithStringProps } from '../RbmComponentProps';
 import type { ReactNode } from 'react';
 
 type WithoutActionProps<DismissedData> = {

package/src/Components/Toast/ToastContainer.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Container } from '@/Components/Layout/Container';
+import { Container } from '../Layout/Container';
 import { ObjectHelper } from '@ainias42/js-helper';
-import { Toast } from '@/Components/Toast/Toast';
-import { ToastContext } from '@/Components/Toast/ToastContext';
+import { Toast } from './Toast';
+import { ToastContext } from './ToastContext';
 import { useCallback, useRef, useState } from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/Toast/toast.module.scss';
-import type { EmptyProps } from '@/helper/EmptyProps';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './toast.module.scss';
+import type { EmptyProps } from '../../helper/EmptyProps';
+import type { RbmComponentProps } from '../RbmComponentProps';
 import type { URecord } from '@ainias42/js-helper';
 
 export type ToastContainerProps = RbmComponentProps<EmptyProps>;

package/src/Components/TopBar/MoreButton.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { Icon } from '@/Components/Icon/Icon';
-import { TopBarButton } from '@/Components/TopBar/TopBarButton';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { TopBarButton } from './TopBarButton';
 import { faEllipsisH, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
-import { withMemo } from '@/helper/withMemo';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
-
-import baseStyles from '@/scss/baseClasses.module.scss';
+import { withMemo } from '../../helper/withMemo';
+import baseStyles from '../../scss/baseClasses.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type MoreButtonProps = RbmComponentProps<{
     disabled?: boolean;
@@ -29,8 +28,8 @@ export const MoreButton = withMemo(function MoreButton({ onClick, disabled, clas
 
     return (
         <TopBarButton onClick={onClick} disabled={disabled} className={className} style={style}>
-            <Icon icon={faEllipsisH} className={baseStyles.materialHidden} />
-            <Icon icon={faEllipsisV} className={baseStyles.flatHidden} />
+            <BaseIcon icon={faEllipsisH} className={baseStyles.materialHidden} />
+            <BaseIcon icon={faEllipsisV} className={baseStyles.flatHidden} />
         </TopBarButton>
     );
 });

package/src/Components/TopBar/TopBar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { TopBar } from '@/Components/TopBar/TopBar';
+import { TopBar } from './TopBar';
 import { faCog, faHome, faSearch, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fn } from 'storybook/test';
 

package/src/Components/TopBar/TopBar.tsx

@@ -1,24 +1,24 @@
 import * as React from 'react';
-import { ActionSheet } from '@/Components/ActionSheet/ActionSheet';
-import { Container } from '@/Components/Layout/Container';
-import { Icon } from '@/Components/Icon/Icon';
-import { MoreButton } from '@/Components/TopBar/MoreButton';
-import { TopBarButton } from '@/Components/TopBar/TopBarButton';
+import { ActionSheet } from '../ActionSheet/ActionSheet';
+import { BaseIcon } from '../Icon/BaseIcon';
+import { Container } from '../Layout/Container';
+import { MoreButton } from './MoreButton';
+import { TopBarButton } from './TopBarButton';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import type { ComponentType, ReactElement } from 'react';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
-import styles from '@/Components/TopBar/topBar.module.scss';
+import styles from './topBar.module.scss';
 
-import { Block } from '@/Components/Layout/Block';
-import { Flex } from '@/Components/Layout/Flex';
-import { Inline } from '@/Components/Layout/Inline';
-import { Text } from '@/Components/Text/Text';
-import { View } from '@/Components/Layout/View';
-import { withMemo } from '@/helper/withMemo';
+import { BaseBlock } from '../Layout/BaseBlock';
+import { Flex } from '../Layout/Flex';
+import { Inline } from '../Layout/Inline';
+import { Text } from '../Text/Text';
+import { View } from '../Layout/View';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import type { ActionSheetAction } from '@/Components/ActionSheet/ActionSheet';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { ActionSheetAction } from '../ActionSheet/ActionSheet';
+import type { IconSource } from '../Icon/BaseIcon';
 
 export type TopBarActionButtonType = {
     order?: number;
@@ -53,7 +53,7 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
         }
         let child: string | ReactElement | undefined = button.title;
         if (button.icon) {
-            child = <Icon icon={button.icon} />;
+            child = <BaseIcon icon={button.icon} />;
         }
         return (
             <TopBarButton key={key} onClick={button.action} disabled={button.disabled} __allowChildren="all">
@@ -165,9 +165,9 @@ export const TopBar = withMemo(function TopBar({
                 <Flex grow={true} className={classNames(styles.buttonContainer, styles.left)} horizontal={true}>
                     {leftButtonComponents}
                 </Flex>
-                <Block className={styles.titleContainer}>
+                <BaseBlock className={styles.titleContainer}>
                     <Text className={styles.title}>{title}</Text>
-                </Block>
+                </BaseBlock>
                 <Flex grow={true} className={classNames(styles.buttonContainer, styles.right)} horizontal={true}>
                     {rightButtonComponents}
                 </Flex>

package/src/Components/TopBar/TopBarButton.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { withMemo } from '@/helper/withMemo';
+import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
-import styles from '@/Components/TopBar/topBar.module.scss';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import styles from './topBar.module.scss';
+import type { RbmComponentProps } from '../RbmComponentProps';
 
 export type TopBarButtonProps = RbmComponentProps<{
     disabled?: boolean;

package/src/WrongChildError.ts

@@ -11,6 +11,7 @@ export class WrongChildError extends Error {
         super(
             `Expected Children of type '${expectedType}' but got type '${gotType}' in component ${component}. Value of child is '${value}'`,
         );
+
         this.name = 'WrongChildError';
         this.childValue = child;
     }

package/src/helper/nonEmptyString.ts

@@ -1,4 +1,4 @@
-import { Characters } from '@/helper/Characters';
+import { Characters } from './Characters';
 
 export function nonEmptyString(str: string | undefined | null, other = Characters.NBSP) {
     if (!str) {

package/src/helper/withMemo.ts

@@ -1,8 +1,8 @@
-import { memoComparator } from '@/helper/memoComparator';
-import { withRestrictedChildren } from '@/helper/withRestrictedChildren';
+import { memoComparator } from './memoComparator';
+import { withRestrictedChildren } from './withRestrictedChildren';
 import React from 'react';
 import type { ComponentType } from 'react';
-import type { RESTRICT_CHILDREN } from '@/helper/withRestrictedChildren';
+import type { RESTRICT_CHILDREN } from './withRestrictedChildren';
 
 export function withMemo<C extends ComponentType<any>>(
     component: C,

package/src/helper/withRestrictedChildren.tsx

@@ -1,7 +1,7 @@
-import { WrongChildError } from '@/WrongChildError';
+import { WrongChildError } from '../WrongChildError';
 import React from 'react';
 import type { ComponentType, ReactElement } from 'react';
-import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { RbmComponentProps } from '../Components/RbmComponentProps';
 
 export const RESTRICT_CHILDREN = {
     allowChildren: undefined as undefined | 'all' | 'html' | 'text',
@@ -46,7 +46,9 @@ export function withRestrictedChildren<C extends ComponentType<RbmComponentProps
         return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            <Component {...(newProps as Props)}>{children}</Component>
+            <Component {...(newProps as Props)} __allowChildren={__allowChildren}>
+                {children}
+            </Component>
         );
     };
     hocComponent.displayName = displayName;

package/src/index.ts

@@ -46,10 +46,13 @@ export * from './Components/Hooks/useOnce';
 export * from './Components/Hooks/useOnMount';
 export * from './Components/Hooks/useRerender';
 export * from './Components/Hooks/useWindowDimensions';
+export * from './Components/Icon/BaseIcon';
 export * from './Components/Icon/DoubleIcon';
 export * from './Components/Icon/Icon';
 export * from './Components/Image/Image';
 export * from './Components/InViewport/InViewport';
+export * from './Components/Layout/BaseBlock';
+export * from './Components/Layout/BaseInlineBlock';
 export * from './Components/Layout/Block';
 export * from './Components/Layout/Container';
 export * from './Components/Layout/Flex';
@@ -66,6 +69,7 @@ export * from './Components/Menu/MenuCloseContext';
 export * from './Components/Menu/MenuDivider';
 export * from './Components/Menu/MenuItem';
 export * from './Components/Menu/Submenu';
+export * from './Components/Menu/useHoverMenu';
 export * from './Components/Menu/useMenu';
 export * from './Components/SizeCalculator/SizeCalculator';
 export * from './Components/SpoilerList/SpoilerList';
@@ -75,6 +79,8 @@ export * from './Components/TabBar/TabBarButton';
 export * from './Components/Table/Table';
 export * from './Components/Text/Heading';
 export * from './Components/Text/Text';
+export * from './Components/Title/HoverTitle';
+export * from './Components/Title/withTitle';
 export * from './Components/Toast/Toast';
 export * from './Components/Toast/ToastContainer';
 export * from './Components/Toast/ToastContext';

package/tsconfig.json

@@ -3,13 +3,7 @@
   "compilerOptions": {
     "jsx": "react",
     "outDir": "./dist",
-    "declaration": true,
-    "baseUrl": "./",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    }
+    "declaration": true
   },
   "exclude": [
     "../../node_modules",
@@ -19,6 +13,6 @@
   "include": [
     "src/**/*.tsx",
     "src/**/*.ts",
-        ".storybook/**/*.ts"
+    ".storybook/**/*.ts"
   ]
 }