@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.3

package/src/Components/Layout/Grid/{grid.scss → grid.module.scss}

@@ -1,15 +1,7 @@
-@import "../../../scss/variables";
-@import "bootstrap/scss/mixins/breakpoints";
-
-$grid-breakpoints: (
-        xxs: 0,
-        xs: 320px,
-        sm: 576px,
-        md: 768px,
-        lg: 992px,
-        xl: 1200px,
-        xxl: 1400px
-);
+@use "sass:map";
+@use "sass:list";
+@use "../../../scss/variables" as *;
+@use "../../../scss/breakpoints" as *;
 
 $columns: 12;
 $breakpoints: $grid-breakpoints;
@@ -73,12 +65,13 @@ $containerBreakpoints: $grid-breakpoints;
   &.useContainerWidth {
     container-type: inline-size;
 
-    @each $breakpoint in map-keys($containerBreakpoints) {
+    @each $breakpoint in map.keys($containerBreakpoints) {
       $min: breakpoint-min($breakpoint, $containerBreakpoints);
+
       @if $min {
-      @container (min-width: #{$min}) {
-        @include contentMin($breakpoint);
-      }
+        @container (min-width: #{$min}) {
+          @include contentMin($breakpoint);
+        }
       } @else {
         @include contentMin($breakpoint);
       }
@@ -89,17 +82,17 @@ $containerBreakpoints: $grid-breakpoints;
       $max: breakpoint-max($next, $containerBreakpoints);
 
       @if $min != null and $max != null {
-      @container (min-width: #{$min}) and (max-width: #{$max}) {
-        @include contentOnly($breakpoint);
-      }
+        @container (min-width: #{$min}) and (max-width: #{$max}) {
+          @include contentOnly($breakpoint);
+        }
       } @else if $max == null {
-      @container (min-width: #{$min}) {
-        @include contentOnly($breakpoint);
-      }
+        @container (min-width: #{$min}) {
+          @include contentOnly($breakpoint);
+        }
       } @else if $min == null {
-      @container (max-width: #{$max}) {
-        @include contentOnly($breakpoint);
-      }
+        @container (max-width: #{$max}) {
+          @include contentOnly($breakpoint);
+        }
       }
     }
 
@@ -107,7 +100,7 @@ $containerBreakpoints: $grid-breakpoints;
   }
 
   &:not(.useContainerWidth) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
       @include media-breakpoint-up($breakpoint, $breakpoints) {
         @for $i from 1 through $columns {
           > .item-#{$breakpoint}-#{$i} {

package/src/Components/Layout/Grow.tsx

@@ -1,17 +1,26 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import styles from './layout.scss';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { ForwardedRef } from "react";
-import { withMemo } from "../../helper/withMemo";
+import styles from '@/Components/Layout/layout.module.scss';
+import type { ForwardedRef } from 'react';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type GrowProps = RbmComponentProps<{
     center?: boolean;
     weight?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    ref?: ForwardedRef<HTMLDivElement>
+    ref?: ForwardedRef<HTMLDivElement>;
+    id?: string;
 }>;
 
-export const Grow = withMemo(function Grow({ className, children, center = false, style, weight = 1, ref }: GrowProps ) {
+export const Grow = withMemo(function Grow({
+    id,
+    className,
+    children,
+    center = false,
+    style,
+    weight = 1,
+    ref,
+}: GrowProps) {
     // Variables
 
     // States
@@ -27,6 +36,7 @@ export const Grow = withMemo(function Grow({ className, children, center = false
     // Render Functions
     return (
         <div
+            id={id}
             ref={ref}
             className={classNames(
                 styles.grow,
@@ -40,11 +50,11 @@ export const Grow = withMemo(function Grow({ className, children, center = false
                     [styles.weight5]: weight === 5,
                     [styles.weight6]: weight === 6,
                 },
-                className
+                className,
             )}
             style={style}
         >
             {children}
         </div>
     );
-}, styles);
+});

package/src/Components/Layout/Inline.tsx

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
+import { JSX } from 'react/jsx-runtime';
+import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import styles from './layout.scss';
-import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { withMemo } from "../../helper/withMemo";
-import { JSX } from "react/jsx-runtime";
+import styles from '@/Components/Layout/layout.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+
 import IntrinsicElements = JSX.IntrinsicElements;
 
-export type InlineProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
-    ViewWithoutListenersProps<AsType>
->;
+export type InlineProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<ViewWithoutListenersProps<AsType>>;
 
-export const Inline = withMemo(function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
-    { children, as = 'span' as AsType, className, ...props }: InlineProps<AsType>,
-) {
+export const Inline = withMemo(function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>({
+    children,
+    as = 'span' as AsType,
+    className,
+    ...props
+}: InlineProps<AsType>) {
     // Variables
 
     // Refs
@@ -39,4 +42,4 @@ export const Inline = withMemo(function Inline<AsType extends keyof JSX.Intrinsi
             {children}
         </ViewWithoutListeners>
     );
-}, styles);
+});

package/src/Components/Layout/InlineBlock.tsx

@@ -1,22 +1,27 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
+import { JSX } from 'react/jsx-runtime';
+import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import styles from './layout.scss';
-import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { JSX } from "react/jsx-runtime";
+import styles from '@/Components/Layout/layout.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
+
 import IntrinsicElements = JSX.IntrinsicElements;
-import { withMemo } from "../../helper/withMemo";
 
 export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
-    id?: string
-    title?: string
-}
+        id?: string;
+        title?: string;
+    }
 >;
 
-export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
-    { children, as = 'span' as AsType, className, ...props }: InlineBlockProps<AsType>,
-) {
+export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>({
+    children,
+    as = 'span' as AsType,
+    className,
+    ...props
+}: InlineBlockProps<AsType>) {
     // Variables
 
     // Refs
@@ -42,4 +47,4 @@ export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JS
             {children}
         </ViewWithoutListeners>
     );
-}, styles);
+});

package/src/Components/Layout/View.tsx

@@ -1,17 +1,28 @@
 import * as React from 'react';
-import { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
-import { Override } from '../../TypeHelpers';
-import { JSX } from "react/jsx-runtime";
+import { JSX } from 'react/jsx-runtime';
+import { withMemo } from '@/helper/withMemo';
+import type { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
+import type { Override } from '@/TypeHelpers';
+
 import IntrinsicElements = JSX.IntrinsicElements;
-import { withMemo } from "../../helper/withMemo";
 
 export type ViewProps<AsType extends keyof IntrinsicElements> = PropsWithChildren<
-    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode, ref?: ForwardedRef<ComponentRef<AsType>> }>
+    Override<
+        React.ComponentPropsWithoutRef<AsType>,
+        {
+            as?: AsType;
+            children?: React.ReactNode;
+            ref?: ForwardedRef<ComponentRef<AsType>>;
+        }
+    >
 >;
 
-export const View = withMemo(function View<AsType extends keyof JSX.IntrinsicElements>(
-    {children, as,ref, ...otherProps}: ViewProps<AsType>
-) {
+export const View = withMemo(function View<AsType extends keyof JSX.IntrinsicElements>({
+    children,
+    as,
+    ref,
+    ...otherProps
+}: ViewProps<AsType>) {
     // Variables
 
     // Refs
@@ -33,4 +44,4 @@ export const View = withMemo(function View<AsType extends keyof JSX.IntrinsicEle
         ref,
     };
     return React.createElement(element, props, children);
-}, undefined, "all");
+}, 'all');

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,22 +1,31 @@
 import * as React from 'react';
-import { DOMAttributes, ForwardedRef } from 'react';
-import { View, ViewProps } from './View';
-import { JSX } from "react/jsx-runtime";
+import { JSX } from 'react/jsx-runtime';
+import { View } from '@/Components/Layout/View';
+import { withMemo } from '@/helper/withMemo';
+import type { DOMAttributes, ForwardedRef } from 'react';
+import type { ViewProps } from '@/Components/Layout/View';
+
 import IntrinsicElements = JSX.IntrinsicElements;
-import { withMemo } from "../../helper/withMemo";
 
 export type ViewWithoutListenersProps<AsType extends keyof IntrinsicElements> = Omit<
     ViewProps<AsType>,
     keyof DOMAttributes<AsType>
-> & { children?: React.ReactNode, dangerouslySetInnerHTML?: {
-        // Should be InnerHTML['innerHTML'].
-        // But unfortunately we're mixing renderer-specific type declarations.
-        __html: string | TrustedHTML;
-    } | undefined;   };
-
-export const ViewWithoutListeners = withMemo(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
-    { children,ref, ...props }: ViewWithoutListenersProps<AsType>,
-) {
+> & {
+    children?: React.ReactNode;
+    dangerouslySetInnerHTML?:
+        | {
+              // Should be InnerHTML['innerHTML'].
+              // But unfortunately we're mixing renderer-specific type declarations.
+              __html: string | TrustedHTML;
+          }
+        | undefined;
+};
+
+export const ViewWithoutListeners = withMemo(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>({
+    children,
+    ref,
+    ...props
+}: ViewWithoutListenersProps<AsType>) {
     // Variables
 
     // Refs
@@ -33,8 +42,8 @@ export const ViewWithoutListeners = withMemo(function ViewWithoutListeners<AsTyp
 
     // Render Functions
     return (
-        <View {...props} ref={ref as ForwardedRef<SVGElement|HTMLElement>}>
+        <View {...props} ref={ref as ForwardedRef<SVGElement | HTMLElement>}>
             {children}
         </View>
     );
-}, undefined, "all");
+}, 'all');

package/src/Components/Layout/container.module.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+@use "../../scss/variables" as *;
+@use "../../scss/breakpoints" as *;
+
+@mixin make-container() {
+  --gutter-x: 1.5rem;
+  --gutter-y: 0;
+
+  width: 100%;
+  padding-right: calc(var(--gutter-x) * .5);
+  padding-left: calc(var(--gutter-x) * .5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container,
+.container-fluid {
+  @include make-container;
+}
+
+// Responsive containers that are 100% wide until a breakpoint
+@each $breakpoint, $container-max-width in $container-max-widths {
+  .container-#{$breakpoint} {
+    @include make-container;
+  }
+
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    %responsive-container-#{$breakpoint} {
+      max-width: $container-max-width;
+    }
+
+    // Extend each breakpoint which is smaller or equal to the current breakpoint
+    $extend-breakpoint: true;
+
+    @each $name, $width in $grid-breakpoints {
+      @if $extend-breakpoint {
+        .container#{breakpoint-infix($name, $grid-breakpoints)} {
+          @extend %responsive-container-#{$breakpoint};
+        }
+
+        // Once the current breakpoint is reached, stop extending
+        @if $breakpoint == $name {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}
+
+@media (width >= 1400px) {
+  .container-xxl {
+    max-width: 1400px;
+  }
+}

package/src/Components/LoadingArea/LoadingArea.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Block } from '@/Components/Layout/Block';
+import { LoadingArea } from '@/Components/LoadingArea/LoadingArea';
+import { Text } from '@/Components/Text/Text';
+import React from 'react';
+
+const meta = {
+    component: LoadingArea,
+    render: (args) => (
+        <LoadingArea {...args}>
+            <Block
+                style={{
+                    height: '200px',
+                    background: 'gray',
+                }}
+            >
+                <Text>Content goes here Error within Story. Normally it would only cover the content and not more</Text>
+            </Block>
+        </LoadingArea>
+    ),
+} satisfies Meta<typeof LoadingArea>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        loading: true,
+        fullSize: false,
+        fullWidth: false,
+        fullHeight: false,
+    },
+};

package/src/Components/LoadingArea/LoadingArea.tsx

@@ -1,25 +1,23 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { LoadingCircle } from '../LoadingCircle/LoadingCircle';
-
-import styles from './loadingArea.scss';
-import { withMemo } from '../../helper/withMemo';
+import { LoadingCircle } from '@/Components/LoadingCircle/LoadingCircle';
+import { withMemo } from '@/helper/withMemo';
+import baseStyles from '@/scss/baseClasses.module.scss';
 import classNames from 'classnames';
+import styles from '@/Components/LoadingArea/loadingArea.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type LoadingAreaProps = RbmComponentProps<{
-    opacity?: number;
     loading: boolean;
     fullWidth?: boolean;
     fullHeight?: boolean;
     fullSize?: boolean;
 }>;
 
-function LoadingArea({
+export const LoadingArea = withMemo(function LoadingArea({
     loading,
     fullWidth = false,
     fullSize = false,
     fullHeight = false,
-    opacity = 0.65,
     className,
     style,
     children,
@@ -45,20 +43,17 @@ function LoadingArea({
     return (
         <span
             className={classNames(styles.loadingArea, className, {
-                'full-height': fullHeight,
-                'full-width': fullWidth,
+                [baseStyles.fullHeight]: fullHeight,
+                [baseStyles.fullWidth]: fullWidth,
             })}
             style={style}
         >
             {children}
             {loading ? (
-                <span className={styles.curtain} style={{ opacity }}>
+                <span className={styles.curtain}>
                     <LoadingCircle />
                 </span>
             ) : null}
         </span>
     );
-}
-
-const LoadingAreaMemo = withMemo(LoadingArea, styles);
-export { LoadingAreaMemo as LoadingArea };
+});

package/src/Components/LoadingArea/{loadingArea.scss → loadingArea.module.scss}

@@ -1,3 +1,9 @@
+@use "../../scss/vars" as *;
+
+@include vars {
+  --loading-area-background-color: var(--curtain-light);
+}
+
 .loadingArea {
   height: fit-content;
   width: fit-content;
@@ -7,13 +13,10 @@
   .curtain {
     z-index: 1;
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #efeff4;
+    background-color: var(--loading-area-background-color);
   }
 }

package/src/Components/LoadingCircle/LoadingCircle.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LoadingCircle } from '@/Components/LoadingCircle/LoadingCircle';
+import { Size } from '@/Size';
+import React from 'react';
+
+const meta = {
+    component: LoadingCircle,
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'],
+            mapping: {
+                'x-small': Size.xSmall,
+                small: Size.small,
+                medium: Size.medium,
+                large: Size.large,
+                'x-large': Size.xLarge,
+                'xx-large': Size.xxLarge,
+            },
+        },
+    },
+} satisfies Meta<typeof LoadingCircle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        size: Size.medium,
+    },
+};
+
+export const AllSizes: Story = {
+    render: () => (
+        <div>
+            <div>
+                <LoadingCircle size={Size.xSmall} />
+            </div>
+            <div>
+                <LoadingCircle size={Size.small} />
+            </div>
+            <div>
+                <LoadingCircle size={Size.medium} />
+            </div>
+            <div>
+                <LoadingCircle size={Size.large} />
+            </div>
+            <div>
+                <LoadingCircle size={Size.xLarge} />
+            </div>
+            <div>
+                <LoadingCircle size={Size.xxLarge} />
+            </div>
+        </div>
+    ),
+};

package/src/Components/LoadingCircle/LoadingCircle.tsx

@@ -1,18 +1,34 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-
-import styles from './loadingCircle.scss';
-import { withMemo } from '../../helper/withMemo';
+import { Size } from '@/Size';
+import { useMemo } from 'react';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
+import styles from '@/Components/LoadingCircle/loadingCircle.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type LoadingCircleProps = RbmComponentProps<{
-    size?: number;
+    size?: Size;
 }>;
 
-function LoadingCircle({ size = 32, className, style }: LoadingCircleProps) {
+export const LoadingCircle = withMemo(function LoadingCircle({
+    size = Size.medium,
+    className,
+    style,
+}: LoadingCircleProps) {
     // Variables
 
     // States
+    const sizeInNumber = useMemo(() => {
+        const sizeMapping: Record<Size, number> = {
+            [Size.xSmall]: 8,
+            [Size.small]: 16,
+            [Size.medium]: 32,
+            [Size.large]: 64,
+            [Size.xLarge]: 128,
+            [Size.xxLarge]: 256,
+        };
+        return sizeMapping[size];
+    }, [size]);
 
     // Refs
 
@@ -27,15 +43,12 @@ function LoadingCircle({ size = 32, className, style }: LoadingCircleProps) {
     return (
         <svg
             className={classNames(styles.loadingCircle, className)}
-            viewBox={`0 0 ${size} ${size}`}
-            width={size}
-            height={size}
+            viewBox={`0 0 ${sizeInNumber} ${sizeInNumber}`}
+            width={sizeInNumber}
+            height={sizeInNumber}
             style={style}
         >
             <circle cx="50%" cy="50%" r="40%" fill="none" className={styles.spinner} />
         </svg>
     );
-}
-
-const LoadingCircleMemo = withMemo(LoadingCircle, styles);
-export { LoadingCircleMemo as LoadingCircle };
+});

package/src/Components/LoadingCircle/{loadingCircle.scss → loadingCircle.module.scss}

@@ -1,15 +1,22 @@
-@import "../../scss/variables";
-@import "../../scss/designMixin";
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --loading-circle-color: var(--flavor-accent);
+}
 
 @keyframes loadingCircle {
   0% {
     stroke-dasharray: 10%, 241.32%;
     stroke-dashoffset: 0;
   }
+
   50% {
     stroke-dasharray: 201%, 50.322%;
     stroke-dashoffset: -100%;
   }
+
   100% {
     stroke-dasharray: 10%, 241.32%;
     stroke-dashoffset: -251.32%;
@@ -20,6 +27,7 @@
   from {
     transform: rotate(0);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -30,12 +38,13 @@
     stroke-miterlimit: 10;
     transform-origin: 50%;
     animation: loadingCircle 2s ease-in-out infinite, loadingCircleRotate 1.5s linear infinite;
-    stroke: var(--flavor-accent);
+    stroke: var(--loading-circle-color);
 
-    @include design($material) {
+    @include mixin.design(variables.$material) {
       stroke-width: 9%;
     }
-    @include design($flat) {
+
+    @include mixin.design(variables.$flat) {
       stroke-width: 5%;
     }
   }