@micha.bigler/ui-core-micha 2.4.5 → 2.6.1

package/dist/onboarding/OnboardingProvider.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { AuthContext } from '../auth/AuthContext';
+import { getOnboardingStepConfig } from './api';
+import { selectActiveSteps } from './stepSelection';
+import CookieConsentStep from './steps/CookieConsentStep';
+import CompleteNameStep from './steps/CompleteNameStep';
+import BrowserPushStep from './steps/BrowserPushStep';
+export const UNIVERSAL_STEP_DESCRIPTORS = [
+    {
+        id: 'cookie_consent',
+        condition: (ctx) => Boolean(ctx.user && !ctx.user.accepted_convenience_cookies),
+        blocking: true,
+        skipable: false,
+        persistDismissed: false,
+        titleKey: 'Onboarding.COOKIE_CONSENT_TITLE',
+        Component: CookieConsentStep,
+    },
+    {
+        id: 'complete_name',
+        condition: (ctx) => { var _a, _b; return Boolean(ctx.user && (!((_a = ctx.user.first_name) === null || _a === void 0 ? void 0 : _a.trim()) || !((_b = ctx.user.last_name) === null || _b === void 0 ? void 0 : _b.trim()))); },
+        blocking: true,
+        skipable: false,
+        persistDismissed: false,
+        titleKey: 'Onboarding.COMPLETE_NAME_TITLE',
+        Component: CompleteNameStep,
+    },
+    {
+        id: 'browser_push',
+        condition: (ctx) => { var _a; return Boolean(((_a = ctx.pushState) === null || _a === void 0 ? void 0 : _a.supported) && !ctx.pushState.subscribed); },
+        blocking: false,
+        skipable: true,
+        persistDismissed: true,
+        titleKey: 'Onboarding.BROWSER_PUSH_TITLE',
+        Component: BrowserPushStep,
+    },
+];
+export const OnboardingContext = createContext(null);
+export function useOnboarding() {
+    return useContext(OnboardingContext);
+}
+function loadDismissedSteps() {
+    if (typeof window === 'undefined')
+        return new Set();
+    try {
+        return new Set(JSON.parse(window.localStorage.getItem('onboarding_dismissed')) || []);
+    }
+    catch (_a) {
+        return new Set();
+    }
+}
+function getInitialPushState() {
+    const supported = typeof navigator !== 'undefined'
+        && typeof window !== 'undefined'
+        && 'serviceWorker' in navigator
+        && 'PushManager' in window;
+    return supported ? null : { supported: false, subscribed: false };
+}
+export function OnboardingProvider({ children, extraSteps = [] }) {
+    const { user } = useContext(AuthContext);
+    const [configMap, setConfigMap] = useState({});
+    const [configLoaded, setConfigLoaded] = useState(false);
+    const [pushState, setPushState] = useState(getInitialPushState);
+    const [dismissedSet, setDismissedSet] = useState(loadDismissedSteps);
+    const descriptors = useMemo(() => [...UNIVERSAL_STEP_DESCRIPTORS, ...extraSteps], [extraSteps]);
+    useEffect(() => {
+        let cancelled = false;
+        if (!user) {
+            setConfigMap({});
+            setConfigLoaded(false);
+            return undefined;
+        }
+        getOnboardingStepConfig()
+            .then((data) => {
+            if (cancelled)
+                return;
+            const nextConfigMap = {};
+            (data || []).forEach((item) => { nextConfigMap[item.key] = item.enabled; });
+            setConfigMap(nextConfigMap);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setConfigMap({});
+        })
+            .finally(() => {
+            if (!cancelled)
+                setConfigLoaded(true);
+        });
+        return () => { cancelled = true; };
+    }, [user]);
+    useEffect(() => {
+        let cancelled = false;
+        if (typeof navigator === 'undefined' || typeof window === 'undefined'
+            || !('serviceWorker' in navigator) || !('PushManager' in window)) {
+            setPushState({ supported: false, subscribed: false });
+            return undefined;
+        }
+        navigator.serviceWorker.ready
+            .then((registration) => registration.pushManager.getSubscription())
+            .then((subscription) => {
+            if (!cancelled)
+                setPushState({ supported: true, subscribed: Boolean(subscription) });
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPushState({ supported: true, subscribed: false });
+        });
+        return () => { cancelled = true; };
+    }, []);
+    const dismissStep = useCallback((id) => {
+        setDismissedSet((previous) => {
+            const next = new Set(previous);
+            next.add(id);
+            if (typeof window !== 'undefined') {
+                try {
+                    window.localStorage.setItem('onboarding_dismissed', JSON.stringify([...next]));
+                }
+                catch (_a) {
+                    // Persistence is optional; the in-memory dismissal still applies.
+                }
+            }
+            return next;
+        });
+    }, []);
+    const ctx = useMemo(() => ({ user, pushState }), [user, pushState]);
+    const activeSteps = useMemo(() => {
+        if (!configLoaded || !user)
+            return [];
+        return selectActiveSteps(descriptors, configMap, ctx, dismissedSet);
+    }, [configLoaded, user, descriptors, configMap, ctx, dismissedSet]);
+    const value = useMemo(() => ({ activeSteps, dismissStep, ctx, configMap, setConfigMap }), [activeSteps, dismissStep, ctx, configMap]);
+    return _jsx(OnboardingContext.Provider, { value: value, children: children });
+}

package/dist/onboarding/OnboardingWizard.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import LinearProgress from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import { useOnboarding } from './OnboardingProvider';
+export function OnboardingWizard() {
+    const { t } = useTranslation();
+    const onboarding = useOnboarding();
+    const [sessionDismissed, setSessionDismissed] = useState(() => new Set());
+    const totalRef = useRef(null);
+    const [completed, setCompleted] = useState(0);
+    const activeSteps = (onboarding === null || onboarding === void 0 ? void 0 : onboarding.activeSteps) || [];
+    const visibleSteps = activeSteps.filter((step) => !sessionDismissed.has(step.id));
+    useEffect(() => {
+        if (visibleSteps.length > 0 && totalRef.current === null) {
+            totalRef.current = visibleSteps.length;
+            setCompleted(0);
+        }
+        if (visibleSteps.length === 0) {
+            totalRef.current = null;
+            setCompleted(0);
+        }
+    }, [visibleSteps.length]);
+    if (!onboarding || visibleSteps.length === 0)
+        return null;
+    const { dismissStep, ctx } = onboarding;
+    const currentStep = visibleSteps[0];
+    const total = totalRef.current || visibleSteps.length;
+    const progress = total > 1 ? Math.round((completed / total) * 100) : 0;
+    const StepComponent = currentStep.Component;
+    const completeCurrentStep = () => {
+        setSessionDismissed((previous) => new Set([...previous, currentStep.id]));
+        setCompleted((count) => count + 1);
+    };
+    const dismissCurrentStep = () => {
+        if (currentStep.persistDismissed)
+            dismissStep(currentStep.id);
+        completeCurrentStep();
+    };
+    return (_jsxs(Dialog, { open: true, fullWidth: true, maxWidth: "sm", disableEscapeKeyDown: currentStep.blocking, onClose: currentStep.blocking ? undefined : dismissCurrentStep, children: [_jsxs(DialogTitle, { sx: { pb: 0 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: _jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: total > 1 ? t('Onboarding.STEP_COUNTER', { current: completed + 1, total }) : t('Onboarding.SETUP') }) }), total > 1 && _jsx(LinearProgress, { variant: "determinate", value: progress, sx: { mt: 1, borderRadius: 1 } })] }), _jsx(DialogContent, { sx: { pt: 2 }, children: _jsx(StepComponent, { onComplete: completeCurrentStep, onDismiss: dismissCurrentStep, ctx: ctx }) })] }));
+}
+export default OnboardingWizard;

package/dist/onboarding/api.js

@@ -0,0 +1,10 @@
+import apiClient from '../auth/apiClient';
+const STEP_CONFIG_URL = '/api/onboarding/step-config/';
+export async function getOnboardingStepConfig() {
+    const response = await apiClient.get(STEP_CONFIG_URL);
+    return response.data;
+}
+export async function patchOnboardingStepConfig(payload) {
+    const response = await apiClient.patch(STEP_CONFIG_URL, payload);
+    return response.data;
+}

package/dist/onboarding/stepSelection.js

@@ -0,0 +1,18 @@
+/**
+ * Pure onboarding step selection.
+ *
+ * @param {Array} descriptors Step descriptors in display order.
+ * @param {Object} configMap Enabled state keyed by dcm onboarding step key.
+ * @param {Object} ctx Runtime context supplied to each step condition.
+ * @param {Set} dismissedSet Persistently dismissed step ids.
+ * @returns {Array} Steps that should be shown.
+ */
+export function selectActiveSteps(descriptors, configMap, ctx, dismissedSet = new Set()) {
+    return descriptors.filter((step) => {
+        if (configMap[step.id] === false)
+            return false;
+        if (step.persistDismissed && dismissedSet.has(step.id))
+            return false;
+        return step.condition(ctx);
+    });
+}

package/dist/onboarding/steps/BrowserPushStep.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import { getVapidPublicKey, patchNotificationPreferences, savePushSubscription, urlBase64ToUint8Array, } from '../../notifications/api';
+export function BrowserPushStep({ onComplete, onDismiss }) {
+    const { t } = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const enable = async () => {
+        var _a;
+        setLoading(true);
+        setError('');
+        try {
+            const permission = await Notification.requestPermission();
+            if (permission !== 'granted') {
+                setError(t('NotificationSettings.PUSH_DENIED'));
+                return;
+            }
+            const vapidPublicKey = await getVapidPublicKey();
+            const registration = await navigator.serviceWorker.ready;
+            const subscription = await registration.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
+            });
+            await savePushSubscription(subscription.toJSON(), navigator.userAgent);
+            await patchNotificationPreferences({ push_opt_in: true });
+            onComplete();
+        }
+        catch (requestError) {
+            if (((_a = requestError === null || requestError === void 0 ? void 0 : requestError.response) === null || _a === void 0 ? void 0 : _a.status) === 409) {
+                setError(t('NotificationSettings.PUSH_CONFLICT'));
+            }
+            else {
+                setError(t('NotificationSettings.PUSH_ERROR'));
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.BROWSER_PUSH_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.BROWSER_PUSH_BODY') }), error && _jsx(Alert, { severity: "warning", onClose: () => setError(''), children: error }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1 }, children: [_jsx(Button, { variant: "text", onClick: onDismiss, disabled: loading, children: t('Onboarding.SKIP') }), _jsx(Button, { variant: "contained", onClick: enable, disabled: loading, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_ENABLE') })] })] }));
+}
+export default BrowserPushStep;

package/dist/onboarding/steps/CompleteNameStep.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import PersonIcon from '@mui/icons-material/Person';
+import { updateUserProfile } from '../../auth/authApi';
+export function CompleteNameStep({ onComplete }) {
+    const { t } = useTranslation();
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const submit = async (event) => {
+        event.preventDefault();
+        if (!firstName.trim() || !lastName.trim())
+            return;
+        setLoading(true);
+        setError('');
+        try {
+            await updateUserProfile({ first_name: firstName.trim(), last_name: lastName.trim() });
+            onComplete();
+        }
+        catch (_a) {
+            setError(t('Onboarding.COMPLETE_NAME_ERROR'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: submit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(PersonIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.COMPLETE_NAME_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.COMPLETE_NAME_BODY') }), error && _jsx(Alert, { severity: "error", onClose: () => setError(''), children: error }), _jsx(TextField, { label: t('Onboarding.FIRST_NAME_LABEL'), value: firstName, onChange: (event) => setFirstName(event.target.value), required: true, fullWidth: true, size: "small" }), _jsx(TextField, { label: t('Onboarding.LAST_NAME_LABEL'), value: lastName, onChange: (event) => setLastName(event.target.value), required: true, fullWidth: true, size: "small" }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "contained", type: "submit", disabled: loading || !firstName.trim() || !lastName.trim(), startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('Onboarding.SAVE') }) })] }));
+}
+export default CompleteNameStep;

package/dist/onboarding/steps/CookieConsentStep.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import CookieIcon from '@mui/icons-material/Cookie';
+import { updateUserProfile } from '../../auth/authApi';
+export function CookieConsentStep({ onComplete }) {
+    const { t } = useTranslation();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const accept = async () => {
+        setLoading(true);
+        setError('');
+        try {
+            await updateUserProfile({ accepted_convenience_cookies: true });
+            onComplete();
+        }
+        catch (_a) {
+            setError(t('Onboarding.COOKIE_CONSENT_ERROR'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(CookieIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.COOKIE_CONSENT_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.COOKIE_CONSENT_BODY') }), error && _jsx(Alert, { severity: "error", onClose: () => setError(''), children: error }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "contained", onClick: accept, disabled: loading, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('Onboarding.COOKIE_CONSENT_ACCEPT') }) })] }));
+}
+export default CookieConsentStep;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.4.5",
+  "version": "2.6.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -12,7 +12,6 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.11",
-    "@mui/x-data-grid": "^8.28.6",
     "axios": "^1.16.1",
     "i18next": "^25.10.10 || ^26.0.0",
     "qrcode.react": "^4.2.0",
@@ -23,12 +22,16 @@
     "react-router-dom": "^7.15.1"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json"
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run"
   },
   "devDependencies": {
     "@mui/icons-material": "^7.3.11",
+    "@testing-library/react": "^16.3.2",
     "i18next": "^26.2.0",
+    "jsdom": "^29.1.1",
     "react-i18next": "^17.0.8",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   }
 }