npm - @visns-studio/visns-components - Versions diffs - 6.32.2 → 6.34.0 - Mend

@visns-studio/visns-components 6.32.2 → 6.34.0

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 (41) hide show

package/README.md +504 -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 +353 -43
package/src/components/Notification.jsx +13 -2
package/src/components/TableFilter.jsx +14 -2
package/src/components/auth/Login.jsx +9 -2
package/src/components/auth/PasskeyEnrolPrompt.jsx +269 -0
package/src/components/auth/Profile.jsx +422 -26
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/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 +2487 -0
package/src/components/sms/SmsInbox.jsx +18 -0
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/Form.module.scss +100 -2
package/src/components/styles/Navigation.module.scss +354 -15
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 +451 -0
package/src/components/styles/StandardModal.module.scss +273 -0
package/src/components/styles/global.css +24 -5
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 +103 -1
package/src/utils/rememberTab.js +70 -0

package/src/components/utils/useShellLayout.js ADDED Viewed

@@ -0,0 +1,131 @@
+import { useSyncExternalStore } from 'react';
+/**
+ * WHICH SHELL THE APPLICATION IS WEARING, readable from anywhere.
+ *
+ * `GenericAuth` (and `GenericMain` below it) takes a `layout` prop with three
+ * values, and it decides the whole shape of the page:
+ *
+ *   'full'    — the one-line header bar across the top, content underneath.
+ *   'cms'     — a fixed sidebar rail down the left, content beside it.
+ *   'simple'  — the same rail, with the simpler content frame.
+ *
+ * The prop is threaded from GenericAuth into GenericMain into Navigation, and
+ * it stops there. Anything further down the tree — a screen mounted by the
+ * route table, a panel inside that screen — is several components away from
+ * ever being told, and the answer changes how a page wants to lay itself out:
+ * a horizontal tab strip is right on a page that already has a rail down its
+ * left, and a vertical rail beside a vertical rail is not.
+ *
+ * So the shell mirrors itself onto `<html>` as `data-layout`, exactly the way
+ * the `density` prop mirrors itself as `data-density` (see GenericAuth, and
+ * `useCardRowsEnabled` in useDensity.js for the reading half). One attribute,
+ * written once by whoever owns the page, readable by CSS and by JS without a
+ * prop being threaded through six components that do not care.
+ *
+ * ABSENT MEANS 'full'. That is not a guess dressed up as a default: 'full' is
+ * GenericAuth's own default, it is what every app that never passed the prop
+ * renders, and it is what a server render — where there is no document to read
+ * — has to answer so the markup it produces matches the markup the browser
+ * produces on hydration.
+ */
+/** The attribute GenericAuth writes on `<html>`. */
+export const SHELL_LAYOUT_ATTRIBUTE = 'data-layout';
+/** What an unset (or unrecognised) attribute means. */
+export const DEFAULT_SHELL_LAYOUT = 'full';
+/** Every layout GenericAuth accepts. */
+export const SHELL_LAYOUTS = ['full', 'cms', 'simple'];
+/** The ones that draw a navigation rail down the left edge. */
+export const SIDEBAR_SHELL_LAYOUTS = ['cms', 'simple'];
+/**
+ * A layout name, or `'full'` for anything that is not one.
+ *
+ * Unrecognised values are not passed through: the point of this module is that
+ * callers can branch on the answer without re-checking it, and a typo in a
+ * host's config should land on the layout every app already renders rather
+ * than on a fourth, undefined one.
+ *
+ * @param {string} [value]
+ * @returns {'full'|'cms'|'simple'}
+ */
+export const normaliseShellLayout = (value) =>
+    SHELL_LAYOUTS.includes(value) ? value : DEFAULT_SHELL_LAYOUT;
+/**
+ * Does this shell put its navigation in a rail down the left?
+ *
+ * The question almost every caller actually has — 'cms' and 'simple' differ in
+ * the content frame, not in where the navigation lives, and no layout decision
+ * in this library has ever needed to tell the two apart.
+ *
+ * @param {string} [layout]  A layout name; anything else counts as 'full'.
+ * @returns {boolean}
+ */
+export const isSidebarShell = (layout) =>
+    SIDEBAR_SHELL_LAYOUTS.includes(normaliseShellLayout(layout));
+/**
+ * The shell layout, read off the document once.
+ *
+ * SSR-safe: no document means 'full'. Use this in an event handler or a one-off
+ * calculation; a component that has to re-render when the attribute changes
+ * wants `useShellLayout()` instead.
+ *
+ * @returns {'full'|'cms'|'simple'}
+ */
+export const getShellLayout = () => {
+    if (typeof document === 'undefined' || !document.documentElement) {
+        return DEFAULT_SHELL_LAYOUT;
+    }
+    return normaliseShellLayout(
+        document.documentElement.getAttribute(SHELL_LAYOUT_ATTRIBUTE)
+    );
+};
+/**
+ * Notify on the attribute changing.
+ *
+ * It changes exactly once in a normal app — when GenericAuth's insertion
+ * effect runs, before the first paint — but that once is after the first
+ * render of anything mounted outside GenericAuth (a Storybook-style harness,
+ * a test), and a screen that read 'full' at that moment and never heard again
+ * would keep the wrong layout for the life of the page.
+ */
+const subscribeToShellLayout = (onChange) => {
+    if (
+        typeof document === 'undefined' ||
+        typeof MutationObserver === 'undefined' ||
+        !document.documentElement
+    ) {
+        return () => {};
+    }
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: [SHELL_LAYOUT_ATTRIBUTE],
+    });
+    return () => observer.disconnect();
+};
+/**
+ * The shell layout, as a subscription.
+ *
+ * @returns {'full'|'cms'|'simple'}
+ */
+export const useShellLayout = () =>
+    useSyncExternalStore(
+        subscribeToShellLayout,
+        getShellLayout,
+        () => DEFAULT_SHELL_LAYOUT
+    );
+export default useShellLayout;

package/src/index.js CHANGED Viewed

@@ -13,6 +13,24 @@ import {
     DENSITY_GRID,
     SECONDARY_GRID_HEIGHT,
 } from './components/utils/useDensity';
+// Which shell the app is wearing ('full' | 'cms' | 'simple'), mirrored onto
+// <html> by GenericAuth as `data-layout`. Screens below the route table read
+// it from here instead of being handed the prop.
+import {
+    getShellLayout,
+    useShellLayout,
+    isSidebarShell,
+    SHELL_LAYOUT_ATTRIBUTE,
+} from './components/utils/useShellLayout';
+// The collapsed-rail preference: remembered per browser, published on <html>
+// as `data-nav-collapsed`.
+import {
+    useNavCollapsed,
+    getNavCollapsed,
+    setNavCollapsed,
+    NAV_COLLAPSED_ATTRIBUTE,
+    NAV_COLLAPSED_STORAGE_KEY,
+} from './components/utils/navCollapsed';
 import { readBuildEnv, buildEnv } from './components/utils/buildEnv';
 // Project-wide default for how record CRUD forms are presented — the side
 // sheet unless an app calls setDefaultFormLayout('modal') at bootstrap. A
@@ -93,6 +111,11 @@ export * from './components/columns/ColumnRenderers.jsx';
 /** Auth Specific Components */
 import Login from './components/auth/Login';
 import Profile from './components/auth/Profile';
+// The enrol-once prompt. Rendered by GenericAuth when `passkeys` is on;
+// exported for a host with its own shell, or its own idea of when to ask.
+import PasskeyEnrolPrompt, {
+    PasskeyEnrolDialog,
+} from './components/auth/PasskeyEnrolPrompt';
 import Reset from './components/auth/Reset';
 import Verify from './components/auth/Verify';
 import TwoFactorAuth from './components/auth/TwoFactorAuth';
@@ -113,6 +136,7 @@ import {
     DEFAULT_CLIENT_PATHS,
     resolveAuthEndpoints,
     resolveClientPaths,
+    resolvePasskeyDestroyUrl,
 } from './components/auth/authEndpoints';
 import {
     DEFAULT_CONTACT_HINTS,
@@ -138,6 +162,31 @@ import {
     isPasskeyCancellation,
     isPasskeySupported,
 } from './components/auth/webauthn';
+import {
+    DEFAULT_PASSKEY_PROMPT_COPY,
+    DEFAULT_PASSKEY_SNOOZE_DAYS,
+    PASSKEY_PROMPT_STORAGE_PREFIX,
+    countPasskeys,
+    defaultPasskeyName,
+    isPasskeyPromptBlocked,
+    neverAskPasskeyPrompt,
+    passkeyPromptStorageKey,
+    readPasskeyPromptRecord,
+    resolvePasskeyOptions,
+    shouldPromptForPasskey,
+    snoozePasskeyPrompt,
+    writePasskeyPromptRecord,
+} from './components/auth/passkeyPrompt';
+import {
+    deletePasskey,
+    enrolPasskey,
+    listPasskeys,
+} from './components/auth/passkeyClient';
+import {
+    PASSKEYS_ATTRIBUTE,
+    getPasskeysEnabled,
+    usePasskeysEnabled,
+} from './components/utils/usePasskeysEnabled';
 import {
     CLIENT_AUTH_PROTOCOLS,
     DEFAULT_CLIENT_PROTOCOL,
@@ -223,7 +272,19 @@ import {
 // Messaging — the SMS inbox. SmsInboxBadge mounts through Navigation's
 // `renderers` slot; SmsInbox is the page behind it, SmsThreadPanel is the
-// conversation on its own for embedding elsewhere.
+// conversation on its own for embedding elsewhere. SmsCampaigns is the bulk
+// side of the same module — one message to an imported list of numbers — and
+// brings the opt-out register with it.
+import SmsCampaigns, {
+    CAMPAIGN_STATUSES,
+    DEFAULT_CAMPAIGN_SETTINGS,
+    RECIPIENT_STATUSES,
+    defaultCampaignName,
+    estimateMinutes,
+    parsePastedRecipients,
+    readSheetRows,
+    recipientsFromRecords,
+} from './components/sms/SmsCampaigns';
 import SmsClientConversations from './components/sms/SmsClientConversations';
 import SmsComposeModal from './components/sms/SmsComposeModal';
 import SmsInbox from './components/sms/SmsInbox';
@@ -434,10 +495,14 @@ export {
     VaultManager,
     VaultQuickSearch,
     VaultShareModal,
+    CAMPAIGN_STATUSES,
     clientRecipient,
     conversationCountLabel,
+    DEFAULT_CAMPAIGN_SETTINGS,
     DEFAULT_SMS_ENDPOINTS,
+    defaultCampaignName,
     describeTransport,
+    estimateMinutes,
     fillTemplate,
     groupMessagesByDay,
     initialsFor,
@@ -447,7 +512,11 @@ export {
     nextPlaceholder,
     normaliseNumberForDisplay,
     orderThreadsByRecency,
+    parsePastedRecipients,
     pickInitialThread,
+    readSheetRows,
+    recipientsFromRecords,
+    RECIPIENT_STATUSES,
     relativeTime,
     resolveSmsEndpoints,
     segmentCount,
@@ -455,6 +524,7 @@ export {
     SMS_LIMITS,
     SMS_MAX_SEGMENTS,
     SMS_STATUS_LABELS,
+    SmsCampaigns,
     SmsClientConversations,
     SmsComposeModal,
     SmsInbox,
@@ -616,6 +686,29 @@ export {
     getPasskeyCredential,
     isPasskeyCancellation,
     isPasskeySupported,
+    // The enrol-once prompt, its decision, and the three requests behind it.
+    PasskeyEnrolPrompt,
+    PasskeyEnrolDialog,
+    DEFAULT_PASSKEY_PROMPT_COPY,
+    DEFAULT_PASSKEY_SNOOZE_DAYS,
+    PASSKEY_PROMPT_STORAGE_PREFIX,
+    PASSKEYS_ATTRIBUTE,
+    countPasskeys,
+    defaultPasskeyName,
+    deletePasskey,
+    enrolPasskey,
+    getPasskeysEnabled,
+    isPasskeyPromptBlocked,
+    listPasskeys,
+    neverAskPasskeyPrompt,
+    passkeyPromptStorageKey,
+    readPasskeyPromptRecord,
+    resolvePasskeyDestroyUrl,
+    resolvePasskeyOptions,
+    shouldPromptForPasskey,
+    snoozePasskeyPrompt,
+    usePasskeysEnabled,
+    writePasskeyPromptRecord,
     SectionEditor,
     SectionGroupedReport,
     SectionTypeSelector,
@@ -637,6 +730,15 @@ export {
     twoFactorSuccessTarget,
     useAvailableHeight,
     useDensity,
+    useShellLayout,
+    getShellLayout,
+    isSidebarShell,
+    SHELL_LAYOUT_ATTRIBUTE,
+    useNavCollapsed,
+    getNavCollapsed,
+    setNavCollapsed,
+    NAV_COLLAPSED_ATTRIBUTE,
+    NAV_COLLAPSED_STORAGE_KEY,
     SECONDARY_GRID_HEIGHT,
     VariableInserter,
     verifyContactFor,

package/src/utils/rememberTab.js ADDED Viewed

@@ -0,0 +1,70 @@
+/**
+ * The open tab of a GenericDetail page, remembered in the address bar as
+ * `?tab=<filter id>`. Two pure-ish helpers over `window.location` and
+ * `window.history`, kept out of the component so `node --test` can drive them
+ * with a fake window — GenericDetail itself needs a DOM, a router and a
+ * server to mount.
+ */
+/** The query parameter the open tab is remembered in. */
+export const TAB_PARAM = 'tab';
+/**
+ * Apply `?tab=<id>` to a freshly built tab list: the named top-level filter is
+ * shown and the rest are not. Returns the list untouched when the parameter
+ * is absent, names no top-level filter, or already names the shown one.
+ *
+ * The active class is borrowed from whichever entry the config marks shown
+ * (`subactive` in most view configs, `activetab` on a simple strip) so the
+ * strip is styled exactly as a click would style it; children, where a tab
+ * has them, are left as the config wrote them — the first child is the one a
+ * click on the parent would open too.
+ */
+export const openTabFromUrl = (list) => {
+    let wanted = null;
+    try {
+        wanted = new URLSearchParams(window.location.search).get(TAB_PARAM);
+    } catch (e) {
+        return list;
+    }
+    if (!wanted || !Array.isArray(list)) return list;
+    const target = list.find((f) => f && String(f.id) === wanted);
+    if (!target || target.show) return list;
+    const shown = list.find((f) => f && f.show);
+    const activeClass = (shown && shown.class) || 'subactive';
+    return list.map((f) => {
+        const on = f === target;
+        return { ...f, show: on, active: on, class: on ? activeClass : '' };
+    });
+};
+/**
+ * Put the shown top-level tab into the address bar as `?tab=<id>`, keeping
+ * every other query parameter and the hash, through `replaceState` so no
+ * history entry is added and the router is not involved. A list with nothing
+ * shown writes nothing.
+ */
+export const writeTabToUrl = (list) => {
+    const shown = list.find((f) => f && f.show && f.id !== undefined && f.id !== null);
+    if (!shown) return;
+    try {
+        const url = new URL(window.location.href);
+        if (url.searchParams.get(TAB_PARAM) === String(shown.id)) return;
+        url.searchParams.set(TAB_PARAM, String(shown.id));
+        window.history.replaceState(window.history.state, '', `${url.pathname}${url.search}${url.hash}`);
+    } catch (e) {
+        /* A sandbox with no history object — nothing to remember into. */
+    }
+};