@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/Card/card.module.scss

@@ -0,0 +1,74 @@
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --card-margin: 8px;
+  --card-padding: 16px;
+  --card-background-color: var(--foreground-primary);
+  --card-box-shadow-color: var(--box-shadow-color);
+}
+
+.card {
+  margin: var(--card-margin);
+  padding: var(--card-padding);
+  word-wrap: break-word;
+  background-color: var(--card-background-color);
+
+  &.fullHeight {
+    height: calc(100% - 2 * var(--card-margin))
+  }
+
+  &.noPaddingHeight {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &.noPaddingWidth {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.noPadding {
+    padding: 0
+  }
+
+  &.noMargin {
+    margin: 0;
+
+    &.fullHeight {
+      height: 100%
+    }
+  }
+
+  .content {
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .title {
+    padding: 0;
+  }
+
+  @include mixin.design(variables.$material) {
+    border-radius: 2px;
+    box-shadow: 0 2px 2px 0 var(--card-box-shadow-color),
+    0 1px 5px 0 var(--card-box-shadow-color),
+    0 3px 1px -2px var(--card-box-shadow-color);
+
+    .title {
+      margin: 8px 0 12px;
+      font-size: 24px;
+    }
+  }
+
+  @include mixin.design(variables.$flat) {
+    border-radius: 8px;
+    box-shadow: 0 1px 2px 0 var(--card-box-shadow-color);
+
+    .title {
+      margin: 4px 0 8px;
+      font-size: 20px;
+    }
+  }
+}

package/src/Components/Clickable/Clickable.tsx

@@ -1,19 +1,13 @@
 import * as React from 'react';
-import {RbmComponentProps} from '../RbmComponentProps';
-import {OptionalListener, useListener} from '../Hooks/useListener';
-import styles from './clickable.scss';
+import { useCallback, useEffect, useRef } from 'react';
+import { useComposedRef } from '@/Components/Hooks/useComposedRef';
+import { useListener } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import {
-    useCallback,
-    MouseEvent as ReactMouseEvent,
-    ForwardedRef,
-    useEffect,
-    MouseEvent,
-    PointerEvent,
-    useRef
-} from 'react';
-import {useComposedRef} from "../Hooks/useComposedRef";
-import { withMemo } from "../../helper/withMemo";
+import styles from '@/Components/Clickable/clickable.module.scss';
+import type { ForwardedRef, MouseEvent, PointerEvent, MouseEvent as ReactMouseEvent } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnPointerDownListener<Data> = OptionalListener<'onPointerDown', Data, PointerEvent>;
@@ -35,31 +29,31 @@ export type ClickableProps<
     OnMouseEnterData,
     OnMouseLeaveData,
     OnDoubleClickData,
-    HrefType extends string | undefined
+    HrefType extends string | undefined,
 > = RbmComponentProps<
     {
         interactable?: boolean;
         href?: HrefType;
-        target?: string
+        target?: string;
         preventDefault?: boolean;
         stopPropagation?: boolean;
         useReactOnMouseLeave?: boolean;
         id?: string;
         tabIndex?: number;
-        draggable?: boolean
+        draggable?: boolean;
         title?: string;
-        ref?: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
+        ref?: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>;
     } & OnClickListener<OnClickData> &
-    OnPointerDownListener<OnMouseDownData> &
-    OnPointerMoveListener<OnMouseMoveData> &
-    OnPointerUpListener<OnMouseUpData> &
-    OnDropListener<OnDropData> &
-    OnDragStartListener<OnDragStartData> &
-    OnDragOverListener<OnDragOverData> &
-    OptionalListener<'onClickCapture', OnClickCaptureData> &
-    OptionalListener<'onMouseEnter', OnMouseEnterData> &
-    OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent|ReactMouseEvent> &
-    OptionalListener<'onDoubleClick', OnDoubleClickData>
+        OnPointerDownListener<OnMouseDownData> &
+        OnPointerMoveListener<OnMouseMoveData> &
+        OnPointerUpListener<OnMouseUpData> &
+        OnDropListener<OnDropData> &
+        OnDragStartListener<OnDragStartData> &
+        OnDragOverListener<OnDragOverData> &
+        OptionalListener<'onClickCapture', OnClickCaptureData> &
+        OptionalListener<'onMouseEnter', OnMouseEnterData> &
+        OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent | ReactMouseEvent> &
+        OptionalListener<'onDoubleClick', OnDoubleClickData>
 >;
 
 export const Clickable = withMemo(function Clickable<
@@ -74,26 +68,37 @@ export const Clickable = withMemo(function Clickable<
     OnMouseEnterData,
     OnMouseLeaveData,
     OnDoubleClickData,
-    HrefType extends string | undefined
->(
-    {
-        className,
-        children,
-        style,
-        href,
-        target,
-        id,
-        interactable = true,
-        preventDefault = false,
-        stopPropagation = true,
-        useReactOnMouseLeave = false,
-        tabIndex,
-        draggable,
-        title,
-        ref,
-        ...clickData
-    }: ClickableProps<OnClickData, OnPointerDownData, OnPointerMoveData, OnPointerUpData, OnClickCaptureData, OnDropData,OnDragStartData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
-) {
+    HrefType extends string | undefined,
+>({
+    className,
+    children,
+    style,
+    href,
+    target,
+    id,
+    interactable = true,
+    preventDefault = false,
+    stopPropagation = true,
+    useReactOnMouseLeave = false,
+    tabIndex,
+    draggable,
+    title,
+    ref,
+    ...clickData
+}: ClickableProps<
+    OnClickData,
+    OnPointerDownData,
+    OnPointerMoveData,
+    OnPointerUpData,
+    OnClickCaptureData,
+    OnDropData,
+    OnDragStartData,
+    OnDragOverData,
+    OnMouseEnterData,
+    OnMouseLeaveData,
+    OnDoubleClickData,
+    HrefType
+>) {
     // Variables
 
     // States
@@ -116,7 +121,7 @@ export const Clickable = withMemo(function Clickable<
                 onClickInner(e);
             }
         },
-        [clickData.onClick, onClickInner, preventDefault, stopPropagation]
+        [clickData.onClick, onClickInner, preventDefault, stopPropagation],
     );
 
     const onPointerDownInner = useListener<'onPointerDown', OnPointerDownData>('onPointerDown', clickData);
@@ -132,7 +137,7 @@ export const Clickable = withMemo(function Clickable<
                 onPointerDownInner(e);
             }
         },
-        [clickData.onPointerDown, onPointerDownInner, preventDefault, stopPropagation]
+        [clickData.onPointerDown, onPointerDownInner, preventDefault, stopPropagation],
     );
 
     const onPointerMoveInner = useListener<'onPointerMove', OnPointerMoveData>('onPointerMove', clickData);
@@ -148,7 +153,7 @@ export const Clickable = withMemo(function Clickable<
                 onPointerMoveInner(e);
             }
         },
-        [clickData.onPointerMove, onPointerMoveInner, preventDefault, stopPropagation]
+        [clickData.onPointerMove, onPointerMoveInner, preventDefault, stopPropagation],
     );
 
     const onPointerUpInner = useListener<'onPointerUp', OnPointerUpData>('onPointerUp', clickData);
@@ -164,7 +169,7 @@ export const Clickable = withMemo(function Clickable<
                 onPointerUpInner(e);
             }
         },
-        [clickData.onPointerUp, onPointerUpInner, preventDefault, stopPropagation]
+        [clickData.onPointerUp, onPointerUpInner, preventDefault, stopPropagation],
     );
 
     const onClickCaptureInner = useListener<'onClickCapture', OnClickCaptureData>('onClickCapture', clickData);
@@ -180,7 +185,7 @@ export const Clickable = withMemo(function Clickable<
                 onClickCaptureInner(e);
             }
         },
-        [clickData.onClickCapture, onClickCaptureInner, preventDefault, stopPropagation]
+        [clickData.onClickCapture, onClickCaptureInner, preventDefault, stopPropagation],
     );
 
     const onDropInner = useListener<'onDrop', OnDropData>('onDrop', clickData);
@@ -196,7 +201,7 @@ export const Clickable = withMemo(function Clickable<
                 onDropInner(e);
             }
         },
-        [clickData.onDrop, onDropInner, preventDefault, stopPropagation]
+        [clickData.onDrop, onDropInner, preventDefault, stopPropagation],
     );
 
     const onDragOver = useListener<'onDragOver', OnDragOverData>('onDragOver', clickData);
@@ -212,7 +217,7 @@ export const Clickable = withMemo(function Clickable<
                 onDragOver(e);
             }
         },
-        [clickData.onDragOver, onDragOver, preventDefault, stopPropagation]
+        [clickData.onDragOver, onDragOver, preventDefault, stopPropagation],
     );
 
     const onDragStartListener = useListener<'onDragStart', OnDragStartData>('onDragStart', clickData);
@@ -228,7 +233,7 @@ export const Clickable = withMemo(function Clickable<
                 onDragStartListener(e);
             }
         },
-        [clickData.onDragStart, onDragStartListener, preventDefault, stopPropagation]
+        [clickData.onDragStart, onDragStartListener, preventDefault, stopPropagation],
     );
 
     const onMouseEnter = useListener<'onMouseEnter', OnMouseEnterData>('onMouseEnter', clickData);
@@ -244,12 +249,12 @@ export const Clickable = withMemo(function Clickable<
                 onMouseEnter(e);
             }
         },
-        [clickData.onMouseEnter, onMouseEnter, preventDefault, stopPropagation]
+        [clickData.onMouseEnter, onMouseEnter, preventDefault, stopPropagation],
     );
 
     const onMouseLeave = useListener<'onMouseLeave', OnMouseLeaveData>('onMouseLeave', clickData);
     const realOnMouseLeave = useCallback(
-        (e: Event|ReactMouseEvent) => {
+        (e: Event | ReactMouseEvent) => {
             if (clickData.onMouseLeave) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -260,12 +265,12 @@ export const Clickable = withMemo(function Clickable<
                 onMouseLeave(e);
             }
         },
-        [clickData.onMouseLeave, onMouseLeave, preventDefault, stopPropagation]
+        [clickData.onMouseLeave, onMouseLeave, preventDefault, stopPropagation],
     );
 
     const onDoubleClick = useListener<'onDoubleClick', OnDoubleClickData>('onDoubleClick', clickData);
     const realOnDoubleClick = useCallback(
-        (e: Event|ReactMouseEvent) => {
+        (e: Event | ReactMouseEvent) => {
             if (clickData.onDoubleClick) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -276,7 +281,7 @@ export const Clickable = withMemo(function Clickable<
                 onDoubleClick(e);
             }
         },
-        [clickData.onDoubleClick, onDoubleClick, preventDefault, stopPropagation]
+        [clickData.onDoubleClick, onDoubleClick, preventDefault, stopPropagation],
     );
 
     // Effects
@@ -318,7 +323,12 @@ export const Clickable = withMemo(function Clickable<
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} className={classNames(styles.link, props.className)} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
+            <a
+                {...props}
+                className={classNames(styles.link, props.className)}
+                href={href}
+                ref={refSetter as ForwardedRef<HTMLAnchorElement>}
+            >
                 {children}
             </a>
         );
@@ -328,4 +338,4 @@ export const Clickable = withMemo(function Clickable<
             {children}
         </span>
     );
-}, styles);
+});

package/src/Components/Clickable/clickable.module.scss

@@ -0,0 +1,14 @@
+@use "../../scss/vars" as *;
+
+@include vars {
+  --clickable-text-link: var(--text-link);
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.link {
+  color: var(--clickable-text-link);
+  text-decoration: underline;
+}

package/src/Components/Colors.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Block } from '@/Components/Layout/Block';
+import { Grid } from '@/Components/Layout/Grid/Grid';
+import { GridItem } from '@/Components/Layout/Grid/GridItem';
+import { ObjectHelper } from '@ainias42/js-helper';
+import { Text } from '@/Components/Text/Text';
+import React from 'react';
+
+const meta = {} satisfies Meta<typeof Text>;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    args: {},
+    render: () => {
+        const baseColors = {
+            Flavor: ['flavor-basic', 'flavor-accent', 'flavor-constructive', 'flavor-destructive'],
+            FlavorPale: [
+                'flavor-pale-basic',
+                'flavor-pale-accent',
+                'flavor-pale-constructive',
+                'flavor-pale-destructive',
+            ],
+        };
+
+        const textColors = {
+            Text: ['text-primary', 'text-secondary', 'text-tertiary', 'text-link', 'text-inverse'],
+            ...baseColors,
+        };
+
+        const backgroundColors = {
+            Foregrouns: ['foreground-primary', 'foreground-secondary', 'foreground-tertiary'],
+            BackgroundBase: ['background-primary', 'background-secondary'],
+            ...baseColors,
+        };
+
+        return (
+            <div>
+                {ObjectHelper.entries(textColors).map(([category, colors]) => (
+                    <Block>
+                        <Text emphasized={true}>Text - {category}</Text>
+                        <Grid>
+                            {colors.map((color) => (
+                                <GridItem size={2}>
+                                    <Text style={{ color: `var(--${color})` }}>{color}</Text>
+                                </GridItem>
+                            ))}
+                        </Grid>
+                    </Block>
+                ))}
+                {ObjectHelper.entries(backgroundColors).map(([category, colors]) => (
+                    <Block>
+                        <Text emphasized={true}>Background - {category}</Text>
+                        <Grid>
+                            {colors.map((color) => (
+                                <GridItem size={2}>
+                                    <Block
+                                        style={{
+                                            backgroundColor: `var(--${color})`,
+                                            padding: '0.5rem',
+                                            borderRadius: '0.25rem',
+                                        }}
+                                    >
+                                        <Text>{color}</Text>
+                                    </Block>
+                                </GridItem>
+                            ))}
+                        </Grid>
+                    </Block>
+                ))}
+            </div>
+        );
+    },
+};

package/src/Components/Dialog/AlertDialog.stories.tsx

@@ -0,0 +1,28 @@
+import { AlertDialog } from '@/Components/Dialog/AlertDialog';
+import { Dialog } from '@/Components/Dialog/Dialog';
+import { fn } from 'storybook/test';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: AlertDialog,
+    decorators: (Story) => {
+        return (
+            <Dialog closable={false}>
+                <Story />
+            </Dialog>
+        );
+    },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Title',
+        message: 'My Hint',
+        close: fn(),
+    },
+};

package/src/Components/Dialog/AlertDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { ButtonDialog } from '@/Components/Dialog/ButtonDialog';
 import { useMemo } from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { ButtonDialog } from './ButtonDialog';
+import { withMemo } from '@/helper/withMemo';
 
 export type AlertDialogProps = {
     title?: string;
@@ -10,7 +10,12 @@ export type AlertDialogProps = {
     confirmText?: string;
 };
 
-function AlertDialog({ title, message, close, confirmText = 'OK' }: AlertDialogProps) {
+export const AlertDialog = withMemo(function AlertDialog({
+    title,
+    message,
+    close,
+    confirmText = 'OK',
+}: AlertDialogProps) {
     // Variables
     const buttons = useMemo(
         () => [
@@ -19,7 +24,7 @@ function AlertDialog({ title, message, close, confirmText = 'OK' }: AlertDialogP
                 callback: () => close(),
             },
         ],
-        [close, confirmText]
+        [close, confirmText],
     );
 
     // Refs
@@ -37,8 +42,4 @@ function AlertDialog({ title, message, close, confirmText = 'OK' }: AlertDialogP
     // Render Functions
 
     return <ButtonDialog message={message} buttons={buttons} title={title} />;
-}
-
-// Need AlertDialogMemo for autocompletion of phpstorm
-const AlertDialogMemo = withMemo(AlertDialog);
-export { AlertDialogMemo as AlertDialog };
+});

package/src/Components/Dialog/ButtonDialog.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { Block } from '../Layout/Block';
-import { Text, TEXT_SIZE } from '../Text/Text';
-import { Clickable } from '../Clickable/Clickable';
-import styles from './buttonDialog.scss';
-import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Flavor } from '@/Components/Flavor';
+import { TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { Flavor } from "../Flavor";
+import styles from '@/Components/Dialog/buttonDialog.module.scss';
+import type { RbmComponentProps, WithNoChildren } from '@/Components/RbmComponentProps';
+import type { ReactElement } from 'react';
 
 export type ButtonDialogProps = RbmComponentProps<
     {
         title?: string;
         message: string;
-        buttons: { text: string; callback: () => void, flavor?: Flavor }[]
-        extraContent?: ReactElement|null
+        buttons: { text: string; callback: () => void; flavor?: Flavor }[];
+        extraContent?: ReactElement | null;
     },
     WithNoChildren
 >;
@@ -37,10 +37,12 @@ function ButtonDialog({ title, message, buttons, style, className, extraContent
     // Render Functions
 
     return (
-        <Block className={classNames(styles.buttonDialog, className)} style={style} >
+        <Block className={classNames(styles.buttonDialog, className)} style={style}>
             {!!title && (
                 <Block>
-                    <Text size={TEXT_SIZE.large} className={styles.title}>{title}</Text>
+                    <Text size={TEXT_SIZE.large} className={styles.title}>
+                        {title}
+                    </Text>
                 </Block>
             )}
             <Block>
@@ -60,5 +62,5 @@ function ButtonDialog({ title, message, buttons, style, className, extraContent
 }
 
 // Need ButtonDialogMemo for autocompletion of phpstorm
-const ButtonDialogMemo = withMemo(ButtonDialog, styles);
+const ButtonDialogMemo = withMemo(ButtonDialog);
 export { ButtonDialogMemo as ButtonDialog };

package/src/Components/Dialog/ConfirmDialog.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ConfirmDialog } from '@/Components/Dialog/ConfirmDialog';
+import { Dialog } from '@/Components/Dialog/Dialog';
+import { fn } from 'storybook/test';
+import React from 'react';
+
+const meta = {
+    component: ConfirmDialog,
+    decorators: (Story) => {
+        return (
+            <Dialog closable={false}>
+                <Story />
+            </Dialog>
+        );
+    },
+} satisfies Meta<typeof ConfirmDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Title',
+        message: 'My Question?',
+        close: fn(),
+    },
+};

package/src/Components/Dialog/ConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { ButtonDialog } from '@/Components/Dialog/ButtonDialog';
 import { useMemo } from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { ButtonDialog } from './ButtonDialog';
+import { withMemo } from '@/helper/withMemo';
 
 export type ConfirmDialogProps = {
     title?: string;
@@ -12,7 +12,13 @@ export type ConfirmDialogProps = {
 };
 
 // TODO Translation
-function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmText = 'OK' }: ConfirmDialogProps) {
+export const ConfirmDialog = withMemo(function ConfirmDialog({
+    title,
+    message,
+    close,
+    cancelText = 'Cancel',
+    confirmText = 'OK',
+}: ConfirmDialogProps) {
     // Variables
     const buttons = useMemo(
         () => [
@@ -22,7 +28,7 @@ function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmTe
             },
             { text: cancelText, callback: () => close(false) },
         ],
-        [cancelText, close, confirmText]
+        [cancelText, close, confirmText],
     );
 
     // Refs
@@ -40,8 +46,4 @@ function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmTe
     // Render Functions
 
     return <ButtonDialog message={message} buttons={buttons} title={title} />;
-}
-
-// Need ConfirmDialogMemo for autocompletion of phpstorm
-const ConfirmDialogMemo = withMemo(ConfirmDialog);
-export { ConfirmDialogMemo as ConfirmDialog };
+});

package/src/Components/Dialog/Dialog.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { useCallback, useState } from 'react';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-
-import styles from './dialog.scss';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { withMemo } from '../../helper/withMemo';
-import { InlineBlock } from '../Layout/InlineBlock';
-import { Block } from '../Layout/Block';
-import { ReactElement, useCallback, useState } from 'react';
-import { Clickable } from '../Clickable/Clickable';
+import styles from '@/Components/Dialog/dialog.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ReactElement } from 'react';
 
 export type DialogProps<ReturnData> = RbmComponentProps<
     {
@@ -43,7 +43,7 @@ function Dialog<ReturnData>({
             setIsClosed(true);
             onClose?.(data, identifier);
         },
-        [identifier, onClose]
+        [identifier, onClose],
     );
 
     const onCurtainClick = useCallback(() => {
@@ -78,5 +78,5 @@ function Dialog<ReturnData>({
 }
 
 // Need Dialog Memo for autocompletion of phpstorm
-const DialogMemo = withMemo(Dialog, styles);
+const DialogMemo = withMemo(Dialog);
 export { DialogMemo as Dialog };