@ainias42/react-bootstrap-mobile 1.0.8 → 1.0.10

package/package.json

@@ -1,58 +1,56 @@
 {
-  "name": "@ainias42/react-bootstrap-mobile",
-  "version": "1.0.8",
-  "description": "Mobile React Components",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "main": "dist/index.js",
-  "scripts": {
-    "build-postinstall": "npm run build",
-    "build": "ctix build && webpack --env production",
-    "lint:noCache": "eslint \"{src,.storybook}/{**/*,*}.{js,jsx,tsx,ts}\" --max-warnings 0",
-    "lint": "npm run lint:noCache -- --cache",
-    "lint:fix": "npm run lint -- --fix",
-    "typecheck": "tsc --noEmit",
-    "prettier": "npm run prettier:list -- --write",
-    "prettier:list": "prettier --list-different \"{src,.storybook}/**/*.{ts,tsx,js,jsx,json}\"",
-    "stylelint": "stylelint --allow-empty-input \"{src,.storybook}/**/*.{css,scss}\"",
-    "stylelint:fix": "npm run stylelint -- --fix",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "author": "",
-  "repository": {
-    "type": "git",
-    "url": "gitea@git.silas.link:Ainias/libraries.git"
-  },
-  "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^3.0.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-hook-form": "^7.62.0"
-  },
-  "dependencies": {
-    "@ainias42/config": "*",
-    "@ainias42/js-helper": ">=0.8.16",
-    "@hello-pangea/dnd": "^18.0.1",
-    "@uiw/react-color": "^2.5.5",
-    "classnames": "^2.5.1",
-    "react-table": "^7.8.0",
-    "yup": "^1.7.0"
-  },
-  "devDependencies": {
-    "@ainias42/webpack-config": "*",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-onboarding": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
-    "@storybook/addon-themes": "^9.1.5",
-    "eslint-plugin-storybook": "^9.1.5",
-    "storybook": "^9.1.5",
-    "vite": "^7.1.4",
-    "vite-tsconfig-paths": "^5.1.4"
-  }
+    "name": "@ainias42/react-bootstrap-mobile",
+    "version": "1.0.10",
+    "description": "Mobile React Components",
+    "publishConfig": {
+        "access": "public"
+    },
+    "license": "MIT",
+    "main": "dist/index.js",
+    "scripts": {
+        "build-postinstall": "npm run build",
+        "build": "ctix build && webpack --env production",
+        "lint:noCache": "eslint \"{src,.storybook}/{**/*,*}.{js,jsx,tsx,ts}\" --max-warnings 0",
+        "lint": "npm run lint:noCache -- --cache",
+        "lint:fix": "npm run lint -- --fix",
+        "typecheck": "tsc --noEmit",
+        "prettier": "npm run prettier:list -- --write",
+        "prettier:list": "prettier --list-different \"{src,.storybook}/**/*.{ts,tsx,js,jsx,json}\"",
+        "stylelint": "stylelint --allow-empty-input \"{src,.storybook}/**/*.{css,scss}\"",
+        "stylelint:fix": "npm run stylelint -- --fix",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "author": "",
+    "repository": {
+        "type": "git",
+        "url": "gitea@git.silas.link:Ainias/libraries.git"
+    },
+    "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^3.0.2",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "react-hook-form": "^7.62.0"
+    },
+    "dependencies": {
+        "@ainias42/config": "*",
+        "@ainias42/js-helper": ">=0.8.19",
+        "@hello-pangea/dnd": "^18.0.1",
+        "@uiw/react-color": "^2.5.5",
+        "classnames": "^2.5.1",
+        "react-table": "^7.8.0",
+        "yup": "^1.7.0"
+    },
+    "devDependencies": {
+        "@ainias42/webpack-config": "*",
+        "@storybook/addon-docs": "^9.1.5",
+        "@storybook/addon-onboarding": "^9.1.5",
+        "@storybook/react-vite": "^9.1.5",
+        "@storybook/addon-themes": "^9.1.5",
+        "eslint-plugin-storybook": "^9.1.5",
+        "storybook": "^9.1.5"
+    }
 }

package/src/Components/Clickable/Clickable.tsx

@@ -43,6 +43,7 @@ export type ClickableProps<
         draggable?: boolean;
         title?: string;
         ref?: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>;
+        hiddenLink?: boolean;
     } & OnClickListener<OnClickData> &
         OnPointerDownListener<OnMouseDownData> &
         OnPointerMoveListener<OnMouseMoveData> &
@@ -84,6 +85,7 @@ export const Clickable = withMemo(function Clickable<
     draggable,
     title,
     ref,
+    hiddenLink,
     ...clickData
 }: ClickableProps<
     OnClickData,
@@ -305,7 +307,7 @@ export const Clickable = withMemo(function Clickable<
         id,
         role: interactable ? 'button' : undefined,
         'aria-hidden': interactable ? undefined : true,
-        className: classNames(styles.clickable, className),
+        className: classNames(styles.clickable, { [styles.hiddenLink]: hiddenLink }, className),
         onClick: realOnClick,
         onPointerDown: realOnPointerDown,
         onPointerMove: realOnPointerMove,

package/src/Components/Clickable/clickable.module.scss

@@ -11,4 +11,11 @@
 .link {
   color: var(--clickable-text-link);
   text-decoration: underline;
+
+  &.hiddenLink {
+    text-decoration: none;
+    //noinspection Stylelint
+    color: inherit;
+  }
+
 }

package/src/Components/DesignProvider/Design.ts

@@ -0,0 +1,4 @@
+export enum Design {
+    FLAT = 'flat-design',
+    MATERIAL = 'material-design',
+}

package/src/Components/DesignProvider/DesignContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import { Design } from './Design';
+
+export const DesignContext = createContext<Design>(Design.FLAT);
+
+export function useDesign() {
+    return useContext(DesignContext);
+}

package/src/Components/DesignProvider/DesignProvider.tsx

@@ -0,0 +1,32 @@
+import { Design } from './Design';
+import { DesignContext } from './DesignContext';
+import { withMemo } from '../../helper/withMemo';
+import React from 'react';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export type DesignProviderProps = { design?: Design; children?: ReactNode; className?: string };
+
+export const DesignProvider = withMemo(function DesignProvider({
+    design = Design.FLAT,
+    children,
+    className,
+}: DesignProviderProps) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return (
+        <DesignContext value={design}>
+            <div className={classNames(design, className)}>{children}</div>
+        </DesignContext>
+    );
+});

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -1,3 +1,4 @@
+import { ObjectHelper } from '@ainias42/js-helper';
 import { useComposedRef } from '../../Hooks/useComposedRef';
 import { useController, useFormContext } from 'react-hook-form';
 import { withMemo } from '../../../helper/withMemo';
@@ -25,17 +26,31 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
     }: Props<Values, Name> & { ref?: ForwardedRef<RefType> }) {
         const children = 'children' in otherProps ? otherProps.children : undefined;
 
-        const { field, fieldState } = useController({ name });
+        const { field, fieldState, formState } = useController({ name });
         const { clearErrors } = useFormContext();
         const composedRef = useComposedRef(ref, field.ref);
-        const errorMessage = fieldState.error?.message;
+        let errorMessage = fieldState.error?.message;
+        if (Array.isArray(fieldState.error)) {
+            errorMessage = fieldState.error.map((error) => error?.message).join('\n');
+        }
+        let clearErrorName: string = name;
+
+        if (!errorMessage) {
+            for (const [key, error] of ObjectHelper.entries(formState.errors)) {
+                if (key.startsWith(`${name}.`) || key.startsWith(`${name}[`)) {
+                    errorMessage = error.message?.toString();
+                    clearErrorName = key;
+                    break;
+                }
+            }
+        }
 
         const internalOnChange = useCallback(
             (arg: any) => {
-                clearErrors(name);
+                clearErrors(clearErrorName);
                 field.onChange(arg);
             },
-            [clearErrors, field, name],
+            [clearErrorName, clearErrors, field],
         );
         const onChangeProps = {
             [onChangeProp]: internalOnChange,

package/src/Components/FormElements/Switch/switch.module.scss

@@ -17,7 +17,7 @@
   --switch-background: var(--foreground-primary);
   --switch-box-shadow-color: var(--box-shadow-color);
   --switch-handle-color: var(--foreground-primary);
-  --switch-handle-box-shadow-color: rgb(0 0 0 / 25%);
+  --switch-handle-box-shadow-color: var(--curtain-light);
   --switch-active-background-color: var(--flavor-accent);
   --switch-active-box-shadow-color: var(--flavor-accent);
   --switch-active-handle-color: var(--foreground-primary);

package/src/Components/Icon/BaseIcon.tsx

@@ -9,7 +9,6 @@ import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import type { Override } from '../../TypeHelpers';
 import type { RbmComponentProps } from '../RbmComponentProps';
 import type { Ref } from 'react';
-import { Flavor } from '../Flavor';
 import { FlavorWithText } from '../FlavorWithText';
 
 export type IconSource = IconProp | string | IconDefinition;
@@ -23,7 +22,7 @@ export type IconProps = RbmComponentProps<
             alt?: string;
             ref?: Ref<HTMLImageElement | null>;
             flavor?: FlavorWithText;
-            color?: undefined
+            color?: undefined;
         }
     >
 >;

package/src/Components/List/BulletList/BulletList.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import type { RbmComponentProps } from '../../RbmComponentProps';
+
+export type BulletListProps = RbmComponentProps<{ numbered?: boolean }>;
+
+function BulletList({ numbered = false, className, children, style }: BulletListProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+    const props = { className, style };
+
+    // Render Functions
+    if (numbered) {
+        return <ol {...props}>{children}</ol>;
+    }
+
+    return <ul {...props}>{children}</ul>;
+}
+
+// Need BulletListMemo for autocompletion of phpstorm
+const BulletListMemo = withMemo(BulletList);
+export { BulletListMemo as BulletList };

package/src/Components/List/BulletList/ListItem.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import type { EmptyProps } from '../../../helper/EmptyProps';
+import type { RbmComponentProps } from '../../RbmComponentProps';
+
+export type ListItemProps = RbmComponentProps<EmptyProps>;
+
+function ListItem({ className, children, style }: ListItemProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <li className={className} style={style}>
+            {children}
+        </li>
+    );
+}
+
+// Need ListItemMemo for autocompletion of phpstorm
+const ListItemMemo = withMemo(ListItem);
+export { ListItemMemo as ListItem };

package/src/Components/ThemeProvider/ThemeContext.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const ThemeContext = createContext<string>('light');
+
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/src/Components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,28 @@
+import { ThemeContext } from './ThemeContext';
+import { withMemo } from '../../helper/withMemo';
+import React, { useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+export type ThemeProviderProps = { theme: string; children: ReactNode };
+
+export const ThemeProvider = withMemo(function ThemeProvider({ theme, children }: ThemeProviderProps) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Callbacks
+
+    // Effects
+    useEffect(() => {
+        document.body.classList.add(theme);
+        return () => {
+            document.body.classList.remove(theme);
+        };
+    }, [theme]);
+
+    // Other
+
+    // RenderFunctions
+
+    return <ThemeContext value={theme}>{children}</ThemeContext>;
+});

package/src/index.ts

@@ -19,6 +19,9 @@ export * from './WindowContext/WindowContext';
 export * from './Components/ActionSheet/ActionSheet';
 export * from './Components/Card/Card';
 export * from './Components/Clickable/Clickable';
+export * from './Components/DesignProvider/Design';
+export * from './Components/DesignProvider/DesignContext';
+export * from './Components/DesignProvider/DesignProvider';
 export * from './Components/Dialog/AlertDialog';
 export * from './Components/Dialog/ButtonDialog';
 export * from './Components/Dialog/ConfirmDialog';
@@ -80,6 +83,8 @@ export * from './Components/TabBar/TabBarButton';
 export * from './Components/Table/Table';
 export * from './Components/Text/Heading';
 export * from './Components/Text/Text';
+export * from './Components/ThemeProvider/ThemeContext';
+export * from './Components/ThemeProvider/ThemeProvider';
 export * from './Components/Title/HoverTitle';
 export * from './Components/Title/withTitle';
 export * from './Components/Toast/Toast';
@@ -117,6 +122,8 @@ export * from './Components/FormElements/Switch/Switch';
 export * from './Components/FormElements/Textarea/Textarea';
 export * from './Components/Layout/Grid/Grid';
 export * from './Components/Layout/Grid/GridItem';
+export * from './Components/List/BulletList/BulletList';
+export * from './Components/List/BulletList/ListItem';
 export * from './Components/SpoilerList/Spoiler/Spoiler';
 export * from './Components/FormElements/Input/FileInput/FileInput';
 export * from './Components/FormElements/Input/FileInput/FileType';

package/src/scss/_colors.scss

@@ -56,10 +56,6 @@
 
   --flavor-accent: #37474f;
   --box-shadow-color: rgb(0 0 0 / 20%);
-
-  &.dark {
-    @extend %color-vars-dark;
-  }
 }
 
 .#{$flat} {
@@ -68,9 +64,19 @@
   --flavor-accent: #2563eb; // blue 600
   --flavor-pale-accent: #93c5fd; // blue 300
   --box-shadow-color: rgb(0 0 0 / 12%);
+}
 
-  &.dark {
+.dark {
+  .#{$flat}, &.#{$flat} {
     @extend %color-vars-dark;
+
+    --box-shadow-color: rgb(255 255 255 / 12%);
     --flavor-pale-accent: #172554; // blue 900
   }
+
+  .#{$material}, &.#{$material} {
+    @extend %color-vars-dark;
+
+    --box-shadow-color: rgb(255 255 255 / 20%);
+  }
 }