@micha.bigler/ui-core-micha 2.8.0 → 2.8.2

package/dist/notifications/NotificationSettings.js

@@ -3,7 +3,6 @@ import React, { useEffect, 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 Divider from '@mui/material/Divider';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -143,6 +142,6 @@ export function NotificationSettings() {
     if (loading) {
         return _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(CircularProgress, {}) });
     }
-    return (_jsxs(Box, { sx: { maxWidth: 520 }, children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, {}), t('NotificationSettings.TITLE')] }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBTITLE') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(''), children: error }), conflict && _jsx(Alert, { severity: "warning", sx: { mb: 2 }, onClose: () => setConflict(''), children: conflict }), _jsx(Box, { sx: { py: 2 }, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(preferences === null || preferences === void 0 ? void 0 : preferences.email_opt_in), onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.EMAIL_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.EMAIL_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }) }), _jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: t('NotificationSettings.PUSH_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 1.5 }, children: t('NotificationSettings.PUSH_HINT') }), iosNeedsInstall && _jsx(Alert, { severity: "info", sx: { mb: 1.5 }, children: t('NotificationSettings.IOS_HINT') }), !pushSupported && !iosNeedsInstall && _jsx(Alert, { severity: "warning", children: t('NotificationSettings.PUSH_NOT_SUPPORTED') }), pushSupported && !iosNeedsInstall && (pushSubscribed ? (_jsx(Button, { variant: "outlined", color: "error", onClick: handleDisablePush, disabled: savingPush, startIcon: savingPush ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_DISABLE') })) : (_jsx(Button, { variant: "contained", onClick: handleEnablePush, disabled: savingPush, startIcon: savingPush ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_ENABLE') })))] })] }));
+    return (_jsxs(Box, { sx: { maxWidth: 520 }, children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, {}), t('NotificationSettings.TITLE')] }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBTITLE') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(''), children: error }), conflict && _jsx(Alert, { severity: "warning", sx: { mb: 2 }, onClose: () => setConflict(''), children: conflict }), _jsx(Box, { sx: { py: 2 }, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(preferences === null || preferences === void 0 ? void 0 : preferences.email_opt_in), onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.EMAIL_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.EMAIL_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }) }), _jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [iosNeedsInstall && _jsx(Alert, { severity: "info", sx: { mb: 1.5 }, children: t('NotificationSettings.IOS_HINT') }), !pushSupported && !iosNeedsInstall && _jsx(Alert, { severity: "warning", sx: { mb: 1.5 }, children: t('NotificationSettings.PUSH_NOT_SUPPORTED') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: pushSubscribed, onChange: (event) => (event.target.checked ? handleEnablePush() : handleDisablePush()), disabled: savingPush || !pushSupported || iosNeedsInstall })), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.PUSH_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.PUSH_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } })] })] }));
 }
 export default NotificationSettings;

package/dist/onboarding/OnboardingProvider.js

@@ -61,7 +61,11 @@ function getInitialPushState() {
         && 'PushManager' in window;
     return supported ? null : { supported: false, subscribed: false };
 }
-export function OnboardingProvider({ children, extraSteps = [] }) {
+// Stable empty-object default — an inline `{}` default would create a new
+// reference every render, invalidating the `ctx` memo below for every
+// consumer even when no extraContext is passed.
+const EMPTY_EXTRA_CONTEXT = {};
+export function OnboardingProvider({ children, extraSteps = [], extraContext = EMPTY_EXTRA_CONTEXT }) {
     const { user } = useContext(AuthContext);
     const [configMap, setConfigMap] = useState({});
     const [configLoaded, setConfigLoaded] = useState(false);
@@ -146,7 +150,8 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
             return next;
         });
     }, []);
-    const ctx = useMemo(() => ({ user, pushState, emailOptedIn }), [user, pushState, emailOptedIn]);
+    // extraContext is spread last: duplicate core keys intentionally override core values, so apps should use distinct names.
+    const ctx = useMemo(() => (Object.assign({ user, pushState, emailOptedIn }, extraContext)), [user, pushState, emailOptedIn, extraContext]);
     const activeSteps = useMemo(() => {
         if (!configLoaded || !user)
             return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/notifications/NotificationSettings.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, 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 Divider from '@mui/material/Divider';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -172,15 +171,20 @@ export function NotificationSettings() {
       <Divider />
 
       <Box sx={{ py: 2 }}>
-        <Typography variant="body1" gutterBottom>{t('NotificationSettings.PUSH_LABEL')}</Typography>
-        <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1.5 }}>{t('NotificationSettings.PUSH_HINT')}</Typography>
         {iosNeedsInstall && <Alert severity="info" sx={{ mb: 1.5 }}>{t('NotificationSettings.IOS_HINT')}</Alert>}
-        {!pushSupported && !iosNeedsInstall && <Alert severity="warning">{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
-        {pushSupported && !iosNeedsInstall && (pushSubscribed ? (
-          <Button variant="outlined" color="error" onClick={handleDisablePush} disabled={savingPush} startIcon={savingPush ? <CircularProgress size={16} /> : undefined}>{t('NotificationSettings.PUSH_DISABLE')}</Button>
-        ) : (
-          <Button variant="contained" onClick={handleEnablePush} disabled={savingPush} startIcon={savingPush ? <CircularProgress size={16} /> : undefined}>{t('NotificationSettings.PUSH_ENABLE')}</Button>
-        ))}
+        {!pushSupported && !iosNeedsInstall && <Alert severity="warning" sx={{ mb: 1.5 }}>{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={pushSubscribed}
+              onChange={(event) => (event.target.checked ? handleEnablePush() : handleDisablePush())}
+              disabled={savingPush || !pushSupported || iosNeedsInstall}
+            />
+          )}
+          label={<Box><Typography variant="body1">{t('NotificationSettings.PUSH_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.PUSH_HINT')}</Typography></Box>}
+          labelPlacement="end"
+          sx={{ alignItems: 'flex-start', ml: 0 }}
+        />
       </Box>
     </Box>
   );

package/src/onboarding/OnboardingProvider.jsx

@@ -70,7 +70,12 @@ function getInitialPushState() {
   return supported ? null : { supported: false, subscribed: false };
 }
 
-export function OnboardingProvider({ children, extraSteps = [] }) {
+// Stable empty-object default — an inline `{}` default would create a new
+// reference every render, invalidating the `ctx` memo below for every
+// consumer even when no extraContext is passed.
+const EMPTY_EXTRA_CONTEXT = {};
+
+export function OnboardingProvider({ children, extraSteps = [], extraContext = EMPTY_EXTRA_CONTEXT }) {
   const { user } = useContext(AuthContext);
   const [configMap, setConfigMap] = useState({});
   const [configLoaded, setConfigLoaded] = useState(false);
@@ -162,7 +167,11 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
     });
   }, []);
 
-  const ctx = useMemo(() => ({ user, pushState, emailOptedIn }), [user, pushState, emailOptedIn]);
+  // extraContext is spread last: duplicate core keys intentionally override core values, so apps should use distinct names.
+  const ctx = useMemo(
+    () => ({ user, pushState, emailOptedIn, ...extraContext }),
+    [user, pushState, emailOptedIn, extraContext],
+  );
   const activeSteps = useMemo(() => {
     if (!configLoaded || !user) return [];
     return selectActiveSteps(descriptors, configMap, ctx, dismissedSet);

package/tests/NotificationSettings.test.jsx

@@ -49,7 +49,7 @@ describe('NotificationSettings push toggle', () => {
     vi.stubGlobal('Notification', { requestPermission: vi.fn().mockResolvedValue('granted') });
 
     render(<NotificationSettings />);
-    fireEvent.click(await screen.findByRole('button', { name: 'NotificationSettings.PUSH_ENABLE' }));
+    fireEvent.click(await screen.findByRole('switch', { name: /PUSH_LABEL/ }));
 
     await waitFor(() => expect(notificationsApi.patchNotificationPreferences).toHaveBeenCalledWith({ push_opt_in: true }));
     expect(Notification.requestPermission).toHaveBeenCalledOnce();
@@ -73,7 +73,7 @@ describe('NotificationSettings push toggle', () => {
     installPushEnvironment(subscription);
 
     render(<NotificationSettings />);
-    fireEvent.click(await screen.findByRole('button', { name: 'NotificationSettings.PUSH_DISABLE' }));
+    fireEvent.click(await screen.findByRole('switch', { name: /PUSH_LABEL/ }));
 
     await waitFor(() => expect(subscription.unsubscribe).toHaveBeenCalledOnce());
     expect(notificationsApi.removePushSubscription).toHaveBeenCalledWith({ endpoint: subscription.endpoint });

package/tests/OnboardingProvider.test.jsx

@@ -21,10 +21,22 @@ function Probe() {
   return <span data-testid="email-opted-in">{String(onboarding?.ctx.emailOptedIn)}</span>;
 }
 
-function renderProvider() {
+function ActiveStepsProbe() {
+  const onboarding = useOnboarding();
+  return <span data-testid="active-steps">{onboarding?.activeSteps.map((step) => step.id).join(',')}</span>;
+}
+
+function renderProvider({ extraContext, extraSteps, children = <Probe /> } = {}) {
   return render(
-    <AuthContext.Provider value={{ user: { id: 1 } }}>
-      <OnboardingProvider><Probe /></OnboardingProvider>
+    <AuthContext.Provider value={{
+      user: {
+        id: 1,
+        accepted_privacy_statement: true,
+        first_name: 'Ada',
+        last_name: 'Lovelace',
+      },
+    }}>
+      <OnboardingProvider extraContext={extraContext} extraSteps={extraSteps}>{children}</OnboardingProvider>
     </AuthContext.Provider>,
   );
 }
@@ -54,3 +66,43 @@ describe('OnboardingProvider notification preferences', () => {
     expect(screen.getByTestId('email-opted-in').textContent).toBe('false');
   });
 });
+
+describe('OnboardingProvider extra context', () => {
+  const unreadMessagesCondition = vi.fn((ctx) => (ctx.unreadCount || 0) > 0);
+  const unreadMessagesStep = {
+    id: 'unread_messages',
+    condition: unreadMessagesCondition,
+    persistDismissed: false,
+  };
+
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    onboardingApi.getOnboardingStepConfig.mockResolvedValue([]);
+    notificationsApi.getNotificationPreferences.mockResolvedValue({ email_opt_in: true });
+  });
+
+  it('shows an app step when its extra context condition is met', async () => {
+    renderProvider({
+      extraContext: { unreadCount: 2 },
+      extraSteps: [unreadMessagesStep],
+      children: <ActiveStepsProbe />,
+    });
+
+    await waitFor(() => expect(screen.getByTestId('active-steps').textContent).toContain('unread_messages'));
+  });
+
+  it.each([
+    ['zero', { unreadCount: 0 }],
+    ['omitted', undefined],
+  ])('does not show an app step when unreadCount is %s', async (_label, extraContext) => {
+    renderProvider({
+      extraContext,
+      extraSteps: [unreadMessagesStep],
+      children: <ActiveStepsProbe />,
+    });
+
+    await waitFor(() => expect(unreadMessagesCondition).toHaveBeenCalled());
+    expect(screen.getByTestId('active-steps').textContent).not.toContain('unread_messages');
+  });
+});