@ainias42/react-bootstrap-mobile 1.0.0 → 1.0.2

package/dist/treeshakeTest.d.ts

@@ -0,0 +1 @@
+export declare function treeshakeTest(): void;

package/eslint.config.js

@@ -0,0 +1,17 @@
+import defaultConfig from '@ainias42/config/eslint.config.js';
+import path from 'path';
+
+export default [
+    ...defaultConfig,
+    {
+        rules: {
+            'import/no-extraneous-dependencies': [
+                'error',
+                {
+                    devDependencies: ['src/**/*.stories.ts', 'src/**/*.stories.tsx', '.storybook/**/*.ts'],
+                    packageDir: ['./', path.join(process.cwd(), '../..')],
+                },
+            ],
+        },
+    },
+];

package/package.json

@@ -1,107 +1,57 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "1.0.0",
-  "description": "Mobile React Components using Bootstrap",
-  "main": "dist/bootstrapReactMobile",
+  "version": "1.0.2",
+  "description": "Mobile React Components",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "node bin/build.js && webpack",
-    "build:production": "node bin/build.js && webpack --env production",
-    "update packages": "node bin/updateCopies.js",
-    "typecheck": "tsc --noEmit",
-    "lint:noCache": "eslint \"src/{**/*,*}.{js,jsx,tsx,ts}\" --max-warnings 0",
+    "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"
+    "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": "git+https://github.com/Ainias/Bootstrap-React-Mobile.git"
-  },
-  "keywords": [
-    "bootstrap",
-    "react",
-    "mobile"
-  ],
-  "author": "Silas Günther",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Ainias/Bootstrap-React-Mobile/issues"
+    "url": "gitea@git.silas.link:Ainias/libraries.git"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "homepage": "https://github.com/Ainias/Bootstrap-React-Mobile#readme",
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "bootstrap": "^5.3.3",
-    "react": "^19.1.1",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-hook-form": "^7.53.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-typescript": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@types/react": "^19.1.11",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^19.1.7",
-    "@types/react-table": "^7.7.20",
-    "@types/react-window": "^1.8.8",
-    "@types/react-window-infinite-loader": "^1.0.9",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "ajv": "^8.14.0",
-    "babel-loader": "^9.1.3",
-    "bootstrap": "^5.3.3",
-    "css-layering-webpack-plugin": "^0.3.0",
-    "css-loader": "^7.1.2",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "html-webpack-plugin": "^5.6.0",
-    "loader-utils": "3.2.1",
-    "mini-css-extract-plugin": "^2.9.0",
-    "prettier": "^3.2.5",
-    "react": "^19.1.1",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^19.1.1",
-    "react-hook-form": "^7.53.0",
-    "sass": "^1.77.2",
-    "sass-loader": "^14.2.1",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.9.2",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "@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",
-    "@types/react-virtualized-auto-sizer": "^1.0.4",
+    "@hello-pangea/dnd": "^18.0.1",
     "@uiw/react-color": "^2.5.5",
     "classnames": "^2.5.1",
-    "isomorphic-style-loader": "^5.3.2",
-    "react-color": "^2.19.3",
     "react-table": "^7.8.0",
-    "react-virtualized-auto-sizer": "^1.0.24",
-    "react-window": "^1.8.10",
-    "react-window-infinite-loader": "^1.0.9",
-    "yup": "^1.6.1"
+    "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"
   }
 }

package/react-bootstrap-mobile.scss

@@ -1,6 +1,6 @@
-@import "src/scss/variables";
-@import "src/scss/designMixin";
-@import "src/scss/flavorMixin";
-@import "src/scss/default";
-@import "src/scss/baseClasses";
-@import "src/scss/colors";
+@use "src/scss/variables" as *;
+@use "src/scss/designMixin" as *;
+@use "src/scss/flavorMixin" as *;
+@use "src/scss/breakpoints" as *;
+@use "src/scss/default" as *;
+@use "src/scss/colors" as *;

package/src/Components/ActionSheet/ActionSheet.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ActionSheet } from '@/Components/ActionSheet/ActionSheet';
+import { faCog, faHouse, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+import React, { useEffect, useRef } from 'react';
+import type { ActionSheetHandle } from '@/Components/ActionSheet/ActionSheet';
+
+const meta = {
+    component: ActionSheet,
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const ref = useRef<ActionSheetHandle | null>(null);
+
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            ref.current?.show();
+        }, []);
+
+        return <ActionSheet {...args} ref={ref} />;
+    },
+} satisfies Meta<typeof ActionSheet>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Action Sheet Title',
+        actions: [
+            {
+                name: 'Action 1',
+                icon: faCog,
+                action: fn(),
+            },
+            {
+                name: 'Action 2',
+                icon: faHouse,
+                action: fn(),
+            },
+            {
+                name: 'Action 3',
+                icon: faUser,
+                action: fn(),
+            },
+            {
+                name: 'Delete Action',
+                icon: faTrash,
+                action: fn(),
+                isDestructive: true,
+            },
+        ],
+    },
+};

package/src/Components/ActionSheet/ActionSheet.tsx

@@ -1,24 +1,27 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { ForwardedRef, useCallback, useImperativeHandle, useState } from 'react';
-import { Clickable } from '../Clickable/Clickable';
-import { Container } from '../Layout/Container';
+import { Block } from '@/Components/Layout/Block';
+import { Clickable } from '@/Components/Clickable/Clickable';
+import { Container } from '@/Components/Layout/Container';
+import { Flex } from '@/Components/Layout/Flex';
+import { Icon } from '@/Components/Icon/Icon';
+import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { Text } from '@/Components/Text/Text';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Icon, IconSource } from '../Icon/Icon';
-import styles from './actionSheet.scss';
+import { useCallback, useImperativeHandle, useState } from 'react';
+import { withMemo } from '@/helper/withMemo';
+import baseStyles from '@/scss/baseClasses.module.scss';
 import classNames from 'classnames';
-import { InlineBlock } from '../Layout/InlineBlock';
-import { Text } from '../Text/Text';
-import { Flex } from '../Layout/Flex';
-import { Block } from '../Layout/Block';
-import { withMemo } from "../../helper/withMemo";
+import styles from '@/Components/ActionSheet/actionSheet.module.scss';
+import type { ForwardedRef } from 'react';
+import type { IconSource } from '@/Components/Icon/Icon';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type ActionSheetAction<ActionData> = {
     name: string;
     icon?: IconSource;
     action: (data?: ActionData) => void;
     actionData?: ActionData;
-    isDeleteAction?: boolean;
+    isDestructive?: boolean;
 };
 
 export type ActionSheetHandle = {
@@ -26,18 +29,23 @@ export type ActionSheetHandle = {
     hide: () => void;
 };
 
-
 export type ActionSheetProps = RbmComponentProps<{
     title?: string;
     actions: ActionSheetAction<any>[];
     cancelText?: string;
     onClose?: () => void;
-    ref?: ForwardedRef<ActionSheetHandle>
+    ref?: ForwardedRef<ActionSheetHandle>;
 }>;
 
-export const ActionSheet = withMemo(function ActionSheet(
-    { title, actions, cancelText = 'Cancel', className, onClose, style, ref }: ActionSheetProps,
-) {
+export const ActionSheet = withMemo(function ActionSheet({
+    title,
+    actions,
+    cancelText = 'Cancel',
+    className,
+    onClose,
+    style,
+    ref,
+}: ActionSheetProps) {
     const [isOpen, setIsOpen] = useState(false);
 
     // Variables
@@ -58,7 +66,7 @@ export const ActionSheet = withMemo(function ActionSheet(
             close();
             action?.action(action.actionData);
         },
-        [close]
+        [close],
     );
 
     useImperativeHandle(
@@ -67,7 +75,7 @@ export const ActionSheet = withMemo(function ActionSheet(
             show: () => setIsOpen(true),
             hide: close,
         }),
-        [setIsOpen, close]
+        [setIsOpen, close],
     );
 
     // Effects
@@ -75,9 +83,14 @@ export const ActionSheet = withMemo(function ActionSheet(
     // Other
 
     const renderAction = (action: ActionSheetAction<any>) => (
-        <Clickable key={action.name} className={styles.action} onClick={onActionClick} onClickData={action}>
+        <Clickable
+            key={action.name}
+            className={classNames(styles.action, { [styles.destructive]: action.isDestructive })}
+            onClick={onActionClick}
+            onClickData={action}
+        >
             <InlineBlock className={styles.actionIcon}>{action.icon ? <Icon icon={action.icon} /> : null}</InlineBlock>
-            <Text>{action.name}</Text>
+            <Text className={styles.actionName}>{action.name}</Text>
         </Clickable>
     );
 
@@ -87,10 +100,10 @@ export const ActionSheet = withMemo(function ActionSheet(
             onClick={close}
             style={style}
         >
-            <Container fluid="xxl" className="full-height">
+            <Container fluid="xxl" className={baseStyles.fullHeight}>
                 <Flex className={styles.content}>
                     {title ? (
-                        <Block>
+                        <Block className={styles.title}>
                             <Text>{title}</Text>
                         </Block>
                     ) : null}
@@ -109,4 +122,4 @@ export const ActionSheet = withMemo(function ActionSheet(
             </Container>
         </Clickable>
     );
-}, styles);
+});

package/src/Components/ActionSheet/actionSheet.module.scss

@@ -0,0 +1,198 @@
+@use "../../scss/variables" as variables;
+@use "../../scss/designMixin" as mixin;
+@use "../../scss/vars" as *;
+
+@include vars {
+  --action-sheet-background-color: var(--curtain-light);
+  --action-sheet-action-background-color: var(--foreground-primary);
+  --action-sheet-title-color: var(--text-secondary);
+}
+
+@include mixin.design(variables.$material) {
+  --action-sheet-action-text-color: var(--text-secondary);
+}
+
+@include mixin.design(variables.$flat) {
+  --action-sheet-action-text-color: var(--flavor-accent);
+  --action-sheet-action-background-image: linear-gradient(0deg, var(--curtain-light), var(--curtain-light) 100%);
+  --action-sheet-action-destructive-text-color: var(--flavor-destructive)
+}
+
+.actionSheet {
+  position: fixed;
+  inset: 100% 0 0;
+  overflow: hidden;
+  background-color: var(--action-sheet-background-color);
+  z-index: var(--action-sheet-z-index);
+  transition-duration: 0s;
+  transition-delay: 0.25s;
+
+  &.open {
+    transition-delay: 0s;
+    top: 0;
+
+    > :global(.full-height) {;
+      top: 0
+    }
+  }
+
+  > :global(.full-height) {
+    position: absolute;
+    inset: 100% 0 0;
+  }
+
+  .content {
+    bottom: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+
+    .title, .action {
+      width: 100%;
+      background-color: var(--action-sheet-action-background-color);
+      border-radius: 0;
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .title {
+      --text-primary-default-color: var(--action-sheet-title-color);
+
+      color: var(--action-sheet-title-color);
+    }
+
+    .action {
+      --text-primary-default-color: var(--action-sheet-action-text-color);
+
+      color: var(--action-sheet-action-text-color);
+      background-color: var(--action-sheet-action-background-color);
+
+      .actionName {
+        font-size: 20px;
+      }
+    }
+
+    .cancel {
+      --text-primary-default-color: var(--action-sheet-action-text-color);
+
+      color: var(--action-sheet-action-text-color);
+      width: 100%;
+      font-size: 20px;
+      background-color: var(--action-sheet-action-background-color);
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  @include mixin.design(variables.$material) {
+    > .full-height {
+      padding: 0;
+    }
+
+    .content {
+      text-align: left;
+
+      .action {
+        height: 30px;
+      }
+
+      .title {
+        height: 40px;
+        line-height: 40px;
+      }
+
+      .action, .title {
+        font-size: 1rem;
+
+        .actionName {
+          font-size: 1rem;
+        }
+
+        padding: 0 0 0 16px;
+
+        .actionIcon {
+          display: inline-block;
+          float: left;
+          margin-right: 24px;
+          font-size: 16px;
+          text-align: center;
+          width: 0.8em;
+          height: 30px;
+        }
+      }
+
+      .cancel {
+        height: 35px;
+        line-height: 30px;
+        padding: 0 0 0 16px;
+        color: var(--action-sheet-action-text-color);
+        font-size: 1rem;
+
+        .actionIcon {
+          display: inline-block;
+          float: left;
+          margin-right: 24px;
+          font-size: 1rem;
+          text-align: center;
+          width: 0.8em;
+          height: 30px;
+        }
+      }
+    }
+  }
+
+  @include mixin.design(variables.$flat) {
+    .content {
+      text-align: center;
+      padding-right: 10px;
+      padding-left: 10px;
+      padding-bottom: 10px;
+
+      .action, .title {
+        height: 56px;
+        line-height: 56px;
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        background-image: var(--action-sheet-action-background-image);
+
+        &:first-child {
+          border-top-right-radius: 12px;
+          border-top-left-radius: 12px;
+        }
+
+        &:nth-last-child(2) {
+          border-bottom-right-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+
+        .actionIcon {
+          display: none;
+        }
+
+        &.destructive {
+          --text-primary-default-color: var(--action-sheet-action-destructive-text-color);
+
+          color: var(--action-sheet-action-destructive-text-color);
+        }
+      }
+
+      .cancel {
+        height: 56px;
+        line-height: 56px;
+        border-radius: 12px;
+        margin: 8px 0 0;
+        font-weight: 600;
+
+        .actionIcon {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/src/Components/Card/Card.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Card } from '@/Components/Card/Card';
+import { Text } from '@/Components/Text/Text';
+import React from 'react';
+
+const meta = {
+    component: Card,
+    argTypes: {
+        children: {
+            control: false,
+        },
+    },
+    args: {
+        children: (
+            <Text>
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
+                ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+                dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+                magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+                clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+            </Text>
+        ),
+    },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        title: 'Title Card',
+        fullHeight: false,
+        noMargin: false,
+        noPadding: false,
+        noPaddingHeight: false,
+        noPaddingWidth: false,
+    },
+};

package/src/Components/Card/Card.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import styles from './card.scss';
-import { withMemo } from '../../helper/withMemo';
+import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
-import { ReactElement } from 'react';
+import styles from '@/Components/Card/card.module.scss';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
+import type { ReactElement } from 'react';
 
 export type CardProps = RbmComponentProps<{
     title?: string | ReactElement;
@@ -14,7 +14,7 @@ export type CardProps = RbmComponentProps<{
     noMargin?: boolean;
 }>;
 
-function Card({
+export const Card = withMemo(function Card({
     title,
     children,
     fullHeight = false,
@@ -39,7 +39,4 @@ function Card({
             <div className={styles.content}>{children}</div>
         </div>
     );
-}
-
-const CardMemo = withMemo(Card, styles);
-export { CardMemo as Card };
+});