@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.2

package/src/Components/Hooks/useListener.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 export type ListenerWithData<DataType, Event = void | any, ReturnType = void> = (
     eventData: Event,
-    extraData: DataType
+    extraData: DataType,
 ) => ReturnType;
 export type ListenerWithoutData<Event = void | any, ReturnType = void> = (eventData: Event) => ReturnType;
 
@@ -24,7 +24,7 @@ export type OptionalListener<ListenerProperty extends string, DataType, Event =
 
 export function useListener<ListenerName extends string, DataType, EventType = any, ReturnType = void>(
     listener: ListenerName,
-    listenerProps: OptionalListener<ListenerName, DataType, EventType, ReturnType>
+    listenerProps: OptionalListener<ListenerName, DataType, EventType, ReturnType>,
 ) {
     const listenerDataName = `${listener}Data` as keyof typeof listenerProps;
     const listenerName = listener as keyof typeof listenerProps;
@@ -47,7 +47,7 @@ export function useListener<ListenerName extends string, DataType, EventType = a
             }
             return res as ReturnType;
         },
-        [callback, extraData]
+        [callback, extraData],
     );
 }
 
@@ -61,7 +61,7 @@ export function useListenerWithExtractedProps<
         DataType,
         EventType,
         ReturnType
-    >
+    >,
 >(listener: ListenerName, listenerProps: PropTypes) {
     const {
         [`${listener}Data` as keyof typeof listenerProps]: _,

package/src/Components/Hooks/useMousePosition.ts

@@ -1,5 +1,5 @@
-import {useRef} from "react";
-import { useClientLayoutEffect } from "./useClientLayoutEffect";
+import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
+import { useRef } from 'react';
 
 export function useMousePosition() {
     const position = useRef({ x: 0, y: 0 });

package/src/Components/Hooks/useRerender.ts

@@ -1,21 +1,24 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState } from 'react';
 
-export function useRerender(defaultDelay = 0){
-    const timeoutRef = useRef<ReturnType<typeof setTimeout>|undefined>(undefined);
+export function useRerender(defaultDelay = 0) {
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
     const [renderCounter, updateRenderCounter] = useState(0);
-    const update = useCallback((delay = defaultDelay) => {
-        if (delay === 0){
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = undefined;
-            updateRenderCounter(old => old + 1);
-        } else if (!timeoutRef.current) {
-            timeoutRef.current = setTimeout(() => {
+    const update = useCallback(
+        (delay = defaultDelay) => {
+            if (delay === 0) {
                 clearTimeout(timeoutRef.current);
                 timeoutRef.current = undefined;
-                updateRenderCounter(old => old + 1);
-            }, delay);
-        }
-    }, [defaultDelay]);
+                updateRenderCounter((old) => old + 1);
+            } else if (!timeoutRef.current) {
+                timeoutRef.current = setTimeout(() => {
+                    clearTimeout(timeoutRef.current);
+                    timeoutRef.current = undefined;
+                    updateRenderCounter((old) => old + 1);
+                }, delay);
+            }
+        },
+        [defaultDelay],
+    );
 
     return [update, renderCounter] as const;
 }

package/src/Components/Hooks/useWindowDimensions.ts

@@ -1,17 +1,16 @@
-import {useWindow} from "../../WindowContext/WindowContext";
-import {useEffect, useReducer} from "react";
-
+import { useEffect, useReducer } from 'react';
+import { useWindow } from '@/WindowContext/WindowContext';
 
 export function useWindowDimensions() {
-	const [, redraw] = useReducer((x) => x + 1, 0);
-	const window = useWindow();
+    const [, redraw] = useReducer((x) => x + 1, 0);
+    const window = useWindow();
 
-	useEffect(() => {
-		window?.addEventListener('resize', redraw);
-		return () => {
-			window?.removeEventListener('resize', redraw);
-		};
-	}, [window]);
+    useEffect(() => {
+        window?.addEventListener('resize', redraw);
+        return () => {
+            window?.removeEventListener('resize', redraw);
+        };
+    }, [window]);
 
-    return {x: window?.innerWidth ?? 0, y: window?.innerHeight ?? 0};
+    return { x: window?.innerWidth ?? 0, y: window?.innerHeight ?? 0 };
 }

package/src/Components/Icon/DoubleIcon.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DoubleIcon } from '@/Components/Icon/DoubleIcon';
+import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
+
+const meta = {
+    component: DoubleIcon,
+    argTypes: {
+        icon: {
+            options: ['house', 'user'],
+            mapping: {
+                house: faHouse,
+                user: faUser,
+            },
+        },
+        secondIcon: {
+            options: ['house', 'user'],
+            mapping: {
+                house: faHouse,
+                user: faUser,
+            },
+        },
+    },
+} satisfies Meta<typeof DoubleIcon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        icon: faHouse,
+        secondIcon: faUser,
+        noMargin: false,
+        color: '#000000',
+        secondIconColor: '#757575',
+    },
+};

package/src/Components/Icon/DoubleIcon.tsx

@@ -1,16 +1,21 @@
+import { Icon } from '@/Components/Icon/Icon';
+import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { withMemo } from '@/helper/withMemo';
 import React from 'react';
-import {withMemo} from "../../helper/withMemo";
-import {InlineBlock} from "../Layout/InlineBlock";
-import {Icon, IconProps, IconSource} from "./Icon";
-
-import styles from "./icon.scss";
+import styles from '@/Components/Icon/icon.module.scss';
+import type { IconProps, IconSource } from '@/Components/Icon/Icon';
 
 export type DoubleIconProps = IconProps & {
-	secondIcon: IconSource;
-	secondIconColor?: string;
-}
-
-export const DoubleIcon = withMemo(function DoubleIcon({secondIcon, secondIconColor, color, ...otherProps}: DoubleIconProps) {
+    secondIcon: IconSource;
+    secondIconColor?: string;
+};
+
+export const DoubleIcon = withMemo(function DoubleIcon({
+    secondIcon,
+    secondIconColor,
+    color,
+    ...otherProps
+}: DoubleIconProps) {
     // Refs
 
     // States/Variables/Selectors
@@ -25,10 +30,10 @@ export const DoubleIcon = withMemo(function DoubleIcon({secondIcon, secondIconCo
 
     // RenderFunctions
 
-    return <InlineBlock className={styles.doubleIconContainer}>
-		<Icon {...otherProps} color={color}/>
-		<Icon icon={secondIcon} size="xs"
-			  className={styles.secondIcon}
-			  color={secondIconColor ?? color}/>
-	</InlineBlock>;
-}, styles);
+    return (
+        <InlineBlock className={styles.doubleIconContainer}>
+            <Icon {...otherProps} color={color} />
+            <Icon icon={secondIcon} size="xs" className={styles.secondIcon} color={secondIconColor ?? color} />
+        </InlineBlock>
+    );
+});

package/src/Components/Icon/Icon.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Icon } from '@/Components/Icon/Icon';
+import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
+
+const meta = {
+    component: Icon,
+    argTypes: {
+        icon: {
+            options: ['house', 'user'],
+            mapping: {
+                house: faHouse,
+                user: faUser,
+            },
+        },
+    },
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        icon: faHouse,
+        noMargin: false,
+        color: '#000000',
+    },
+};
+
+export const ImageIcon: Story = {
+    args: {
+        icon: 'https://church.tools/wp-content/uploads/2025/07/Favicon_CT-150x150.png',
+        noMargin: false,
+        color: '#000000',
+    },
+};

package/src/Components/Icon/Icon.tsx

@@ -1,12 +1,13 @@
-import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome/react-fontawesome';
 import * as React from 'react';
-import {RbmComponentProps} from '../RbmComponentProps';
-import {Override} from '../../TypeHelpers';
-import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {withMemo} from '../../helper/withMemo';
-import {IconDefinition} from '@fortawesome/free-regular-svg-icons';
-import classNames from "classnames";
-import styles from "./icon.scss";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { withMemo } from '@/helper/withMemo';
+import classNames from 'classnames';
+import styles from '@/Components/Icon/icon.module.scss';
+import type { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type IconSource = IconProp | string | IconDefinition;
 
@@ -14,14 +15,22 @@ export type IconProps = RbmComponentProps<
     Override<
         FontAwesomeIconProps,
         {
-            noMargin?: boolean
+            noMargin?: boolean;
             icon: IconSource;
             alt?: string;
         }
     >
 >;
 
-export const Icon = withMemo(function Icon({icon, alt, className, noMargin = true, style, title, ...props}: IconProps) {
+export const Icon = withMemo(function Icon({
+    icon,
+    alt,
+    className,
+    noMargin = true,
+    style,
+    title,
+    ...props
+}: IconProps) {
     // Variables
 
     // States
@@ -39,11 +48,24 @@ export const Icon = withMemo(function Icon({icon, alt, className, noMargin = tru
 
     // Render Functions
 
-    if (typeof icon === 'string' && (icon.indexOf('.') !== -1 || icon.startsWith("data:"))) {
-        return <img src={icon} alt={alt} className={classNames(styles.imgIcon, className, {[styles.margin]: !noMargin})}
-                    style={style} title={title}/>;
+    if (typeof icon === 'string' && (icon.includes('.') || icon.startsWith('data:'))) {
+        return (
+            <img
+                src={icon}
+                alt={alt}
+                className={classNames(styles.imgIcon, className, { [styles.margin]: !noMargin })}
+                style={style}
+                title={title}
+            />
+        );
     }
-    return <FontAwesomeIcon {...props} icon={icon as IconProp}
-                            className={classNames(className, {[styles.margin]: !noMargin})} style={style}
-                            title={title}/>;
-}, styles);
+    return (
+        <FontAwesomeIcon
+            {...props}
+            icon={icon as IconProp}
+            className={classNames(className, { [styles.margin]: !noMargin })}
+            style={style}
+            title={title}
+        />
+    );
+});

package/src/Components/Icon/{icon.scss → icon.module.scss}

@@ -2,6 +2,7 @@
   margin-left: 0.3rem;
   margin-right: 0.3rem;
 }
+
 .imgIcon {
   width: calc(1em + 4px);
   height: calc(1em + 4px);
@@ -11,6 +12,7 @@
 .doubleIconContainer {
   position: relative;
   padding: 3px;
+
   .secondIcon {
     position: absolute;
     right: 3px;

package/src/Components/Image/Image.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Image } from '@/Components/Image/Image';
+
+const meta = {
+    component: Image,
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        src: 'https://church.tools/wp-content/uploads/2025/07/Favicon_CT-150x150.png',
+    },
+};

package/src/Components/Image/Image.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
-import { CSSProperties } from 'react';
-import { Override } from '../../TypeHelpers';
-
-import styles from './image.scss';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
+import styles from '@/Components/Image/image.module.scss';
+import type { CSSProperties } from 'react';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps, WithNoChildren } from '@/Components/RbmComponentProps';
 
 export type ImageProps = RbmComponentProps<
     Override<
@@ -19,7 +18,7 @@ export type ImageProps = RbmComponentProps<
     WithNoChildren
 >;
 
-function Image({ src, alt = '', className, style, ...otherProps }: ImageProps) {
+export const Image = withMemo(function Image({ src, alt = '', className, style, ...otherProps }: ImageProps) {
     // Variables
 
     // Refs
@@ -37,8 +36,4 @@ function Image({ src, alt = '', className, style, ...otherProps }: ImageProps) {
     // Render Functions
 
     return <img src={src} alt={alt} className={classNames(styles.image, className)} style={style} {...otherProps} />;
-}
-
-// Need ImageMemo for autocompletion of phpstorm
-const ImageMemo = withMemo(Image, styles);
-export { ImageMemo as Image };
+});

package/src/Components/InViewport/InViewport.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
 import { useEffect, useRef, useState } from 'react';
-
-import styles from './inViewport.scss';
-import { withMemo } from '../../helper/withMemo';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
+import styles from '@/Components/InViewport/inViewport.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type InViewportProps = RbmComponentProps<{
     threshold?: number;
@@ -45,7 +44,7 @@ function InViewport({
                     threshold: [threshold],
                     root,
                     rootMargin,
-                }
+                },
             );
         });
     }, [onInViewportChange, threshold, root, rootMargin]);
@@ -67,5 +66,5 @@ function InViewport({
     );
 }
 
-const InViewportMemo = withMemo(InViewport, styles);
+const InViewportMemo = withMemo(InViewport);
 export { InViewportMemo as InViewport };

package/src/Components/Layout/Block.tsx

@@ -1,22 +1,28 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
+import { JSX } from 'react/jsx-runtime';
+import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import styles from './layout.scss';
-import { ComponentRef, ForwardedRef } from 'react';
-import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { withMemo } from "../../helper/withMemo";
-import { JSX } from "react/jsx-runtime";
+import styles from '@/Components/Layout/layout.module.scss';
+import type { ComponentRef, ForwardedRef } from 'react';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+
 import IntrinsicElements = JSX.IntrinsicElements;
 
 export type BlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
-    ref?: ForwardedRef<ComponentRef<AsType>>
-}
+        ref?: ForwardedRef<ComponentRef<AsType>>;
+    }
 >;
 
-export const Block = withMemo(function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>(
-    { children, as = 'div' as AsType, className, ref, ...props }: BlockProps<AsType>,
-) {
+export const Block = withMemo(function Block<AsType extends keyof JSX.IntrinsicElements = 'div'>({
+    children,
+    as = 'div' as AsType,
+    className,
+    ref,
+    ...props
+}: BlockProps<AsType>) {
     // Variables
 
     // Refs
@@ -43,4 +49,4 @@ export const Block = withMemo(function Block<AsType extends keyof JSX.IntrinsicE
             {children}
         </ViewWithoutListeners>
     );
-}, styles);
+});

package/src/Components/Layout/Container.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps } from '../RbmComponentProps';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-
-import styles from './container.scss';
+import styles from '@/Components/Layout/container.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export const CONTAINER_CLASSES = {
     sm: styles['container-sm'],
@@ -43,11 +42,11 @@ export const Container = withMemo(function Container({ fluid, className, childre
                     [styles.containerFluid]: fluid === true,
                 },
                 containerClass,
-                className
+                className,
             )}
             style={style}
         >
             {children}
         </div>
     );
-}, styles);
+});

package/src/Components/Layout/Flex.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import styles from './layout.scss';
+import { JSX } from 'react/jsx-runtime';
+import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { withMemo } from "../../helper/withMemo";
-import { JSX } from "react/jsx-runtime";
+import styles from '@/Components/Layout/layout.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+
 import IntrinsicElements = JSX.IntrinsicElements;
 
 export type FlexProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
@@ -14,9 +16,15 @@ export type FlexProps<AsType extends keyof IntrinsicElements> = RbmComponentProp
     }
 >;
 
-export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
-    { children, as = 'div' as AsType, className, horizontal = false, ref, grow = false, ...props }: FlexProps<AsType>
-) {
+export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>({
+    children,
+    as = 'div' as AsType,
+    className,
+    horizontal = false,
+    ref,
+    grow = false,
+    ...props
+}: FlexProps<AsType>) {
     // Variables
 
     // States
@@ -45,4 +53,4 @@ export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicEle
             {children}
         </ViewWithoutListeners>
     );
-}, styles);
+});

package/src/Components/Layout/Grid/Grid.tsx

@@ -1,19 +1,29 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Block } from '../Block';
+import { Block } from '@/Components/Layout/Block';
+import { useMemo } from 'react';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import styles from './grid.scss';
-import { ForwardedRef, useMemo } from 'react';
-import { withMemo } from "../../../helper/withMemo";
+import styles from '@/Components/Layout/Grid/grid.module.scss';
+import type { ForwardedRef } from 'react';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
     useContainerWidth?: boolean;
-    ref?:ForwardedRef<HTMLDivElement>
+    ref?: ForwardedRef<HTMLDivElement>;
 }>;
 
-export const Grid = withMemo(function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false,ref,  className, __allowChildren }: GridProps) {
+export const Grid = withMemo(function Grid({
+    style,
+    children,
+    columns = 12,
+    rows = 1,
+    useContainerWidth = false,
+    ref,
+    className,
+    __allowChildren,
+}: GridProps) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -21,7 +31,7 @@ export const Grid = withMemo(function Grid({ style, children, columns = 12, rows
             '--grid-columns': columns,
             '--grid-rows': rows,
         }),
-        [style, columns, rows]
+        [style, columns, rows],
     );
 
     // Refs
@@ -42,10 +52,10 @@ export const Grid = withMemo(function Grid({ style, children, columns = 12, rows
         <Block
             ref={ref}
             style={appliedStyle}
-            className={classNames(styles.grid, className, {[styles.useContainerWidth]: useContainerWidth})}
+            className={classNames(styles.grid, className, { [styles.useContainerWidth]: useContainerWidth })}
             __allowChildren={__allowChildren as 'all'}
         >
             {children}
         </Block>
     );
-}, styles);
+});

package/src/Components/Layout/Grid/GridItem.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { InlineBlock } from '../InlineBlock';
+import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-
-import styles from './grid.scss';
+import styles from '@/Components/Layout/Grid/grid.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type GridItemProps = RbmComponentProps<{
     size: number;
@@ -163,5 +162,5 @@ function GridItem({
 }
 
 // Need GridItemMemo for autocompletion of phpstorm
-const GridItemMemo = withMemo(GridItem, styles);
+const GridItemMemo = withMemo(GridItem);
 export { GridItemMemo as GridItem };