@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/SpoilerList/useSpoilerGroup.ts

@@ -20,7 +20,7 @@ export function useSpoilerGroup(defaultKey?: number | string, options: Partial<S
                 return oldKey;
             });
         },
-        [options?.closeWithClick]
+        [options?.closeWithClick],
     );
 
     const createProps = useCallback(
@@ -32,7 +32,7 @@ export function useSpoilerGroup(defaultKey?: number | string, options: Partial<S
             noClosingAnimation: options?.noClosingAnimation !== false,
             closeIcon: null,
         }),
-        [onClick, openKey, options?.noClosingAnimation]
+        [onClick, openKey, options?.noClosingAnimation],
     );
 
     return [createProps, openKey] as const;

package/src/Components/TabBar/TabBar.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TabBar } from '@/Components/TabBar/TabBar';
+import { faCog, faHome, faSearch, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+
+const meta = {
+    component: TabBar,
+    parameters: {
+        layout: 'padded',
+    },
+} satisfies Meta<typeof TabBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        transparent: false,
+        underline: false,
+        drawBehind: false,
+        buttons: [
+            { title: 'Home', icon: faHome },
+            { title: 'Search', icon: faSearch },
+            { title: 'Profile', icon: faUser },
+            { title: 'Settings', icon: faCog },
+        ],
+        startActiveTab: 0,
+        onTabChange: fn(),
+    },
+};

package/src/Components/TabBar/TabBar.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { Icon, IconSource } from '../Icon/Icon';
-import { ComponentType, useCallback, useState } from 'react';
-import { Container } from '../Layout/Container';
-import { TabBarButton } from './TabBarButton';
-
-import styles from './tabBar.scss';
-import { withMemo } from '../../helper/withMemo';
+import { Container } from '@/Components/Layout/Container';
+import { Icon } from '@/Components/Icon/Icon';
+import { Inline } from '@/Components/Layout/Inline';
+import { TabBarButton } from '@/Components/TabBar/TabBarButton';
+import { Text } from '@/Components/Text/Text';
+import { useCallback, useState } from 'react';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { ListenerWithData } from '../Hooks/useListener';
-import { Inline } from '../Layout/Inline';
-import { Text } from '../Text/Text';
+import styles from '@/Components/TabBar/tabBar.module.scss';
+import type { ComponentType } from 'react';
+import type { IconSource } from '@/Components/Icon/Icon';
+import type { ListenerWithData } from '@/Components/Hooks/useListener';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type TabBarComponentButtonType = {
     component: ComponentType<Record<string, any>>;
@@ -62,7 +63,7 @@ function getButtonComponents(buttons: TabBarButtonType[], activeTab: number, onS
     });
 }
 
-function TabBar({
+export const TabBar = withMemo(function TabBar({
     buttons,
     startActiveTab,
     onTabChange,
@@ -84,7 +85,7 @@ function TabBar({
             setInternalActiveTab(index);
             onTabChange(index);
         },
-        [onTabChange, setInternalActiveTab]
+        [onTabChange, setInternalActiveTab],
     );
 
     // Effects
@@ -103,7 +104,7 @@ function TabBar({
                     [styles.transparent]: transparent,
                     [styles.underlined]: underline,
                 },
-                className
+                className,
             )}
         >
             <Container fluid="xxl" className={styles.buttonContainer}>
@@ -111,7 +112,4 @@ function TabBar({
             </Container>
         </div>
     );
-}
-
-const TabBarMemo = withMemo(TabBar, styles);
-export { TabBarMemo as TabBar };
+});

package/src/Components/TabBar/TabBarButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-
-import styles from './tabBar.scss';
-import { withMemo } from '../../helper/withMemo';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { Listener, useListenerWithExtractedProps } from '../Hooks/useListener';
+import styles from '@/Components/TabBar/tabBar.module.scss';
+import type { Listener } from '@/Components/Hooks/useListener';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type TabBarButtonProps = RbmComponentProps<
     {
@@ -12,7 +12,12 @@ export type TabBarButtonProps = RbmComponentProps<
     } & Listener<'onClick', number>
 >;
 
-function TabBarButton({ active, className, children, ...rbmProps }: TabBarButtonProps) {
+export const TabBarButton = withMemo(function TabBarButton({
+    active,
+    className,
+    children,
+    ...rbmProps
+}: TabBarButtonProps) {
     // Variables
 
     // States
@@ -32,13 +37,11 @@ function TabBarButton({ active, className, children, ...rbmProps }: TabBarButton
         <a
             {...otherProps}
             role="button"
+            tabIndex={0}
             onClick={onClick}
             className={classNames(styles.button, { [styles.buttonActive]: active, className })}
         >
             {children}
         </a>
     );
-}
-
-const TabBarButtonMemo = withMemo(TabBarButton, styles);
-export { TabBarButtonMemo as TabBarButton };
+});

package/src/Components/TabBar/tabBar.module.scss

@@ -0,0 +1,128 @@
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --tab-bar-button-active-background-color: var(--tab-bar-background-color);
+  --tab-bar-button-active-underline-color: var(--tab-bar-button-active-text-color);
+}
+
+@include mixin.design(variables.$material) {
+  --tab-bar-background-color: var(--foreground-primary);
+  --tab-bar-box-shadow-color: var(--box-shadow-color);
+  --tab-bar-button-text-color: var(--text-primary);
+  --tab-bar-button-active-text-color: var(--tab-bar-button-text-color);
+}
+
+@include mixin.design(variables.$flat) {
+  --tab-bar-background-color: var(--foreground-primary);
+  --tab-bar-button-active-text-color: var(--flavor-accent);
+  --tab-bar-border-top-color: var(--border-light);
+  --tab-bar-button-text-color: var(--text-tertiary);
+}
+
+.tabBar {
+  height: 60px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  background-color: var(--tab-bar-background-color);
+
+  .buttonContainer {
+    padding: 0;
+    display: flex;
+  }
+
+  &.underlined {
+    .buttonActive {
+      @include mixin.design(variables.$flat) {
+        border-bottom: 4px solid var(--tab-bar-button-active-underline-color);
+      }
+    }
+  }
+
+  &.transparent {
+    opacity: 0.65;
+  }
+
+  @include mixin.design(variables.$material) {
+    box-shadow: 0 -2px 2px 0 var(--tab-bar-box-shadow-color), 0 -1px 5px 0 var(--tab-bar-box-shadow-color), 0 -1px 1px 0 var(--tab-bar-box-shadow-color);
+  }
+
+  @include mixin.design(variables.$flat) {
+    border-top: 1px solid var(--tab-bar-border-top-color);
+  }
+}
+
+.button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
+  > span {
+    width: 100%;
+    display: inline-block;
+  }
+
+  .buttonIcon {
+    display: block;
+    font-size: 24px;
+    line-height: 26px;
+    height: 28px;
+    margin: auto;
+
+    + .buttonTitle {
+      font-size: 10px;
+      line-height: 1;
+    }
+  }
+
+  .buttonTitle {
+    display: block;
+    margin: auto;
+    font-size: 16px;
+    line-height: 49px;
+  }
+
+  color: var(--tab-bar-button-text-color);
+
+  &.buttonActive {
+    color: var(--tab-bar-button-active-text-color);
+
+    --text-primary-default-color: var(--tab-bar-button-active-text-color);
+
+    background-color: var(--tab-bar-button-active-background-color);
+  }
+
+  @include mixin.design(variables.$material) {
+    position: relative;
+    text-transform: uppercase;
+
+    &::after {
+      content: ' ';
+      display: block;
+      width: 0;
+      height: 2px;
+      bottom: 0;
+      position: absolute;
+      margin-top: -2px;
+      background-color: var(--tab-bar-button-active-underline-color)
+    }
+
+    &.buttonActive {
+      &::after {
+        width: 100%;
+        transition: width 0.2s ease-in-out;
+      }
+    }
+  }
+}

package/src/Components/Table/Table.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import {
+import { useSortBy, useTable } from 'react-table';
+import { withMemo } from '@/helper/withMemo';
+import type {
     Cell,
-    Column as RTColumn,
     HeaderGroup,
     PluginHook,
+    Column as RTColumn,
     Row,
     TableOptions,
-    useSortBy,
     UseSortByOptions,
-    useTable,
 } from 'react-table';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { ReactNode } from 'react';
-import { withMemo } from '../../helper/withMemo';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ReactNode } from 'react';
 
 export type ColumnCellData<DataType extends string | number | Record<string, unknown>> = {
     value: DataType;
@@ -62,16 +61,16 @@ function Table<DataType extends string | number | Record<string, unknown>>({
     // Variables
 
     if (cellRenderer) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        columns.forEach((c) => (c.Cell = c.Cell ?? cellRenderer));
+        for (const c of columns) {
+            c.Cell = c.Cell ?? cellRenderer;
+        }
     }
 
-    columns.forEach((c) => {
+    for (const c of columns) {
         if (!('width' in c)) {
             c.width = 0;
         }
-    });
+    }
 
     let tableOptions: TableOptions<Record<string, DataType>> = {
         columns,
@@ -91,7 +90,7 @@ function Table<DataType extends string | number | Record<string, unknown>>({
 
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable<Record<string, DataType>>(
         tableOptions,
-        ...plugins
+        ...plugins,
     );
 
     // States
@@ -109,7 +108,9 @@ function Table<DataType extends string | number | Record<string, unknown>>({
         if (sortOptions?.renderSortIndicator) {
             return sortOptions.renderSortIndicator(column);
         }
-        if (column.isSorted) return <span>{column.isSortedDesc ? ' ↓' : ' ↑'}</span>;
+        if (column.isSorted) {
+            return <span>{column.isSortedDesc ? ' ↓' : ' ↑'}</span>;
+        }
         return null;
     };
 
@@ -128,7 +129,7 @@ function Table<DataType extends string | number | Record<string, unknown>>({
                                     // Apply the header cell props
                                     <th
                                         {...column.getHeaderProps(
-                                            sortOptions ? column.getSortByToggleProps() : undefined
+                                            sortOptions ? column.getSortByToggleProps() : undefined,
                                         )}
                                     >
                                         {

package/src/Components/Text/Heading.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { Text, TEXT_PRIO, TEXT_SIZE } from './Text';
-import { RbmComponentProps, WithStringProps } from '../RbmComponentProps';
-
-import styles from './heading.scss';
+import { TEXT_PRIO, TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { EmptyProps } from '../../helper/EmptyProps';
+import styles from '@/Components/Text/heading.module.scss';
+import type { EmptyProps } from '@/helper/EmptyProps';
+import type { RbmComponentProps, WithStringProps } from '@/Components/RbmComponentProps';
 
 export type HeadingProps = RbmComponentProps<EmptyProps, WithStringProps>;
 
@@ -40,5 +39,5 @@ function Heading({ children, className, style }: HeadingProps) {
 }
 
 // Need HeadingMemo for autocompletion of phpstorm
-const HeadingMemo = withMemo(Heading, styles, 'text');
+const HeadingMemo = withMemo(Heading, 'text');
 export { HeadingMemo as Heading };

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

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TEXT_PRIO, TEXT_SIZE, Text } from '@/Components/Text/Text';
+import React from 'react';
+
+const meta = {
+    component: Text,
+    argTypes: {
+        prio: {
+            control: { type: 'select' },
+            options: [undefined, ...Object.values(TEXT_PRIO)],
+        },
+        size: {
+            control: { type: 'select' },
+            options: [undefined, ...Object.values(TEXT_SIZE)],
+        },
+        children: {
+            control: 'text',
+            defaultValue: 'Sample Text',
+        },
+        as: {
+            control: { type: 'select' },
+            options: [undefined, 'span', 'div', 'p', 'label'],
+        },
+    },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Test',
+        block: false,
+        emphasized: false,
+        className: '',
+    },
+};
+
+export const DifferentSizes: Story = {
+    args: {
+        children: undefined,
+        block: true,
+        emphasized: false,
+        className: '',
+    },
+    render: ({ children, ...args }) => (
+        <>
+            <Text {...args} size={TEXT_SIZE.xSmall}>
+                {children || 'X-Small'}
+            </Text>
+            <Text {...args} size={TEXT_SIZE.small}>
+                {children || 'Small'}
+            </Text>
+            <Text {...args} size={TEXT_SIZE.medium}>
+                {children || 'Medium'}
+            </Text>
+            <Text {...args} size={TEXT_SIZE.large}>
+                {children ?? 'Large'}
+            </Text>
+            <Text {...args} size={TEXT_SIZE.xLarge}>
+                {children || 'X-Large'}
+            </Text>
+            <Text {...args} size={TEXT_SIZE.xxLarge}>
+                {children || 'XX-Large'}
+            </Text>
+        </>
+    ),
+};
+
+export const DifferentPrios: Story = {
+    args: {
+        children: 'Test',
+        block: true,
+        emphasized: false,
+        className: '',
+    },
+    render: ({ children, ...args }) => (
+        <>
+            <Text {...args} prio={TEXT_PRIO.primary}>
+                {children || 'Primary'}
+            </Text>
+            <Text {...args} prio={TEXT_PRIO.secondary}>
+                {children || 'Secondary'}
+            </Text>
+            <Text {...args} prio={TEXT_PRIO.tertiary}>
+                {children || 'Tertiary'}
+            </Text>
+            <Text {...args} prio={TEXT_PRIO.heading}>
+                {children || 'Heading'}
+            </Text>
+        </>
+    ),
+};
+
+export const SizesPrioCombo: Story = {
+    args: {
+        children: undefined,
+        block: false,
+        emphasized: false,
+        className: '',
+    },
+    render: ({ children, ...args }) => {
+        return (
+            <table>
+                {Object.entries(TEXT_SIZE).map(([sizeName, sizeValue]) => (
+                    <tr>
+                        {Object.entries(TEXT_PRIO).map(([prioName, prioValue]) => (
+                            <td>
+                                <Text {...args} size={sizeValue} prio={prioValue}>
+                                    {children || `${prioName} ${sizeName}`}
+                                </Text>
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+            </table>
+        );
+    },
+};

package/src/Components/Text/Text.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { Inline } from '@/Components/Layout/Inline';
+import { JSX } from 'react/jsx-runtime';
+import { WrongChildError } from '@/WrongChildError';
 import classNames from 'classnames';
-import styles from './text.scss';
-import { Recursive, ValueOf } from '../../TypeHelpers';
-import { WrongChildError } from '../../WrongChildError';
-import withStyles from 'isomorphic-style-loader/withStyles';
-import { Inline, InlineProps } from '../Layout/Inline';
-import { ViewProps } from '../Layout/View';
-import { JSX } from "react/jsx-runtime";
+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 IntrinsicElements = JSX.IntrinsicElements;
 
 export const TEXT_PRIO = {
@@ -71,13 +71,22 @@ function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
         <Inline
             __allowChildren="text"
             as={as}
-            {...props as InlineProps<AsType>}
-            className={classNames(styles.text, { [styles.block]: block, [styles.emphasized]: emphasized }, prio, size, className)}
+            {...(props as InlineProps<AsType>)}
+            className={classNames(
+                styles.text,
+                {
+                    [styles.block]: block,
+                    [styles.emphasized]: emphasized,
+                },
+                prio,
+                size,
+                className,
+            )}
         >
             {children}
         </Inline>
     );
 }
 
-const tmp = React.memo(withStyles(styles)(Text)) as typeof Text;
+const tmp = React.memo(Text) as typeof Text;
 export { tmp as Text };

package/src/Components/Text/{text.scss → text.module.scss}

@@ -1,12 +1,7 @@
-$primaryColor: #18181B; // Gray-900
-$secondaryColor: #71717a; // Gray-500
-$tertiaryColor: #A1A1AA; // Gray-400
+@use "../../scss/vars" as *;
 
-:root {
-  --text-primary-default-color: #{$primaryColor};
-  --text-prmary: #{$primaryColor};
-  --text-secondary: #{$secondaryColor};
-  --text-tertiary: #{$tertiaryColor};
+@include vars {
+  --text-primary-default-color: var(--text-prmary);
 }
 
 .text {

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

@@ -0,0 +1,25 @@
+import { Toast } from '@/Components/Toast/Toast';
+import { fn } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: Toast,
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Toast!',
+    },
+};
+
+export const ToastWithAction: Story = {
+    args: {
+        children: 'Toast with action',
+        onClick: fn(),
+        actionName: 'Action',
+    },
+};

package/src/Components/Toast/Toast.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
-import { Clickable } from '../Clickable/Clickable';
-import { ReactNode, useCallback, useEffect, useState } from 'react';
-import { Listener, OptionalListener, useListener } from '../Hooks/useListener';
-
-import styles from './toast.scss';
-import { withMemo } from '../../helper/withMemo';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { useCallback, useEffect, useState } from 'react';
+import { useListener } from '@/Components/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 type { ReactNode } from 'react';
 
 type WithoutActionProps<DismissedData> = {
     timeToShow?: number;
@@ -17,10 +18,10 @@ type WithActionProps<ActionData, DismissedData> = WithoutActionProps<DismissedDa
 
 export type ToastProps<ActionData, DismissedData> = RbmComponentProps<
     WithActionProps<ActionData, DismissedData> | WithoutActionProps<DismissedData>,
-    WithNoStringAndChildrenProps
+    WithStringProps
 >;
 
-function Toast<ActionData, DismissedData>({
+export const Toast = withMemo(function Toast<ActionData, DismissedData>({
     className,
     timeToShow = 0,
     children,
@@ -33,14 +34,14 @@ function Toast<ActionData, DismissedData>({
 
     // States
     const [hidingStart, setHidingStart] = useState<number>(0);
-    const [startShow] = useState(new Date().getTime());
+    const [startShow] = useState(Date.now());
     const [isHidden, setIsHidden] = useState<boolean>(false);
 
     // Refs
 
     // Callbacks
     const updateHidingStart = useCallback(() => {
-        setHidingStart((oldHidingStart) => (oldHidingStart > 0 ? oldHidingStart : new Date().getTime()));
+        setHidingStart((oldHidingStart) => (oldHidingStart > 0 ? oldHidingStart : Date.now()));
         setTimeout(() => setIsHidden(true), ANIMATION_DURATION);
     }, [setHidingStart]);
 
@@ -49,7 +50,7 @@ function Toast<ActionData, DismissedData>({
     // Effects
     useEffect(() => {
         if (timeToShow > 0) {
-            const diff = timeToShow + startShow - new Date().getTime();
+            const diff = timeToShow + startShow - Date.now();
             const timeout = setTimeout(updateHidingStart, diff);
             return () => {
                 if (timeout) {
@@ -62,7 +63,7 @@ function Toast<ActionData, DismissedData>({
 
     useEffect(() => {
         if (hidingStart > 0) {
-            const diff = hidingStart + ANIMATION_DURATION - new Date().getTime();
+            const diff = hidingStart + ANIMATION_DURATION - Date.now();
             if (diff > 0) {
                 const timeout = setTimeout(() => onDismissed, diff);
                 return () => {
@@ -102,7 +103,4 @@ function Toast<ActionData, DismissedData>({
             {actionElement}
         </Clickable>
     );
-}
-
-const ToastMemo = withMemo(Toast, styles, 'text');
-export { ToastMemo as Toast };
+}, 'text');