@12-apps/ui 6.40.0 → 6.41.0

package/src/components/layout/SettingCard/track.md

@@ -0,0 +1,54 @@
+# SettingCard family
+
+Four settings-screen building blocks under one subpath,
+`@12-apps/ui/layout/SettingCard` (FUT-2823). `SettingCard` summarises a setting
+while closed and edits it in place, with an async save that stays open on
+failure and a focus round trip. `SettingToggle` is a switch that saves as it
+flips. `SettingGroup` is one subject's main switch with dependent rows that dim
+(never vanish) while it is off. `SettingGrid` lays them out in 1–3 columns by
+container query, with equal-height rows and a full-row span for an open card.
+App-agnostic: every word comes in through props (`SettingCardCopy`,
+`SettingSwitchCopy`, titles, summaries, hints).
+
+## Props
+
+- **SettingCard** — `copy`, `title`, `onSave` (may be async), `children` (the
+  form), `summary`, `status`, `learnMore`, `onCancel`, `open` / `defaultOpen` /
+  `onOpenChange`, `disabled`, `saveDisabled`, `formatError`, `headingLevel`,
+  `icon`, `dataTestId`, `className`, `sx`.
+- **SettingToggle** — `copy`, `title`, `checked`, `onChange` (may be async),
+  `summary`, `variant` (`card` | `row`), `disabled`, `formatError`, `icon`,
+  `dataTestId`, `className`, `sx`.
+- **SettingGroup** — `SettingToggle`'s switch props plus `inactiveHint` and
+  `children` (the dependent rows).
+- **SettingGrid** — `children`, `minColumnWidth`, `maxColumns`, `gap`,
+  `aria-label`, `dataTestId`, `className`, `sx`.
+
+## Lint
+
+- Clean (`pnpm lint:files src/components/layout/SettingCard`), plus the
+  complexity and flakiness gates.
+
+## Type Errors
+
+- None (`pnpm typecheck`, `tsc -p tsconfig.stories.json`).
+
+## Testing Scenarios
+
+- Closed/open rendering, in-place open, Escape, controlled mode, no focus steal
+  on mount; save pending / resolved / rejected / thrown / double-press /
+  `saveDisabled`; cancel discarding uncontrolled drafts; toggle optimistic flip,
+  revert, ignored second flip; group inert rows, hint, activation only after
+  the save lands; grid container-query CSS, row sizing, open-card span; layout
+  measured in Chromium by the test stories.
+
+## Storybook Tests List
+
+- Layout/SettingCard/Tests → 8, Layout/SettingToggle/Tests → 4,
+  Layout/SettingGroup/Tests → 3, Layout/SettingGrid/Tests → 3.
+
+## Current
+
+- 2026-09-26 16:40 BRT — v1: all four components, copy packs in both locales,
+  docs per component. Remaining TODO: first host adoption in the origin host
+  (FUT-1659 is the admin screens that would fold onto it).

package/src/components/layout/index.ts

@@ -8,6 +8,7 @@ export * from './Drawer';
 export * from './Resizable';
 export * from './ScrollArea';
 export * from './Separator';
+export * from './SettingCard';
 export * from './Sidebar';
 export * from './Skeleton/Skeleton';
 export * from './TableFilter';

package/src/copy/layout.ts

@@ -16,3 +16,32 @@ export interface TableFilterCopy {
   rangeMin: string;
   rangeMax: string;
 }
+
+/**
+ * The chrome words of an editable `SettingCard`. The card's own title, summary
+ * and status are per-card props; these are the words every card repeats.
+ */
+export interface SettingCardCopy {
+  /** The closed card's trigger. Its accessible name also carries the card's title. */
+  edit: string;
+  /** Discard the draft and close. */
+  cancel: string;
+  save: string;
+  /** Announced (and shown to sighted users as the Save label) while the save is pending. */
+  saving: string;
+  /** The disclosure that reveals the card's longer explanation. */
+  learnMore: string;
+  /** Shown when the save rejected and the host's `formatError` gave no sentence of its own. */
+  saveFailed: string;
+}
+
+/**
+ * What a switch that saves the moment it flips says about that save — shared
+ * by `SettingToggle` and `SettingGroup`'s main switch.
+ */
+export interface SettingSwitchCopy {
+  /** Announced while the flip is being saved. */
+  saving: string;
+  /** Shown when the save rejected and the host's `formatError` gave no sentence of its own. */
+  saveFailed: string;
+}

package/src/en-US.layout.ts

@@ -3,6 +3,8 @@
  * is — see `en-US.ts` for why the packs live in per-family files.
  */
 import type {
+  SettingCardCopy,
+  SettingSwitchCopy,
   TableFilterCopy,
 } from './copy';
 
@@ -13,3 +15,17 @@ export const EN_US_TABLE_FILTER_COPY: TableFilterCopy = {
   rangeMin: "Minimum",
   rangeMax: "Maximum",
 };
+
+export const EN_US_SETTING_CARD_COPY: SettingCardCopy = {
+  edit: "Edit",
+  cancel: "Cancel",
+  save: "Save",
+  saving: "Saving…",
+  learnMore: "Learn more",
+  saveFailed: "Could not save. Please try again.",
+};
+
+export const EN_US_SETTING_SWITCH_COPY: SettingSwitchCopy = {
+  saving: "Saving…",
+  saveFailed: "Could not save. Please try again.",
+};

package/src/locales.ts

@@ -38,6 +38,8 @@ import type {
   PhoneInputCopy,
   RichEditorToolbarCopy,
   SectionOnboardingCopy,
+  SettingCardCopy,
+  SettingSwitchCopy,
   SocialLoginCopy,
   TableFilterCopy,
   TimingDiagramCopy,
@@ -115,6 +117,14 @@ export const TABLE_FILTER_COPY = pack<TableFilterCopy>(
   pt.PT_BR_TABLE_FILTER_COPY,
   en.EN_US_TABLE_FILTER_COPY,
 );
+export const SETTING_CARD_COPY = pack<SettingCardCopy>(
+  pt.PT_BR_SETTING_CARD_COPY,
+  en.EN_US_SETTING_CARD_COPY,
+);
+export const SETTING_SWITCH_COPY = pack<SettingSwitchCopy>(
+  pt.PT_BR_SETTING_SWITCH_COPY,
+  en.EN_US_SETTING_SWITCH_COPY,
+);
 
 // navigation
 export const COMMAND_PALETTE_COPY = pack<CommandPaletteCopy>(

package/src/pt-BR.layout.ts

@@ -3,6 +3,8 @@
  * barrel over this folder — see that file for why.
  */
 import type {
+  SettingCardCopy,
+  SettingSwitchCopy,
   TableFilterCopy,
 } from './copy';
 
@@ -13,3 +15,17 @@ export const PT_BR_TABLE_FILTER_COPY: TableFilterCopy = {
   rangeMin: "Mínimo",
   rangeMax: "Máximo",
 };
+
+export const PT_BR_SETTING_CARD_COPY: SettingCardCopy = {
+  edit: "Editar",
+  cancel: "Cancelar",
+  save: "Salvar",
+  saving: "Salvando…",
+  learnMore: "Saiba mais",
+  saveFailed: "Não foi possível salvar. Tente novamente.",
+};
+
+export const PT_BR_SETTING_SWITCH_COPY: SettingSwitchCopy = {
+  saving: "Salvando…",
+  saveFailed: "Não foi possível salvar. Tente novamente.",
+};

package/dist/chunk-A7RIZOAL.js

@@ -1,13 +0,0 @@
-// src/pt-BR.layout.ts
-var PT_BR_TABLE_FILTER_COPY = {
-  clearAllFilters: "Limpar todos os filtros",
-  clearKeyword: "Limpar a busca",
-  invalidRange: "O m\xE1ximo deve ser maior ou igual ao m\xEDnimo.",
-  rangeMin: "M\xEDnimo",
-  rangeMax: "M\xE1ximo"
-};
-
-export {
-  PT_BR_TABLE_FILTER_COPY
-};
-//# sourceMappingURL=chunk-A7RIZOAL.js.map

package/dist/chunk-A7RIZOAL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pt-BR.layout.ts"],"sourcesContent":["/**\n * The pt-BR pack for the layout family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n  TableFilterCopy,\n} from './copy';\n\nexport const PT_BR_TABLE_FILTER_COPY: TableFilterCopy = {\n  clearAllFilters: \"Limpar todos os filtros\",\n  clearKeyword: \"Limpar a busca\",\n  invalidRange: \"O máximo deve ser maior ou igual ao mínimo.\",\n  rangeMin: \"Mínimo\",\n  rangeMax: \"Máximo\",\n};\n"],"mappings":";AAQO,IAAM,0BAA2C;AAAA,EACtD,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;","names":[]}

package/dist/chunk-BY3JEK5T.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-BY3JEK5T.js.map

package/dist/chunk-FZJ2FTGE.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-FZJ2FTGE.js.map

package/dist/chunk-GRHECKHU.js

@@ -1,13 +0,0 @@
-// src/en-US.layout.ts
-var EN_US_TABLE_FILTER_COPY = {
-  clearAllFilters: "Clear all filters",
-  clearKeyword: "Clear the search",
-  invalidRange: "The maximum must be greater than or equal to the minimum.",
-  rangeMin: "Minimum",
-  rangeMax: "Maximum"
-};
-
-export {
-  EN_US_TABLE_FILTER_COPY
-};
-//# sourceMappingURL=chunk-GRHECKHU.js.map

package/dist/chunk-GRHECKHU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/en-US.layout.ts"],"sourcesContent":["/**\n * The en-US pack for the layout family. Split the same way `pt-BR.layout.ts`\n * is — see `en-US.ts` for why the packs live in per-family files.\n */\nimport type {\n  TableFilterCopy,\n} from './copy';\n\nexport const EN_US_TABLE_FILTER_COPY: TableFilterCopy = {\n  clearAllFilters: \"Clear all filters\",\n  clearKeyword: \"Clear the search\",\n  invalidRange: \"The maximum must be greater than or equal to the minimum.\",\n  rangeMin: \"Minimum\",\n  rangeMax: \"Maximum\",\n};\n"],"mappings":";AAQO,IAAM,0BAA2C;AAAA,EACtD,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AACZ;","names":[]}