@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

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

@@ -0,0 +1,49 @@
+import { SearchSelectInput } from '@/Components/FormElements/SearchSelectInput/SearchSelectInput';
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { SearchSelectInputProps } from '@/Components/FormElements/SearchSelectInput/SearchSelectInput';
+
+const meta = {
+    component: SearchSelectInput,
+} satisfies Meta<typeof SearchSelectInput>;
+
+export default meta;
+
+type Story = StoryObj<SearchSelectInputProps<any>>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        options: [
+            {
+                label: 'Pizza',
+                value: 'pizza',
+            },
+            {
+                label: 'Pommes',
+                value: 'pommes',
+            },
+            {
+                label: 'Döner',
+                value: 'doener',
+            },
+            {
+                label: 'Currywurst',
+                value: 'currywurst',
+            },
+            {
+                label: 'Spaghetti',
+                value: 'spaghetti',
+            },
+        ],
+        showSelectedOptions: false,
+        closeOnSelect: false,
+        enableSearch: true,
+        allowDeselect: true,
+    },
+    render: (args: SearchSelectInputProps<any>) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [value, setValue] = useState<string[]>([]);
+        return <SearchSelectInput {...args} values={value} onChangeValue={setValue} />;
+    },
+};

package/src/Components/FormElements/SearchSelectInput/SearchSelectInput.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { OptionalListener } from '../../Hooks/useListener';
-import { SelectOption } from '../Select/Select';
-import classNames from 'classnames';
-import { ChangeEventHandler, KeyboardEvent, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { ArrayHelper } from '@ainias42/js-helper';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { withMemo } from '../../../helper/withMemo';
-import { InlineBlock } from '../../Layout/InlineBlock';
-import { Text, TEXT_SIZE } from '../../Text/Text';
-import { Block } from '../../Layout/Block';
-
-import styles from './seachSelectInput.scss';
-import { Flex } from '../../Layout/Flex';
-import { Grow } from '../../Layout/Grow';
-import { Clickable } from '../../Clickable/Clickable';
-import { useWindow } from '../../../WindowContext/WindowContext';
+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 { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useWindow } from '@/WindowContext/WindowContext';
+import { withMemo } from '@/helper/withMemo';
+import classNames from 'classnames';
+import styles from '@/Components/FormElements/SearchSelectInput/seachSelectInput.module.scss';
+import type { ChangeEventHandler, KeyboardEvent, ReactNode } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { SelectOption } from '@/Components/FormElements/Select/Select';
 
 export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
     {
@@ -22,8 +22,13 @@ export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
         options: SelectOption[];
         onChangeValue?: (newValues: string[]) => void;
         values: string[];
-        renderSelectableOptions?: (option: SelectOption, isActive: boolean, index: number, activeIndex: number) => ReactNode,
-        renderSelectedOption?: (option: SelectOption) => ReactNode,
+        renderSelectableOptions?: (
+            option: SelectOption,
+            isActive: boolean,
+            index: number,
+            activeIndex: number,
+        ) => ReactNode;
+        renderSelectedOption?: (option: SelectOption) => ReactNode;
         showSelectedOptions?: boolean;
         closeOnSelect?: boolean;
         enableSearch?: boolean;
@@ -32,169 +37,176 @@ export type SearchSelectInputProps<OnChangeData> = RbmComponentProps<
 >;
 
 export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeData>({
-                                                                                       label,
-                                                                                       options,
-                                                                                       values,
-                                                                                       onChangeValue,
-                                                                                       className,
-                                                                                       renderSelectableOptions,
-                                                                                       renderSelectedOption,
-                                                                                       showSelectedOptions = false,
-                                                                                       closeOnSelect = false,
-                                                                                       enableSearch = true,
+    label,
+    options,
+    values,
+    onChangeValue,
+    className,
+    renderSelectableOptions,
+    renderSelectedOption,
+    showSelectedOptions = false,
+    closeOnSelect = false,
+    enableSearch = true,
     allowDeselect = true,
-                                                                                       style,
-                                                                                   }: SearchSelectInputProps<OnChangeData>) {
-        // Variables
-        const indexedOptions = useMemo(() => ArrayHelper.arrayToObject(options, (opt) => opt.value), [options]);
-
-        // Refs
-        const containerRef = useRef<HTMLLabelElement>(null);
-        const inputRef = useRef<HTMLInputElement>(null);
-        const window = useWindow();
-
-        // States
-        const [searchText, setSearchText] = useState('');
-        const [suggestionsPosition, setSuggestionsPosition] = useState<
-            { top: number; left: number; right: number } | undefined
-        >(undefined);
-
-        const [selectedIndex, setSelectedIndex] = useState(0);
-
-        const selectableOptions = useMemo(() => {
-            if (!suggestionsPosition) {
-                return [];
-            }
-            return options.filter(
-                (option) => (showSelectedOptions || !values.includes(option.value)) && (!enableSearch || option.label.toLowerCase().includes(searchText.toLowerCase()))
-            );
-        }, [suggestionsPosition, options, showSelectedOptions, values, enableSearch, searchText]);
-
-        // Selectors
-
-        // Callbacks
-        const updateSuggestionPosition = useCallback(() => {
-            if (!containerRef.current) {
-                return;
-            }
-            const {left, right, bottom: top} = containerRef.current.getBoundingClientRect();
-            setSuggestionsPosition({top, left, right: (window?.innerWidth ?? 0) - right});
-        }, [window?.innerWidth]);
-
-        const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
-            if (!enableSearch){
+    style,
+}: SearchSelectInputProps<OnChangeData>) {
+    // Variables
+    const indexedOptions = useMemo(() => ArrayHelper.arrayToObject(options, (opt) => opt.value), [options]);
+
+    // Refs
+    const containerRef = useRef<HTMLLabelElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const window = useWindow();
+
+    // States
+    const [searchText, setSearchText] = useState('');
+    const [suggestionsPosition, setSuggestionsPosition] = useState<
+        { top: number; left: number; right: number } | undefined
+    >(undefined);
+
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const selectableOptions = useMemo(() => {
+        if (!suggestionsPosition) {
+            return [];
+        }
+        return options.filter(
+            (option) =>
+                (showSelectedOptions || !values.includes(option.value)) &&
+                (!enableSearch || option.label.toLowerCase().includes(searchText.toLowerCase())),
+        );
+    }, [suggestionsPosition, options, showSelectedOptions, values, enableSearch, searchText]);
+
+    // Selectors
+
+    // Callbacks
+    const updateSuggestionPosition = useCallback(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        const { left, right, bottom: top } = containerRef.current.getBoundingClientRect();
+        setSuggestionsPosition({ top, left, right: (window?.innerWidth ?? 0) - right });
+    }, [window?.innerWidth]);
+
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (ev) => {
+            if (!enableSearch) {
                 return;
             }
             setSearchText(ev.target.value);
             setSelectedIndex(0);
-        }, [enableSearch]);
-        const onFocus = useCallback(() => updateSuggestionPosition(), [updateSuggestionPosition]);
-
-        const toggleOption = useCallback(
-            (_: any, value: string) => {
-                const newValues = [...values];
-                const index = values.indexOf(value);
-                if (index === -1) {
-                    newValues.push(value);
-                } else {
-                    newValues.splice(index, 1);
+        },
+        [enableSearch],
+    );
+    const onFocus = useCallback(() => updateSuggestionPosition(), [updateSuggestionPosition]);
+
+    const toggleOption = useCallback(
+        (_: any, value: string) => {
+            const newValues = [...values];
+            const index = values.indexOf(value);
+            if (index === -1) {
+                newValues.push(value);
+            } else {
+                newValues.splice(index, 1);
+            }
+            setSearchText('');
+            setSelectedIndex(0);
+            onChangeValue?.(newValues);
+            if (closeOnSelect && containerRef.current?.contains(document.activeElement)) {
+                inputRef.current?.focus();
+                requestAnimationFrame(() => {
+                    inputRef.current?.blur();
+                });
+            }
+        },
+        [closeOnSelect, onChangeValue, values],
+    );
+
+    const onKeyPress = useCallback(
+        (e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter' && !e.defaultPrevented) {
+                if (selectedIndex < selectableOptions.length) {
+                    toggleOption(undefined, selectableOptions[selectedIndex].value);
                 }
-                setSearchText('');
-                setSelectedIndex(0);
-                onChangeValue?.(newValues);
-                if (closeOnSelect) {
-                    if (containerRef.current?.contains(document.activeElement)) {
-                        inputRef.current?.focus();
-                        requestAnimationFrame(() => {
-                            inputRef.current?.blur();
-                        });
+            } else if (e.key === 'ArrowDown') {
+                setSelectedIndex((old) => {
+                    if (old + 1 >= selectableOptions.length) {
+                        return 0;
                     }
-                }
-            },
-            [closeOnSelect, onChangeValue, values]
-        );
-
-        const onKeyPress = useCallback(
-            (e: KeyboardEvent<HTMLInputElement>) => {
-                if (e.key === 'Enter' && !e.defaultPrevented) {
-                    if (selectedIndex < selectableOptions.length) {
-                        toggleOption(undefined, selectableOptions[selectedIndex].value);
+                    return old + 1;
+                });
+            } else if (e.key === 'ArrowUp') {
+                setSelectedIndex((old) => {
+                    if (old - 1 < 0) {
+                        return Math.max(selectableOptions.length - 1, 0);
                     }
-                } else if (e.key === 'ArrowDown') {
-                    setSelectedIndex((old) => {
-                        if (old + 1 >= selectableOptions.length) {
-                            return 0;
-                        }
-                        return old + 1;
-                    });
-                } else if (e.key === 'ArrowUp') {
-                    setSelectedIndex((old) => {
-                        if (old - 1 < 0) {
-                            return Math.max(selectableOptions.length - 1, 0);
-                        }
-                        return old - 1;
-                    });
-                }
-            },
-            [toggleOption, selectableOptions, selectedIndex]
-        );
+                    return old - 1;
+                });
+            }
+        },
+        [toggleOption, selectableOptions, selectedIndex],
+    );
 
-        // Effects
+    // Effects
 
-        // Other
+    // Other
 
-        // Render Functions
-        const renderOption = (value: string) => {
-            const option = indexedOptions[value];
-            if (!option) {
-                return null;
-            }
+    // Render Functions
+    const renderOption = (value: string) => {
+        const option = indexedOptions[value];
+        if (!option) {
+            return null;
+        }
 
-            const element = renderSelectedOption?.(option) ?? <InlineBlock className={styles.tag}>
+        const element = renderSelectedOption?.(option) ?? (
+            <InlineBlock className={styles.tag}>
                 <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value]?.label}</Text>
-            </InlineBlock>;
-
-            const onClickProps = allowDeselect ? {onClick: toggleOption, onClickData: value} : {};
-
-            return (
-                <Clickable {...onClickProps} key={option.key} __allowChildren="all">
-                    {element}
-                </Clickable>
-            );
-        };
-        const renderSelectableOption = (opt: SelectOption, index: number) => {
-            const isActive = index === selectedIndex;
-            const element = renderSelectableOptions?.(opt, isActive, index, selectedIndex) ?? (
-                <Block className={classNames(styles.selectableOption, {[styles.active]: index === selectedIndex})}>
-                    <Text>{opt.label}</Text>
-                </Block>);
-
-            return <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key} __allowChildren="all">
+            </InlineBlock>
+        );
+
+        const onClickProps = allowDeselect ? { onClick: toggleOption, onClickData: value } : {};
+
+        return (
+            <Clickable {...onClickProps} key={option.key} __allowChildren="all">
                 {element}
-            </Clickable>;
-        };
+            </Clickable>
+        );
+    };
+    const renderSelectableOption = (opt: SelectOption, index: number) => {
+        const isActive = index === selectedIndex;
+        const element = renderSelectableOptions?.(opt, isActive, index, selectedIndex) ?? (
+            <Block className={classNames(styles.selectableOption, { [styles.active]: index === selectedIndex })}>
+                <Text>{opt.label}</Text>
+            </Block>
+        );
 
         return (
-            // eslint-disable-next-line jsx-a11y/label-has-associated-control
-            <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
-                {label ? <span className={styles.label}>{label}</span> : null}
-                <Flex className={styles.inputContainer} horizontal={true}>
-                    <InlineBlock>{values.map(renderOption)}</InlineBlock>
-                    <Grow __allowChildren="html">
-                        <input
-                            ref={inputRef}
-                            className={classNames(styles.text, {[styles.disabled]: !enableSearch})}
-                            value={searchText}
-                            onChange={onChange}
-                            onKeyDown={onKeyPress}
-                            onFocus={onFocus}
-                        />
-                    </Grow>
-                </Flex>
-                <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
-                    {selectableOptions.map(renderSelectableOption)}
-                </InlineBlock>
-            </label>
+            <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key} __allowChildren="all">
+                {element}
+            </Clickable>
         );
-    },
-    styles);
+    };
+
+    return (
+        // eslint-disable-next-line jsx-a11y/label-has-associated-control
+        <label className={classNames(styles.input, className)} style={style} ref={containerRef}>
+            {label ? <span className={styles.label}>{label}</span> : null}
+            <Flex className={styles.inputContainer} horizontal={true}>
+                <InlineBlock>{values.map(renderOption)}</InlineBlock>
+                <Grow __allowChildren="html">
+                    <input
+                        ref={inputRef}
+                        className={classNames(styles.text, { [styles.disabled]: !enableSearch })}
+                        value={searchText}
+                        onChange={onChange}
+                        onKeyDown={onKeyPress}
+                        onFocus={onFocus}
+                    />
+                </Grow>
+            </Flex>
+            <InlineBlock className={styles.selectableOptionContainer} style={suggestionsPosition}>
+                {selectableOptions.map(renderSelectableOption)}
+            </InlineBlock>
+        </label>
+    );
+});

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.module.scss

@@ -0,0 +1,112 @@
+@use "../../../scss/variables" as variables;
+@use "../../../scss/designMixin" as mixin;
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --search-select-input-label-font-weight: bold;
+  --search-select-input-text-background-color: transparent;
+  --search-select-input-tag-text-color: var(--text-inverse);
+  --search-select-input-tag-background-color: var(--flavor-accent);
+  --search-select-input-option-list-border-color: var(--border-light);
+  --search-select-input-active-option-text-color: var(--text-inverse);
+  --search-select-input-active-option-background-color: var(--flavor-accent);
+}
+
+@include mixin.design(variables.$material) {
+  --search-select-input-background-image: linear-gradient(to top, transparent 1px, var(--border-light) 1px);
+  --search-select-input-focused-background-image: linear-gradient(var(--flavor-accent), var(--flavor-accent)), linear-gradient(to top, transparent 1px, var(--border-light) 1px);
+  --search-select-input-text-color: var(--text-primary);
+}
+
+@include mixin.design(variables.$flat) {
+  --search-select-input-border-bottom-color: var(--border-light);
+  --search-select-input-text-color: var(--text-primary);
+}
+
+.input {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  padding-bottom: 0.1rem;
+
+  &:focus-within {
+    .selectableOptionContainer {
+      display: inherit;
+    }
+  }
+
+  @include mixin.design(variables.$material) {
+    background-image: var(--search-select-input-background-image);
+    background-size: 100% 2px;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+    padding-bottom: 2px;
+
+    &:focus {
+      background-image: var(--search-select-input-focused-background-image);
+    }
+  }
+
+  @include mixin.design(variables.$flat) {
+    &, &:focus {
+      border-bottom: 1px solid var(--search-select-input-border-bottom-color);
+    }
+  }
+
+  .label {
+    display: block;
+    font-weight: var(--search-select-input-label-font-weight);
+  }
+
+  .text {
+    width: 100%;
+    background-color: var(--search-select-input-text-background-color);
+    border: 0;
+    outline: none;
+    padding: 0;
+    background-image: none;
+    color: var(--search-select-input-text-color);
+
+    &.disabled {
+      caret-color: transparent;
+      cursor: pointer;
+    }
+  }
+}
+
+.inputContainer {
+  display: flex;
+
+}
+
+.tag {
+  --text-primary-default-color: var(--search-select-input-tag-text-color);
+
+  color: var(--search-select-input-tag-text-color);
+  background-color: var(--search-select-input-tag-background-color);
+  padding: 0.1rem 0.2rem;
+  margin-right: 0.1rem;
+  margin-bottom: 0.1rem;
+  border-radius: 4px;
+}
+
+.selectableOptionContainer {
+  display: none;
+  position: fixed;
+  background-color: white;
+  z-index: 1100;
+  border: 1px solid var(--search-select-input-option-list-border-color);
+
+  .selectableOption {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    cursor: pointer;
+
+    &.active {
+      --text-primary-default-color: var(--search-select-input-active-option-text-color);
+
+      color: var(--search-select-input-active-option-text-color);
+      background-color: var(--search-select-input-active-option-background-color);
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Select } from '@/Components/FormElements/Select/Select';
+
+const meta = {
+    component: Select,
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+            { value: 'option3', label: 'Option 3' },
+        ],
+        label: 'Select an option',
+        error: '',
+        inline: false,
+        small: false,
+    },
+};
+
+export const Error: Story = {
+    args: {
+        options: [
+            {
+                value: 'option1',
+                label: 'Option 1',
+            },
+            {
+                value: 'option2',
+                label: 'Option 2',
+            },
+            {
+                value: 'option3',
+                label: 'Option 3',
+            },
+        ],
+
+        label: 'Select an option',
+        error: 'Wrong Value',
+        inline: false,
+        small: false,
+    },
+};