@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

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

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Override } from '../../../TypeHelpers';
-import { ChangeEventHandler, SelectHTMLAttributes, useCallback } from 'react';
-import {OptionalListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
+import { useCallback } from 'react';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import type { ChangeEventHandler, SelectHTMLAttributes } from 'react';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
-import styles from './select.scss';
-import { withMemo } from '../../../helper/withMemo';
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { InlineBlock } from "../../Layout/InlineBlock";
-import { Text } from "../../Text/Text";
+import styles from '@/Components/FormElements/Select/select.module.scss';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
 
-export type SelectOption<ValueType=string> = {
+export type SelectOption<ValueType = string> = {
     label: string;
     value: ValueType;
     key?: string;
@@ -24,15 +25,19 @@ export type SelectProps<OnChangeData> = RbmComponentProps<
             inline?: boolean;
             small?: boolean;
             error?: string;
-        } & ({
-            options: SelectOption[];
-            onChangeValue?: (newValue: string) => void;
-            useNumericValues?: false;
-    }|{
-            options: SelectOption<number>[];
-        onChangeValue?: (newValue: number) => void;
-        useNumericValues: true;
-    })& OptionalListener<'onChange', OnChangeData>
+        } & (
+            | {
+                  options: SelectOption[];
+                  onChangeValue?: (newValue: string) => void;
+                  useNumericValues?: false;
+              }
+            | {
+                  options: SelectOption<number>[];
+                  onChangeValue?: (newValue: number) => void;
+                  useNumericValues: true;
+              }
+        ) &
+            OptionalListener<'onChange', OnChangeData>
     >
 >;
 
@@ -57,7 +62,10 @@ export const Select = withMemo(function Select<OnChangeData>({
     // Selectors
 
     // Callbacks
-    const [onChangeWithData, propsWithoutData] = useListenerWithExtractedProps<'onChange', OnChangeData>('onChange', otherProps);
+    const [onChangeWithData, propsWithoutData] = useListenerWithExtractedProps<'onChange', OnChangeData>(
+        'onChange',
+        otherProps,
+    );
     const onChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(
         (e) => {
             if (useNumericValues) {
@@ -67,7 +75,7 @@ export const Select = withMemo(function Select<OnChangeData>({
             }
             onChangeWithData(e);
         },
-        [onChangeWithData, onChangeValue, useNumericValues]
+        [onChangeWithData, onChangeValue, useNumericValues],
     );
 
     // Effects
@@ -78,7 +86,10 @@ export const Select = withMemo(function Select<OnChangeData>({
 
     return (
         // eslint-disable-next-line jsx-a11y/label-has-associated-control
-        <label className={classNames(styles.select, { [styles.inline]: inline, [styles.small]: small }, className)} style={style}>
+        <label
+            className={classNames(styles.select, { [styles.inline]: inline, [styles.small]: small }, className)}
+            style={style}
+        >
             {label ? <span className={styles.label}>{label}</span> : null}
             <select {...propsWithoutData} className={styles.input} onChange={onChange}>
                 {options.map((option) => (
@@ -87,8 +98,7 @@ export const Select = withMemo(function Select<OnChangeData>({
                     </option>
                 ))}
             </select>
-            {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
+            <FormError error={error} />
         </label>
     );
-},
-styles);
+});

package/src/Components/FormElements/Select/select.module.scss

@@ -0,0 +1,63 @@
+@use "../../../scss/variables" as variables;
+@use "../../../scss/designMixin" as mixin;
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --select-background-color: transparent;
+  --select-text-color: var(--text-primary);
+  --select-background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI1cHgiIHZpZXdCb3g9IjAgMCAxMCA1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0My4yICgzOTA2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+c2VsZWN0LWFsbG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9InNlbGVjdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Imlvcy1zZWxlY3QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTguMDAwMDAwLCAtMTE0LjAwMDAwMCkiIGZpbGw9IiM3NTc1NzUiPgogICAgICAgICAgICA8ZyBpZD0ibWVudS1iYXItKy1vcGVuLW1lbnUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMy4wMDAwMDAsIDEwMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJtZW51LWJhciI+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InNlbGVjdC1hbGxvdyIgcG9pbnRzPSI3NSAxNCA4MCAxOSA4NSAxNCI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=')
+}
+
+.select {
+  width: 100%;
+
+  .label {
+    font-weight: bold;
+    display: block;
+  }
+
+  .input {
+    outline: none;
+    background-color: var(--select-background-color);
+    height: 2rem;
+    line-height: 2rem;
+    color: var(--select-text-color);
+    appearance: none;
+    border: none;
+    border-radius: 0;
+    padding: 0 20px 0 0;
+    background-image: var(--select-background-image);
+    background-repeat: no-repeat;
+
+    &:focus {
+      outline: none;
+    }
+
+    @include mixin.design(variables.$material) {
+      -webkit-font-smoothing: antialiased;
+      font-size: 15px;
+      background-size: auto, 100% 1px;
+      background-position: right center, left bottom;
+    }
+
+    @include mixin.design(variables.$flat) {
+      font-size: 17px;
+      background-position: right center;
+    }
+  }
+
+  &.inline {
+    display: flex;
+    align-items: center;
+
+    .label {
+      padding-right: 4px;
+      flex: 1;
+    }
+  }
+
+  &.small .input {
+    height: initial;
+    line-height: 1.5rem;
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Slider } from '@/Components/FormElements/Slider/Slider';
+
+const meta = {
+    component: Slider,
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

package/src/Components/FormElements/Slider/Slider.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { withMemo } from '../../../helper/withMemo';
-import { ChangeEventHandler, InputHTMLAttributes, MutableRefObject, useCallback } from 'react';
-
-import styles from './slider.scss';
+import { useCallback } from 'react';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { useOnChangeDone } from '@/Components/FormElements/hooks/useOnChangeDone';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { Override } from '../../../TypeHelpers';
-import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-import { useOnChangeDone } from '../hooks/useOnChangeDone';
+import styles from '@/Components/FormElements/Slider/slider.module.scss';
+import type { ChangeEventHandler, InputHTMLAttributes, MutableRefObject } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type SliderProps<OnChangeData, OnChangeValueData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -38,7 +39,7 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
     // Callbacks
     const [onChange, otherPropsWithoutOnchange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
         'onChange',
-        props
+        props,
     );
 
     const [onChangeValue, otherPropsWithoutOnChangeValue] = useListenerWithExtractedProps<
@@ -48,7 +49,7 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
 
     const [onChangeDone, otherPropsWithoutData] = useListenerWithExtractedProps<'onChangeDone', OnChangeDoneData>(
         'onChangeDone',
-        otherPropsWithoutOnChangeValue
+        otherPropsWithoutOnChangeValue,
     );
 
     const innerOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -56,25 +57,34 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
             onChangeValue(Number(e.target.value));
             onChange(e);
         },
-        [onChange, onChangeValue]
+        [onChange, onChangeValue],
     );
 
-    const checkStopPropagation = useCallback((ev: React.MouseEvent) => {
-        if (stopPropagation) {
-            ev.stopPropagation();
-        }
-    }, [stopPropagation]);
+    const checkStopPropagation = useCallback(
+        (ev: React.MouseEvent) => {
+            if (stopPropagation) {
+                ev.stopPropagation();
+            }
+        },
+        [stopPropagation],
+    );
 
     // Effects
-    const innerRef = useOnChangeDone(onChangeDone) as MutableRefObject<HTMLInputElement|null>;
+    const innerRef = useOnChangeDone(onChangeDone) as MutableRefObject<HTMLInputElement | null>;
 
     // 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.slider, className)} style={style} onClick={checkStopPropagation}>
+        <label
+            role="none"
+            className={classNames(styles.slider, className)}
+            style={style}
+            onClick={checkStopPropagation}
+        >
             <input
                 type="range"
                 {...otherPropsWithoutData}
@@ -84,5 +94,4 @@ export const Slider = withMemo(function Slider<OnChangeData, OnChangeValueData,
             />
         </label>
     );
-},
-styles);
+});

package/src/Components/FormElements/Slider/slider.module.scss

@@ -0,0 +1,93 @@
+@use "../../../scss/vars" as *;
+
+$thumbHeight: 16;
+$thumbWidth: 16;
+$trackHeight: calc($thumbHeight / 4);
+$maxScreenSize: 10000;
+
+@include vars {
+  --slider-thumb-height: #{$thumbHeight}px;
+  --slider-thumb-width: #{$thumbWidth}px;
+  --slider-track-height: calc(var(--slider-thumb-height) / 4);
+  --slider-track-color: var(--border-light);
+  --slider-active-track-color: var(--flavor-accent);
+  --slider-thumb-color: var(--flavor-accent);
+}
+
+.slider {
+  width: 100%;
+
+  .input {
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    appearance: none;
+    width: 100%;
+    background: transparent;
+    transition: all ease 100ms;
+    height: var(--slider-thumb-height);
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    @mixin track {
+      appearance: none;
+      transition: all ease 100ms;
+      height: var(--slider-thumb-height);
+      position: relative;
+      width: 100%;
+      border-radius: var(--slider-track-height);
+      background: linear-gradient(var(--slider-track-color) 0 0) scroll no-repeat center / 100% calc(var(--slider-track-height) + 1px);
+    }
+
+    @mixin thumb {
+      appearance: none;
+      width: var(--slider-thumb-width);
+      transition: all ease 100ms;
+      height: var(--slider-thumb-height);
+      background: var(--slider-thumb-color);
+      position: relative;
+      border: 0;
+      border-radius: var(--slider-thumb-width);
+    }
+
+    &::-webkit-slider-runnable-track {
+      @include track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include thumb;
+
+      box-shadow: calc(-100vmax - (var(--slider-thumb-width, var(--slider-thumb-height)) / 2)) 0 0 100vmax var(--slider-active-track-color);
+
+      $clipTop: calc(($thumbHeight - $trackHeight) / 2);
+      $clipBottom: $thumbHeight - $clipTop;
+
+      clip-path: path("M 0, #{0.5 * $thumbHeight} \
+      a #{0.5 * $thumbWidth} #{0.5 * $thumbHeight}, 0 1 0, #{$thumbWidth} 0 \
+      a #{0.5 * $thumbWidth} #{0.5 * $thumbHeight}, 0 1 0, #{-1 * $thumbWidth} 0 \
+      L  #{0.5 * $thumbWidth} #{$clipTop} \
+      L  #{-1 * $maxScreenSize} #{$clipTop} \
+      L  #{-1 * $maxScreenSize} #{$clipBottom} \
+      L  #{0.5 * $thumbWidth} #{$clipBottom} \
+      z");
+    }
+
+    &::-moz-range-thumb {
+      @include thumb;
+    }
+
+    &::-moz-range-track {
+      @include track;
+    }
+
+    &::-moz-range-progress {
+      appearance: none;
+      background: var(--slider-active-track-color);
+      transition-delay: 30ms;
+      height: var(--slider-track-height);
+      border-radius: var(--slider-track-height);
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Switch } from '@/Components/FormElements/Switch/Switch';
+import React from 'react';
+
+const meta = {
+    component: Switch,
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        preLabel: '',
+        isLabelBeforeSwitch: false,
+        isDual: false,
+        error: '',
+    },
+};
+
+export const Error: Story = {
+    args: {
+        label: 'Label',
+        preLabel: '',
+        isLabelBeforeSwitch: false,
+        isDual: false,
+        error: 'Wrong Value',
+    },
+};
+
+export const LabelBefore: Story = {
+    args: {
+        label: 'Label',
+        preLabel: '',
+        isLabelBeforeSwitch: true,
+        isDual: false,
+        error: '',
+    },
+};
+
+export const DualLabel: Story = {
+    args: {
+        label: 'Label',
+        preLabel: 'Pre Label',
+        isLabelBeforeSwitch: false,
+        isDual: false,
+        error: '',
+    },
+    render: (args) => (
+        <>
+            <div>
+                <Switch {...args} checked={false} />
+            </div>
+            <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
+                <Switch {...args} checked={true} />
+            </div>
+            <div>
+                <Switch {...args} isDual={true} />
+            </div>
+        </>
+    ),
+};

package/src/Components/FormElements/Switch/Switch.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { ChangeEventHandler, InputHTMLAttributes, MouseEvent, useCallback } from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { Override } from '../../../TypeHelpers';
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { useCallback } from 'react';
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import styles from './switch.scss';
-import { withMemo } from '../../../helper/withMemo';
-import { OptionalListener, useListenerWithExtractedProps } from "../../Hooks/useListener";
-import { FormError } from "../FormError";
+import styles from '@/Components/FormElements/Switch/switch.module.scss';
+import type { ChangeEventHandler, InputHTMLAttributes, MouseEvent } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
     Override<
@@ -21,78 +23,85 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
             classNameLabel?: string;
             classNamePreLabel?: string;
             stopPropagation?: boolean;
-        } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>
+        } & OptionalListener<'onChangeChecked', OnChangeCheckedData, boolean>
     >
 >;
 
 export const Switch = withMemo(function Switch<OnChangeCheckedData>({
-                                                                        children,
-                                                                        label = '',
-                                                                        preLabel = '',
-                                                                        isLabelBeforeSwitch = false,
-                                                                        isDual = undefined,
-                                                                        stopPropagation = true,
-                                                                        id,
-                                                                        className,
-                                                                        classNamePreLabel,
-                                                                        classNameLabel,
-                                                                        style,
-                                                                        error,
-                                                                        onChange,
-                                                                        ...props
-                                                                    }: SwitchProps<OnChangeCheckedData>) {
-        // Variables
+    children,
+    label = '',
+    preLabel = '',
+    isLabelBeforeSwitch = false,
+    isDual = undefined,
+    stopPropagation = true,
+    id,
+    className,
+    classNamePreLabel,
+    classNameLabel,
+    style,
+    error,
+    onChange,
+    ...props
+}: SwitchProps<OnChangeCheckedData>) {
+    // Variables
 
-        // States
+    // States
 
-        // Refs
+    // Refs
 
-        // Callbacks
-        const [onChangeChecked, otherProps] = useListenerWithExtractedProps("onChangeChecked", props);
+    // Callbacks
+    const [onChangeChecked, otherProps] = useListenerWithExtractedProps('onChangeChecked', props);
 
-        const realOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-            (e) => {
-                onChange?.(e);
-                onChangeChecked(e.target.checked);
-            },
-            [onChange, onChangeChecked]
-        );
+    const realOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+        (e) => {
+            onChange?.(e);
+            onChangeChecked(e.target.checked);
+        },
+        [onChange, onChangeChecked],
+    );
 
-        const checkStopPropagation = useCallback((ev: MouseEvent) => {
+    const checkStopPropagation = useCallback(
+        (ev: MouseEvent) => {
             if (stopPropagation) {
                 ev.stopPropagation();
                 ev.nativeEvent.stopPropagation();
             }
-        }, [stopPropagation]);
+        },
+        [stopPropagation],
+    );
 
-        // Effects
+    // Effects
 
-        // Other
+    // Other
 
-        // Render Functions
+    // Render Functions
 
-        if (React.Children.count(children) === 1 && typeof children === 'string') {
-            label = children;
-        }
+    if (React.Children.count(children) === 1 && typeof children === 'string') {
+        label = children;
+    }
 
-        if (isLabelBeforeSwitch) {
-            [label, preLabel] = [preLabel, label];
-        }
+    if (isLabelBeforeSwitch) {
+        [label, preLabel] = [preLabel, label];
+    }
 
-        if (label && preLabel && isDual === undefined) {
-            isDual = true;
-        }
-        return (
-            <span className={classNames(styles.switch, {[styles.dual]: isDual}, className)} style={style} onClick={checkStopPropagation}>
-                <label htmlFor={id} key={id}>
-                    <span className={classNames(styles.label, classNamePreLabel)}>{preLabel}</span>
-                    <input {...otherProps} type="checkbox" id={id} onChange={realOnChange}/>
-                    <div className={styles.toggle}>
-                        <span className={styles.handle}/>
-                    </div>
-                    <span className={classNames(styles.label, classNameLabel)}>{label}</span>
-                    <FormError error={error}/>
-                </label>
-            </span>);
-    },
-    styles);
+    if (label && preLabel && isDual === undefined) {
+        isDual = true;
+    }
+    return (
+        <span
+            className={classNames(styles.switch, { [styles.dual]: isDual }, className)}
+            style={style}
+            onClick={checkStopPropagation}
+        >
+            <label htmlFor={id} key={id}>
+                <span className={classNames(styles.label, classNamePreLabel)}>{preLabel}</span>
+                <input {...otherProps} type="checkbox" id={id} onChange={realOnChange} />
+                <div className={styles.toggle}>
+                    <span className={styles.handle} />
+                </div>
+                <span className={classNames(styles.label, classNameLabel)}>{label}</span>
+                <FormError error={error} />
+            </label>
+        </span>
+    );
+});