@robineb/mui-utility

Utility-Komponenten für MUI-Projekte.

Status

• Version: 1.1.3

Installation

npm install @robineb/mui-utility

Abhängigkeiten:

• react ^18 || ^19
• react-dom ^18 || ^19
• @mui/material ^7 || ^8 || ^9
• @mui/icons-material ^7 || ^8 || ^9
• @emotion/react ^11
• @emotion/styled ^11

Import-Anleitung

Der Root-Import ist für benannte Importe gedacht:

import {
  ActionButton,
  NotificationProvider,
  useNotification,
  Passwordfield,
  AvatarUpload,
  SocialSigninButton,
  resolveButtonWidth,
  SVGs,
  OtpInput,
} from "@robineb/mui-utility";

Subpath-Importe sind ebenfalls verfügbar:

import NotificationProvider from "@robineb/mui-utility/Notification/NotificationProvider";
import useNotification from "@robineb/mui-utility/Notification/useNotification";
import ActionButton from "@robineb/mui-utility/ActionButton";
import Passwordfield from "@robineb/mui-utility/Passwordfield";

Hinweis: Der Pfad lautet jetzt Notification (wie im Paket exportiert).

Schnellstart

import React from "react";
import { NotificationProvider, ActionButton } from "@robineb/mui-utility";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <NotificationProvider>{children}</NotificationProvider>;
}

export function ExampleAction() {
  return <ActionButton action={async () => {}}>Aktion ausführen</ActionButton>;
}

Exporte

Root-Exporte:

• ActionButton
• NotificationProvider
• useNotification
• Passwordfield
• AvatarUpload
• SocialSigninButton
• OtpInput
• resolveButtonWidth
• SVGs

Wichtige Typ-Exporte:

• ToastType, ToastMessage, NotificationContextValue
• ActionButtonProps
• PasswordfieldProps
• AvataruploadProps
• Social-Signin- und Provider-Typ-Exporte
• MUIOTPInputProps

Komponenten

ActionButton

Button für Async-Aktionen mit optionalem Bestätigungsdialog und optionalen Benachrichtigungen.

Wichtige Eigenschaften (Props):

• action: () => void | Promise
• children: React.ReactNode
• requireAreYouSure?: boolean
• destructive?: boolean
• icon?: React.ReactNode
• Dialog?: { dialogTitle?: React.ReactNode; dialogContent?: React.ReactNode; confirmText?: string }
• Props?: { ButtonProps?: ButtonProps; DialogProps?: DialogProps }
• Notification?: { useNotification: true; successmessage: string; errormessage: string } | { useNotification?: false }

NotificationProvider + useNotification

Globales Snackbar/Alert-Handling über Kontext.

notify-Signatur:

notify({ message: string, type: "success" | "error" | "info" | "warning" });

Passwordfield

Passwort-Eingabefeld mit Anzeigen/Verbergen-Umschalter und optionaler Stärkeanzeige.

Wichtige Eigenschaften (Props):

• children: React.ReactNode
• showstrength?: boolean
• loading?: boolean
• error?: boolean
• value?: string
• onChange?: (...) => void
• Props?: { TextfieldProps?: OutlinedInputProps }

AvatarUpload

Avatar mit Upload-Trigger und optional anpassbarem Badge/Icon.

Wichtige Eigenschaften (Props):

• onUpload: (file: File) => void
• image?: string
• icon?: React.ReactNode
• Props?: { IconButtonProps?: IconButtonProps; BadgeProps?: BadgeProps; InputProps?: React.InputHTMLAttributes }

OtpInput

Mehrere MUI-Textfelder fuer One-Time-Passwords, als kontrollierte Komponente ueber value/onChange. Vollstaendige Doku inkl. Theming-Beispiel: src/OtpInput/README.md.

Wichtige Eigenschaften (Props):

• length?: number (Default 4)
• value?: string
• onChange?: (value: string) => void
• onComplete?: (value: string) => void
• onBlur?: (value: string, isCompleted: boolean) => void
• validateChar?: (character: string, index: number) => boolean
• groups?: number
• separator?: React.ReactNode
• autoFocus?: boolean
• loading?: boolean
• error?: boolean
• TextFieldsProps?: TextFieldProps | ((index: number) => TextFieldProps)

SocialSigninButton

Social-Sign-In-Button mit large- und circle-Varianten.

Integrierte Provider:

• google
• microsoft
• apple
• github
• facebook
• linkedin
• x
• gitlab
• discord
• slack
• passkey

Entwicklung

Häufige Developer-Befehle:

# build (produziert dist und Typdefinitionen)
npm run build

# unit tests (Jest)
npm test

# integration/dev flow: baut, packt das Paket, installiert es in Test/ und startet Vite
npm run test:vite

# lokalen watch-build (aktualisiert nur dist, installiert NICHT in Test automatisch)
npm run dev

Hinweis:

• Die Tests (Jest) laufen gegen den Quellcode via ts-jest; ein vorheriger Build ist nicht nötig (siehe jest.config.ts).
• Die Test-App (Test/) verwendet das Skript scripts/test-vite.mjs; dieses macht build -> npm pack -> npm i ../ (inside Test) -> npm run dev.
• package.json.files = ["dist"] — nur dist wird gepackt/veröffentlicht. Vor npm pack oder publish immer npm run build ausführen.

Lizenz

MIT