@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.2

package/src/Components/Toast/ToastContainer.tsx

@@ -1,66 +1,73 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { Container } from '../Layout/Container';
-
-import styles from './toast.scss';
+import { Container } from '@/Components/Layout/Container';
+import { ObjectHelper } from '@ainias42/js-helper';
+import { Toast } from '@/Components/Toast/Toast';
+import { ToastContext } from '@/Components/Toast/ToastContext';
+import { useCallback, useRef, useState } from 'react';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { withMemo } from '../../helper/withMemo';
-import { EmptyProps } from '../../helper/EmptyProps';
-import { useCallback, useRef, useState } from "react";
-import { ObjectHelper, URecord } from "@ainias42/js-helper";
-import { Toast } from "./Toast";
-import { Text } from "../Text/Text";
-import { ToastContext } from "./ToastContext";
+import styles from '@/Components/Toast/toast.module.scss';
+import type { EmptyProps } from '@/helper/EmptyProps';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { URecord } from '@ainias42/js-helper';
 
 export type ToastContainerProps = RbmComponentProps<EmptyProps>;
 
-function ToastContainer({className, children, style}: ToastContainerProps) {
+function ToastContainer({ className, children, style }: ToastContainerProps) {
     // Variables
 
     // States
     const lastId = useRef(0);
-    const [toasts, setToasts] = useState<URecord<number, {
-        id: number,
-        text: string,
-        duration: number,
-        action?: { name: string, onClick: (data?: any) => void, onClickData?: any }
-    }>>({});
+    const [toasts, setToasts] = useState<
+        URecord<
+            number,
+            {
+                id: number;
+                text: string;
+                duration: number;
+                action?: { name: string; onClick: (data?: any) => void; onClickData?: any };
+            }
+        >
+    >({});
 
     // Refs
 
     // Callbacks
     const removeToast = useCallback((id: number) => {
         setToasts((oldToasts) => {
-            const newToasts = {...oldToasts};
+            const newToasts = { ...oldToasts };
             delete newToasts[id];
             return newToasts;
         });
     }, []);
 
-    const addToast = useCallback((
-        text: string,
-        action?: {
-            name: string,
-            onClick: (data?: any) => void,
-            onClickData?: any
-        },
-        duration = 2500
-    ) => {
-        lastId.current++;
-        const id = lastId.current;
+    const addToast = useCallback(
+        (
+            text: string,
+            action?: {
+                name: string;
+                onClick: (data?: any) => void;
+                onClickData?: any;
+            },
+            duration = 2500,
+        ) => {
+            lastId.current++;
+            const id = lastId.current;
 
-        setToasts((oldToasts) => {
-            return {
-                ...oldToasts,
-                [id]: {
-                    id,
-                    text,
-                    duration,
-                    action
-                }
-            };
-        });
-    }, []);
+            setToasts((oldToasts) => {
+                return {
+                    ...oldToasts,
+                    [id]: {
+                        id,
+                        text,
+                        duration,
+                        action,
+                    },
+                };
+            });
+        },
+        [],
+    );
 
     // Effects
 
@@ -71,21 +78,32 @@ function ToastContainer({className, children, style}: ToastContainerProps) {
     return (
         <ToastContext.Provider value={addToast}>
             {children}
-            <Container className={classNames(styles.toastContainer, className)} fluid __allowChildren="all"
-                       style={style}>
-                {ObjectHelper.values(toasts).map((toast) => <Toast key={toast.id}
-                                                                   timeToShow={toast.duration}
-                                                                   onDismissed={removeToast}
-                                                                   onDismissedData={toast.id} {...(toast.action ? {
-                    ...toast.action,
-                    actionName: toast.action.name
-                } : {})}>
-                    <Text>{toast.text}</Text>
-                </Toast>)}
+            <Container
+                className={classNames(styles.toastContainer, className)}
+                fluid
+                __allowChildren="all"
+                style={style}
+            >
+                {ObjectHelper.values(toasts).map((toast) => (
+                    <Toast
+                        key={toast.id}
+                        timeToShow={toast.duration}
+                        onDismissed={removeToast}
+                        onDismissedData={toast.id}
+                        {...(toast.action
+                            ? {
+                                  ...toast.action,
+                                  actionName: toast.action.name,
+                              }
+                            : {})}
+                    >
+                        {toast.text}
+                    </Toast>
+                ))}
             </Container>
         </ToastContext.Provider>
     );
 }
 
-const ToastContainerMemo = withMemo(ToastContainer, styles);
+const ToastContainerMemo = withMemo(ToastContainer);
 export { ToastContainerMemo as ToastContainer };

package/src/Components/Toast/ToastContext.ts

@@ -1,7 +1,13 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext } from 'react';
 
-export const ToastContext = createContext<<Data>(text: string, action?: {name: string, onClick: (data?: Data) => void, onClickData?: Data }, duration?: number) => void>(() => {
-    console.error("ToastContext not initialized");
+export const ToastContext = createContext<
+    <Data>(
+        text: string,
+        action?: { name: string; onClick: (data?: Data) => void; onClickData?: Data },
+        duration?: number,
+    ) => void
+>(() => {
+    console.error('ToastContext not initialized');
 });
 
 export function useToast() {

package/src/Components/Toast/toast.module.scss

@@ -0,0 +1,65 @@
+@use "sass:map";
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --toast-z-index: 1001;
+  --toast-background-color: var(--curtain-strong);
+  --toast-text-color: var(--text-inverse);
+}
+
+@include mixin.design(variables.$material) {
+  --toast-action-text-color: var(--text-inverse);
+}
+
+@include mixin.design(variables.$flat) {
+  --toast-action-text-color: var(--text-inverse);
+}
+
+.toastContainer {
+  pointer-events: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 3rem;
+  margin: auto;
+  max-width: map.get(variables.$grid-breakpoints, "sm");
+  z-index: var(--toast-z-index);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.toast {
+  --text-primary-default-color: var(--toast-text-color);
+
+  pointer-events: auto;
+  background-color: var(--toast-background-color);
+  min-height: 48px;
+  line-height: 1.5;
+  color: var(--toast-text-color);
+  font-size: 0.77rem;
+  letter-spacing: normal;
+  transition-duration: 0.25s;
+  margin: 8px;
+
+  &.hiding {
+    opacity: 0;
+  }
+
+  @include mixin.design(variables.$material) {
+    padding: 16px 24px;
+  }
+
+  @include mixin.design(variables.$flat) {
+    border-radius: 0.5rem;
+    padding: 16px;
+  }
+
+  .action {
+    text-transform: uppercase;
+    margin-left: 24px;
+    color: var(--toast-action-text-color)
+  }
+}

package/src/Components/TopBar/MoreButton.tsx

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

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TopBar } from '@/Components/TopBar/TopBar';
+import { faCog, faHome, faSearch, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+
+const meta = {
+    component: TopBar,
+} satisfies Meta<typeof TopBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Title',
+        rightButtons: [
+            {
+                title: 'Button 1',
+                action: fn(),
+                icon: faHome,
+            },
+            {
+                title: 'Button 1',
+                action: fn(),
+                icon: faSearch,
+            },
+            {
+                title: 'Button 1',
+                action: fn(),
+                icon: faUser,
+                disabled: true,
+            },
+        ],
+        leftButtons: [
+            {
+                title: 'Button 1',
+                action: fn(),
+                icon: faCog,
+            },
+        ],
+        hiddenButtons: [
+            {
+                title: 'Button 1',
+                action: fn(),
+                icon: faHome,
+            },
+            {
+                title: 'Button 2',
+                action: fn(),
+                icon: faSearch,
+            },
+            {
+                title: 'Button 3',
+                action: fn(),
+                icon: faCog,
+            },
+        ],
+        transparent: false,
+        drawBehind: true,
+    },
+};

package/src/Components/TopBar/TopBar.tsx

@@ -1,21 +1,24 @@
 import * as React from 'react';
-import { ComponentType, ReactElement, useCallback, useMemo, useRef, useState } from 'react';
-import { Container } from '../Layout/Container';
-import { TopBarButton } from './TopBarButton';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { ActionSheet, ActionSheetAction } from '../ActionSheet/ActionSheet';
-import { Icon, IconSource } from '../Icon/Icon';
-import { MoreButton } from './MoreButton';
-
-import styles from './topBar.scss';
-
-import { withMemo } from '../../helper/withMemo';
+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 { useCallback, useMemo, useRef, useState } from 'react';
+import type { ComponentType, ReactElement } from 'react';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+
+import styles from '@/Components/TopBar/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 classNames from 'classnames';
-import { Block } from '../Layout/Block';
-import { Text } from '../Text/Text';
-import { Flex } from '../Layout/Flex';
-import { Inline } from '../Layout/Inline';
-import { View } from '../Layout/View';
+import type { ActionSheetAction } from '@/Components/ActionSheet/ActionSheet';
+import type { IconSource } from '@/Components/Icon/Icon';
 
 export type TopBarActionButtonType = {
     order?: number;
@@ -46,11 +49,11 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
         const key = button.key ?? String(index);
         if ('component' in button) {
             const Component = button.component;
-            return <Component {...button} key={key} onClick={button.action}/>;
+            return <Component {...button} key={key} onClick={button.action} />;
         }
         let child: string | ReactElement | undefined = button.title;
         if (button.icon) {
-            child = <Icon icon={button.icon}/>;
+            child = <Icon icon={button.icon} />;
         }
         return (
             <TopBarButton key={key} onClick={button.action} disabled={button.disabled} __allowChildren="all">
@@ -60,16 +63,16 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
     });
 }
 
-function TopBar({
-                    title = '',
-                    rightButtons: unsortedRightButtons = [],
-                    leftButtons: unsortedLeftButtons = [],
-                    hiddenButtons: unsortedHiddenButtons = [],
-                    className,
-                    transparent = false,
-                    drawBehind = false,
-                    ...rbmProps
-                }: TopBarProps) {
+export const TopBar = withMemo(function TopBar({
+    title = '',
+    rightButtons: unsortedRightButtons = [],
+    leftButtons: unsortedLeftButtons = [],
+    hiddenButtons: unsortedHiddenButtons = [],
+    className,
+    transparent = false,
+    drawBehind = false,
+    ...rbmProps
+}: TopBarProps) {
     const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);
 
     if (isHiddenMenuOpen) {
@@ -77,9 +80,18 @@ function TopBar({
     }
 
     const actionSheetRef = useRef<React.ElementRef<typeof ActionSheet>>(null);
-    let rightButtons = useMemo(() => unsortedRightButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedRightButtons]);
-    const leftButtons = useMemo(() => unsortedLeftButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedLeftButtons]);
-    let hiddenButtons = useMemo(() => unsortedHiddenButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedHiddenButtons]);
+    let rightButtons = useMemo(
+        () => unsortedRightButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+        [unsortedRightButtons],
+    );
+    const leftButtons = useMemo(
+        () => unsortedLeftButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+        [unsortedLeftButtons],
+    );
+    let hiddenButtons = useMemo(
+        () => unsortedHiddenButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+        [unsortedHiddenButtons],
+    );
 
     const toggleHiddenMenu = useCallback(() => {
         setIsHiddenMenuOpen((isOpen) => {
@@ -120,12 +132,12 @@ function TopBar({
                     }
                 },
             })),
-        [hiddenButtons]
+        [hiddenButtons],
     );
 
     const rightButtonComponents = getButtonComponents(rightButtons);
     const leftButtonComponents = getButtonComponents(leftButtons);
-    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({icon: _, ...button}) => button));
+    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({ icon: _, ...button }) => button));
 
     const actions: ActionSheetAction<any>[] = useMemo(
         () =>
@@ -134,7 +146,7 @@ function TopBar({
                 name: button.title!,
                 icon: button.icon,
             })),
-        [hiddenButtons]
+        [hiddenButtons],
     );
 
     return (
@@ -146,7 +158,7 @@ function TopBar({
                     [styles.transparent]: transparent,
                     [styles.drawBehind]: drawBehind,
                 },
-                className
+                className,
             )}
         >
             <Container fluid="xxl" className={styles.container}>
@@ -161,7 +173,7 @@ function TopBar({
                 </Flex>
                 {hiddenButtons.length > 0 && isHiddenMenuOpen ? (
                     <Inline className={styles.hiddenContainer}>
-                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu}/>
+                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu} />
                         <View className={styles.hiddenMenu}>{hiddenButtonComponents}</View>
                     </Inline>
                 ) : null}
@@ -174,7 +186,4 @@ function TopBar({
             </Container>
         </nav>
     );
-}
-
-const TopBarMemo = withMemo(TopBar, styles);
-export { TopBarMemo as TopBar };
+});

package/src/Components/TopBar/TopBarButton.tsx

@@ -1,27 +1,37 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-
-import styles from './topBar.scss';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { withMemo } from '../../helper/withMemo';
+import styles from '@/Components/TopBar/topBar.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type TopBarButtonProps = RbmComponentProps<{
     disabled?: boolean;
     onClick?: () => void;
 }>;
 
-function TopBarButton({ disabled = false, onClick, className, children, ...rbmProps }: TopBarButtonProps) {
+export const TopBarButton = withMemo(function TopBarButton({
+    disabled = false,
+    onClick,
+    className,
+    children,
+    ...rbmProps
+}: TopBarButtonProps) {
     return (
         <a
             role="button"
+            tabIndex={0}
             {...rbmProps}
             onClick={onClick}
-            className={classNames(styles.button, { [styles.disabled]: disabled, [styles.active]: !disabled && onClick }, className)}
+            className={classNames(
+                styles.button,
+                {
+                    [styles.disabled]: disabled,
+                    [styles.active]: !disabled && onClick,
+                },
+                className,
+            )}
         >
             {children}
         </a>
     );
-}
-
-const TopBarButtonMemo = withMemo(TopBarButton, styles);
-export { TopBarButtonMemo as TopBarButton };
+});