@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.2

package/src/Components/FormElements/Button/button.module.scss

@@ -0,0 +1,87 @@
+@use "../../../scss/variables" as variables;
+@use "../../../scss/designMixin" as mixin;
+@use "../../../scss/flavorMixin" as *;
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --button-primary-text-color: var(--text-inverse);
+  --button-disabled-opacity: var(--opacity-disabled);
+}
+
+@include mixin.design(variables.$material) {
+  --button-box-shadow-color: var(--box-shadow-color);
+}
+
+.button {
+  cursor: pointer;
+  margin: 0;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-decoration: none;
+  letter-spacing: 0;
+  vertical-align: middle;
+  border-radius: 3px;
+  transition: none;
+
+  @include flavorSelection(--button-background-color);
+
+  @include mixin.design(variables.$material) {
+    box-shadow: 0 2px 2px 0 var(--button-box-shadow-color),
+    0 1px 5px 0 var(--button-box-shadow-color),
+    0 3px 1px -2px var(--button-box-shadow-color);
+    min-height: 40px;
+    line-height: 40px;
+    padding: 0 16px;
+    text-align: center;
+    font-size: 14px;
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+
+  @include mixin.design(variables.$flat) {
+    line-height: 32px;
+    padding: 4px 18px;
+    font-size: 17px;
+  }
+
+  &.primary {
+    background-color: var(--button-background-color);
+    border: 0 solid currentcolor;
+    color: var(--button-primary-text-color);
+
+    --text-primary-default-color: var(--button-primary-text-color);
+  }
+
+  &.secondary {
+    background-color: transparent;
+    border: 1px solid var(--button-background-color);
+    color: var(--button-background-color);
+
+    --text-primary-default-color: var(--button-background-color);
+  }
+
+  &.disabled {
+    opacity: var(--button-disabled-opacity);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.small {
+    padding: 4px 8px;
+
+    @include mixin.design(variables.$material) {
+      min-height: 17px;
+      line-height: 17px;
+    }
+
+    @include mixin.design(variables.$flat) {
+      line-height: 17px;
+    }
+  }
+
+  &.fullWidth {
+    width: 100%;
+  }
+}

package/src/Components/FormElements/CheckBox/Checkbox.stories.tsx

@@ -0,0 +1,50 @@
+import { Checkbox } from '@/Components/FormElements/CheckBox/Checkbox';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: Checkbox,
+    argTypes: {},
+    args: {
+        checked: false,
+        label: 'Checkbox',
+        isLabelBeforeCheckbox: false,
+        error: '',
+    },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};
+
+export const Checked: Story = {
+    args: {
+        checked: true,
+        label: 'Checkbox',
+        isLabelBeforeCheckbox: false,
+        error: '',
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        checked: true,
+        label: 'Checkbox',
+        isLabelBeforeCheckbox: false,
+        error: 'Error',
+    },
+    render: (args) => (
+        <>
+            <div>
+                <Checkbox {...args} checked={false} />
+            </div>
+            <div>
+                <Checkbox {...args} checked={true} />
+            </div>
+        </>
+    ),
+};

package/src/Components/FormElements/CheckBox/Checkbox.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
-import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
-import styles from './checkbox.scss';
-import { withMemo } from '../../../helper/withMemo';
+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 { Override } from '@ainias42/js-helper';
-import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
-import { FormError } from "../FormError";
+import styles from '@/Components/FormElements/CheckBox/checkbox.module.scss';
+import type { ChangeEventHandler, InputHTMLAttributes } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
+import type { Override } from '@ainias42/js-helper';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps<
     Override<
@@ -21,7 +23,7 @@ export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps
     >
 >;
 
-function Checkbox<OnChangeData, OnChangeCheckedData>({
+export const Checkbox = withMemo(function Checkbox<OnChangeData, OnChangeCheckedData>({
     children,
     label = '',
     isLabelBeforeCheckbox = false,
@@ -40,7 +42,7 @@ function Checkbox<OnChangeData, OnChangeCheckedData>({
     // Callbacks
     const [onChange, otherPropsWithoutChange] = useListenerWithExtractedProps<'onChange', OnChangeData>(
         'onChange',
-        props
+        props,
     );
 
     const [onChangeChecked, otherPropsWithoutData] = useListenerWithExtractedProps<
@@ -53,7 +55,7 @@ function Checkbox<OnChangeData, OnChangeCheckedData>({
             onChangeChecked(e.target.checked);
             onChange(e);
         },
-        [onChange, onChangeChecked]
+        [onChange, onChangeChecked],
     );
 
     // Effects
@@ -87,7 +89,4 @@ function Checkbox<OnChangeData, OnChangeCheckedData>({
             </label>
         </span>
     );
-}
-
-const tmp = withMemo(Checkbox, styles);
-export { tmp as Checkbox };
+});

package/src/Components/FormElements/CheckBox/{checkbox.scss → checkbox.module.scss}

@@ -1,5 +1,20 @@
-@import "../../../scss/variables";
-@import "../../../scss/designMixin";
+@use "../../../scss/variables" as variables;
+@use "../../../scss/designMixin" as mixin;
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --checkbox-checkmark-color: var(--text-inverse);
+  --checkbox-checked-background-color: var(--flavor-accent);
+}
+
+@include mixin.design(variables.$material) {
+  --checkbox-box-radius-color: var(--border-strong);
+}
+
+@include mixin.design(variables.$flat) {
+  --checkbox-box-radius-color: var(--border-light);
+}
+
 
 .checkbox {
   position: relative;
@@ -37,27 +52,28 @@
       left: 0;
     }
 
-    @include design($material) {
+    @include mixin.design(variables.$material) {
       width: 18px;
       min-width: 18px;
       height: 18px;
       margin: 2px;
 
       &::before {
-        border: 2px solid var(--border-strong);
+        border: 2px solid var(--checkbox-box-radius-color);
         border-radius: 2px;
         transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
         background-color: transparent;
       }
     }
-    @include design($flat) {
+
+    @include mixin.design(variables.$flat) {
       width: 22px;
       min-width: 22px;
       height: 22px;
 
       &::before {
         background: transparent;
-        border: 1px solid var(--border-light);
+        border: 1px solid var(--checkbox-box-radius-color);
         border-radius: 22px;
       }
     }
@@ -72,20 +88,21 @@
         background: transparent;
         border-radius: 0;
         transform: rotate(-45deg);
-        border: 2px none #fff;
+        border: 2px none var(--checkbox-checkmark-color);
         border-bottom-style: solid;
         border-left-style: solid;
       }
 
       &::before {
-        background-color: var(--flavor-accent);
+        background-color: var(--checkbox-checked-background-color);
       }
 
-      @include design($material) {
+      @include mixin.design(variables.$material) {
         &::before {
-          border: 2px solid var(--flavor-accent);
+          border: 2px solid var(--checkbox-checked-background-color);
           transition: background-color 0.1s linear, border-color 0.1s linear;
         }
+
         &::after {
           transition: transform 0.2s ease 0.2s;
           top: 5px;
@@ -94,10 +111,12 @@
 
         }
       }
-      @include design($flat) {
+
+      @include mixin.design(variables.$flat) {
         &::before {
           border: none;
         }
+
         &::after {
           top: 7px;
           left: 5px;

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

@@ -0,0 +1,24 @@
+import { ColorInput } from '@/Components/FormElements/ColorInput/ColorInput';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: ColorInput,
+} satisfies Meta<typeof ColorInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        disableAlpha: false,
+    },
+};
+
+export const WithLabelAndError: Story = {
+    args: {
+        label: 'Select Color',
+        error: 'Wrong Color',
+        disableAlpha: false,
+    },
+};

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
-import { useCallback, useRef, useState, MouseEvent, useMemo } from 'react';
-import { ColorResult, Sketch } from '@uiw/react-color';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
-import { withMemo } from '../../../helper/withMemo';
-import styles from './colorInput.scss';
-import { useSharedSelectedColor } from './sharedSelectedColor';
-import { Menu } from "../../Menu/Menu";
-import { useClientLayoutEffect } from "../../Hooks/useClientLayoutEffect";
-import { FormError } from "../FormError";
-import classNames from "classnames";
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { Menu } from '@/Components/Menu/Menu';
+import { Sketch } from '@uiw/react-color';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
+import { useListener } from '@/Components/Hooks/useListener';
+import { useSharedSelectedColor } from '@/Components/FormElements/ColorInput/sharedSelectedColor';
+import { withMemo } from '@/helper/withMemo';
+import classNames from 'classnames';
+import styles from '@/Components/FormElements/ColorInput/colorInput.module.scss';
+import type { ColorResult } from '@uiw/react-color';
+import type { MouseEvent } from 'react';
+import type { OptionalListener } from '@/Components/Hooks/useListener';
 
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -20,26 +23,26 @@ export type ColorInputProps<OnChangeData> = {
     disableAlpha?: boolean;
     presetColors?: string[];
     sharedColorKey?: string;
-    disabled?: boolean
+    disabled?: boolean;
     error?: string;
     className?: string;
 } & OptionalListener<'onChange', OnChangeData, ColorResult>;
 
-function ColorInput<OnChangeData>({
-                                      defaultValue,
-                                      value,
-                                      label,
-                                      onChangeColor,
-                                      onOpen,
-                                      onClose,
-                                      disableAlpha,
-                                      presetColors,
-                                      error,
-                                      sharedColorKey = "default",
-                                      disabled,
+export const ColorInput = withMemo(function ColorInput<OnChangeData>({
+    defaultValue,
+    value,
+    label,
+    onChangeColor,
+    onOpen,
+    onClose,
+    disableAlpha,
+    presetColors,
+    error,
+    sharedColorKey = 'default',
+    disabled,
     className,
-                                      ...otherProps
-                                  }: ColorInputProps<OnChangeData>) {
+    ...otherProps
+}: ColorInputProps<OnChangeData>) {
     // Variables
     // useStyles(styles);
 
@@ -49,18 +52,18 @@ function ColorInput<OnChangeData>({
     // States
     const [color, setColor] = useState<string>(value ?? defaultValue ?? '#000000FF');
     const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState({x: 0, y: 0});
+    const [position, setPosition] = useState({ x: 0, y: 0 });
 
-    const {colors, addColor} = useSharedSelectedColor(sharedColorKey, presetColors);
+    const { colors, addColor } = useSharedSelectedColor(sharedColorKey, presetColors);
     const realIsOpen = disabled !== true && isOpen;
 
     const colVal = useMemo(() => {
         const newVal = value ?? color;
         if (disableAlpha && newVal.length === 9) {
-            return newVal.substring(0, 7);
+            return newVal.slice(0, 7);
         }
         if (disableAlpha && newVal.length === 5) {
-            return newVal.substring(0,4);
+            return newVal.slice(0, 4);
         }
         return newVal;
     }, [value, color, disableAlpha]);
@@ -78,17 +81,14 @@ function ColorInput<OnChangeData>({
             }
             onChangeWithData(newColor);
         },
-        [onChangeColor, onChangeWithData]
+        [onChangeColor, onChangeWithData],
     );
 
-    const onMenuClose = useCallback(
-        () => {
-            setIsOpen(false);
-            addColor(colVal);
-            onClose?.(colVal);
-        },
-        [addColor, colVal, onClose]
-    );
+    const onMenuClose = useCallback(() => {
+        setIsOpen(false);
+        addColor(colVal);
+        onClose?.(colVal);
+    }, [addColor, colVal, onClose]);
 
     const openElement = useCallback(
         (e: MouseEvent) => {
@@ -97,10 +97,10 @@ function ColorInput<OnChangeData>({
             }
 
             setIsOpen(true);
-            setPosition({x: e.clientX, y: e.clientY});
+            setPosition({ x: e.clientX, y: e.clientY });
             onOpen?.(colVal);
         },
-        [colVal, disabled, onOpen]
+        [colVal, disabled, onOpen],
     );
 
     // Effects
@@ -125,25 +125,21 @@ function ColorInput<OnChangeData>({
     // Render Functions
     return (
         <>
-        <span className={classNames(styles.colorInput, className)}>
-            <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
-                        <Sketch
-                            color={colVal}
-                            onChange={onChange}
-                            disableAlpha={disableAlpha}
-                            presetColors={presetColors ?? colors}
-                        />
-            </Menu>
-            <span onClick={openElement} className={styles.label}>
-                {label}
+            <span className={classNames(styles.colorInput, className)}>
+                <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
+                    <Sketch
+                        color={colVal}
+                        onChange={onChange}
+                        disableAlpha={disableAlpha}
+                        presetColors={presetColors ?? colors}
+                    />
+                </Menu>
+                <span onClick={openElement} className={styles.label}>
+                    {label}
+                </span>
+                <span onClick={openElement} style={{ backgroundColor: colVal }} className={styles.preview} />
             </span>
-            <span onClick={openElement} style={{backgroundColor: colVal}} className={styles.preview}/>
-        </span>
-            <FormError error={error}/>
+            <FormError error={error} />
         </>
     );
-}
-
-// Need ColorInputMemo for autocompletion of phpstorm
-const ColorInputMemo = withMemo(ColorInput, styles);
-export { ColorInputMemo as ColorInput };
+});

package/src/Components/FormElements/ColorInput/{colorInput.scss → colorInput.module.scss}

@@ -1,3 +1,11 @@
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --color-input-transparent-color-background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+  --color-input-modal-z-index: 9999;
+  --color-input-modal-background-color: var(--foreground-primary);
+}
+
 .colorInput {
   display: flex;
 
@@ -9,36 +17,29 @@
     border: 1px solid black;
     position: relative;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       display: block;
       width: 100%;
       height: 100%;
       z-index: -1;
-      background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+      background: var(--color-input-transparent-color-background);
     }
-
   }
 
   .modalContainer {
-    z-index: 9999;
+    z-index: var(--color-input-modal-z-index);
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     width: 100vw;
     height: 100vh;
     overflow: auto;
 
     .modal {
       position: absolute;
-      background-color: white;
+      background-color: var(--color-input-modal-background-color);
     }
   }
 
@@ -55,18 +56,15 @@
   > div {
     position: relative;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      inset: 0;
       display: block;
       width: 100%;
       height: 100%;
       z-index: -1;
-      background: repeating-conic-gradient(#cccccc 0% 25%, #ffffff 0% 50%);
+      background: var(--color-input-transparent-color-background);
     }
   }
 }

package/src/Components/FormElements/ColorInput/sharedSelectedColor.ts

@@ -1,13 +1,17 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Random } from '@ainias42/js-helper';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 const sharedSelectedColor: Record<string, { colors: string[]; updateFunctions: (() => void)[] }> = {};
 
-function localStorageKey (key: string) {
+function localStorageKey(key: string) {
     return `sharedSelectedColor-${key}`;
-};
+}
 
-export function useSharedSelectedColor(key: string|undefined, predefinedColors: string[] = [], numberSavedColors = 16) {
+export function useSharedSelectedColor(
+    key: string | undefined,
+    predefinedColors: string[] = [],
+    numberSavedColors = 16,
+) {
     const shouldSaveToLocalStorage = typeof window !== 'undefined' && window.localStorage !== undefined && !!key;
     const [, setVersion] = useState(1);
     const innerKey = useRef(Random.getStringRandom(12));
@@ -32,24 +36,26 @@ export function useSharedSelectedColor(key: string|undefined, predefinedColors:
             }
 
             sharedSelectedColor[realKey].colors = sharedSelectedColor[realKey].colors.filter(
-                (color) => color !== newColor
+                (color) => color !== newColor,
             );
             sharedSelectedColor[realKey].colors.unshift(newColor);
             if (sharedSelectedColor[realKey].colors.length > numberSavedColors) {
                 sharedSelectedColor[realKey].colors.splice(numberSavedColors, 1);
             }
-            if (shouldSaveToLocalStorage){
+            if (shouldSaveToLocalStorage) {
                 localStorage.setItem(localStorageKey(realKey), JSON.stringify(sharedSelectedColor[realKey].colors));
             }
 
             // triggers rerender
-            sharedSelectedColor[realKey].updateFunctions.forEach((u) => u());
+            for (const u of sharedSelectedColor[realKey].updateFunctions) {
+                u();
+            }
         },
-        [numberSavedColors, predefinedColors, realKey, shouldSaveToLocalStorage]
+        [numberSavedColors, predefinedColors, realKey, shouldSaveToLocalStorage],
     );
 
     useLayoutEffect(() => {
-        if (shouldSaveToLocalStorage){
+        if (shouldSaveToLocalStorage) {
             const savedColors = localStorage.getItem(localStorageKey(realKey));
             if (savedColors) {
                 sharedSelectedColor[realKey].colors = JSON.parse(savedColors);
@@ -60,7 +66,10 @@ export function useSharedSelectedColor(key: string|undefined, predefinedColors:
 
     const realColors = useMemo(() => {
         if (predefinedColors.length > 0) {
-            return [...predefinedColors, ...sharedSelectedColor[realKey].colors.filter(color => !predefinedColors.includes(color))].slice(0, numberSavedColors);
+            return [
+                ...predefinedColors,
+                ...sharedSelectedColor[realKey].colors.filter((color) => !predefinedColors.includes(color)),
+            ].slice(0, numberSavedColors);
         }
         return sharedSelectedColor[realKey].colors;
     }, [numberSavedColors, predefinedColors, realKey]);

package/src/Components/FormElements/Controller/ColorInputController.ts

@@ -1,4 +1,4 @@
-import { withHookController } from "./withHookController";
-import { ColorInput } from "../ColorInput/ColorInput";
+import { ColorInput } from '@/Components/FormElements/ColorInput/ColorInput';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
-export const ColorInputController = withHookController(ColorInput, "onChangeColor");
+export const ColorInputController = withHookController(ColorInput, 'onChangeColor');