@visns-studio/visns-components 6.6.4 → 6.15.1

package/src/components/styles/_authShell.scss

@@ -0,0 +1,369 @@
+/**
+ * The sign-in design language, as a mixin.
+ *
+ * Login.module.scss is the original: an asymmetric two-pane split, the brand
+ * photograph on the left and the task on the right, everything driven off the
+ * consuming app's token layer with neutral fallbacks. Before 6.7.0 it was the
+ * only screen in the journey that looked like that — TwoFactorAuth, Reset and
+ * Verify were still the pre-6.1 centred `.lcontainer / .lwrap / .login` card,
+ * so signing in with 2FA meant crossing a visible design seam halfway through.
+ *
+ * The rules live here rather than in one shared module because these are CSS
+ * modules: each screen needs its own scoped copy of the class names. Every
+ * screen `@use`s this file and `@include auth-shell;` at the top of its own
+ * module, then adds only what is particular to it.
+ *
+ * Anything changed here must be mirrored in Login.module.scss, which keeps its
+ * own copy so the login screen's rendering cannot be disturbed by edits made
+ * for another screen.
+ */
+
+@use './authBrandPanel' as brand;
+
+@mixin auth-shell {
+    /* ---------------------------------------------------------------------- */
+    /* frame                                                                  */
+    /* ---------------------------------------------------------------------- */
+
+    .auth {
+        /* Local aliases only — every brand value comes from the consuming app's
+           token layer so this library stays reusable. The fallbacks are neutral
+           on purpose: a project that defines nothing gets a plain, working
+           screen rather than any one project's colours. Identical to the block
+           at the top of Login.module.scss. */
+        --ink: var(--header-color, #10192a);
+        --navy: var(--primary-color, #26364a);
+        --navy-deep: var(--primary-color-darker, #16202e);
+        --flag: var(--accent-color, #8a8f98);
+        --paper: var(--surface-color, #ffffff);
+        --warm: var(--hover-color, #f4f4f2);
+        --line: var(--border-color, #e4e1dc);
+        --muted: var(--muted-color, #6b7688);
+
+        position: fixed;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 52fr 48fr;
+        background: var(--paper);
+        /* Read from a token first so an app can put its own face on the whole
+           journey; 'Barlow' is imported by the screens themselves. */
+        font-family: var(--auth-font-family, 'Barlow', system-ui, sans-serif);
+        color: var(--ink);
+
+        @media (max-width: 900px) {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    // ---------------------------------------------------------------------
+    // brand panel — shared with the staff Login and the client split layout.
+    // See _authBrandPanel.scss; `hide` is the staff screens' collapse.
+    // ---------------------------------------------------------------------
+
+    @include brand.auth-brand-panel(hide);
+
+    /* ---------------------------------------------------------------------- */
+    /* form panel                                                             */
+    /* ---------------------------------------------------------------------- */
+
+    .panel {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem clamp(1.5rem, 5vw, 4.5rem);
+        background: var(--paper);
+        overflow-y: auto;
+
+        @media (max-width: 900px) {
+            background: linear-gradient(var(--warm), var(--paper) 22rem);
+        }
+    }
+
+    .panelInner {
+        width: 100%;
+        max-width: 24rem;
+        text-align: left;
+        animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
+        animation-delay: 0.08s;
+    }
+
+    .logo {
+        display: block;
+        width: auto;
+        height: 3.1rem;
+        margin-bottom: 2.4rem;
+    }
+
+    .title {
+        margin: 0 0 0.35rem;
+        font-size: 1.9rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        line-height: 1.1;
+    }
+
+    .subtitle {
+        margin: 0 0 2rem;
+        font-size: 0.95rem;
+        font-weight: 400;
+        color: var(--muted);
+    }
+
+    .form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.9rem;
+    }
+
+    /* Floating label: the label sits in the field until it holds something, so
+       the field is self-describing without a separate line above it. */
+    .field {
+        position: relative;
+
+        input {
+            width: 100%;
+            height: 3.35rem;
+            padding: 1.15rem 0.9rem 0.4rem;
+            border: 1px solid var(--line);
+            border-radius: 0.6rem;
+            background: var(--paper);
+            font-family: inherit;
+            font-size: 1rem;
+            color: var(--ink);
+            transition:
+                border-color 0.15s ease,
+                box-shadow 0.15s ease;
+
+            &:hover {
+                border-color: #c9c5be;
+            }
+
+            &:focus {
+                outline: none;
+                border-color: var(--navy);
+                box-shadow: 0 0 0 3px
+                    var(--focus-ring-soft, rgba(38, 54, 74, 0.16));
+            }
+
+            &:disabled {
+                background: var(--warm);
+                color: var(--muted);
+                cursor: default;
+            }
+        }
+
+        label {
+            position: absolute;
+            left: 0.95rem;
+            top: 1.05rem;
+            font-size: 1rem;
+            font-weight: 400;
+            color: var(--muted);
+            pointer-events: none;
+            transition:
+                transform 0.14s ease,
+                font-size 0.14s ease,
+                color 0.14s ease;
+            transform-origin: 0 0;
+        }
+
+        /* :not(:placeholder-shown) is why every input carries placeholder=" ". */
+        input:focus + label,
+        input:not(:placeholder-shown) + label {
+            transform: translateY(-0.72rem);
+            font-size: 0.72rem;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+            color: var(--navy);
+        }
+
+        &:has(.reveal) input {
+            padding-right: 3rem;
+        }
+    }
+
+    /* Set imperatively by the submit handlers on a failed attempt, so it is a
+       plain global class rather than a module one. */
+    :global(.inputError) {
+        border-color: var(--danger-color, #b3261e) !important;
+        box-shadow: 0 0 0 3px var(--danger-ring, rgba(179, 38, 30, 0.14)) !important;
+    }
+
+    .reveal {
+        position: absolute;
+        right: 0.55rem;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.1rem;
+        height: 2.1rem;
+        border: none;
+        border-radius: 0.4rem;
+        background: none;
+        color: var(--muted);
+        cursor: pointer;
+
+        &:hover {
+            background: var(--warm);
+            color: var(--ink);
+        }
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        margin: 0.1rem 0 0.5rem;
+    }
+
+    .link {
+        font-size: 0.88rem;
+        font-weight: 600;
+        color: var(--navy);
+        text-decoration: none;
+        background: none;
+        border: none;
+        padding: 0;
+        font-family: inherit;
+        cursor: pointer;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &:disabled {
+            color: var(--muted);
+            cursor: default;
+            text-decoration: none;
+        }
+    }
+
+    /* Primary on these screens. Unlike Login — which keeps its email button
+       outlined because SSO is the filled action above it — verifying a code or
+       setting a password is the only thing the screen asks for, so it carries
+       the fill. */
+    .submit {
+        width: 100%;
+        height: 3.1rem;
+        border: 1px solid var(--navy);
+        border-radius: 0.6rem;
+        background: var(--navy);
+        color: #fff;
+        font-family: inherit;
+        font-size: 0.95rem;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        cursor: pointer;
+        transition:
+            border-color 0.15s ease,
+            background 0.15s ease,
+            transform 0.08s ease;
+
+        &:hover:not(:disabled) {
+            background: var(--navy-deep);
+            border-color: var(--navy-deep);
+        }
+
+        &:active:not(:disabled) {
+            transform: translateY(1px);
+        }
+
+        &:focus-visible {
+            outline: 3px solid var(--focus-ring-strong, rgba(38, 54, 74, 0.3));
+            outline-offset: 2px;
+        }
+
+        &:disabled {
+            opacity: 0.65;
+            cursor: default;
+        }
+    }
+
+    /* A quiet way to a secondary path. Not a link — it performs an action on
+       this page rather than navigating anywhere. */
+    .altToggle {
+        display: block;
+        width: 100%;
+        margin-top: 1rem;
+        padding: 0.6rem;
+        border: none;
+        border-radius: 0.5rem;
+        background: none;
+        font-family: inherit;
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--navy);
+        cursor: pointer;
+
+        &:hover {
+            background: var(--warm);
+        }
+
+        &:focus-visible {
+            outline: 3px solid var(--focus-ring-strong, rgba(38, 54, 74, 0.3));
+            outline-offset: 2px;
+        }
+
+        &:disabled {
+            color: var(--muted);
+            cursor: default;
+
+            &:hover {
+                background: none;
+            }
+        }
+    }
+
+    .divider {
+        display: flex;
+        align-items: center;
+        gap: 0.9rem;
+        margin: 1.4rem 0;
+        color: var(--muted);
+        font-size: 0.78rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+
+        &::before,
+        &::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: var(--line);
+        }
+    }
+
+    /* A muted line under the form — expiry copy, "having trouble?", the sign
+       off. Never a control. */
+    .note {
+        margin: 1.4rem 0 0;
+        font-size: 0.82rem;
+        line-height: 1.5;
+        color: var(--muted);
+        text-align: left;
+    }
+
+    .foot {
+        margin: 2.5rem 0 0;
+        font-size: 0.78rem;
+        color: var(--muted);
+    }
+
+    @include brand.auth-rise-keyframes;
+
+    @media (prefers-reduced-motion: reduce) {
+        .brandInk,
+        .panelInner {
+            animation: none;
+        }
+
+        .submit,
+        .field input,
+        .field label {
+            transition: none;
+        }
+    }
+}

package/src/components/styles/global-datagrid.css

@@ -444,6 +444,8 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .visns-native-date-filter {
     position: relative;
     display: flex;
+    /* Lets the rules below react to the column's width, not the window's. */
+    container-type: inline-size;
     /* stretch, not center: the input has to fill the 32px the theme pins the
        filter to, or the clickable area is smaller than the box it draws. */
     align-items: stretch;
@@ -483,14 +485,18 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     min-width: 0;
     height: auto;
     margin: 0;
-    padding: 0 2px 0 8px;
+    padding: 0 2px 0 6px;
     border: none;
     outline: none;
     background: none;
     color: inherit;
     font-family: inherit;
-    font-size: inherit;
+    /* A notch under the grid's 14px: the locale mask is ten characters and
+       the default filter row is narrow. */
+    font-size: 13px;
+    letter-spacing: -0.01em;
     line-height: 1;
+    font-variant-numeric: tabular-nums;
     -webkit-appearance: none;
     appearance: none;
 }
@@ -516,6 +522,25 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     opacity: 1;
 }
 
+/* In a narrow column the glyph costs the last two digits of the year; the
+   field still opens the picker on click/Space, so drop the glyph first and the
+   clear button only when there is really no room. */
+@container (max-width: 128px) {
+    .visns-native-date-filter__input::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+
+    .visns-native-date-filter__input {
+        padding-right: 0;
+    }
+}
+
+@container (max-width: 104px) {
+    .visns-native-date-filter__clear {
+        display: none;
+    }
+}
+
 /* Browser-supplied clear / spin affordances are replaced by our own button,
    which is consistent across engines. */
 .visns-native-date-filter__input::-webkit-clear-button,

package/src/components/utils/buildEnv.js

@@ -0,0 +1,67 @@
+/**
+ * Build-time environment variables, whichever bundler compiled this.
+ *
+ * `import.meta.env` is Vite's interface, and two files in this library read it
+ * directly (Fetch.jsx for the payload ceiling, DataGrid.jsx for the asset
+ * path). That made the whole library Vite-only: under webpack — which is what
+ * the Next.js portal runs — `import.meta` survives the compile as a bare `{}`,
+ * so the property read threw a TypeError on the first request the app made.
+ * The portal needed a DefinePlugin shim to get past it.
+ *
+ * Both accesses here are guarded and both are wrapped, because the bundlers
+ * fail differently: one leaves `import.meta` undefined, the other leaves it an
+ * object with no `env`. Vite's behaviour is unchanged — its value is still
+ * found first and still wins.
+ *
+ * Pure module (no React, no DOM) so it can be unit-tested with `node --test`.
+ */
+
+/**
+ * Read one variable, or `undefined`.
+ *
+ * Lookup order: Vite's `import.meta.env`, then `process.env` under the name as
+ * given, then `process.env` under a `NEXT_PUBLIC_` prefix — Next.js will only
+ * expose a variable to the browser under that prefix, so a `VITE_FOO` becomes
+ * `NEXT_PUBLIC_FOO` there.
+ */
+export const readBuildEnv = (key) => {
+    try {
+        // eslint-disable-next-line no-undef
+        const meta = typeof import.meta === 'undefined' ? null : import.meta;
+        const value = meta && meta.env ? meta.env[key] : undefined;
+
+        if (value !== undefined) {
+            return value;
+        }
+    } catch (error) {
+        // No `import.meta` in this module format. Expected under a CommonJS
+        // output and under Jest; never worth reporting.
+    }
+
+    try {
+        if (typeof process !== 'undefined' && process.env) {
+            const direct = process.env[key];
+
+            if (direct !== undefined) {
+                return direct;
+            }
+
+            return process.env[
+                `NEXT_PUBLIC_${key.replace(/^(VITE_|REACT_APP_)/, '')}`
+            ];
+        }
+    } catch (error) {
+        // No `process` either. Fall through to the caller's own default.
+    }
+
+    return undefined;
+};
+
+/** `readBuildEnv` with a default for the (common) absent case. */
+export const buildEnv = (key, fallback = '') => {
+    const value = readBuildEnv(key);
+
+    return value === undefined || value === null ? fallback : value;
+};
+
+export default readBuildEnv;

package/src/components/utils/displayValue.js

@@ -0,0 +1,94 @@
+/**
+ * Small, pure display helpers shared by the generic detail page and the
+ * DataGrid column renderers.
+ *
+ * These live in their own module — with no React and no CSS import — so the
+ * rules they encode can be tested directly under `node --test` rather than
+ * inferred from a rendered tree. Every consumer of a `.jsx` in this repo has
+ * to bring a bundler with it; this file deliberately does not.
+ */
+
+/**
+ * How many items are in a value that a column is counting?
+ *
+ * The grid's `arrayCount` column reads a JSON field straight off the API
+ * payload, and what actually arrives there varies by backend and by driver:
+ * a real array, a JSON *string* that was never decoded (a `json` cast the
+ * model forgot), an object keyed by id, or null for a record that has none.
+ * A bare `value.length` handles exactly the first of those and yields
+ * `undefined` — rendered as an empty cell — for the rest, which reads as
+ * "unknown" when the truthful answer is a number.
+ *
+ * @param {*} value raw field value
+ * @returns {number} item count; 0 when there is nothing countable
+ */
+export function arrayCountFrom(value) {
+    if (Array.isArray(value)) {
+        return value.length;
+    }
+
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+
+        if (trimmed === '') {
+            return 0;
+        }
+
+        try {
+            return arrayCountFrom(JSON.parse(trimmed));
+        } catch {
+            return 0;
+        }
+    }
+
+    // A keyed object (`{"1": {...}, "2": {...}}`) is the shape PHP produces
+    // when a list's keys stop being consecutive — same list, different JSON.
+    if (value && typeof value === 'object') {
+        return Object.keys(value).length;
+    }
+
+    return 0;
+}
+
+/**
+ * Is a resolved field value one the page should show a placeholder for?
+ *
+ * `null` reaches the UI as the string "null" often enough (a stringified
+ * payload, a concatenated relation path) that treating it as content puts the
+ * literal word on the page. Zero and `false` are answers, not blanks.
+ *
+ * @param {*} value
+ * @returns {boolean}
+ */
+export function isBlankValue(value) {
+    if (value === null || value === undefined) {
+        return true;
+    }
+
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+
+        return trimmed === '' || trimmed === 'null' || trimmed === 'undefined';
+    }
+
+    return false;
+}
+
+/**
+ * The label shown above an overview value.
+ *
+ * Overview labels were written as inline run-in labels ("Label: value"), so a
+ * good number of the JSON configs carry their own trailing colon. Stacked
+ * above the value the colon is noise, and it is not something we can go and
+ * strip from every project's config — so it is normalised here, once.
+ *
+ * @param {*} label
+ * @returns {string}
+ */
+export function overviewFieldLabel(label) {
+    if (label === null || label === undefined) {
+        return '';
+    }
+
+    return String(label).trim().replace(/[:：]\s*$/, '');
+}