npm - @visns-studio/visns-components - Versions diffs - 6.32.3 → 6.34.3 - Mend

@visns-studio/visns-components 6.32.3 → 6.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/README.md +483 -0
package/package.json +1 -1
package/src/components/DataGrid.jsx +44 -2
package/src/components/Field.jsx +32 -0
package/src/components/Form.jsx +39 -2
package/src/components/Navigation.jsx +274 -15
package/src/components/Notification.jsx +13 -2
package/src/components/TableFilter.jsx +14 -2
package/src/components/auth/Login.jsx +11 -4
package/src/components/auth/PasskeyEnrolPrompt.jsx +269 -0
package/src/components/auth/Profile.jsx +422 -26
package/src/components/auth/Reset.jsx +1 -1
package/src/components/auth/TwoFactorAuth.jsx +1 -1
package/src/components/auth/Verify.jsx +2 -2
package/src/components/auth/authEndpoints.js +43 -0
package/src/components/auth/passkeyClient.js +102 -0
package/src/components/auth/passkeyPrompt.js +408 -0
package/src/components/auth/profileLayout.js +45 -0
package/src/components/controls/DataGridSearch.jsx +16 -2
package/src/components/controls/DataGridSortSheet.jsx +2 -0
package/src/components/emailCampaigns/BlockEditor.jsx +486 -0
package/src/components/emailCampaigns/CampaignEditor.jsx +614 -0
package/src/components/emailCampaigns/CampaignReport.jsx +98 -0
package/src/components/emailCampaigns/EmailCampaigns.jsx +422 -0
package/src/components/emailCampaigns/EmailLists.jsx +505 -0
package/src/components/emailCampaigns/emailCampaignApi.js +135 -0
package/src/components/generic/ActionButtons.jsx +1 -1
package/src/components/generic/GenericAuth.jsx +197 -21
package/src/components/generic/GenericDetail.jsx +95 -3
package/src/components/generic/GenericMain.jsx +7 -0
package/src/components/generic/StandardModal.jsx +71 -158
package/src/components/sms/SmsCampaigns.jsx +2517 -0
package/src/components/sms/SmsInbox.jsx +20 -5
package/src/components/sms/SmsLineSettings.jsx +2 -5
package/src/components/sms/SmsThreadPanel.jsx +20 -0
package/src/components/sms/smsEndpoints.js +23 -0
package/src/components/styles/DataGrid.module.scss +22 -0
package/src/components/styles/EmailCampaigns.module.scss +922 -0
package/src/components/styles/Form.module.scss +100 -2
package/src/components/styles/Navigation.module.scss +322 -5
package/src/components/styles/Notification.module.scss +140 -8
package/src/components/styles/PasskeyEnrolPrompt.module.scss +105 -0
package/src/components/styles/Profile.module.scss +157 -0
package/src/components/styles/Sms.module.scss +484 -4
package/src/components/styles/StandardModal.module.scss +273 -0
package/src/components/styles/Vault.module.scss +5 -3
package/src/components/styles/global.css +38 -7
package/src/components/utils/navCollapsed.js +201 -0
package/src/components/utils/rowActionSettings.js +76 -0
package/src/components/utils/usePasskeysEnabled.js +84 -0
package/src/components/utils/useShellLayout.js +131 -0
package/src/index.js +107 -1
package/src/utils/rememberTab.js +70 -0

package/src/components/Navigation.jsx CHANGED Viewed

@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, {
+    useEffect,
+    useInsertionEffect,
+    useRef,
+    useState,
+    useCallback,
+} from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     AudioLines,
@@ -26,6 +32,8 @@ import {
     Lock,
     MessageSquare,
     MessagesSquare,
+    PanelLeftClose,
+    PanelLeftOpen,
     TrendingUp,
 } from 'lucide-react';
 import CustomFetch from './Fetch';
@@ -40,6 +48,13 @@ import {
     DEFAULT_BADGE_TONE,
 } from './navBadges';
 import { drawerRows } from './navDrawer';
+// The collapsed-rail preference: remembered in localStorage, published on
+// <html> as `data-nav-collapsed`. See utils/navCollapsed.js.
+import {
+    applyNavCollapsed,
+    getStoredNavCollapsed,
+    storeNavCollapsed,
+} from './utils/navCollapsed';
 import styles from './styles/Navigation.module.scss';
 /**
@@ -444,6 +459,16 @@ function Navigation({
      * shared bar has no way to know any of it.
      */
     badges = {},
+    /*
+     * The square brand mark for the collapsed rail, if the project has one.
+     *
+     * `logo` is a wide lock-up — a mark plus a wordmark — and there is no room
+     * for a wordmark in a 64px strip. Passing nothing is fine and is the
+     * default: the logo plate then holds the collapse toggle alone, which
+     * reads as deliberate in a way a wordmark cropped to its first two letters
+     * does not.
+     */
+    collapsedLogo,
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -463,6 +488,65 @@ function Navigation({
     const isNarrow = useMediaQuery(DRAWER_BREAKPOINT);
     const isCoarsePointer = useMediaQuery(COARSE_POINTER);
+    /*
+     * THE COLLAPSED RAIL.
+     *
+     * Only the sidebar layouts have a rail to collapse; the header bar is
+     * untouched by every line below, and writes no attribute.
+     *
+     * The initial value is read from localStorage in a LAZY INITIALISER, not
+     * in an effect. An effect runs after the first paint, so the rail would
+     * render 216px wide, the content would lay out beside it, and both would
+     * then jump — which is exactly the flash a remembered layout preference
+     * exists to avoid.
+     */
+    const isRailLayout = layout === 'simple' || layout === 'cms';
+    const [collapsed, setCollapsed] = useState(() =>
+        isRailLayout ? getStoredNavCollapsed() : false
+    );
+    /*
+     * Below 1024px the rail IS the drawer — a panel that slides over the page
+     * and is dismissed by tapping the backdrop — so there is nothing to
+     * collapse and nothing the extra width is being taken from. The state is
+     * kept (widening the window restores what the user chose); it simply does
+     * not apply.
+     */
+    const railCollapsed = isRailLayout && collapsed && !isNarrow;
+    /*
+     * Publish it on <html>, the way GenericAuth publishes `data-layout` and
+     * `data-density` — so the rail's own stylesheet, and a consuming app's,
+     * key off one attribute rather than off a class threaded through the tree.
+     * `useInsertionEffect` so the width is in place before the first paint.
+     */
+    useInsertionEffect(() => {
+        if (!isRailLayout) {
+            return undefined;
+        }
+        applyNavCollapsed(railCollapsed);
+        return () => applyNavCollapsed(false);
+    }, [isRailLayout, railCollapsed]);
+    /**
+     * Collapse, or expand. The preference is remembered against the browser,
+     * not the account: it is about this screen and this window.
+     */
+    /** The toggle is an icon in both states, so it is named in both. */
+    const collapseLabel = railCollapsed ? 'Expand menu' : 'Collapse menu';
+    const toggleCollapsed = useCallback(() => {
+        setCollapsed((previous) => {
+            const next = !previous;
+            storeNavCollapsed(next);
+            return next;
+        });
+    }, []);
     // The mobile drawer is a full-viewport fixed overlay; without a scroll
     // lock the page behind it keeps scrolling under the user's thumb.
     useEffect(() => {
@@ -675,6 +759,36 @@ function Navigation({
         const labelVar = { '--nav-action-label': JSON.stringify(label) };
         const IconComponent = SETTING_ICONS[n.icon];
+        /*
+         * The same tooltip the header chips carry, placed to the RIGHT of the
+         * rail and drawn only while the rail is collapsed — see the note in
+         * `renderNav`, which does this for the nav rows above these. Profile
+         * and Logout now behave like the bell, which was the only labelled
+         * thing in the rail. `actionLabel` already falls back to the humanised
+         * id, so a settings entry with no label of its own still says
+         * something.
+         */
+        const railTooltip =
+            railCollapsed && label
+                ? {
+                      'data-tooltip-id': 'system-tooltip',
+                      'data-tooltip-place': 'right',
+                      'data-tooltip-content': label,
+                  }
+                : {};
+        // Same fallback the nav rows use: an action with no icon would
+        // collapse to an empty square, so it shows its initial instead.
+        const railInitial =
+            railCollapsed && !IconComponent && label
+                ? String(label).trim().charAt(0).toUpperCase()
+                : '';
+        const railInitialMark = railInitial ? (
+            <span className={styles['nav-initial']} aria-hidden="true">
+                {railInitial}
+            </span>
+        ) : null;
         // Same slot as the header's, publishing the row label the same way a
         // mounted component gets one (see the note above renderRailSetting).
         if (typeof renderers[n.id] === 'function') {
@@ -692,7 +806,14 @@ function Navigation({
         if (n.id === 'notifications') {
             return (
                 <li style={labelVar}>
-                    <Notification setSystemAuth={setSystemAuth} />
+                    {/* The bell draws its own trigger, so the placement is
+                        the one thing it has to be told: its tooltip is
+                        hard-placed below the chip for the header bar, and
+                        below a row in a rail is on top of the next row. */}
+                    <Notification
+                        setSystemAuth={setSystemAuth}
+                        tooltipPlace="right"
+                    />
                 </li>
             );
         } else if (n.id === 'businessCardOcr') {
@@ -702,9 +823,11 @@ function Navigation({
                         onClick={() => setShowBusinessCardOcr(true)}
                         className={activeClass}
                         type="button"
+                        aria-label={label}
+                        {...railTooltip}
                     >
                         <CreditCard size={19} strokeWidth={2} />
-                        <span>{label}</span>
+                        <span className={styles['nav-label']}>{label}</span>
                     </button>
                 </li>
             );
@@ -725,11 +848,14 @@ function Navigation({
                         onClick={handleLogout}
                         className={activeClass}
                         type="button"
+                        aria-label={label}
+                        {...railTooltip}
                     >
                         {IconComponent && (
                             <IconComponent size={19} strokeWidth={2} />
                         )}
-                        <span>{label}</span>
+                        {railInitialMark}
+                        <span className={styles['nav-label']}>{label}</span>
                     </button>
                 </li>
             );
@@ -741,6 +867,8 @@ function Navigation({
                     to={n.url}
                     className={`${activeClass}`}
                     target={n.target ? n.target : '_self'}
+                    aria-label={label}
+                    {...railTooltip}
                     // The rail is the mobile drawer below 1024px; navigating
                     // from it has to close the drawer, as the nav list does.
                     onClick={() => setOpen(false)}
@@ -748,7 +876,8 @@ function Navigation({
                     {IconComponent && (
                         <IconComponent size={19} strokeWidth={2} />
                     )}
-                    <span>{label}</span>
+                    {railInitialMark}
+                    <span className={styles['nav-label']}>{label}</span>
                 </Link>
             </li>
         );
@@ -847,10 +976,42 @@ function Navigation({
     const renderNav = (n) => {
         let navItemClasses;
-        const NavItemIcon =
-            layout === 'simple' || layout === 'cms'
-                ? NAV_ICONS[n.icon || n.id]
-                : undefined;
+        const NavItemIcon = isRailLayout
+            ? NAV_ICONS[n.icon || n.id]
+            : undefined;
+        /*
+         * The rail's rows get the same tooltip every account chip in the
+         * header has always had — `data-tooltip-*` read by the one
+         * `<Tooltip id="system-tooltip">` GenericAuth mounts.
+         *
+         * ONLY WHILE COLLAPSED, and that is the whole point of it: an icon
+         * strip is unreadable without one, and a tooltip repeating a label
+         * that is already printed six pixels to its right is noise. The
+         * attributes are omitted rather than the tooltip disabled — react-
+         * tooltip shows nothing for an anchor with no `data-tooltip-content`.
+         *
+         * `place="right"`, not the header's "bottom": a tooltip under a row
+         * in a vertical list covers the next row, which is the one you are
+         * about to read. To the right of the rail it covers page content
+         * nobody is pointing at.
+         *
+         * No `title` attribute anywhere near this — the native tooltip and
+         * react-tooltip both fire, half a second apart, and you get the label
+         * twice in two different boxes.
+         *
+         * Spread as an object rather than written inline so the HEADER layout
+         * renders exactly the attributes it rendered before: on `full` this
+         * is empty and nothing is added.
+         */
+        const railTooltip =
+            railCollapsed && n.label
+                ? {
+                      'data-tooltip-id': 'system-tooltip',
+                      'data-tooltip-place': 'right',
+                      'data-tooltip-content': n.label,
+                  }
+                : {};
         if (n.class.includes('active')) {
             navItemClasses =
@@ -939,10 +1100,45 @@ function Navigation({
          */
         const itemBadge = navBadge(badges, n);
         const ariaLabel = badgeAriaLabel(n.label, itemBadge);
+        /*
+         * The label, wrapped in a span ONLY WHILE THE RAIL IS COLLAPSED.
+         *
+         * A collapsed row shows its icon alone, and a bare text node cannot be
+         * hidden — only deleted, which takes the row's accessible name with
+         * it. Wrapped, it is clipped to a pixel and stays in the accessibility
+         * tree where the screen reader and the tooltip both still find it.
+         *
+         * CONDITIONAL, not permanent, and that is the whole lesson of the
+         * first attempt: this rail's own stylesheet styles `span` as a
+         * DESCENDANT of `.nav-item` — the rule was written for the group
+         * heading, which used to be a `<span>` — so an unconditional wrapper
+         * turned every expanded row into a `--primary-color` block with 1.25em
+         * of padding and squeezed the icon beside it to nothing. Emitting the
+         * bare text node when expanded, exactly as before, means there is no
+         * selector to audit: the expanded rail renders what it has always
+         * rendered, in both layouts.
+         *
+         * An item with no icon would collapse to an empty square, so it falls
+         * back to the first letter of its label in the icon's slot — again
+         * only while collapsed, where it is the only thing in the row.
+         */
+        const railInitial =
+            railCollapsed && !NavItemIcon && n.label
+                ? String(n.label).trim().charAt(0).toUpperCase()
+                : '';
         const contents = (
             <>
                 {NavItemIcon ? <NavItemIcon size={18} /> : null}
-                {n.label}
+                {railInitial ? (
+                    <span className={styles['nav-initial']} aria-hidden="true">
+                        {railInitial}
+                    </span>
+                ) : null}
+                {railCollapsed ? (
+                    <span className={styles['nav-label']}>{n.label}</span>
+                ) : (
+                    n.label
+                )}
                 <BadgePill badge={itemBadge} />
             </>
         );
@@ -953,7 +1149,7 @@ function Navigation({
                 onMouseEnter={handlePin}
                 onFocus={handlePin}
             >
-                {n.url && !(hasChildren && isCoarsePointer) ? (
+                {n.url && !(hasChildren && (isCoarsePointer || railCollapsed)) ? (
                     // Close the mobile drawer when navigating; no-op for the
                     // header layout where the drawer state is never opened.
                     //
@@ -971,6 +1167,7 @@ function Navigation({
                         to={n.url}
                         aria-label={ariaLabel}
                         onClick={() => setOpen(false)}
+                        {...railTooltip}
                     >
                         {contents}
                     </Link>
@@ -1020,6 +1217,28 @@ function Navigation({
                            since a fixed panel has no position of its own until
                            somebody measures the item for it. */
                         onClick={(e) => {
+                            /*
+                             * COLLAPSED: there is nowhere for a submenu to go.
+                             * A 64px strip cannot hold a list of child labels,
+                             * and a flyout anchored to a row is a second
+                             * floating surface with its own placement,
+                             * clipping and dismissal problems. Expanding the
+                             * rail is the simple answer that cannot go wrong:
+                             * the group is then an ordinary heading in an
+                             * ordinary rail, and the next hover opens it.
+                             *
+                             * `n.url` groups take this path too while
+                             * collapsed (see the branch condition above) —
+                             * otherwise the tap would navigate to the parent
+                             * page and the children would be unreachable
+                             * without expanding the rail by hand.
+                             */
+                            if (railCollapsed) {
+                                toggleCollapsed();
+                                return;
+                            }
                             if (isCoarsePointer) {
                                 const next = openGroup === n.id ? null : n.id;
                                 setOpenGroup(next);
@@ -1035,11 +1254,14 @@ function Navigation({
                                 e.currentTarget.blur();
                             }
                         }}
+                        {...railTooltip}
                     >
                         {contents}
                     </button>
                 ) : (
-                    <span aria-label={ariaLabel}>{contents}</span>
+                    <span aria-label={ariaLabel} {...railTooltip}>
+                        {contents}
+                    </span>
                 )}
                 {renderChildren()}
             </li>
@@ -1514,18 +1736,55 @@ function Navigation({
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
             <aside
+                id="nav-rail"
                 className={[
                     styles['aside--cms'],
                     isOpen ? styles['aside--cms--open'] : '',
                     actionsInSidebar ? styles['aside--cms--rail'] : '',
+                    railCollapsed ? styles['aside--cms--collapsed'] : '',
                 ]
                     .filter(Boolean)
                     .join(' ')}
             >
                 <div className={styles.logo}>
-                    <Link to="/">
-                        <img src={logo} alt="System Logo" />
-                    </Link>
+                    {/* A square mark for the 64px strip when the project has
+                        one. With none, the plate holds the collapse toggle
+                        alone — a wide lock-up cropped to its first two letters
+                        is worse than no logo, and the plate is still the
+                        brand-coloured band it always was. */}
+                    {railCollapsed && !collapsedLogo ? null : (
+                        <Link to="/">
+                            <img
+                                src={
+                                    railCollapsed && collapsedLogo
+                                        ? collapsedLogo
+                                        : logo
+                                }
+                                alt="System Logo"
+                            />
+                        </Link>
+                    )}
+                    {/* Desktop only — below 1024px the rail is a drawer and
+                        there is no width to reclaim. Hidden in CSS as well,
+                        because `isNarrow` resolves from a media query that
+                        answers `false` for one render on a cold load. */}
+                    <button
+                        type="button"
+                        className={styles['rail-toggle']}
+                        aria-expanded={!railCollapsed}
+                        aria-controls="nav-rail"
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-place="right"
+                        data-tooltip-content={collapseLabel}
+                        aria-label={collapseLabel}
+                        onClick={toggleCollapsed}
+                    >
+                        {railCollapsed ? (
+                            <PanelLeftOpen size={18} strokeWidth={2} />
+                        ) : (
+                            <PanelLeftClose size={18} strokeWidth={2} />
+                        )}
+                    </button>
                 </div>
                 <div className={styles.awrap}>
                     <nav className={styles.navwrap} ref={navWrapRef}>

package/src/components/Notification.jsx CHANGED Viewed

@@ -100,7 +100,18 @@ function Notification(props) {
     const [show, setShow] = useState(false);
     const [loading, setLoading] = useState(false);
     const [processingIds, setProcessingIds] = useState([]);
-    const { setSystemAuth, echo = null, channel = null } = props;
+    const {
+        setSystemAuth,
+        echo = null,
+        channel = null,
+        /**
+         * Where the trigger's tooltip opens. 'bottom' is the header chip,
+         * which is what this has always been and what every existing mount
+         * keeps. The sidebar rail passes 'right': below a row in a vertical
+         * list is on top of the next row.
+         */
+        tooltipPlace = 'bottom',
+    } = props;
     // Live means *confirmed*: Echo hands back a channel object long before
     // /broadcasting/auth has approved it, and treating that as live is how a
@@ -451,7 +462,7 @@ function Notification(props) {
                 className={styles.notificationTrigger}
                 onClick={toggleNotification}
                 data-tooltip-id="system-tooltip"
-                data-tooltip-place="bottom"
+                data-tooltip-place={tooltipPlace}
                 data-tooltip-content="Notifications"
                 aria-label="Notifications"
             >

package/src/components/TableFilter.jsx CHANGED Viewed

@@ -34,8 +34,10 @@ function TableFilter({
     // `.flatFilter` block in the stylesheet), promoted to an opt-in.
     //
     // A vertical rail spends a fifth of the page on navigation. Detail pages
-    // now ask for the strip unconditionally (see GenericDetail); index pages
-    // and Profile still get the rail, so the default here is unchanged.
+    // now ask for the strip unconditionally (see GenericDetail); Profile asks
+    // for it on the sidebar shells and keeps the rail on the header-bar one
+    // (see auth/profileLayout.js); index pages still get the rail unless the
+    // host says otherwise. The default here is unchanged.
     //
     // In this variant the strip also carries real tab semantics — tablist /
     // tab / aria-selected, one tab stop for the whole strip, and arrow keys to
@@ -565,6 +567,14 @@ function TableFilter({
               }
             : { 'aria-current': isSelected ? 'page' : undefined };
+        // The strip's own tooltip. A tab's label is a noun ("Documents") and
+        // what a reader wants back from a hover is the verb — which verb it is
+        // depends on whether they are standing on it already. Both branches
+        // below carry it: a detail page's strip renders the anchor and an
+        // index page's `simple` strip the button, and one strip must not
+        // answer a hover differently depending on where it is drawn.
+        const hint = isSelected ? `You are on ${d.label}` : `Show ${d.label}`;
         if (type === 'simple') {
             return (
                 <li className={styles[d.class]}>
@@ -574,6 +584,7 @@ function TableFilter({
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
                         data-active={isSelected ? 'true' : undefined}
+                        title={hint}
                         onClick={filterTable}
                         {...a11y}
                     >
@@ -591,6 +602,7 @@ function TableFilter({
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
                         data-active={isSelected ? 'true' : undefined}
+                        title={hint}
                         onClick={filterTable}
                         className={parentClass}
                         {...a11y}

package/src/components/auth/Login.jsx CHANGED Viewed

@@ -266,7 +266,14 @@ const Login = ({
                 // Stays pending: GenericAuth's curtain takes over from here,
                 // and a button snapping back to idle underneath it reads as
                 // "nothing happened".
-                setSystemAuth(true);
+                //
+                // The second argument says HOW this sign-in happened.
+                // GenericAuth uses it to decide whether to offer a passkey
+                // afterwards — and offering one to somebody who just used one
+                // is the one thing that offer must never do. A host passing a
+                // plain `useState` setter here ignores the extra argument, so
+                // this is safe for every existing caller.
+                setSystemAuth(true, { method: 'passkey' });
             }
         } catch (error) {
             setIsPasskeyPending(false);
@@ -383,7 +390,7 @@ const Login = ({
                                 // profile check performs the one navigation
                                 // to '/'. Navigating here as well produced a
                                 // double route change and a visible flicker.
-                                setSystemAuth(true);
+                                setSystemAuth(true, { method: 'password' });
                             }
                         }
                     } else {
@@ -517,7 +524,7 @@ const Login = ({
                                   value={auth.email}
                                   onChange={handleChange}
                                   tabIndex="1"
-                                  className={authClass.username}
+                                  className={`visns-auth-input ${authClass.username}`.trim()}
                                   autoComplete="username"
                                   placeholder=" "
                                   disabled={isBusy}
@@ -533,7 +540,7 @@ const Login = ({
                                   value={auth.password}
                                   onChange={handleChange}
                                   tabIndex="2"
-                                  className={authClass.password}
+                                  className={`visns-auth-input ${authClass.password}`.trim()}
                                   autoComplete="current-password"
                                   placeholder=" "
                                   disabled={isBusy}