@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

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

@@ -1,23 +1,24 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../../RbmComponentProps';
-import { Override } from '../../../../TypeHelpers';
-import { ChangeEventHandler, DragEvent, InputHTMLAttributes, useCallback, useRef } from 'react';
-import { Listener, useListenerWithExtractedProps } from '../../../Hooks/useListener';
-import styles from './fileInput.scss';
-import { withMemo } from '../../../../helper/withMemo';
-import classNames from 'classnames';
-import { Block } from '../../../Layout/Block';
-import { Text } from '../../../Text/Text';
-import { Flex } from '../../../Layout/Flex';
-import { Grow } from '../../../Layout/Grow';
-import { Icon } from '../../../Icon/Icon';
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Flex } from '@/Components/Layout/Flex';
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { Grow } from '@/Components/Layout/Grow';
+import { Icon } from '@/Components/Icon/Icon';
+import { Image } from '@/Components/Image/Image';
+import { Inline } from '@/Components/Layout/Inline';
+import { Text } from '@/Components/Text/Text';
 import { faFile, faPlus, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-import { Image } from '../../../Image/Image';
-import { Clickable } from '../../../Clickable/Clickable';
-import { Inline } from '../../../Layout/Inline';
-import { FileType } from "./FileType";
-import { FormError } from "../../FormError";
-
+import { useCallback, useRef } from 'react';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
+import classNames from 'classnames';
+import styles from '@/Components/FormElements/Input/FileInput/fileInput.module.scss';
+import type { ChangeEventHandler, DragEvent, InputHTMLAttributes } from 'react';
+import type { FileType } from '@/Components/FormElements/Input/FileInput/FileType';
+import type { Listener } from '@/Components/Hooks/useListener';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
     Override<
@@ -29,264 +30,266 @@ export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
             maxFiles?: number;
             maxSizePerFile?: number;
             onError?: (error: string) => void;
-            allowOverride?: boolean
-            showDeleteButton?: boolean
-            error?: string,
-            "data-test-id"?: string;
+            allowOverride?: boolean;
+            showDeleteButton?: boolean;
+            error?: string;
+            'data-test-id'?: string;
         } & Listener<'onChangeFiles', OnChangeFilesData, FileType[]>
     >
 >;
 
 export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeData>({
-                                                                                        className,
-                                                                                        style,
-                                                                                        value,
-                                                                                        label,
-                                                                                        mimeTypes = ['image/*'],
-                                                                                        maxFiles = 1,
-                                                                                        maxSizePerFile = 1024 * 1024 * 10,
-                                                                                        allowOverride = maxFiles === 1,
-                                                                                        onError,
-                                                                                        showDeleteButton = true,
-                                                                                        error,
-                                                                                        "data-test-id": testId,
-                                                                                        ...otherProps
-                                                                                    }: MultipleFileInputProps<OnChangeData>) {
-        // Variables
+    className,
+    style,
+    value,
+    label,
+    mimeTypes = ['image/*'],
+    maxFiles = 1,
+    maxSizePerFile = 1024 * 1024 * 10,
+    allowOverride = maxFiles === 1,
+    onError,
+    showDeleteButton = true,
+    error,
+    'data-test-id': testId,
+    ...otherProps
+}: MultipleFileInputProps<OnChangeData>) {
+    // Variables
 
-        // Refs
-        const inputRef = useRef<HTMLInputElement>(null);
-        const indexRef = useRef<number | undefined>(undefined);
+    // Refs
+    const inputRef = useRef<HTMLInputElement>(null);
+    const indexRef = useRef<number | undefined>(undefined);
 
-        // States
+    // States
 
-        // Selectors
+    // Selectors
 
-        // Callbacks
+    // Callbacks
 
-        const checkMimeType = useCallback(
-            (fileType: string) => {
-                return mimeTypes.some((type) => {
-                    if (type === '*/*' || type === '*') {
-                        return true;
-                    }
-                    if (type.endsWith('/*')) {
-                        return fileType.startsWith(type.substring(0, type.length - 2));
-                    }
-                    return fileType === type;
-                });
-            },
-            [mimeTypes]
-        );
+    const checkMimeType = useCallback(
+        (fileType: string) => {
+            return mimeTypes.some((type) => {
+                if (type === '*/*' || type === '*') {
+                    return true;
+                }
+                if (type.endsWith('/*')) {
+                    return fileType.startsWith(type.slice(0, Math.max(0, type.length - 2)));
+                }
+                return fileType === type;
+            });
+        },
+        [mimeTypes],
+    );
 
-        const [onChangeFiles, props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
-        const getBase64 = useCallback((inputFiles: Blob[]) => {
-            const promises = inputFiles.map(
-                (file) =>
-                    new Promise<string>((resolve, reject) => {
-                        const reader = new FileReader();
-                        reader.onload = () => {
-                            resolve(reader.result as string);
-                        };
-                        reader.onerror = reject;
-                        reader.readAsDataURL(file);
-                    })
-            );
-            return Promise.all(promises);
-        }, []);
+    const [onChangeFiles, props] = useListenerWithExtractedProps('onChangeFiles', otherProps);
+    const getBase64 = useCallback((inputFiles: Blob[]) => {
+        const promises = inputFiles.map(
+            (file) =>
+                new Promise<string>((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.addEventListener('load', () => {
+                        resolve(reader.result as string);
+                    });
+                    reader.addEventListener('error', reject);
+                    reader.readAsDataURL(file);
+                }),
+        );
+        return Promise.all(promises);
+    }, []);
 
-        const onNewFiles = useCallback(
-            async (newFiles: File[], index?: number) => {
-                if (newFiles.some((file) => !checkMimeType(file.type))) {
-                    onError?.('Eine Datei ist im falschen Format');
-                    return;
-                }
+    const onNewFiles = useCallback(
+        async (newFiles: File[], index?: number) => {
+            if (newFiles.some((file) => !checkMimeType(file.type))) {
+                onError?.('Eine Datei ist im falschen Format');
+                return;
+            }
 
-                if (newFiles.length + value.length > maxFiles && (!allowOverride || index === undefined || index + newFiles.length > maxFiles)) {
-                    onError?.(`Es sind nur ${maxFiles} Dateien erlaubt.`);
-                    return;
-                }
+            if (
+                newFiles.length + value.length > maxFiles &&
+                (!allowOverride || index === undefined || index + newFiles.length > maxFiles)
+            ) {
+                onError?.(`Es sind nur ${maxFiles} Dateien erlaubt.`);
+                return;
+            }
 
-                if (maxSizePerFile && newFiles.some((file) => file.size > maxSizePerFile)) {
-                    onError?.(`Eine Datei ist zu groß. Jede Datei darf nur ${maxSizePerFile / 1024 / 1024}MB groß sein.`);
-                    return;
-                }
+            if (maxSizePerFile && newFiles.some((file) => file.size > maxSizePerFile)) {
+                onError?.(`Eine Datei ist zu groß. Jede Datei darf nur ${maxSizePerFile / 1024 / 1024}MB groß sein.`);
+                return;
+            }
 
-                const newUrls = await getBase64(newFiles);
-                const newValue = newFiles.map((file, fileIndex) => ({
-                    name: file.name,
-                    src: newUrls[fileIndex],
-                    type: file.type,
-                    blob: file,
-                }));
+            const newUrls = await getBase64(newFiles);
+            const newValue = newFiles.map((file, fileIndex) => ({
+                name: file.name,
+                src: newUrls[fileIndex],
+                type: file.type,
+                blob: file,
+            }));
 
-                if (newFiles.length + value.length > maxFiles && index !== undefined) {
-                    const onChangeFilesValue = [...value];
-                    onChangeFilesValue.splice(index, newFiles.length, ...newValue);
-                    onChangeFiles(onChangeFilesValue);
-                } else {
-                    onChangeFiles([...value, ...newValue]);
-                }
-            },
-            [allowOverride, checkMimeType, getBase64, maxFiles, maxSizePerFile, onChangeFiles, onError, value]
-        );
+            if (newFiles.length + value.length > maxFiles && index !== undefined) {
+                const onChangeFilesValue = [...value];
+                onChangeFilesValue.splice(index, newFiles.length, ...newValue);
+                onChangeFiles(onChangeFilesValue);
+            } else {
+                onChangeFiles([...value, ...newValue]);
+            }
+        },
+        [allowOverride, checkMimeType, getBase64, maxFiles, maxSizePerFile, onChangeFiles, onError, value],
+    );
 
-        const onInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-            async (e) => {
-                const index = indexRef.current;
-                indexRef.current = undefined;
+    const onInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        async (e) => {
+            const index = indexRef.current;
+            indexRef.current = undefined;
 
-                if (!e.target.files || e.target.files.length === 0) {
-                    return;
-                }
+            if (!e.target.files || e.target.files.length === 0) {
+                return;
+            }
 
-                const newFiles = Array.from(e.target.files);
-                await onNewFiles(newFiles, index);
-            },
-            [onNewFiles]
-        );
+            const newFiles = [...e.target.files];
+            await onNewFiles(newFiles, index);
+        },
+        [onNewFiles],
+    );
 
-        const removeFile = useCallback(
-            (_: any, index: number) => {
-                if (index >= 0 && index < value.length) {
-                    const newData = [...value];
-                    newData.splice(index, 1);
-                    onChangeFiles(newData);
-                }
-            },
-            [onChangeFiles, value]
-        );
+    const removeFile = useCallback(
+        (_: any, index: number) => {
+            if (index >= 0 && index < value.length) {
+                const newData = [...value];
+                newData.splice(index, 1);
+                onChangeFiles(newData);
+            }
+        },
+        [onChangeFiles, value],
+    );
 
-        const onDrop = useCallback(
-            async (event: DragEvent, index: number) => {
-                event.preventDefault();
+    const onDrop = useCallback(
+        async (event: DragEvent, index: number) => {
+            event.preventDefault();
 
-                const files: File[] = [];
-                if (event.dataTransfer.items) {
-                    for (let i = 0; i < event.dataTransfer.items.length; i++) {
-                        if (event.dataTransfer.items[i].kind === 'file') {
-                            const file = event.dataTransfer.items[i].getAsFile();
-                            if (file) {
-                                files.push(file);
-                            }
+            const files: File[] = [];
+            if (event.dataTransfer.items) {
+                for (let i = 0; i < event.dataTransfer.items.length; i++) {
+                    if (event.dataTransfer.items[i].kind === 'file') {
+                        const file = event.dataTransfer.items[i].getAsFile();
+                        if (file) {
+                            files.push(file);
                         }
                     }
-                } else {
-                    for (let i = 0; i < event.dataTransfer.files.length; i++) {
-                        files.push(event.dataTransfer.files[i]);
-                    }
                 }
+            } else {
+                for (let i = 0; i < event.dataTransfer.files.length; i++) {
+                    files.push(event.dataTransfer.files[i]);
+                }
+            }
 
-                await onNewFiles(files, index);
-            },
-            [onNewFiles]
-        );
+            await onNewFiles(files, index);
+        },
+        [onNewFiles],
+    );
 
-        const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);
+    const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), []);
 
-        const clickOnFile = useCallback((_: any, index?: number) => {
+    const clickOnFile = useCallback(
+        (_: any, index?: number) => {
             if ((index !== undefined && !allowOverride) || !inputRef.current) {
                 return;
             }
 
             indexRef.current = index;
-            inputRef.current.dispatchEvent(new MouseEvent("click"));
-        }, [allowOverride]);
+            inputRef.current.dispatchEvent(new MouseEvent('click'));
+        },
+        [allowOverride],
+    );
 
-        // Effects
+    // Effects
 
-        // Other
+    // Other
 
-        // Render Functions
-        const renderFile = (file: FileType) => {
-            if (file.type.startsWith('image/')) {
-                return (
-                    <Image
-                        key={file.src}
-                        src={file.src}
-                        alt={file.name}
-                        className={classNames(styles.previewImage)}
-                    />
-                );
-            }
-            // TODO style
-            return (
-                <Block className={styles.previewText}>
-                    <Icon icon={faFile} className={styles.previewTextIcon}/><Text>{file.name}</Text>
-                </Block>
-            );
-        };
-
-        if (error){
-            console.log("LOG-d error inside MultipleFileInput:", error);
+    // Render Functions
+    const renderFile = (file: FileType) => {
+        if (file.type.startsWith('image/')) {
+            return <Image key={file.src} src={file.src} alt={file.name} className={classNames(styles.previewImage)} />;
         }
 
         return (
-            <span
-                className={classNames(styles.fileInput, className)}
-                style={style}
-                data-test-id={testId}
-            >
-                <Flex horizontal={true}>
-                    {!!label && (
-                        <Grow>
-                            <Text>{label}</Text>
-                        </Grow>
-                    )}
-                    {maxFiles > 1 && (
-                        <Inline>
-                            <Text>
-                                {value.length}/{maxFiles}
-                            </Text>
-                        </Inline>
-                    )}
-                </Flex>
-                <Flex horizontal={true} className={styles.previewContainer}>
-                    {value?.map((file, index) => {
-                        return <Grow className={styles.preview} center={true} key={file.src}>
+            <Block className={styles.previewText}>
+                <Icon icon={faFile} className={styles.previewTextIcon} />
+                <Text>{file.name}</Text>
+            </Block>
+        );
+    };
+
+    if (error) {
+        console.log('Error inside MultipleFileInput:', error);
+    }
+
+    return (
+        <span className={classNames(styles.fileInput, className)} style={style} data-test-id={testId}>
+            <Flex horizontal={true}>
+                {!!label && (
+                    <Grow>
+                        <Text>{label}</Text>
+                    </Grow>
+                )}
+                {maxFiles > 1 && (
+                    <Inline>
+                        <Text>
+                            {value.length}/{maxFiles}
+                        </Text>
+                    </Inline>
+                )}
+            </Flex>
+            <Flex horizontal={true} className={styles.previewContainer}>
+                {value?.map((file, index) => {
+                    return (
+                        <Grow className={styles.preview} center={true} key={file.src}>
                             <Clickable
                                 onDrop={onDrop}
                                 onDragOver={onDragOver}
                                 onDropData={index}
-
                                 onClick={clickOnFile}
                                 onClickData={index}
                             >
                                 {renderFile(file)}
-                                {showDeleteButton &&
-                                    <Clickable className={styles.previewRemove} onClick={removeFile}
-                                               onClickData={index}>
-                                        <Icon icon={faTimesCircle}/>
-                                    </Clickable>}
+                                {showDeleteButton && (
+                                    <Clickable
+                                        className={styles.previewRemove}
+                                        onClick={removeFile}
+                                        onClickData={index}
+                                    >
+                                        <Icon icon={faTimesCircle} />
+                                    </Clickable>
+                                )}
                             </Clickable>
-                        </Grow>;
-                    })}
-                    <Grow className={classNames(styles.addFile, {[styles.hidden]: value.length >= maxFiles})}
-                          center={true}>
-                        <Clickable
-                            className={styles.addFileButton}
-                            onDrop={onDrop}
-                            onDragOver={onDragOver}
-                            onDropData={maxFiles}
-                            onClick={clickOnFile}
-                            __allowChildren="html"
-                        >
-                            <Icon icon={faPlus}/>
-                            <input
-                                {...props}
-                                ref={inputRef}
-                                className={styles.value}
-                                onChange={onInputChange}
-                                value=''
-                                type="file"
-                                multiple={maxFiles > 1}
-                                accept={mimeTypes.join(', ')}
-                            />
-                        </Clickable>
-                    </Grow>
-                </Flex>
-                <FormError error={error}/>
-            </span>
-        );
-    },
-    styles);
+                        </Grow>
+                    );
+                })}
+                <Grow
+                    className={classNames(styles.addFile, { [styles.hidden]: value.length >= maxFiles })}
+                    center={true}
+                >
+                    <Clickable
+                        className={styles.addFileButton}
+                        onDrop={onDrop}
+                        onDragOver={onDragOver}
+                        onDropData={maxFiles}
+                        onClick={clickOnFile}
+                        __allowChildren="html"
+                    >
+                        <Icon icon={faPlus} />
+                        <input
+                            {...props}
+                            ref={inputRef}
+                            className={styles.value}
+                            onChange={onInputChange}
+                            value=""
+                            type="file"
+                            multiple={maxFiles > 1}
+                            accept={mimeTypes.join(', ')}
+                        />
+                    </Clickable>
+                </Grow>
+            </Flex>
+            <FormError error={error} />
+        </span>
+    );
+});

package/src/Components/FormElements/Input/FileInput/{fileInput.scss → fileInput.module.scss}

@@ -1,3 +1,10 @@
+@use "../../../../scss/vars" as *;
+
+@include vars {
+  --file-input-preview-border-color: var(--border-light);
+  --file-input-svg-background: rgb(255 255 255 / 20%);
+}
+
 .fileInput {
   display: flex;
   flex-direction: column;
@@ -10,7 +17,7 @@
 
     .preview {
       position: relative;
-      border: 1px solid var(--border-light);
+      border: 1px solid var(--file-input-preview-border-color);
 
       .previewRemove {
         position: absolute;
@@ -20,7 +27,7 @@
         font-size: 1.5rem;
 
         svg {
-          background: rgba(255, 255, 255, 0.2);
+          background: var(--file-input-svg-background);
         }
       }
 
@@ -39,7 +46,6 @@
       width: 100%;
       height: 100%;
       min-height: 4rem;
-
       display: flex;
       justify-content: center;
       align-items: center;
@@ -53,8 +59,7 @@
     .addFile {
       position: relative;
       border-radius: 3px;
-      background-color: var(--border-light);
-
+      background-color: var(--file-input-preview-border-color);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -64,7 +69,6 @@
         width: 100%;
         height: 100%;
         min-height: 4rem;
-
         display: flex;
         justify-content: center;
         align-items: center;
@@ -76,13 +80,7 @@
     }
   }
 
-
   .value {
     display: none;
   }
-
-  .error {
-    font-size: 0.7rem;
-    --text-primary-default-color: var(--text-error)
-  }
 }

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

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