@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/FormElements/Input/HiddenInput.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Input, InputProps } from './Input';
-import { withMemo } from '../../../helper/withMemo';
-import styles from './input.scss';
+import { Input } from '@/Components/FormElements/Input/Input';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
+import styles from '@/Components/FormElements/Input/input.module.scss';
+import type { InputProps } from '@/Components/FormElements/Input/Input';
 
 export type HiddenInputProps<OnChangeType, OnBlurData, OnChangeEndData> = InputProps<
     OnChangeType,
@@ -12,7 +13,7 @@ export type HiddenInputProps<OnChangeType, OnBlurData, OnChangeEndData> = InputP
     noFocusHint?: boolean;
 };
 
-function HiddenInput<OnChangeData, OnBlurData, OnChangeEndData>({
+export const HiddenInput = withMemo(function HiddenInput<OnChangeData, OnBlurData, OnChangeEndData>({
     noFocusHint = false,
     className,
     ...props
@@ -36,7 +37,4 @@ function HiddenInput<OnChangeData, OnBlurData, OnChangeEndData>({
             {...props}
         />
     );
-}
-
-const tmp = withMemo(HiddenInput);
-export { tmp as HiddenInput };
+});

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input } from '@/Components/FormElements/Input/Input';
+
+const meta = {
+    component: Input,
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['text', 'email', 'number', 'password', 'tel', 'url'],
+        },
+    },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        type: 'text',
+        inline: false,
+        defaultValue: '',
+        label: 'Label',
+        placeholder: 'Placeholder',
+        error: '',
+        readOnly: false,
+    },
+};
+
+export const Error: Story = {
+    args: {
+        inline: false,
+        defaultValue: '',
+        label: 'Label',
+        placeholder: 'Placeholder',
+        error: 'Wrong Value',
+    },
+};
+
+export const ErrorInline: Story = {
+    args: {
+        inline: true,
+        defaultValue: '',
+        label: 'Label',
+        placeholder: 'Placeholder',
+        error: 'Wrong Value',
+    },
+};
+
+export const Inline: Story = {
+    args: {
+        inline: true,
+        defaultValue: '',
+        label: 'Label',
+        placeholder: 'Placeholder',
+        error: '',
+    },
+};

package/src/Components/FormElements/Input/Input.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
-import {
-    ChangeEvent, ForwardedRef,
-    InputHTMLAttributes,
-    KeyboardEvent,
-    useCallback, useEffect,
-    useMemo, useRef,
-} from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Override } from '../../../TypeHelpers';
-import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-import styles from './input.scss';
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useComposedRef } from '@/Components/Hooks/useComposedRef';
+import { useDebounced } from '@/Components/Hooks/useDebounced';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { useOnChangeDone } from '@/Components/FormElements/hooks/useOnChangeDone';
+import { useSendFormContext } from '@/Components/FormElements/Controller/SendFormContext';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { useComposedRef } from '../../Hooks/useComposedRef';
-import { useOnChangeDone } from '../hooks/useOnChangeDone';
-import { useSendFormContext } from "../Controller/SendFormContext";
-import { useDebounced } from "../../Hooks/useDebounced";
-import { FormError } from "../FormError";
-import { withMemo } from "../../../helper/withMemo";
+import styles from '@/Components/FormElements/Input/input.module.scss';
+import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, KeyboardEvent } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -26,176 +22,181 @@ export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponen
             inline?: boolean;
             onChangeText?: (newText: string) => void;
             onEnter?: (newText: string) => void;
-            error?: string,
-            ref?: ForwardedRef<HTMLInputElement>
+            error?: string;
+            ref?: ForwardedRef<HTMLInputElement>;
         } & OptionalListener<'onChange', OnChangeData> &
-        OptionalListener<'onBlur', OnBlurData> &
-        OptionalListener<'onChangeDone', OnChangeDoneData>
+            OptionalListener<'onBlur', OnBlurData> &
+            OptionalListener<'onChangeDone', OnChangeDoneData>
     >
 >;
 
-export const Input = withMemo(function Input<OnChangeData, OnBlurData, OnChangeDoneData>(
-        {
-            label,
-            className,
-            style,
-            onKeyDown,
-            inline = false,
-            value,
-            error,
-            onChangeText,
-            onEnter,
-            ref,
-            ...otherProps
-        }: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>,
-    ) {
-        // Variables
-
-        // States
-        const usedValue = useMemo(() => {
-            if (otherProps.type !== "number" || typeof value === "number") {
+export const Input = withMemo(function Input<OnChangeData, OnBlurData, OnChangeDoneData>({
+    label,
+    className,
+    style,
+    onKeyDown,
+    inline = false,
+    value,
+    error,
+    onChangeText,
+    onEnter,
+    ref,
+    ...otherProps
+}: InputProps<OnChangeData, OnBlurData, OnChangeDoneData>) {
+    // Variables
+
+    // States
+    const usedValue = useMemo(() => {
+        if (otherProps.type !== 'number' || typeof value === 'number') {
+            return value;
+        }
+        if (typeof value === 'string') {
+            if (value === '-') {
                 return value;
             }
-            if (typeof value === "string") {
-                if (value === "-") {
-                    return value;
-                }
-
-                const numberValue = parseFloat(value);
-                if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
-                    if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
-                        return otherProps.max;
-                    }
-                    if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
-                        return otherProps.min;
-                    }
-                }
 
-                if (!Number.isNaN(Number(value))) {
-                    // Do not parse to allow ., and so on
-                    return value;
+            const numberValue = Number.parseFloat(value);
+            if (!Number.isNaN(numberValue) && Number.isFinite(numberValue)) {
+                if (otherProps.max !== undefined && numberValue > Number(otherProps.max)) {
+                    return otherProps.max;
                 }
-                if (!Number.isNaN(numberValue)) {
-                    return parseFloat(value);
+                if (otherProps.min !== undefined && numberValue < Number(otherProps.min)) {
+                    return otherProps.min;
                 }
             }
-            return "";
-        }, [value, otherProps.max, otherProps.min, otherProps.type]);
-        // Refs
-        const innerRef = useRef<HTMLInputElement>(null);
-        const refFunction = useComposedRef(ref, innerRef);
-
-        // Callbacks
-        const sendForm = useSendFormContext();
-        onEnter ??= sendForm;
-
-        const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
-            'onChange',
-            otherProps
-        );
-        const onChange = useCallback(
-            (e: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {
-                if (onChangeText) {
-                    if (otherProps.type === "number") {
-                        if (e.currentTarget.value === "-") {
-                            onChangeText(e.currentTarget.value);
-                            return;
-                        }
-
-                        const val = !Number.isNaN(Number(e.currentTarget.value)) ? e.currentTarget.value : !Number.isNaN(parseFloat(e.currentTarget.value)) ? String(parseFloat(e.currentTarget.value)) : "";
-                        onChangeText(val);
-                    } else {
+
+            if (!Number.isNaN(Number(value))) {
+                // Do not parse to allow ., and so on
+                return value;
+            }
+            if (!Number.isNaN(numberValue)) {
+                return Number.parseFloat(value);
+            }
+        }
+        return '';
+    }, [value, otherProps.max, otherProps.min, otherProps.type]);
+    // Refs
+    const innerRef = useRef<HTMLInputElement>(null);
+    const refFunction = useComposedRef(ref, innerRef);
+
+    // Callbacks
+    const sendForm = useSendFormContext();
+    onEnter ??= sendForm;
+
+    const [onChangeWithData, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
+        'onChange',
+        otherProps,
+    );
+    const onChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement>) => {
+            if (onChangeText) {
+                if (otherProps.type === 'number') {
+                    if (e.currentTarget.value === '-') {
                         onChangeText(e.currentTarget.value);
+                        return;
                     }
+
+                    const val = !Number.isNaN(Number(e.currentTarget.value))
+                        ? e.currentTarget.value
+                        : !Number.isNaN(Number.parseFloat(e.currentTarget.value))
+                          ? String(Number.parseFloat(e.currentTarget.value))
+                          : '';
+                    onChangeText(val);
+                } else {
+                    onChangeText(e.currentTarget.value);
                 }
-                onChangeWithData(e);
-            },
-            [onChangeWithData, onChangeText, otherProps.type]
-        );
-
-        const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps<'onBlur', OnBlurData>(
-            'onBlur',
-            otherPropsWithoutOnchange
-        );
-
-        const [onChangeDoneWithoutDeboune, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
-            'onChangeDone',
-            otherPropsWithoutBlur
-        );
-        const onChangeDone = useDebounced(onChangeDoneWithoutDeboune, [onChangeDoneWithoutDeboune]);
-
-
-        const realOnKeyDown = useCallback(
-            (e: KeyboardEvent<HTMLInputElement>) => {
-                onKeyDown?.(e);
-                if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
-                    if (otherProps.type === "number") {
-                        const stringValue = (e.target as HTMLInputElement).value;
-                        const val = !Number.isNaN(Number(stringValue)) ? stringValue : !Number.isNaN(parseFloat(stringValue)) ? String(parseFloat(stringValue)) : "";
-                        onEnter(val);
-                    } else {
-                        onEnter((e.target as HTMLInputElement).value);
-                    }
+            }
+            onChangeWithData(e);
+        },
+        [onChangeWithData, onChangeText, otherProps.type],
+    );
+
+    const [onBlur, otherPropsWithoutBlur] = useListenerWithExtractedProps<'onBlur', OnBlurData>(
+        'onBlur',
+        otherPropsWithoutOnchange,
+    );
+
+    const [onChangeDoneWithoutDeboune, otherPropsWithoutData] = useListenerWithExtractedProps<
+        'onChangeDone',
+        OnChangeDoneData
+    >('onChangeDone', otherPropsWithoutBlur);
+    const onChangeDone = useDebounced(onChangeDoneWithoutDeboune, [onChangeDoneWithoutDeboune]);
+
+    const realOnKeyDown = useCallback(
+        (e: KeyboardEvent<HTMLInputElement>) => {
+            onKeyDown?.(e);
+            if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
+                if (otherProps.type === 'number') {
+                    const stringValue = (e.target as HTMLInputElement).value;
+                    const val = !Number.isNaN(Number(stringValue))
+                        ? stringValue
+                        : !Number.isNaN(Number.parseFloat(stringValue))
+                          ? String(Number.parseFloat(stringValue))
+                          : '';
+                    onEnter(val);
+                } else {
+                    onEnter((e.target as HTMLInputElement).value);
                 }
+            }
 
-                if (otherProps.type === "number") {
-                    const step = otherProps.step ? Number(otherProps.step) : 1;
-                    if (e.key === "ArrowUp") {
-                        let newValue = (parseFloat(e.currentTarget.value) || 0) + step;
-                        if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
-                            newValue = Number(otherProps.max);
-                        }
-                        e.currentTarget.value = newValue.toString();
-                        onChange(e);
-                    } else if (e.key === "ArrowDown") {
-                        let newValue = (parseFloat(e.currentTarget.value) || 0) - step;
-                        if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
-                            newValue = Number(otherProps.min);
-                        }
-                        e.currentTarget.value = newValue.toString();
-                        onChange(e);
+            if (otherProps.type === 'number') {
+                const step = otherProps.step ? Number(otherProps.step) : 1;
+                if (e.key === 'ArrowUp') {
+                    let newValue = (Number.parseFloat(e.currentTarget.value) || 0) + step;
+                    if (otherProps.max !== undefined && newValue > Number(otherProps.max)) {
+                        newValue = Number(otherProps.max);
+                    }
+                    e.currentTarget.value = newValue.toString();
+                    onChange(e);
+                } else if (e.key === 'ArrowDown') {
+                    let newValue = (Number.parseFloat(e.currentTarget.value) || 0) - step;
+                    if (otherProps.min !== undefined && newValue < Number(otherProps.min)) {
+                        newValue = Number(otherProps.min);
                     }
+                    e.currentTarget.value = newValue.toString();
+                    onChange(e);
                 }
-            },
-            [onKeyDown, onEnter, otherProps.type, otherProps.step, otherProps.max, otherProps.min, onChange]
-        );
-
-        // Effects
-        useOnChangeDone(onChangeDone, innerRef);
-
-        useEffect(() => {
-            // Add the onChangeDone for numbers
-            if (otherProps.type === "number") {
-                const elem = innerRef.current;
-                elem?.addEventListener('blur', onChangeDone);
-                return () => {
-                    elem?.removeEventListener('blur', onChangeDone);
-                };
             }
-            return undefined;
-        }, [ref, onChangeDone, innerRef, otherProps.type]);
-
-
-        // Other
-
-        // Render Functions
-
-        return (
-            <label className={classNames(styles.input, {[styles.inline]: inline}, className)} style={style}>
-                {label ? <span className={styles.label}>{label}</span> : null}
-                <input
-                    inputMode={otherProps.type === "number" ? "numeric" : undefined}
-                    {...otherPropsWithoutData}
-                    value={usedValue}
-                    type={otherProps.type === "number" ? "text" : otherProps.type}
-                    ref={refFunction}
-                    className={styles.text}
-                    onBlur={onBlur}
-                    onChange={onChange}
-                    onKeyDown={realOnKeyDown}
-                />
-                <FormError error={error}/>
-            </label>
-        );
-    },
-    styles);
+        },
+        [onKeyDown, onEnter, otherProps.type, otherProps.step, otherProps.max, otherProps.min, onChange],
+    );
+
+    // Effects
+    useOnChangeDone(onChangeDone, innerRef);
+
+    useEffect(() => {
+        // Add the onChangeDone for numbers
+        if (otherProps.type === 'number') {
+            const elem = innerRef.current;
+            elem?.addEventListener('blur', onChangeDone);
+            return () => {
+                elem?.removeEventListener('blur', onChangeDone);
+            };
+        }
+        return undefined;
+    }, [ref, onChangeDone, innerRef, otherProps.type]);
+
+    // Other
+
+    // Render Functions
+
+    return (
+        // The label has an input-area-element. This is okay
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={classNames(styles.input, { [styles.inline]: inline }, className)} style={style}>
+            {label ? <span className={styles.label}>{label}</span> : null}
+            <input
+                inputMode={otherProps.type === 'number' ? 'numeric' : undefined}
+                {...otherPropsWithoutData}
+                value={usedValue}
+                type={otherProps.type === 'number' ? 'text' : otherProps.type}
+                ref={refFunction}
+                className={styles.text}
+                onBlur={onBlur}
+                onChange={onChange}
+                onKeyDown={realOnKeyDown}
+            />
+            <FormError error={error} />
+        </label>
+    );
+});

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.stories.tsx

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

package/src/Components/FormElements/Input/PasswordInput/PasswordInput.tsx

@@ -1,27 +1,32 @@
-import React, { ForwardedRef, useCallback, useState } from 'react';
-import { Input, InputProps } from '../Input';
-import { DistributiveOmit } from '../../../../helper/DistributiveOmit';
-import { Flex } from '../../../Layout/Flex';
-import { Grow } from '../../../Layout/Grow';
-import { Icon } from '../../../Icon/Icon';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Flex } from '@/Components/Layout/Flex';
+import { Grow } from '@/Components/Layout/Grow';
+import { Icon } from '@/Components/Icon/Icon';
+import { Input } from '@/Components/FormElements/Input/Input';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { Clickable } from '../../../Clickable/Clickable';
-import styles from './passwordInput.scss';
+import { withMemo } from '@/helper/withMemo';
+import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import { withMemo } from "../../../../helper/withMemo";
+import styles from '@/Components/FormElements/Input/PasswordInput/passwordInput.module.scss';
+import type { DistributiveOmit } from '@/helper/DistributiveOmit';
+import type { ForwardedRef } from 'react';
+import type { InputProps } from '@/Components/FormElements/Input/Input';
 
 export type PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData> = DistributiveOmit<
     InputProps<OnChangeData, OnBlurData, OnChangeEndData>,
-    'type'|"onChangeText"|"onEnter"
+    'type' | 'onChangeText' | 'onEnter'
 > & {
     onChangeText?: (newText: string) => void;
     onEnter?: (newText: string) => void;
-    ref?: ForwardedRef<HTMLInputElement>
+    ref?: ForwardedRef<HTMLInputElement>;
 };
 
-export const PasswordInput = withMemo(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>(
-    { className, style, ref,...props }: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>,
-) {
+export const PasswordInput = withMemo(function PasswordInput<OnChangeData, OnBlurData, OnChangeEndData>({
+    className,
+    style,
+    ref,
+    ...props
+}: PasswordInputProps<OnChangeData, OnBlurData, OnChangeEndData>) {
     // Variables
     const [isVisible, setIsVisible] = useState(false);
 
@@ -49,5 +54,4 @@ export const PasswordInput = withMemo(function PasswordInput<OnChangeData, OnBlu
             </Clickable>
         </Flex>
     );
-},
-styles);
+});

package/src/Components/FormElements/Input/input.module.scss

@@ -0,0 +1,95 @@
+@use "../../../scss/variables" as variables;
+@use "../../../scss/designMixin" as mixin;
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --input-inline-label-basis: 50%;
+  --input-text-background-color: transparent;
+  --hidden-input-text-border-bottom-color: transparent;
+  --hidden-input-no-focus-hint-border-bottom-color: transparent;
+}
+
+@include mixin.design(variables.$material) {
+  --input-text-color: var(--text-primary);
+  --input-background-image: linear-gradient(to top, transparent 1px, var(--border-light) 1px);
+  --input-focused-background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)), linear-gradient(to top, transparent 1px, var(--border-light) 1px);
+  --input-read-only-border-bottom-color: transparent;
+}
+
+@include mixin.design(variables.$flat) {
+  --input-text-color: var(--text-primary);
+  --input-border-bottom-color: var(--border-light);
+}
+
+.input {
+  width: 100%;
+
+  &.inline {
+    display: flex;
+
+    .label {
+      display: inline-block;
+      flex: 1 0 var(--input-inline-label-basis);
+      font-weight: normal;
+    }
+
+    .text {
+      // enough for 3 numbers, should maybe be in em
+      min-width: 41px;
+    }
+  }
+
+  .label {
+    display: block;
+    font-weight: bold;
+  }
+
+  .text {
+    width: 100%;
+    background-color: var(--input-text-background-color);
+    color: var(--input-text-color);
+    border: 0;
+    outline: none;
+    padding: 0;
+    font-size: 1rem;
+
+    @include mixin.design(variables.$material) {
+      background-image: var(--input-background-image);
+      background-size: 100% 2px;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+      padding-bottom: 2px;
+
+      &:read-only, &:read-only:focus {
+        background-image: none;
+        border-bottom: 1px solid var(--input-read-only-border-bottom-color);
+      }
+
+      &:focus {
+        background-image: var(--input-focused-background-image);
+      }
+    }
+
+    @include mixin.design(variables.$flat) {
+      &, &:focus {
+        border-bottom: 1px solid var(--input-border-bottom-color);
+      }
+    }
+  }
+
+  &.hiddenInput {
+    .text {
+      background-image: none;
+      border-bottom: 1px solid var(--hidden-input-text-border-bottom-color);
+    }
+
+    &.noFocusHint {
+      .text {
+        &:focus {
+          background-image: none;
+          border-bottom: 1px solid var(--hidden-input-no-focus-hint-border-bottom-color);
+        }
+      }
+    }
+  }
+}