@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/TopBar/{topBar.scss → topBar.module.scss}

@@ -1,5 +1,26 @@
-@import "../../scss/variables";
-@import "../../scss/designMixin";
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --top-bar-background: var(--foreground-primary);
+  --top-bar-button-color: var(--flavor-accent);
+  --top-bar-button-disabled-color: var(--text-disabled);
+  --top-bar-transparent-z-index: 1;
+  --top-bar-transparent-opacity: 0.65;
+  --top-bar-title-color: var(--text-secondary);
+  --top-bar-hidden-buttons-close-curtain-z-index: 998;
+  --top-bar-hidden-buttons-z-index: 999;
+  --top-bar-hidden-buttons-border-color: var(--border-strong);
+}
+
+@include mixin.design(variables.$material) {
+  --top-bar-box-shadow-color: var(--box-shadow-color);
+}
+
+@include mixin.design(variables.$flat) {
+  --top-bar-background-image: linear-gradient(0deg, var(--border-light), var(--border-light) 100%);
+}
 
 .topBar {
   // navbar-expand
@@ -12,8 +33,7 @@
   align-items: center;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-
-  background: white;
+  background: var(--top-bar-background);
   height: 56px;
 
   .container {
@@ -30,20 +50,20 @@
 
     display: block;
     padding: 0.5rem 1rem;
-    color: var(--top-bar-button, #0d3efd);
+    color: var(--top-bar-button-color);
     text-decoration: none;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 
     &.disabled {
-      color: var(--top-bar-button-disabled, #6c757d);
+      color: var(--top-bar-button-disabled-color);
       pointer-events: none;
       cursor: default;
     }
   }
 
   &.transparent {
-    opacity: 0.65;
-    z-index: 1;
+    opacity: var(--top-bar-transparent-opacity);
+    z-index: var(--top-bar-transparent-z-index);
   }
 
   &.drawBehind {
@@ -56,10 +76,9 @@
     overflow: hidden;
 
     .title {
-      color: rgba(0, 0, 0, 0.55); // TODO Change color
+      color: var(--top-bar-title-color);
       padding-bottom: 0.5rem;
       padding-top: 0.5rem;
-
       white-space: nowrap;
       width: 100%;
       overflow: hidden;
@@ -71,7 +90,7 @@
     white-space: nowrap;
     display: flex;
     flex: 1;
-    min-width: -webkit-min-content;
+    min-width: min-content;
 
     &.right {
       justify-content: flex-end;
@@ -87,11 +106,8 @@
 
     .hiddenCloseCurtain {
       position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 998;
+      inset: 0;
+      z-index: var(--top-bar-hidden-buttons-close-curtain-z-index);
     }
 
     .hiddenMenu {
@@ -99,27 +115,28 @@
       right: 0;
       white-space: nowrap;
       display: flex;
-      min-width: -webkit-min-content;
+      min-width: min-content;
       justify-content: flex-start;
       flex-direction: column;
-      z-index: 999;
+      z-index: var(--top-bar-hidden-buttons-z-index);
       background-color: white;
-      border: 1px solid var(--border-strong);
+      border: 1px solid var(--top-bar-hidden-buttons-border-color);
     }
   }
 
-  @include design($material) {
-    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);
+  @include mixin.design(variables.$material) {
+    box-shadow: 0 1px 5px var(--top-bar-box-shadow-color);
 
     .hiddenActionMenu {
       display: none;
     }
   }
-  @include design($flat) {
+
+  @include mixin.design(variables.$flat) {
     background-size: 100% 1px;
     background-repeat: no-repeat;
     background-position: bottom;
-    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);
+    background-image: var(--top-bar-background-image);
 
     .hiddenContainer {
       display: none;

package/src/Size.ts

@@ -1,4 +1,3 @@
-
 export enum Size {
     xSmall,
     small,
@@ -6,4 +5,4 @@ export enum Size {
     large,
     xLarge,
     xxLarge,
-};
+}

package/src/WrongChildError.ts

@@ -9,7 +9,7 @@ export class WrongChildError extends Error {
                   })`
                 : child;
         super(
-            `Expected Children of type '${expectedType}' but got type '${gotType}' in component ${component}. Value of child is '${value}'`
+            `Expected Children of type '${expectedType}' but got type '${gotType}' in component ${component}. Value of child is '${value}'`,
         );
         this.name = 'WrongChildError';
         this.childValue = child;

package/src/helper/EmptyProps.ts

@@ -1,2 +1,2 @@
-// eslint-disable-next-line @typescript-eslint/ban-types
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 export type EmptyProps = {};

package/src/helper/nonEmptyString.ts

@@ -1,4 +1,4 @@
-import { Characters } from './Characters';
+import { Characters } from '@/helper/Characters';
 
 export function nonEmptyString(str: string | undefined | null, other = Characters.NBSP) {
     if (!str) {

package/src/helper/useDeepShallow.ts

@@ -0,0 +1,10 @@
+import { JsonHelper } from '@ainias42/js-helper';
+import { useRef } from 'react';
+
+export function useDeepShallow<S, U>(selector: (state: S) => U, depth = -1): (state: S) => U {
+    const prev = useRef<U>(undefined);
+    return (state) => {
+        const next = selector(state);
+        return JsonHelper.deepEqual(prev.current, next, depth) ? (prev.current as U) : (prev.current = next);
+    };
+}

package/src/helper/withMemo.ts

@@ -1,15 +1,14 @@
-import React, { ComponentType } from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
-import { RESTRICT_CHILDREN, withRestrictedChildren } from './withRestrictedChildren';
-import { memoComparator } from './memoComparator';
+import { memoComparator } from '@/helper/memoComparator';
+import { withRestrictedChildren } from '@/helper/withRestrictedChildren';
+import React from 'react';
+import type { ComponentType } from 'react';
+import type { RESTRICT_CHILDREN } from '@/helper/withRestrictedChildren';
 
 export function withMemo<C extends ComponentType<any>>(
     component: C,
-    styles?: any,
-    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
+    defaultAllowChildren?: (typeof RESTRICT_CHILDREN)['allowChildren'],
 ) {
-    const withNoStrings = withRestrictedChildren(component, defaultAllowChildren);
-    const c = styles ? withStyles(styles)(withNoStrings) : withNoStrings;
+    const c = withRestrictedChildren(component, defaultAllowChildren);
     const memoizedComponent = React.memo(c, memoComparator) as unknown as C;
     memoizedComponent.displayName = `Memoized(${component.displayName || component.name})`;
     return memoizedComponent;

package/src/helper/withRenderBrowserOnly.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentType, ForwardedRef, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import type { ComponentType, ForwardedRef } from 'react';
 
 export function withRenderBrowserOnly<C extends ComponentType<any>>(Component: C) {
     type RefType = React.ComponentRef<C>;

package/src/helper/withRestrictedChildren.tsx

@@ -1,6 +1,7 @@
-import React, { ComponentType, ForwardedRef, ReactElement } from 'react';
-import { RbmComponentProps } from '../Components/RbmComponentProps';
-import { WrongChildError } from '../WrongChildError';
+import { WrongChildError } from '@/WrongChildError';
+import React from 'react';
+import type { ComponentType, ReactElement } from 'react';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export const RESTRICT_CHILDREN = {
     allowChildren: undefined as undefined | 'all' | 'html' | 'text',
@@ -8,17 +9,17 @@ export const RESTRICT_CHILDREN = {
 
 export function withRestrictedChildren<C extends ComponentType<RbmComponentProps<Record<string, any>>>>(
     Component: C,
-    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
+    defaultAllowChildren?: (typeof RESTRICT_CHILDREN)['allowChildren'],
 ) {
-    type RefType = React.ComponentRef<C>;
     type Props = React.ComponentProps<C>;
 
     const displayName = `WithRestrictedChildren(${Component.displayName || Component.name})`;
 
-    const hocComponent = (
-        { children, __allowChildren = defaultAllowChildren ?? RESTRICT_CHILDREN.allowChildren, ...otherProps }: Props,
-        ref?: ForwardedRef<RefType>
-    ) => {
+    const hocComponent = ({
+        children,
+        __allowChildren = defaultAllowChildren ?? RESTRICT_CHILDREN.allowChildren,
+        ...otherProps
+    }: Props) => {
         if (__allowChildren !== 'all') {
             if (__allowChildren !== 'html') {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -42,10 +43,6 @@ export function withRestrictedChildren<C extends ComponentType<RbmComponentProps
 
         const newProps: Record<string, any> = otherProps;
 
-        if ((ref && Object.keys(ref).length > 0) || typeof ref === 'function') {
-            newProps.ref = ref;
-        }
-
         return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -53,5 +50,5 @@ export function withRestrictedChildren<C extends ComponentType<RbmComponentProps
         );
     };
     hocComponent.displayName = displayName;
-    return hocComponent as (props: Props, ref: ForwardedRef<RefType>) => ReactElement;
+    return hocComponent as (props: Props) => ReactElement;
 }

package/src/index.ts

@@ -0,0 +1,116 @@
+export * from './Size';
+export * from './treeshakeTest';
+export * from './TypeHelpers';
+export * from './WrongChildError';
+export * from './Components/Flavor';
+export * from './Components/RbmComponentProps';
+export * from './helper/Characters';
+export * from './helper/DistributiveOmit';
+export * from './helper/EmptyProps';
+export * from './helper/memoComparator';
+export * from './helper/nonEmptyString';
+export * from './helper/useDeepShallow';
+export * from './helper/withMemo';
+export * from './helper/withRenderBrowserOnly';
+export * from './helper/withRestrictedChildren';
+export * from './WindowContext/WindowContext';
+export * from './Components/ActionSheet/ActionSheet';
+export * from './Components/Card/Card';
+export * from './Components/Clickable/Clickable';
+export * from './Components/Dialog/AlertDialog';
+export * from './Components/Dialog/ButtonDialog';
+export * from './Components/Dialog/ConfirmDialog';
+export * from './Components/Dialog/Dialog';
+export * from './Components/Dialog/DialogBackground';
+export * from './Components/Dialog/DialogContainer';
+export * from './Components/Dialog/DialogContext';
+export * from './Components/Dialog/useAlertDialog';
+export * from './Components/Dialog/useConfirmDialog';
+export * from './Components/DragAndDrop/DragItem';
+export * from './Components/DragAndDrop/DropArea';
+export * from './Components/DragAndDrop/useStrictEnabled';
+export * from './Components/FullScreen/FullScreen';
+export * from './Components/Hooks/useBreakpoint';
+export * from './Components/Hooks/useClientLayoutEffect';
+export * from './Components/Hooks/useComposedRef';
+export * from './Components/Hooks/useDebounced';
+export * from './Components/Hooks/useDelayed';
+export * from './Components/Hooks/useDelayedEffect';
+export * from './Components/Hooks/useDelayedState';
+export * from './Components/Hooks/useInViewport';
+export * from './Components/Hooks/useKeyListener';
+export * from './Components/Hooks/useListener';
+export * from './Components/Hooks/useMousePosition';
+export * from './Components/Hooks/useOnce';
+export * from './Components/Hooks/useOnMount';
+export * from './Components/Hooks/useRerender';
+export * from './Components/Hooks/useWindowDimensions';
+export * from './Components/Icon/DoubleIcon';
+export * from './Components/Icon/Icon';
+export * from './Components/Image/Image';
+export * from './Components/InViewport/InViewport';
+export * from './Components/Layout/Block';
+export * from './Components/Layout/Container';
+export * from './Components/Layout/Flex';
+export * from './Components/Layout/Grow';
+export * from './Components/Layout/Inline';
+export * from './Components/Layout/InlineBlock';
+export * from './Components/Layout/View';
+export * from './Components/Layout/ViewWithoutListeners';
+export * from './Components/LoadingArea/LoadingArea';
+export * from './Components/LoadingCircle/LoadingCircle';
+export * from './Components/Menu/HoverMenu';
+export * from './Components/Menu/Menu';
+export * from './Components/Menu/MenuCloseContext';
+export * from './Components/Menu/MenuDivider';
+export * from './Components/Menu/MenuItem';
+export * from './Components/Menu/Submenu';
+export * from './Components/Menu/useMenu';
+export * from './Components/SizeCalculator/SizeCalculator';
+export * from './Components/SpoilerList/SpoilerList';
+export * from './Components/SpoilerList/useSpoilerGroup';
+export * from './Components/TabBar/TabBar';
+export * from './Components/TabBar/TabBarButton';
+export * from './Components/Table/Table';
+export * from './Components/Text/Heading';
+export * from './Components/Text/Text';
+export * from './Components/Toast/Toast';
+export * from './Components/Toast/ToastContainer';
+export * from './Components/Toast/ToastContext';
+export * from './Components/TopBar/MoreButton';
+export * from './Components/TopBar/TopBar';
+export * from './Components/TopBar/TopBarButton';
+export * from './Components/FormElements/Button/Button';
+export * from './Components/FormElements/Button/ButtonType';
+export * from './Components/FormElements/CheckBox/Checkbox';
+export * from './Components/FormElements/ColorInput/ColorInput';
+export * from './Components/FormElements/ColorInput/sharedSelectedColor';
+export * from './Components/FormElements/Controller/ColorInputController';
+export * from './Components/FormElements/Controller/FileInputController';
+export * from './Components/FormElements/Controller/HookForm';
+export * from './Components/FormElements/Controller/InputController';
+export * from './Components/FormElements/Controller/MultipleFileInputController';
+export * from './Components/FormElements/Controller/PasswordInputController';
+export * from './Components/FormElements/Controller/SelectController';
+export * from './Components/FormElements/Controller/SendFormContext';
+export * from './Components/FormElements/Controller/SliderController';
+export * from './Components/FormElements/Controller/SwitchController';
+export * from './Components/FormElements/Controller/TextareaController';
+export * from './Components/FormElements/Controller/useYupResolver';
+export * from './Components/FormElements/Controller/withHookController';
+export * from './Components/FormElements/Error/FormError';
+export * from './Components/FormElements/hooks/useOnChangeDone';
+export * from './Components/FormElements/Input/HiddenInput';
+export * from './Components/FormElements/Input/Input';
+export * from './Components/FormElements/SearchSelectInput/SearchSelectInput';
+export * from './Components/FormElements/Select/Select';
+export * from './Components/FormElements/Slider/Slider';
+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/SpoilerList/Spoiler/Spoiler';
+export * from './Components/FormElements/Input/FileInput/FileInput';
+export * from './Components/FormElements/Input/FileInput/FileType';
+export * from './Components/FormElements/Input/FileInput/MultipleFileInput';
+export * from './Components/FormElements/Input/PasswordInput/PasswordInput';

package/src/scss/_colors.scss

@@ -1,28 +1,41 @@
+@use "variables" as *;
+@use "designMixin" as *;
+@use "vars" as *;
 
-:root {
-  --flavor-basic: #000000;
-  --flavor-constructive: #15803D;
-  --flavor-destructive: #B91C1C;
-
-  --background-light: #dedede;
-  --border-light: #cecece;
-  --border-strong: #717171;
-  --background-destructive: #FECACA; // Red-200
-
-  --text-error: var(--flavor-destructive);
-
-  --top-bar-button: #0d3efd;
-  --top-bar-button-disabled: #6c757d;
-
-  --link-color: #0d6efd;
+%color-vars {
+  --flavor-basic: #525252; // Neutral 600
+  --flavor-pale-basic: #d4d4d4; // Neutral 300
+  --flavor-constructive: #15803d; // Green 700
+  --flavor-pale-constructive: #86efac; // Green 300
+  --flavor-destructive: #dc2626; // Red 600
+  --flavor-pale-destructive: #fca5a5; // Red 300
+  --curtain-light: rgb(0 0 0 / 40%);
+  --curtain-strong: rgb(0 0 0 / 80%);
+  --foreground-primary: #ffffff; // white
+  --foreground-secondary: #f5f5f5; // Neutral 100
+  --foreground-tertiary: #e5e5e5; // Neutral 200
+  --border-light: #bbbbbb; // No Tailwind
+  --border-strong: #737373; // Neutral 500
+  --text-primary: #0f172a; // Slate 900
+  --text-secondary: #475569; // Slate 600
+  --text-tertiary: #94a3b8; // Slate 400
+  --text-disabled: #cbd5e1; // Slate 300
+  --text-link: #0d6efd; // No Tailwind
+  --text-inverse: #ffffff; // white
+  --opacity-disabled: 0.3;
 }
 
 .#{$material} {
+  @extend %color-vars;
+
   --flavor-accent: #37474f;
-  --background-accent: #62727b;
+  --box-shadow-color: rgb(0 0 0 / 20%);
 }
 
 .#{$flat} {
-  --flavor-accent: #0076ff;
-  --background-accent: #adcdfd;
+  @extend %color-vars;
+
+  --flavor-accent: #2563eb; // blue 600
+  --flavor-pale-accent: #93c5fd; // blue 300
+  --box-shadow-color: rgb(0 0 0 / 12%);
 }

package/src/scss/_default.scss

@@ -1,4 +1,4 @@
-@import "designMixin";
+@use "variables" as variables;
 
 @layer rbm {
   * {
@@ -7,15 +7,15 @@
     font-weight: 400;
   }
 
-  .#{$material} {
+  .#{variables.$material} {
     * {
-      font-family: "Roboto", "Noto", sans-serif;
+      font-family: Roboto, Noto, sans-serif;
     }
   }
 
-  .#{$flat} {
+  .#{variables.$flat} {
     * {
-      font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+      font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     }
   }
 }

package/src/scss/_flavorMixin.scss

@@ -4,12 +4,15 @@
   &:global(.flavor-accent) {
     #{$varName}: var(--flavor-accent);
   }
+
   &:global(.flavor-basic) {
     #{$varName}: var(--flavor-basic);
   }
+
   &:global(.flavor-destructive) {
     #{$varName}: var(--flavor-destructive);
   }
+
   &:global(.flavor-constructive) {
     #{$varName}: var(--flavor-constructive);
   }

package/src/scss/_variables.scss

@@ -1,22 +1,22 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-$classPrefix: "rbm-";
-
+$grid-breakpoints: (
+        xxs: 0,
+        xs: 320px,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px,
+        xxl: 1400px
+);
+$container-max-widths: (
+        sm: 540px,
+        md: 720px,
+        lg: 960px,
+        xl: 1140px,
+        xxl: 1320px
+);
 $material: "material-design";
 $flat: "flat-design";
 
-$android: $material;
-$ios: $flat;
-
-$animationDuration: 0.3s;
-$animationDurationMaterial: $animationDuration;
-$animationDurationFlat: $animationDuration;
-$animationDurationAndroid: $animationDurationMaterial;
-$animationDurationIos: $animationDurationFlat;
-
-$fontSizeBase: 16px;
-
-$boxShadowMaterial: 0 2px 2px 0 rgb(0 0 0 / 14%),
-0 1px 5px 0 rgb(0 0 0 / 12%),
-0 3px 1px -2px rgb(0 0 0 / 20%);
+:root {
+  --action-sheet-z-index: 10000,
+}

package/src/scss/_vars.scss

@@ -0,0 +1,12 @@
+@use "variables" as *;
+@use "designMixin" as *;
+
+@mixin vars() {
+  @include design($material) {
+    @content
+  }
+
+  @include design($flat) {
+    @content
+  }
+}

package/src/scss/baseClasses.module.scss

@@ -0,0 +1,23 @@
+@use "./variables" as variables;
+@use "./designMixin" as mixin;
+
+
+.fullHeight {
+  height: 100%;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+@include mixin.design(variables.$flat) {
+  .flatHidden {
+    display: none;
+  }
+}
+
+@include mixin.design(variables.$material) {
+  .materialHidden {
+    display: none;
+  }
+}

package/src/scss/breakpoints.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+@use "sass:list";
+@use "variables";
+
+@function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+@function breakpoint-next($name, $breakpoints: variables.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+  $n: list.index($breakpoint-names, $name);
+
+  @if not $n {
+    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+  }
+
+  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
+}
+
+@function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name, $breakpoints: variables.$grid-breakpoints) {
+  $max: map.get($breakpoints, $name);
+
+  @return if($max and $max > 0, $max - .02, null);
+}
+
+@mixin media-breakpoint-down($name, $breakpoints: variables.$grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-only($name, $breakpoints: variables.$grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max: breakpoint-max($next, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($next, $breakpoints) {
+      @content;
+    }
+  }
+}

package/src/treeshakeTest.ts

@@ -0,0 +1,3 @@
+export function treeshakeTest() {
+    console.log('This is a test for treeshaking - 12354');
+}