@visns-studio/visns-components 6.31.2 → 6.32.1

package/README.md

@@ -9,6 +9,53 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.32.1)
+
+### Boxed overview: one card per section, no note accent
+
+Follow-up to 6.32.0's opt-in boxed overview. The tinted heading bar alone did
+not separate sections once every field was a box, so in boxed mode each
+section is now its own bordered card with its heading as the card's header
+strip — Transport and PPE Requirement read as two things rather than one long
+run of boxes. Note-shaped fields (Description, Comments) are ordinary fields
+here too: the same neutral border as every other box, with no accent colour.
+Plain mode renders byte-identical markup; nothing changes for apps that did
+not opt in.
+
+## Recent Updates (v6.32.0)
+
+### The pre-6.15 boxed overview is back, as an opt-in
+
+6.15.0 rebuilt the `GenericDetail` overview tab: one card per section, fields
+as stacked label-above-value pairs on a two-column grid, the heading
+left-aligned on a hairline. That stays the default. But a project whose users
+read their detail pages as a grid of discrete facts — every field in its own
+tinted, bordered box with a run-in `Label: value`, under a centred tinted
+heading bar — can now ask for the old treatment back across the whole app,
+the same way `setDefaultFormLayout` works:
+
+```jsx
+import { setDefaultOverviewStyle } from '@visns-studio/visns-components';
+
+setDefaultOverviewStyle('boxed'); // once, at bootstrap, before the first render
+```
+
+A single page can go the other way, or opt in on its own, from its view
+config: `"page": { "overviewStyle": "boxed" }` — or `"plain"` — wins over the
+project default. `'plain'` is the shipped default, so an app that calls
+nothing is completely unchanged. `getDefaultOverviewStyle()` is exported too.
+
+### The title bar's counts no longer run together
+
+`GenericIndex` prints each `page.tableInfo.heading` and the "N total" count as
+its own span in the title bar. Until 6.15.0 those spans carried their own
+spacing — `[0 Enquiry Generated Today] ` — and when the brackets were retired
+the only space between them went with them, so a leads page read
+"0 Enquiry Generated Today0 Enquiry with Follow Ups79 total". The tab-strip and
+embedded rows already laid the same node out as a flex row with a 0.75rem gap;
+the `.crmtitle` / `.crmtitleSimple` bar now does the same (wrapping when the
+bar is narrow). CSS only; no markup or config change.
+
 ## Recent Updates (v6.31.2)
 
 ### `MergeEntity` compares the two records it is actually merging

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.31.2",
+    "version": "6.32.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/generic/GenericDetail.jsx

@@ -48,6 +48,7 @@ import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
 import fetchUtil from '../../utils/fetchUtil';
 import { resolveFormVariant } from '../../utils/formLayout';
+import { resolveOverviewStyle } from '../../utils/overviewStyle';
 import {
     CheckCircle as CircleCheck,
     Copy,
@@ -290,6 +291,31 @@ function GenericDetail({
     const actionPlacement = resolveEditPlacement(setting, editPlacement);
     const drawActionsInHeader = isHeaderPlacement(actionPlacement);
 
+    /**
+     * `'plain'` (the 6.15 card) unless this page's config asks for the older
+     * boxed fields, or the app set `setDefaultOverviewStyle('boxed')` at
+     * bootstrap. Resolved once per render so every section of the overview
+     * draws the same way.
+     */
+    const overviewStyle = resolveOverviewStyle(page?.overviewStyle);
+    const overviewIsBoxed = overviewStyle === 'boxed';
+
+    /**
+     * How one overview section is wrapped.
+     *
+     * Boxed mode draws every section as its own card, so it needs a real
+     * element around the heading and the field list. Plain mode must NOT gain
+     * one: its rules are written as `.gridtxt > ul.customer__overview`, and a
+     * wrapper would stop the list being a direct child — so it keeps the
+     * `React.Fragment` it has always used and its markup is unchanged. A
+     * Fragment accepts `key` but nothing else, hence the separate props
+     * object rather than a className passed unconditionally.
+     */
+    const SectionWrap = overviewIsBoxed ? 'section' : React.Fragment;
+    const sectionWrapProps = overviewIsBoxed
+        ? { className: styles.gridtxt__section }
+        : {};
+
     /** Fileupload states */
     const [files, setFiles] = useState([]);
 
@@ -2921,11 +2947,18 @@ function GenericDetail({
                                         </div>
                                     ) : (
                                         // Show the regular overview when not editing
-                                        <div className={styles.gridtxt}>
+                                        <div
+                                            className={
+                                                overviewIsBoxed
+                                                    ? `${styles.gridtxt} ${styles['gridtxt--boxed']}`
+                                                    : styles.gridtxt
+                                            }
+                                        >
                                             {activeTabConfig.sections.map(
                                                 (section, sectionIndex) => (
-                                                    <React.Fragment
+                                                    <SectionWrap
                                                         key={`section-${activeTabConfig.id}-${sectionIndex}`}
+                                                        {...sectionWrapProps}
                                                     >
                                                         <div
                                                             className={
@@ -3095,16 +3128,33 @@ function GenericDetail({
                                                                                         liClass
                                                                                     }
                                                                                 >
+                                                                                    {/* `overviewFieldLabel` strips
+                                                                                        the trailing colon a lot of
+                                                                                        configs still carry, because
+                                                                                        stacked above the value it is
+                                                                                        noise. Boxed fields read as a
+                                                                                        run-in "Label: value", so the
+                                                                                        colon is put back here — from
+                                                                                        one place, whatever the config
+                                                                                        wrote. */}
                                                                                     {item.label && (
-                                                                                        <strong
-                                                                                            className={
-                                                                                                styles.overviewLabel
-                                                                                            }
-                                                                                        >
-                                                                                            {overviewFieldLabel(
-                                                                                                item.label
-                                                                                            )}
-                                                                                        </strong>
+                                                                                        <>
+                                                                                            <strong
+                                                                                                className={
+                                                                                                    styles.overviewLabel
+                                                                                                }
+                                                                                            >
+                                                                                                {overviewFieldLabel(
+                                                                                                    item.label
+                                                                                                )}
+                                                                                                {overviewIsBoxed
+                                                                                                    ? ':'
+                                                                                                    : ''}
+                                                                                            </strong>
+                                                                                            {overviewIsBoxed
+                                                                                                ? ' '
+                                                                                                : null}
+                                                                                        </>
                                                                                     )}
                                                                                     <span
                                                                                         className={
@@ -3121,7 +3171,7 @@ function GenericDetail({
                                                                     )}
                                                                 </ul>
                                                             )}
-                                                    </React.Fragment>
+                                                    </SectionWrap>
                                                 )
                                             )}
                                         </div>

package/src/components/styles/GenericDetail.module.scss

@@ -473,6 +473,172 @@
     color: var(--muted-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.45));
 }
 
+/* ==========================================================================
+   The boxed overview — opt-in, and only opt-in.
+   --------------------------------------------------------------------------
+   The 6.15 rework above is the default and stays the default. But one team
+   reads their detail pages as a grid of discrete facts, not as a card of
+   pairs, and asked for the pre-6.15 treatment back: every field in its own
+   tinted, bordered box with a run-in "Label: value", under a centred tinted
+   heading bar. Rather than fork the component, an app calls
+   `setDefaultOverviewStyle('boxed')` at bootstrap (or a single page sets
+   `page.overviewStyle`), GenericDetail adds `.gridtxt--boxed`, and these
+   rules put the 5.26 geometry back.
+
+   Each section is also its own card here, wrapped in `.gridtxt__section`.
+   The tinted heading bar on its own was enough to separate sections while the
+   fields below it were plain stacked pairs, but once every field is a tinted,
+   bordered box the bar reads as one more box in the run: bar, boxes, bar,
+   boxes, all inside a single panel, with nothing saying where Transport ends
+   and PPE Requirement begins. So the section gets a bordered card and the
+   heading becomes that card's header strip — square, full-bleed, hairline
+   underneath. Plain mode keeps emitting the header and the `<ul>` as direct
+   children of `.gridtxt` (the rules above depend on it), so every selector
+   below reaches through `> .gridtxt__section >` and only boxed markup has
+   one.
+
+   One thing from 5.26 is deliberately NOT restored: the red accent on a
+   `.notecolor` field. Description and Comments are ordinary fields here too,
+   and the brand red read as an error on a page with nothing wrong — the same
+   reasoning that removed it from the plain overview. There is no boxed
+   `.notecolor` rule below because there does not need to be: the generic
+   boxed `li` rule is `.gridtxt.gridtxt--boxed > .gridtxt__section >
+   ul.customer__overview li` (0,4,2) and the plain accent it has to beat is
+   `.gridtxt > ul .notecolor` (0,2,1), so a note field simply takes the same
+   neutral border and tint as every other box.
+
+   Specificity is doing real work here. The rules being undone are
+   `.gridtxt > ul.customer__overview li` above AND the bare `.overviewLabel` /
+   `.gridtxt__header` in the 2026 pass at the bottom of the file, which win on
+   source order — so every selector below doubles up the class
+   (`.gridtxt.gridtxt--boxed …`) or qualifies the target with the modifier,
+   and nothing here relies on being later in the file.
+
+   Token fallbacks are literal for the same reason they are everywhere else in
+   this file: a bare var() for a token the host has not declared is invalid at
+   computed-value time and the declaration is simply dropped. */
+
+/* The panel's own inset is dialled back once the sections are cards: the tab
+   card already pads, and `.gridtxt`'s 1rem/1.5rem on top of a card border on
+   top of the `<ul>`'s 0.85rem stacked three insets between the panel edge and
+   the first field. Small but not zero — the cards still need to sit off the
+   panel border. */
+.gridtxt.gridtxt--boxed {
+    padding: var(--spacing-sm, 0.5rem);
+}
+
+/* One section, one card. `overflow: hidden` is what lets the square heading
+   strip below sit flush inside the rounded corners. */
+.gridtxt.gridtxt--boxed > .gridtxt__section {
+    display: block;
+    box-sizing: border-box;
+    background: var(--surface-color, #fff);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.12);
+    border-radius: var(--br, 5px);
+    overflow: hidden;
+    margin: 0 0 var(--spacing-md, 1rem);
+}
+
+.gridtxt.gridtxt--boxed > .gridtxt__section:last-child {
+    margin-bottom: 0;
+}
+
+/* The heading, back to a centred tinted bar — and now the card's header
+   strip, so it runs the full width with square corners and a hairline under
+   it. `display: flex` is kept so a section's optional `.gridtxt__meta` still
+   renders; it is centred with the title rather than pushed to the far edge,
+   since there is no edge to push to once the bar is tinted. */
+.gridtxt.gridtxt--boxed > .gridtxt__section > .gridtxt__header {
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    gap: 0;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
+    border-radius: 0;
+    margin-bottom: 0;
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
+    font-size: var(--font-size-md, 0.9rem);
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: none;
+    text-align: center;
+    color: var(--paragraph-color, #221e33);
+}
+
+/* The meta sits beside the centred title, not opposite it, so it needs its own
+   small gap where the header's `space-between` used to provide one. */
+.gridtxt.gridtxt--boxed > .gridtxt__section > .gridtxt__header > .gridtxt__meta {
+    margin-left: var(--spacing-sm, 0.5rem);
+}
+
+/* A wrapping row of boxes, not a two-column grid: a full-width field can then
+   sit between two half-width ones without leaving a hole in a grid track. */
+.gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
+}
+
+/* The box itself. `display: block` is the whole point — the label and the
+   value are inline text in one paragraph, not two stacked rows. */
+.gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview li {
+    width: auto;
+    flex: 0 0 calc(50% - 10px);
+    min-width: 0;
+    display: block;
+    box-sizing: border-box;
+    padding: 0.65rem;
+    margin: 3px;
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.095);
+    border-radius: var(--br, 5px);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.015);
+    color: var(--paragraph-color, #221e33);
+    font-size: 0.85rem;
+    line-height: 1.45;
+}
+
+.gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview .fw-grid-item {
+    flex: 0 0 calc(100% - 10px);
+    grid-column: auto;
+}
+
+/* Run-in label: ordinary bold text with a colon after it, not the eyebrow the
+   stacked layout wears. */
+.gridtxt--boxed .overviewLabel {
+    display: inline;
+    font-size: 0.85rem;
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: none;
+    line-height: inherit;
+    color: var(--paragraph-color, #221e33);
+}
+
+.gridtxt--boxed .overviewValue {
+    display: inline;
+    font-size: 0.85rem;
+    line-height: inherit;
+}
+
+/* One column on a phone — half of a narrow screen is not a readable box. */
+@media (max-width: 759px) {
+    .gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview li,
+    .gridtxt.gridtxt--boxed > .gridtxt__section > ul.customer__overview .fw-grid-item {
+        flex: 0 0 calc(100% - 10px);
+    }
+}
+
 .progress {
     width: 100%;
     display: block;

package/src/components/styles/GenericIndex.module.scss

@@ -881,6 +881,16 @@
         position: static;
         width: max-content;
         flex: 0 0 auto;
+        /* Each `tableInfo` heading and the "N total" count is its own span.
+           Until 6.15.0 they were spaced by their own text — "[0 Today] " —
+           and when the brackets went, so did the only space between them,
+           so "0 Today0 Follow Ups79 total" ran together. The tab-strip and
+           embedded rows below already lay the same node out as a flex row;
+           the title bar now does too. */
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        gap: 0.75rem;
     }
 
     .titleInfo span {

package/src/index.js

@@ -22,6 +22,14 @@ import {
     getDefaultFormLayout,
     resolveFormVariant,
 } from './utils/formLayout';
+// Project-wide default for how a detail page's overview fields are drawn — the
+// 6.15 card unless an app calls setDefaultOverviewStyle('boxed') at bootstrap.
+// A page config's own `page.overviewStyle` still wins.
+import {
+    setDefaultOverviewStyle,
+    getDefaultOverviewStyle,
+    resolveOverviewStyle,
+} from './utils/overviewStyle';
 
 /** CRM Components */
 import AsyncSelect from './components/AsyncSelect';
@@ -550,6 +558,7 @@ export {
     GenericReport,
     GenericSort,
     getDefaultFormLayout,
+    getDefaultOverviewStyle,
     GroupedReportRenderer,
     hasChallengeState,
     ImpersonateGate,
@@ -598,6 +607,7 @@ export {
     resolveEditPlacement,
     isHeaderPlacement,
     resolveFormVariant,
+    resolveOverviewStyle,
     // Passkeys (WebAuthn). Exported so a consuming app can build its own
     // enrolment screen against the same marshalling the login screen uses.
     base64UrlToBytes,
@@ -612,6 +622,7 @@ export {
     SelectList,
     Select,
     setDefaultFormLayout,
+    setDefaultOverviewStyle,
     showConfirmDialog,
     SortableList,
     StagePopupModal,

package/src/utils/overviewStyle.js

@@ -0,0 +1,63 @@
+/**
+ * Project-wide default for how a detail page's overview fields are drawn.
+ *
+ * GenericDetail's overview tab can draw a section either as the 6.15 card
+ * (`'plain'` — one panel, fields as stacked label-above-value pairs on a
+ * two-column grid, a left-aligned heading on a hairline) or as the pre-6.15
+ * boxes (`'boxed'` — every field in its own tinted, bordered box with the
+ * label inline as "Label: value", under a centred tinted heading bar). The
+ * library ships with `'plain'` as its default so existing projects keep the
+ * presentation they already have. An app that wants the older, boxier reading
+ * calls `setDefaultOverviewStyle('boxed')` once at bootstrap (before the first
+ * render) and every GenericDetail overview follows.
+ *
+ * An individual page config still wins in both directions: set
+ * `"page": { "overviewStyle": "boxed" }` — or `'plain'` — on the view and that
+ * page ignores the project default.
+ */
+
+/** The two presentations the overview understands. */
+const VALID_STYLES = ['plain', 'boxed'];
+
+/** Library default — the 6.15 card, unless a project opts out. */
+let defaultOverviewStyle = 'plain';
+
+/** Warn at most once so a bad bootstrap call is not a console flood. */
+let warnedInvalidStyle = false;
+
+/**
+ * Set the project-wide default presentation for overview fields.
+ * @param {'plain'|'boxed'} style - Presentation to use when a page config does
+ *                                  not specify its own `page.overviewStyle`.
+ * @returns {void} Anything other than 'plain' or 'boxed' is ignored.
+ */
+export const setDefaultOverviewStyle = (style) => {
+    if (!VALID_STYLES.includes(style)) {
+        if (!warnedInvalidStyle) {
+            warnedInvalidStyle = true;
+            // eslint-disable-next-line no-console
+            console.warn(
+                `setDefaultOverviewStyle: expected 'plain' or 'boxed', received ${JSON.stringify(style)}. Keeping '${defaultOverviewStyle}'.`
+            );
+        }
+        return;
+    }
+
+    defaultOverviewStyle = style;
+};
+
+/**
+ * Read the current project-wide default.
+ * @returns {'plain'|'boxed'} The default presentation for overview fields.
+ */
+export const getDefaultOverviewStyle = () => defaultOverviewStyle;
+
+/**
+ * Resolve the overview presentation for one detail page.
+ * @param {string} [style] - The page config's own `page.overviewStyle`, if it
+ *                           has one.
+ * @returns {'plain'|'boxed'} The page's own style when it is valid, otherwise
+ *                            the project-wide default.
+ */
+export const resolveOverviewStyle = (style) =>
+    (VALID_STYLES.includes(style) ? style : defaultOverviewStyle);