@ainias42/react-bootstrap-mobile 1.0.9 → 1.0.11

package/package.json

@@ -1,58 +1,56 @@
 {
-  "name": "@ainias42/react-bootstrap-mobile",
-  "version": "1.0.9",
-  "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.11",
+    "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/DesignContext.ts

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

package/src/Components/Dialog/dialog.module.scss

@@ -24,7 +24,8 @@
   }
 
   .dialog {
-    max-width: map.get(variables.$gridBreakpoints, "xxl");
+    max-width: min(map.get(variables.$gridBreakpoints, "xxl"), 95%);
+    max-height: 95%;
     z-index: 1;
   }
 }

package/src/Components/FlavorWithText.ts

@@ -8,4 +8,4 @@ enum TextValues {
 }
 
 export type FlavorWithText = TextValues | Flavor
-export const FlavorWithText = {...TextValues, ...Flavor}
+export const FlavorWithText = {...TextValues, ...Flavor};

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/Icon/BaseIcon.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FlavorWithText } from '../FlavorWithText';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
@@ -9,8 +10,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/Icon/DoubleIcon.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DoubleIcon } from './DoubleIcon';
-import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FlavorWithText } from '../FlavorWithText';
+import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
 
 const meta = {
     component: DoubleIcon,

package/src/Components/Icon/DoubleIcon.tsx

@@ -3,8 +3,8 @@ import { BaseInlineBlock } from '../Layout/BaseInlineBlock';
 import { withMemo } from '../../helper/withMemo';
 import React from 'react';
 import styles from './icon.module.scss';
+import type { FlavorWithText } from '../FlavorWithText';
 import type { IconProps, IconSource } from './BaseIcon';
-import { FlavorWithText } from '../FlavorWithText';
 
 export type DoubleIconProps = IconProps & {
     secondIcon: IconSource;

package/src/Components/Icon/Icon.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { BaseIcon } from './BaseIcon';
-import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FlavorWithText } from '../FlavorWithText';
-import { DoubleIcon } from './DoubleIcon';
+import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
 
 const meta = {
     component: BaseIcon,

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/Menu/Menu.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { FlavorWithText } from '../FlavorWithText';
 import { Menu } from './Menu';
 import { MenuDivider } from './MenuDivider';
 import { MenuItem } from './MenuItem';
@@ -8,7 +9,6 @@ import { faCog, faCogs, faHome, faUser } from '@fortawesome/free-solid-svg-icons
 import { fn } from 'storybook/test';
 import React from 'react';
 import type { MenuProps } from './Menu';
-import { FlavorWithText } from '../FlavorWithText';
 
 const meta = {
     component: Menu,

package/src/Components/Menu/Menu.tsx

@@ -10,9 +10,9 @@ import { withMemo } from '../../helper/withMemo';
 import { withRenderBrowserOnly } from '../../helper/withRenderBrowserOnly';
 import classNames from 'classnames';
 import styles from './menu.module.scss';
+import type { FlavorWithText } from '../FlavorWithText';
 import type { IconSource } from '../Icon/BaseIcon';
 import type { RbmComponentProps } from '../RbmComponentProps';
-import { FlavorWithText } from '../FlavorWithText';
 
 export type MenuItemType = {
     label: string;

package/src/Components/Menu/MenuItem.tsx

@@ -7,12 +7,12 @@ import { withMemo } from '../../helper/withMemo';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import styles from './menu.module.scss';
+import type { CSSProperties, ReactNode } from 'react';
 import type { IconSource } from '../Icon/BaseIcon';
 import type { RbmComponentProps, WithChildren } from '../RbmComponentProps';
-import type { CSSProperties, ReactNode } from 'react';
 
 import Element = React.JSX.Element;
-import { FlavorWithText } from '../FlavorWithText';
+import type { FlavorWithText } from '../FlavorWithText';
 
 export type MenuItemProps<Item = undefined> = RbmComponentProps<
     {

package/src/Components/Menu/Submenu.tsx

@@ -11,9 +11,9 @@ import { withMemo } from '../../helper/withMemo';
 import React, { useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import styles from './menu.module.scss';
+import type { FlavorWithText } from '../FlavorWithText';
 import type { IconSource } from '../Icon/BaseIcon';
 import type { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
-import { FlavorWithText } from '../FlavorWithText';
 
 export type SubmenuProps = RbmComponentProps<
     {

package/src/Components/Title/Title.stories.tsx

@@ -1,5 +1,6 @@
 import { BaseIcon } from '../Icon/BaseIcon';
 import { Block } from '../Layout/Block';
+import { Flavor } from '../Flavor';
 import { HoverMenu } from '../Menu/HoverMenu';
 import { MenuDivider } from '../Menu/MenuDivider';
 import { MenuItem } from '../Menu/MenuItem';
@@ -10,7 +11,6 @@ import { fn } from 'storybook/test';
 import React from 'react';
 import type { HoverMenuProps } from '../Menu/HoverMenu';
 import type { StoryObj } from '@storybook/react-vite';
-import { Flavor } from '../Flavor';
 
 const meta = {
     args: {

package/src/index.ts

@@ -122,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';