@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/FormElements/Switch/switch.module.scss

@@ -0,0 +1,157 @@
+@use "../../../scss/variables" as variables;
+@use "../../../scss/designMixin" as mixin;
+
+@include mixin.design(variables.$material) {
+  --switch-handle-offset: 0px;
+  --switch-handle-checked-offset: 18px;
+  --switch-background: var(--border-light);
+  --switch-handle-color: var(--foreground-secondary);
+  --switch-handle-box-shadow-color: var(--box-shadow-color);
+  --switch-active-handle-color: var(--flavor-accent);
+  --switch-active-handle-box-shadow-color: var(--box-shadow-color);
+}
+
+@include mixin.design(variables.$flat) {
+  --switch-handle-offset: 2px;
+  --switch-handle-checked-offset: 19px;
+  --switch-background: var(--foreground-primary);
+  --switch-box-shadow-color: var(--box-shadow-color);
+  --switch-handle-color: var(--foreground-primary);
+  --switch-handle-box-shadow-color: rgb(0 0 0 / 25%);
+  --switch-active-background-color: var(--flavor-accent);
+  --switch-active-box-shadow-color: var(--flavor-accent);
+  --switch-active-handle-color: var(--foreground-primary);
+  --switch-active-handle-box-shadow-color: var(--box-shadow-color);
+}
+
+.switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+
+  > label {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  .label {
+    &:not(:empty) {
+      margin-left: 0.2rem;
+      margin-right: 0.2rem;
+    }
+  }
+
+  input {
+    display: none;
+  }
+
+  .toggle {
+    flex-shrink: 0;
+    width: 40px;
+    display: inline-block;
+    position: relative;
+    transition-property: all;
+    transition-duration: 0.35s;
+    transition-timing-function: ease-out;
+    border-radius: 30px;
+
+    .handle {
+      left: var(--switch-handle-offset);
+      transition-property: all;
+      transition-duration: 0.35s;
+      transition-timing-function: cubic-bezier(.59, .01, .5, .99);
+      border-radius: 100%;
+      background-clip: padding-box;
+      position: absolute;
+      content: '';
+    }
+  }
+
+  %dual-toggle-flat {
+    background-color: var(--switch-active-background-color);
+    box-shadow: inset 0 0 0 2px var(--switch-active-box-shadow-color);
+  }
+
+  %dual-handle-material {
+    background-color: var(--switch-active-handle-color);
+    box-shadow: 0 4px 5px 0 var(--switch-active-handle-box-shadow-color), 0 1px 10px 0 var(--switch-active-handle-box-shadow-color), 0 2px 4px -1px var(--switch-active-handle-box-shadow-color);
+  }
+
+  %dual-handle-flat {
+    top: 2px;
+    background-color: var(--switch-active-handle-color);
+    box-shadow: 0 3px 2px var(--switch-active-handle-box-shadow-color);
+  }
+
+  @include mixin.design(variables.$material) {
+    input:checked + .toggle {
+      --switch-handle-offset: var(--switch-handle-checked-offset);
+
+      .handle {
+        @extend %dual-handle-material;
+      }
+    }
+
+    .toggle {
+      background-color: var(--switch-background);
+      margin-top: 4px;
+      height: 15px;
+
+      .handle {
+        margin-top: -4px;
+        width: 22px;
+        height: 22px;
+        background-color: var(--switch-handle-color);
+        box-shadow: 0 4px 5px 0 var(--switch-handle-box-shadow-color), 0 1px 10px 0 var(--switch-handle-box-shadow-color), 0 2px 4px -1px var(--switch-handle-box-shadow-color);
+      }
+    }
+  }
+
+  @include mixin.design(variables.$flat) {
+    input:checked + .toggle {
+      @extend %dual-toggle-flat;
+
+      --switch-handle-offset: var(--switch-handle-checked-offset);
+
+      .handle {
+        @extend %dual-handle-flat;
+      }
+
+    }
+
+    .toggle {
+      height: 23px;
+      background-color: var(--switch-background);
+      box-shadow: inset 0 0 0 2px var(--switch-box-shadow-color);
+
+      .handle {
+        height: 19px;
+        width: 19px;
+        background-color: var(--switch-handle-color);
+        top: 2px;
+        box-shadow: 0 0 1px 0 var(--switch-handle-box-shadow-color), 0 3px 2px var(--switch-handle-box-shadow-color);
+      }
+    }
+  }
+
+  &.dual {
+    @include mixin.design(variables.$material) {
+      .toggle {
+        .handle {
+          @extend %dual-handle-material;
+        }
+      }
+    }
+
+    @include mixin.design(variables.$flat) {
+      .toggle {
+        @extend %dual-toggle-flat;
+
+        .handle {
+          @extend %dual-handle-flat;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Textarea } from '@/Components/FormElements/Textarea/Textarea';
+
+const meta = {
+    component: Textarea,
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        placeholder: 'Placeholder',
+        defaultValue: '',
+        error: '',
+    },
+};
+
+export const Error: Story = {
+    args: {
+        label: 'Label',
+        placeholder: 'Placeholder',
+        error: 'Wrong Value',
+    },
+};
+
+export const WithText: Story = {
+    args: {
+        label: 'Label',
+        placeholder: 'Placeholder',
+        defaultValue: 'Mein geschriebener Text',
+        error: '',
+    },
+};

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -1,21 +1,16 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Override } from '../../../TypeHelpers';
-import {
-    TextareaHTMLAttributes,
-    useCallback,
-    KeyboardEvent,
-    ChangeEvent,
-    CSSProperties, useRef, ForwardedRef
-} from 'react';
-import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-import styles from './textarea.scss';
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { useCallback, useRef } from 'react';
+import { useComposedRef } from '@/Components/Hooks/useComposedRef';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { useOnChangeDone } from '@/Components/FormElements/hooks/useOnChangeDone';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { useOnChangeDone } from "../hooks/useOnChangeDone";
-import { useComposedRef } from "../../Hooks/useComposedRef";
-import { InlineBlock } from "../../Layout/InlineBlock";
-import { Text } from "../../Text/Text";
-import { withMemo } from "../../../helper/withMemo";
+import styles from '@/Components/FormElements/Textarea/textarea.module.scss';
+import type { CSSProperties, ChangeEvent, ForwardedRef, KeyboardEvent, TextareaHTMLAttributes } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -25,29 +20,29 @@ export type TextareaProps<OnChangeData, OnChangeDoneData> = RbmComponentProps<
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
             onEscape?: (newText: string) => void;
-            textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>,
-            containerRef?: ForwardedRef<HTMLLabelElement>
-            ref?: ForwardedRef<HTMLTextAreaElement>
-            error?: string,
-        } & OptionalListener<'onChange', OnChangeData>
-        & OptionalListener<'onChangeDone', OnChangeDoneData>
+            textareaStyles?: CSSProperties & Record<`--${string}`, string | number | undefined>;
+            containerRef?: ForwardedRef<HTMLLabelElement>;
+            ref?: ForwardedRef<HTMLTextAreaElement>;
+            error?: string;
+        } & OptionalListener<'onChange', OnChangeData> &
+            OptionalListener<'onChangeDone', OnChangeDoneData>
     >
 >;
 
 export const Textarea = withMemo(function Textarea<OnChangeData, OnChangeDoneData>({
-                                                                                       label,
-                                                                                       className,
-                                                                                       style,
-                                                                                       onKeyUp,
-                                                                                       onChangeText,
-                                                                                       onEnter,
-                                                                                       onEscape,
-                                                                                       textareaStyles,
-                                                                                       containerRef,
-                                                                                       ref,
-                                                                                       error,
-                                                                                       ...otherProps
-                                                                                   }: TextareaProps<OnChangeData, OnChangeDoneData>) {
+    label,
+    className,
+    style,
+    onKeyUp,
+    onChangeText,
+    onEnter,
+    onEscape,
+    textareaStyles,
+    containerRef,
+    ref,
+    error,
+    ...otherProps
+}: TextareaProps<OnChangeData, OnChangeDoneData>) {
     // Refs
     const innerRef = useRef<HTMLTextAreaElement>(null);
     const refSetter = useComposedRef(ref, innerRef);
@@ -59,11 +54,11 @@ export const Textarea = withMemo(function Textarea<OnChangeData, OnChangeDoneDat
     // Callbacks
     const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
         'onChange',
-        otherProps
+        otherProps,
     );
     const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
         'onChangeDone',
-        otherPropsWithoutOnchange
+        otherPropsWithoutOnchange,
     );
 
     const onChange = useCallback(
@@ -73,7 +68,7 @@ export const Textarea = withMemo(function Textarea<OnChangeData, OnChangeDoneDat
             }
             onChangeWithData(e);
         },
-        [onChangeWithData, onChangeText]
+        [onChangeWithData, onChangeText],
     );
 
     const realOnKeyPress = useCallback(
@@ -88,24 +83,30 @@ export const Textarea = withMemo(function Textarea<OnChangeData, OnChangeDoneDat
                 onEscape((e.target as HTMLTextAreaElement).value);
             }
         },
-        [onEnter, onEscape, onKeyUp]
+        [onEnter, onEscape, onKeyUp],
     );
 
     // Effects
     useOnChangeDone(onChangeDone, innerRef);
 
-
     // Other
 
     // Render Functions
 
     return (
+        // The label has a text-area-element. This is okay
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
         <label className={classNames(styles.container, className)} style={style} ref={containerRef}>
             {label ? <span className={styles.label}>{label}</span> : null}
-            <textarea {...otherPropsWithoutData} style={textareaStyles} onKeyUp={realOnKeyPress}
-                      className={styles.textarea} onChange={onChange} ref={refSetter}/>
-            {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
+            <textarea
+                {...otherPropsWithoutData}
+                style={textareaStyles}
+                onKeyUp={realOnKeyPress}
+                className={styles.textarea}
+                onChange={onChange}
+                ref={refSetter}
+            />
+            <FormError error={error} />
         </label>
     );
-}, styles);
-
+});

package/src/Components/FormElements/Textarea/textarea.module.scss

@@ -0,0 +1,34 @@
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --textarea-background-color: var(--foreground-secondary);
+  --textarea-border-color: var(--border-light);
+  --textarea-text-color: var(--text-primary);
+}
+
+.container {
+  width: 100%;
+  min-height: 10rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .label {
+    display: block;
+  }
+
+  textarea {
+    flex: 1;
+    background-color: var(--textarea-background-color);
+    color: var(--textarea-text-color);
+    box-shadow: none;
+    appearance: none;
+    width: 100%;
+    height: 100%;
+    resize: none;
+    outline: none;
+    padding: 5px;
+    border-radius: 4px;
+    border: 1px solid var(--textarea-border-color);
+  }
+}

package/src/Components/FormElements/hooks/useOnChangeDone.ts

@@ -1,6 +1,10 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import type { MutableRefObject } from 'react';
 
-export function useOnChangeDone(onChangeDone: (ev: any) => void, ref?: MutableRefObject<HTMLInputElement| HTMLTextAreaElement | null>) {
+export function useOnChangeDone(
+    onChangeDone: (ev: any) => void,
+    ref?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>,
+) {
     const innerRef = useRef<HTMLInputElement>(null);
     const usedRef = ref ?? innerRef;
 

package/src/Components/FullScreen/FullScreen.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ComponentPropsWithoutRef, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Override } from '../../TypeHelpers';
-import { withMemo } from '../../helper/withMemo';
-import { useWindow } from '../../WindowContext/WindowContext';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { JSX } from "react/jsx-runtime";
+import { JSX } from 'react/jsx-runtime';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useWindow } from '@/WindowContext/WindowContext';
+import { withMemo } from '@/helper/withMemo';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 import IntrinsicElements = JSX.IntrinsicElements;
 
 export type FullScreenProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
@@ -15,13 +16,13 @@ export type FullScreenProps<AsType extends keyof IntrinsicElements> = RbmCompone
 >;
 
 export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
-                                                                                                               children,
-                                                                                                               as,
-                                                                                                               fullscreenKey,
-                                                                                                               onEnterFullscreen,
-                                                                                                               onLeaveFullscreen,
-                                                                                                               ...otherProps
-                                                                                                           }: FullScreenProps<AsTag>) {
+    children,
+    as,
+    fullscreenKey,
+    onEnterFullscreen,
+    onLeaveFullscreen,
+    ...otherProps
+}: FullScreenProps<AsTag>) {
     // Variables
 
     // Refs
@@ -44,7 +45,7 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
                 // @ts-expect-error this is not in the types but it exists
                 document.webkitCancelFullScreen();
             }
-                return;
+            return;
         }
 
         if ('webkitRequestFullscreen' in document.body) {
@@ -97,9 +98,8 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
 
     // Render Functions
     const element = as ?? 'span';
-    const props = useMemo(() => ({...otherProps, ref: containerRef}), [otherProps]);
+    const props = useMemo(() => ({ ...otherProps, ref: containerRef }), [otherProps]);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return React.createElement(element, props, children);
 });
-

package/src/Components/Hooks/useBreakpoint.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useWindow } from '../../WindowContext/WindowContext';
+import { useWindow } from '@/WindowContext/WindowContext';
 
 export const BreakpointNames = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 
@@ -50,17 +50,23 @@ export function useBreakpointSelect<T1, T2, T3, T4, T5, T6>(breakpointValues: [T
     const size = useBreakpoint();
 
     switch (size) {
-        case Breakpoints.XS:
+        case Breakpoints.XS: {
             return breakpointValues[0];
-        case Breakpoints.SM:
+        }
+        case Breakpoints.SM: {
             return breakpointValues[1];
-        case Breakpoints.MD:
+        }
+        case Breakpoints.MD: {
             return breakpointValues[2];
-        case Breakpoints.LG:
+        }
+        case Breakpoints.LG: {
             return breakpointValues[3];
-        case Breakpoints.XL:
+        }
+        case Breakpoints.XL: {
             return breakpointValues[4];
-        default:
+        }
+        default: {
             return breakpointValues[5];
+        }
     }
 }

package/src/Components/Hooks/useClientLayoutEffect.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 export function useClientLayoutEffect(...params: Parameters<typeof React.useLayoutEffect>) {
     if (typeof window !== 'undefined') {

package/src/Components/Hooks/useComposedRef.ts

@@ -1,4 +1,5 @@
-import { ForwardedRef, useCallback } from 'react';
+import { useCallback } from 'react';
+import type { ForwardedRef } from 'react';
 
 export function useComposedRef<RefVal>(...refs: (ForwardedRef<RefVal> | undefined)[]) {
     return useCallback((val: RefVal | null) => {

package/src/Components/Hooks/useDebounced.ts

@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
 export function useDebounced<Args extends any[]>(
     callback: (...args: Args) => void | Promise<void>,
     dependencies: any[],
-    delay = 100
+    delay = 100,
 ) {
     const [shared] = useState({ timeout: undefined as undefined | any });
 
@@ -17,6 +17,6 @@ export function useDebounced<Args extends any[]>(
                 shared.timeout = setTimeout(() => (shared.timeout = undefined), delay);
             }
         },
-        [delay, realCB, shared]
+        [delay, realCB, shared],
     );
 }

package/src/Components/Hooks/useDelayed.ts

@@ -4,14 +4,13 @@ export function useDelayed<Args extends any[]>(
     callback: (...args: Args) => void | Promise<void>,
     dependencies: any[],
     delay = 100,
-    maxDelay: number|undefined = undefined
+    maxDelay: number | undefined = undefined,
 ) {
     const argsRef = useRef<Args | undefined>(undefined);
     const timeoutRef = useRef<any>(undefined);
     const mayDelayTimeoutRef = useRef<any>(undefined);
     const maxDelayTimeout = useRef<any>(undefined);
 
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const realCB = useCallback(callback, dependencies);
     const func = useCallback(
@@ -40,7 +39,7 @@ export function useDelayed<Args extends any[]>(
                 }, maxDelay);
             }
         },
-        [delay, maxDelay, realCB]
+        [delay, maxDelay, realCB],
     );
 
     return func;

package/src/Components/Hooks/useDelayedEffect.ts

@@ -1,8 +1,8 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
-export function useDelayedEffect(effect: () => void|(() => void), dependencies: any[], delay = 100){
+export function useDelayedEffect(effect: () => void | (() => void), dependencies: any[], delay = 100) {
     useEffect(() => {
-        let cleanup: (() => void)|void | undefined;
+        let cleanup: (() => void) | void | undefined;
         const timeout = setTimeout(() => {
             cleanup = effect();
         }, delay);

package/src/Components/Hooks/useDelayedState.ts

@@ -1,18 +1,26 @@
-import { useCallback, useState } from "react";
-import { useDelayed } from "./useDelayed";
+import { useCallback, useState } from 'react';
+import { useDelayed } from '@/Components/Hooks/useDelayed';
 
 export function useDelayedState<T>(initialState: T | (() => T), delay = 100, maxDelay: number | undefined = undefined) {
     const [immediateState, setImmediateState] = useState(initialState);
     const [state, setState] = useState(immediateState);
 
-    const setDelayedState = useDelayed((newState: (T)) => {
-        setState(newState);
-    }, [], delay, maxDelay);
+    const setDelayedState = useDelayed(
+        (newState: T) => {
+            setState(newState);
+        },
+        [],
+        delay,
+        maxDelay,
+    );
 
-    const setValue = useCallback((newValue: (T)) => {
-        setImmediateState(newValue);
-        setDelayedState(newValue);
-    }, [setDelayedState]);
+    const setValue = useCallback(
+        (newValue: T) => {
+            setImmediateState(newValue);
+            setDelayedState(newValue);
+        },
+        [setDelayedState],
+    );
 
-    return {state, immediateState, setState: setValue};
+    return { state, immediateState, setState: setValue };
 }

package/src/Components/Hooks/useInViewport.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import type { MutableRefObject } from 'react';
 
 export const useInViewport = (element: MutableRefObject<Element | null>, rootMargin = '0px') => {
     const [isVisible, setState] = useState(false);
@@ -13,7 +14,7 @@ export const useInViewport = (element: MutableRefObject<Element | null>, rootMar
             ([entry]) => {
                 setState(entry.isIntersecting);
             },
-            { rootMargin }
+            { rootMargin },
         );
         observer.observe(savedElement);
         return () => observer.unobserve(savedElement);

package/src/Components/Hooks/useKeyListener.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useWindow } from '../../WindowContext/WindowContext';
+import { useWindow } from '@/WindowContext/WindowContext';
 
 function isFormElement(element: EventTarget | null) {
     return (
@@ -13,7 +13,7 @@ export function useKeyListener(
     key: KeyboardEvent['key'],
     listener: (e: KeyboardEvent) => void,
     dependencies: any[] = [],
-    ignoreFormElements = true
+    ignoreFormElements = true,
 ) {
     const window = useWindow();
 
@@ -34,12 +34,15 @@ export function useKeyUpListener(
     key: KeyboardEvent['key'],
     listener: (e: KeyboardEvent) => void,
     dependencies: any[] = [],
-    ignoreFormElements = true
+    ignoreFormElements = true,
 ) {
     useEffect(() => {
         const lowercaseKey = key.toLowerCase();
         const keyListener = (e: KeyboardEvent) => {
-            if ((e.key === "Meta" || e.key.toLowerCase() === lowercaseKey) && (!ignoreFormElements || !isFormElement(e.target))) {
+            if (
+                (e.key === 'Meta' || e.key.toLowerCase() === lowercaseKey) &&
+                (!ignoreFormElements || !isFormElement(e.target))
+            ) {
                 listener(e);
             }
         };
@@ -60,7 +63,7 @@ export function useKeyPressed(key: KeyboardEvent['key'], ignoreFormElements = tr
             }
         },
         [isPressed],
-        ignoreFormElements
+        ignoreFormElements,
     );
     useKeyUpListener(
         key,
@@ -71,7 +74,7 @@ export function useKeyPressed(key: KeyboardEvent['key'], ignoreFormElements = tr
             }
         },
         [],
-        false
+        false,
     );
     return isPressed;
 }