@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/Dialog/DialogBackground.tsx

@@ -1,25 +1,25 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { Block } from '../Layout/Block';
-import styles from './dialogBackground.scss';
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Flex } from '@/Components/Layout/Flex';
+import { Grow } from '@/Components/Layout/Grow';
+import { Heading } from '@/Components/Text/Heading';
+import { Icon } from '@/Components/Icon/Icon';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { Heading } from "../Text/Heading";
-import { Flex } from "../Layout/Flex";
-import { Grow } from "../Layout/Grow";
-import { Clickable } from "../Clickable/Clickable";
-import { Icon } from "../Icon/Icon";
-import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import styles from '@/Components/Dialog/dialogBackground.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
-export type DialogBackgroundProps = RbmComponentProps<{ title?: string, onClose?: () => void }>;
+export type DialogBackgroundProps = RbmComponentProps<{ title?: string; onClose?: () => void }>;
 
 export const DialogBackground = withMemo(function DialogBackground({
-                                                                       children,
-                                                                       className,
-                                                                       style,
-                                                                       title,
-                                                                       onClose
-                                                                   }: DialogBackgroundProps) {
+    children,
+    className,
+    style,
+    title,
+    onClose,
+}: DialogBackgroundProps) {
     // Variables
 
     // Refs
@@ -38,10 +38,21 @@ export const DialogBackground = withMemo(function DialogBackground({
 
     return (
         <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
-            {(!!title || !!onClose) && <Flex horizontal={true} className={styles.title}>{!!title &&
-            <Grow><Heading >{title}</Heading></Grow>}{!!onClose &&
-            <Clickable onClick={onClose}><Icon size="lg" icon={faCircleXmark}/></Clickable>}</Flex>}
+            {(!!title || !!onClose) && (
+                <Flex horizontal={true} className={styles.title}>
+                    {!!title && (
+                        <Grow>
+                            <Heading>{title}</Heading>
+                        </Grow>
+                    )}
+                    {!!onClose && (
+                        <Clickable onClick={onClose}>
+                            <Icon size="lg" icon={faCircleXmark} />
+                        </Clickable>
+                    )}
+                </Flex>
+            )}
             {children}
         </Block>
     );
-}, styles);
+});

package/src/Components/Dialog/DialogContainer.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { ComponentType, ForwardedRef, PropsWithChildren, useCallback, useImperativeHandle, useState } from 'react';
+import { Block } from '@/Components/Layout/Block';
+import { Dialog } from '@/Components/Dialog/Dialog';
+import { DialogProvider } from '@/Components/Dialog/DialogContext';
 import { PromiseWithHandlers } from '@ainias42/js-helper';
-import { DialogProvider, ShowDialog } from './DialogContext';
-import { Dialog } from './Dialog';
-import { Block } from "../Layout/Block";
-import { withMemo } from "../../helper/withMemo";
+import { useCallback, useImperativeHandle, useState } from 'react';
+import { withMemo } from '@/helper/withMemo';
+import type { ComponentType, ForwardedRef, PropsWithChildren } from 'react';
+import type { ShowDialog } from '@/Components/Dialog/DialogContext';
 
 export type DialogContainerProps = PropsWithChildren<{
-    dialogClassName?: string
-    ref?: ForwardedRef<DialogContainerRef>
+    dialogClassName?: string;
+    ref?: ForwardedRef<DialogContainerRef>;
 }>;
 
 type DialogData = {
@@ -20,13 +22,13 @@ type DialogData = {
 
 export type DialogContainerRef = {
     showDialog: ShowDialog;
-}
+};
 
 export const DialogContainer = withMemo(function DialogContainer({
-                                                                     children,
-                                                                     dialogClassName,
-                                                                     ref
-                                                                 }: DialogContainerProps) {
+    children,
+    dialogClassName,
+    ref,
+}: DialogContainerProps) {
     // Variables
     const [dialogs, setDialogs] = useState<DialogData[]>([]);
     const [, setLastId] = useState(0);
@@ -43,7 +45,7 @@ export const DialogContainer = withMemo(function DialogContainer({
         setLastId((oldId) => {
             const id = oldId + 1;
             setDialogs((oldDialogs) => {
-                return [...oldDialogs, {id, component, props, resultPromise: promise}] as DialogData[];
+                return [...oldDialogs, { id, component, props, resultPromise: promise }] as DialogData[];
             });
             return id;
         });
@@ -58,15 +60,18 @@ export const DialogContainer = withMemo(function DialogContainer({
                     return false;
                 }
                 return true;
-            })
+            }),
         );
     }, []);
 
     // Effects
-    useImperativeHandle(ref, () => ({
-        showDialog
-    }), [showDialog]);
-
+    useImperativeHandle(
+        ref,
+        () => ({
+            showDialog,
+        }),
+        [showDialog],
+    );
 
     // Other
 

package/src/Components/Dialog/DialogContext.ts

@@ -1,20 +1,21 @@
-import React, { ComponentType, useContext } from 'react';
-import { EmptyProps } from '../../helper/EmptyProps';
+import React, { useContext } from 'react';
+import type { ComponentType } from 'react';
+import type { EmptyProps } from '@/helper/EmptyProps';
 
 export type ShowDialog = <
     P = EmptyProps,
     R = any,
     C extends ComponentType<(P & { close: (result?: R) => void }) | P> = ComponentType<
         (P & { close: (result?: R) => void }) | P
-    >
+    >,
 >(
     dialog: C,
-    props?: Omit<P, 'close'>
+    props?: Omit<P, 'close'>,
 ) => Promise<R | void>;
 
 const DialogContext = React.createContext<ShowDialog>(() => {
-    console.error("DialogContext not initialized");
-    return Promise.reject(new Error("DialogContext not initialized"));
+    console.error('DialogContext not initialized');
+    return Promise.reject(new Error('DialogContext not initialized'));
 });
 export const DialogProvider = DialogContext.Provider;
 

package/src/Components/Dialog/{buttonDialog.scss → buttonDialog.module.scss}

@@ -1,20 +1,33 @@
-@import "../../scss/variables";
-@import "../../scss/designMixin";
-@import "../../scss/flavorMixin";
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/flavorMixin" as *;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --button-dialog-text-color: var(--text-primary);
+}
+
+@include mixin.design(variables.$material) {
+  --button-dialog-background-color: var(--foreground-primary);
+  --button-dialog-box-shadow-color: var(--box-shadow-color);
+}
+
+@include mixin.design(variables.$flat) {
+  --button-dialog-background-color: var(--foreground-secondary);
+  --button-dialog-button-border-color: var(--border-light);
+}
 
 .buttonDialog {
   font-weight: 400;
   max-width: 95%;
   overflow: hidden;
   min-width: 270px;
+  background-color: var(--button-dialog-background-color);
 
   .title {
     font-weight: 500;
   }
 
-  .message {
-  }
-
   .buttonContainer {
     width: 100%;
 
@@ -23,18 +36,14 @@
 
       .buttonText {
         @include flavorSelection(--text-primary-default-color);
-
       }
-
     }
   }
 
-  @include design($flat) {
+  @include mixin.design(variables.$flat) {
     border-radius: 8px;
-    background-color: #f4f4f4;
     padding-top: 16px;
-    color: #1f1f21;
-    font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
+    font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
     text-align: center;
 
     .title {
@@ -46,6 +55,7 @@
       font-size: 14px;
       padding: 4px 12px 8px;
       min-height: 36px;
+      color: var(--button-dialog-text-color)
     }
 
     .buttonContainer {
@@ -55,8 +65,8 @@
       .button {
         flex: 1;
         display: block;
-        border-left: 1px solid var(--border-light);
-        border-top: 1px solid var(--border-light);
+        border-left: 1px solid var(--button-dialog-button-border-color);
+        border-top: 1px solid var(--button-dialog-button-border-color);
         vertical-align: middle;
         text-align: center;
         height: 44px;
@@ -76,13 +86,11 @@
     }
   }
 
-  @include design($material) {
+  @include mixin.design(variables.$material) {
     border-radius: 2px;
-    background-color: #ffffff;
     padding: 22px 0 0;
-    box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 40%);
-    color: #31313a;
-    font-family: 'Roboto', 'Noto', sans-serif;
+    box-shadow: 0 16px 24px 2px var(--button-dialog-box-shadow-color), 0 6px 30px 5px var(--button-dialog-box-shadow-color), 0 8px 10px -5px var(--button-dialog-box-shadow-color);
+    font-family: Roboto, Noto, sans-serif;
     text-align: left;
 
     .title {
@@ -94,9 +102,9 @@
       font-size: 16px;
       line-height: 20px;
       padding: 0 24px;
-      margin: 24px 0 10px 0;
+      margin: 24px 0 10px;
       min-height: 0;
-      color: rgba(49, 49, 58, .85);
+      color: var(--button-dialog-text-color);
     }
 
     .buttonContainer {

package/src/Components/Dialog/dialog.module.scss

@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "../../scss/variables" as variables;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --dialog-z-index: 1001;
+  --dialog-background-color: var(--curtain-light)
+}
+
+.dialogContainer {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  z-index: var(--dialog-z-index);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--dialog-background-color);
+
+  .closeCurtain {
+    position: absolute;
+    inset: 0;
+  }
+
+  .dialog {
+    max-width: map.get(variables.$grid-breakpoints, "xxl");
+    z-index: 1;
+  }
+}

package/src/Components/Dialog/dialogBackground.module.scss

@@ -0,0 +1,17 @@
+@use "../../scss/vars" as *;
+
+@include vars {
+  --dialog-background-background-color: var(--foreground-primary);
+}
+
+.dialogBackground {
+  background-color: var(--dialog-background-background-color);
+  padding: 0.5rem;
+  max-height: 80vh;
+  overflow: auto;
+
+  .title {
+    gap: 16px;
+    margin: 0 0 0.8rem;
+  }
+}

package/src/Components/Dialog/useAlertDialog.ts

@@ -1,6 +1,6 @@
+import { AlertDialog } from '@/Components/Dialog/AlertDialog';
 import { useCallback } from 'react';
-import { useDialog } from './DialogContext';
-import { AlertDialog } from './AlertDialog';
+import { useDialog } from '@/Components/Dialog/DialogContext';
 
 export function useAlertDialog() {
     const showDialog = useDialog();
@@ -8,6 +8,6 @@ export function useAlertDialog() {
         (message: string, title?: string) => {
             return showDialog(AlertDialog, { message, title });
         },
-        [showDialog]
+        [showDialog],
     );
 }

package/src/Components/Dialog/useConfirmDialog.ts

@@ -1,6 +1,6 @@
+import { ConfirmDialog } from '@/Components/Dialog/ConfirmDialog';
 import { useCallback } from 'react';
-import { useDialog } from './DialogContext';
-import { ConfirmDialog } from './ConfirmDialog';
+import { useDialog } from '@/Components/Dialog/DialogContext';
 
 export function useConfirmDialog() {
     const showDialog = useDialog();
@@ -8,6 +8,6 @@ export function useConfirmDialog() {
         (message: string, title?: string) => {
             return showDialog(ConfirmDialog, { message, title });
         },
-        [showDialog]
+        [showDialog],
     );
 }

package/src/Components/DragAndDrop/DragItem.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import {withMemo} from '../../helper/withMemo';
-import {RbmComponentProps, WithNoStringAndChildrenProps} from '../RbmComponentProps';
-import {Draggable, DraggableProps} from 'react-beautiful-dnd';
+import { Draggable } from '@hello-pangea/dnd';
+import { withMemo } from '@/helper/withMemo';
+import type { DraggableProps } from '@hello-pangea/dnd';
+import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
 
 export type DragItemProps = RbmComponentProps<Omit<DraggableProps, 'children'>, WithNoStringAndChildrenProps>;
 
-function DragItem({children, className, ...dragProps}: DragItemProps) {
+function DragItem({ children, className, ...dragProps }: DragItemProps) {
     // Variables
 
     // Refs
@@ -24,7 +25,7 @@ function DragItem({children, className, ...dragProps}: DragItemProps) {
 
     return (
         <Draggable {...dragProps}>
-            {({innerRef, dragHandleProps, draggableProps}) => (
+            {({ innerRef, dragHandleProps, draggableProps }) => (
                 <div className={className} {...draggableProps} {...dragHandleProps} ref={innerRef}>
                     {children}
                 </div>
@@ -35,4 +36,4 @@ function DragItem({children, className, ...dragProps}: DragItemProps) {
 
 // Need DragItemMemo for autocompletion of phpstorm
 const DragItemMemo = withMemo(DragItem);
-export {DragItemMemo as DragItem};
+export { DragItemMemo as DragItem };

package/src/Components/DragAndDrop/DropArea.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
-import { Droppable, DroppableProps } from 'react-beautiful-dnd';
-import { useStrictEnabled } from './useStrictEnabled';
+import { Droppable } from '@hello-pangea/dnd';
+import { useStrictEnabled } from '@/Components/DragAndDrop/useStrictEnabled';
+import { withMemo } from '@/helper/withMemo';
+import type { DroppableProps } from '@hello-pangea/dnd';
+import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
 
 export type DropAreaProps = RbmComponentProps<Omit<DroppableProps, 'children'>, WithNoStringAndChildrenProps>;
 

package/src/Components/Flavor.ts

@@ -1,6 +1,6 @@
 export enum Flavor {
-    Accent = "flavor-accent",
-    Basic = "flavor-basic",
-    Destructive = "flavor-destructive",
-    Constructive = "flavor-constructive",
+    Accent = 'flavor-accent',
+    Basic = 'flavor-basic',
+    Destructive = 'flavor-destructive',
+    Constructive = 'flavor-constructive',
 }

package/src/Components/FormElements/Button/Button.stories.tsx

@@ -0,0 +1,79 @@
+import { Button } from '@/Components/FormElements/Button/Button';
+import { ButtonType } from '@/Components/FormElements/Button/ButtonType';
+import { Flavor } from '@/Components/Flavor';
+import { Size } from '@/Size';
+import { Text } from '@/Components/Text/Text';
+import React from 'react';
+import type { ButtonProps } from '@/Components/FormElements/Button/Button';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: Button,
+    argTypes: {
+        flavor: {
+            control: { type: 'select' },
+            options: Object.values(Flavor),
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(ButtonType),
+        },
+        size: {
+            control: { type: 'select' },
+            options: [undefined, 'medium', 'small'],
+            mapping: {
+                medium: Size.medium,
+                small: Size.small,
+            },
+        },
+        children: {
+            control: false,
+        },
+    },
+    render: (args) => (
+        <Button {...args}>
+            <Text>Button</Text>
+        </Button>
+    ),
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<ButtonProps<any>>;
+
+export const Default: Story = {
+    args: {
+        fullWidth: false,
+        flavor: Flavor.Basic,
+        type: ButtonType.Primary,
+        stopPropagation: false,
+        size: undefined,
+    },
+};
+
+export const Accent: Story = {
+    args: {
+        fullWidth: false,
+        flavor: Flavor.Accent,
+        type: ButtonType.Primary,
+        stopPropagation: false,
+    },
+};
+
+export const Destructive: Story = {
+    args: {
+        fullWidth: false,
+        flavor: Flavor.Destructive,
+        type: ButtonType.Primary,
+        stopPropagation: false,
+    },
+};
+
+export const Constructive: Story = {
+    args: {
+        fullWidth: false,
+        flavor: Flavor.Constructive,
+        type: ButtonType.Primary,
+        stopPropagation: false,
+    },
+};

package/src/Components/FormElements/Button/Button.tsx

@@ -1,57 +1,70 @@
 import * as React from 'react';
-import { Override } from '@ainias42/js-helper';
-import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-import styles from './button.scss';
+import { ButtonType } from '@/Components/FormElements/Button/ButtonType';
+import { Flavor } from '@/Components/Flavor';
+import { Size } from '@/Size';
+import { useCallback } from 'react';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { withMemo } from '../../../helper/withMemo';
-import { HTMLAttributes, MouseEvent, useCallback } from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { ButtonType } from "./ButtonType";
-import { Flavor } from "../../Flavor";
-import { Size } from "../../../Size";
+import styles from '@/Components/FormElements/Button/button.module.scss';
+import type { HTMLAttributes, MouseEvent } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { Override } from '@ainias42/js-helper';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type ButtonProps<ClickData> = RbmComponentProps<
-    Override<HTMLAttributes<HTMLButtonElement>, {
-        type?: ButtonType,
-        disabled?: boolean;
-        flavor?: Flavor
-        fullWidth?: boolean;
-        stopPropagation?: boolean;
-        size?: Omit<Size, "xxLarge" | "xLarge" | "large" | "xSmall">
-    } & OptionalListener<'onClick', ClickData>>
+    Override<
+        HTMLAttributes<HTMLButtonElement>,
+        {
+            type?: ButtonType;
+            disabled?: boolean;
+            flavor?: Flavor;
+            fullWidth?: boolean;
+            stopPropagation?: boolean;
+            size?: Omit<Size, 'xxLarge' | 'xLarge' | 'large' | 'xSmall'>;
+        } & OptionalListener<'onClick', ClickData>
+    >
 >;
 
 export const Button = withMemo(function Button<ClickData>({
-                                                              children,
-                                                              className,
-                                                              disabled,
-                                                              size,
-                                                              fullWidth = false,
-                                                              flavor = Flavor.Accent,
-                                                              type = ButtonType.Primary,
+    children,
+    className,
+    disabled,
+    size,
+    fullWidth = false,
+    flavor = Flavor.Accent,
+    type = ButtonType.Primary,
     stopPropagation = true,
-                                                              ...props
-                                                          }: ButtonProps<ClickData>) {
+    ...props
+}: ButtonProps<ClickData>) {
     const [onClick, otherProps] = useListenerWithExtractedProps<'onClick', ClickData>('onClick', props);
 
-    const realOnClick = useCallback((ev: MouseEvent) => {
-        if (stopPropagation) {
-            ev.stopPropagation();
-        }
-        onClick?.(ev);
-    }, [onClick, stopPropagation]);
+    const realOnClick = useCallback(
+        (ev: MouseEvent) => {
+            if (stopPropagation) {
+                ev.stopPropagation();
+            }
+            onClick?.(ev);
+        },
+        [onClick, stopPropagation],
+    );
 
     const classes = {
         [styles.primary]: type === ButtonType.Primary,
         [styles.secondary]: type === ButtonType.Secondary,
         [styles.disabled]: disabled,
-        [styles.small]: size === Size.small
+        [styles.small]: size === Size.small,
     };
 
     return (
-        <button {...otherProps} disabled={disabled} type="button" onClick={realOnClick}
-                className={classNames(styles.button, {[styles.fullWidth]: fullWidth}, classes, flavor, className)}>
+        <button
+            {...otherProps}
+            disabled={disabled}
+            type="button"
+            onClick={realOnClick}
+            className={classNames(styles.button, { [styles.fullWidth]: fullWidth }, classes, flavor, className)}
+        >
             {children}
         </button>
     );
-}, styles);
+});

package/src/Components/FormElements/Button/ButtonType.ts

@@ -1,4 +1,4 @@
 export enum ButtonType {
-    Primary = "primary",
-    Secondary = "secondary",
+    Primary = 'primary',
+    Secondary = 'secondary',
 }