@incodetech/prizma-core-screens 0.1.0

package/src/EkybAddressDetailsScreen.tsx

@@ -0,0 +1,200 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  EkybAddressState,
+  EkybAddressValues,
+  EkybOption,
+  EkybStrings,
+} from './EkybStrings';
+import './ScreenLayout.css';
+
+export interface EkybAddressDetailsScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaLoading'
+    | 'ctaLoadingLabel'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+    | 'linkLabel'
+    | 'linkContent'
+    | 'progress'
+    | 'scrollFields'
+  > {
+  /** Module copy — this screen reads the `address` slice. */
+  strings: EkybStrings;
+  /** Which address section to render. Default `empty`. */
+  state?: EkybAddressState;
+  /** The six field values. Empty renders the resting empty field. */
+  values?: EkybAddressValues;
+  /** The selectable states/provinces. Runtime data, not copy — a jurisdiction
+   *  catalogue, never a string table. */
+  states?: EkybOption[];
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * eKYB — step 2 of the wizard, the registered address, built on the Form
+ * archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both sections of the SECOND `eKYB.Bdetails` purple parent
+ * (6340:32594): `empty` (6340:50731) and `filled` (6340:38197). They share an
+ * identical skeleton — nav → Title (H2 + H5) → Spacing/32 → six labelled fields
+ * at Spacing/16 → "Continue" → "Back" → tag — and differ ONLY in field content.
+ *
+ * Four things are deliberate:
+ *
+ * 1. The stack SCROLLS inside the content column — now through the archetype's
+ *    own `scrollFields` prop, not a module stylesheet. The Figma frame is
+ *    1128–1158 tall (six labelled fields are 548 on their own); a 390×844
+ *    screen never reflows (#17), and without the release the surplus paints
+ *    over the CTA. The module used to hand-roll `overflow-y: auto` in
+ *    `EkybLayout.css`; five Wave-3 modules hit the same wall, the archetype
+ *    absorbed it (DEVIATIONS #DSC-2), and that file is now deleted. The
+ *    archetype's variant also carries the Spacing/16 margin that keeps the
+ *    clipped column clear of the CTA rather than sliced against it.
+ * 2. Every field is UNCONTROLLED (`defaultValue`) — a screen is one static spec
+ *    state, and Core's `readOnly` would grey a surface Figma draws white
+ *    (#PI-6). Neither section greys anything, so nothing is `disabled`.
+ * 3. "Address line 2" is the ONE optional field of the page: Figma draws no `*`
+ *    on it, so it alone renders no `requiredHint`.
+ * 4. "Back" is composed into the archetype's `linkContent` slot as a Core
+ *    `secondary` button — the #CURP-2 precedent — so it stays a distinct
+ *    `secondary` action and sits BELOW the primary (#GEO-1).
+ *
+ * NOTE on `filled`: 6340:38197 leaves the REQUIRED "State" dropdown on its
+ * "Select state" placeholder while all five text fields carry values. That is
+ * built as drawn rather than silently corrected, and reported as a Figma
+ * self-contradiction (the #CURP-4 class of finding) — a host that passes
+ * `values.state` gets the selected row.
+ *
+ * The three-segment journey bar (6384:86825 / 6340:66380 — segment 1 pale,
+ * segment 2 solid, segment 3 grey) is Core's `PrizmaStepper` at
+ * `currentState={2}`, composed into the archetype's `progress` slot. This is
+ * step 2 of 3.
+ */
+export const EkybAddressDetailsScreen = forwardRef<
+  HTMLDivElement,
+  EkybAddressDetailsScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'empty',
+      values,
+      states = [],
+      screenId = `ekyb-address-${state}`,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.address;
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        className={['ekyb-address', className].filter(Boolean).join(' ')}
+        /* The archetype's own scrolling field stack — the six-field column is
+           548 tall against a middle that cannot be. No module CSS. */
+        scrollFields
+        /* Step 2 of 3. `showIcons={false}`: the eKYB bar is a bare 5px rail. */
+        progress={
+          <PrizmaStepper
+            steps={3}
+            currentState={2}
+            showIcons={false}
+            aria-label={strings.stepperLabel}
+          />
+        }
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        linkContent={
+          <PrizmaButton
+            variant="secondary"
+            size="L"
+            onClick={() => onAction?.({ type: 'secondary', screenId })}
+          >
+            {strings.backLabel}
+          </PrizmaButton>
+        }
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaTextField
+          label={copy.street.label}
+          placeholder={copy.street.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.street ?? ''}
+        />
+        <PrizmaTextField
+          label={copy.houseNumber.label}
+          placeholder={copy.houseNumber.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.houseNumber ?? ''}
+        />
+        {/* The one field 6340:50731 draws without an asterisk. */}
+        <PrizmaTextField
+          label={copy.addressLine2.label}
+          placeholder={copy.addressLine2.placeholder}
+          autoComplete="off"
+          defaultValue={values?.addressLine2 ?? ''}
+        />
+        <PrizmaTextField
+          label={copy.city.label}
+          placeholder={copy.city.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.city ?? ''}
+        />
+        <PrizmaDropdown
+          label={copy.state.label}
+          placeholder={copy.state.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          options={states}
+          /* Both sections draw the placeholder unless the host supplies a
+             value — see the docstring note on 6340:38197. */
+          defaultValue={values?.state ?? null}
+          /* No `searchable` and therefore no `searchPlaceholder`: neither
+             address section draws this menu open, so there is nothing to build
+             it from — and a `searchPlaceholder` without `searchable` would be a
+             prop that silently does nothing (the #CURP-3 class of defect). */
+        />
+        <PrizmaTextField
+          label={copy.postalCode.label}
+          placeholder={copy.postalCode.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.postalCode ?? ''}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+EkybAddressDetailsScreen.displayName = 'EkybAddressDetailsScreen';
+
+export default EkybAddressDetailsScreen;

package/src/EkybBusinessDetailsScreen.tsx

@@ -0,0 +1,147 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybBusinessState, EkybBusinessValues, EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+
+export interface EkybBusinessDetailsScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaLoading'
+    | 'ctaLoadingLabel'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+    | 'linkLabel'
+    | 'linkContent'
+    | 'progress'
+  > {
+  /** Module copy — this screen reads the `business` slice. */
+  strings: EkybStrings;
+  /** Which purple `eKYB.Bdetails.*` section to render. Default `empty`. */
+  state?: EkybBusinessState;
+  /** The two field values. Empty renders the resting empty field. */
+  values?: EkybBusinessValues;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * eKYB — step 1 of the wizard, the company's identity, built on the Form
+ * archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both purple `eKYB.Bdetails.*` sections (`empty` 2115:21864,
+ * `filled` 5663:83132): measured against the 390 frames they share an identical
+ * skeleton — nav → Title (H2 + H5) → Spacing/32 → two labelled fields at
+ * Spacing/16 → "Continue" → "Back" → tag — and differ ONLY in field content.
+ *
+ * Three things are deliberate, each a lesson an earlier module paid for:
+ *
+ * 1. The fields are UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way to
+ *    freeze a field, paints the DISABLED grey surface on sections Figma draws
+ *    white (DEVIATIONS #PI-6). Neither section greys anything, so nothing here
+ *    is `disabled`.
+ * 2. Figma draws no placeholders on these fields — the label row carries the
+ *    meaning — so `empty` really is a blank field, not a hinted one.
+ * 3. "Back" is a full-width OUTLINED `secondary` button under the primary.
+ *    Archetype E has no `secondaryCtaLabel` slot (archetype F does), so it is
+ *    composed into the archetype's `linkContent` slot exactly as CURP does
+ *    (DEVIATIONS #CURP-2): no primitive invented, no layout declared, the
+ *    action stays a distinct `secondary` event, and it lands BELOW the primary,
+ *    which is both what Figma draws and what #GEO-1 requires.
+ *
+ * The required asterisk is Core's `requiredHint` suffix on a `required` field —
+ * the label rows Figma draws as "Business name *" / "Tax ID *" — so the marker
+ * stays localizable and is never baked into the label string.
+ *
+ * The three-segment journey bar Figma draws between the nav and the title is
+ * Core's own `PrizmaStepper` in the archetype's `progress` slot — the slot
+ * archetype E gained for eKYC (DEVIATIONS #EK-1) and the fix for the QA finding
+ * that the wizard shipped with no progress signal. This is step 1 of 3, so the
+ * bar is at `currentState="Start"`: segment 1 filled, segments 2 and 3 grey,
+ * exactly what 5919:68599 renders. Both offsets around it live in
+ * `ScreenLayout.css`, never here.
+ */
+export const EkybBusinessDetailsScreen = forwardRef<
+  HTMLDivElement,
+  EkybBusinessDetailsScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'empty',
+      values,
+      screenId = `ekyb-business-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.business;
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        /* Step 1 of 3. `showIcons={false}` because the eKYB frames draw the bar
+           as a bare 5px rail with no glyph row. */
+        progress={
+          <PrizmaStepper
+            steps={3}
+            currentState="Start"
+            showIcons={false}
+            aria-label={strings.stepperLabel}
+          />
+        }
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        linkContent={
+          <PrizmaButton
+            variant="secondary"
+            size="L"
+            onClick={() => onAction?.({ type: 'secondary', screenId })}
+          >
+            {strings.backLabel}
+          </PrizmaButton>
+        }
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        /* Left-aligned title block, the alignment every eKYB frame draws; a host
+           `align` still wins (#GEO-2). */
+        overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaTextField
+          label={copy.businessName.label}
+          placeholder={copy.businessName.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.businessName ?? ''}
+        />
+        <PrizmaTextField
+          label={copy.taxId.label}
+          placeholder={copy.taxId.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.taxId ?? ''}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+EkybBusinessDetailsScreen.displayName = 'EkybBusinessDetailsScreen';
+
+export default EkybBusinessDetailsScreen;

package/src/EkybCountryScreen.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybCountryState, EkybOption, EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+
+export interface EkybCountryScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaLoading'
+    | 'ctaLoadingLabel'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+    | 'linkLabel'
+    | 'linkContent'
+  > {
+  /** Module copy — this screen reads the `country` slice. */
+  strings: EkybStrings;
+  /** Which purple `eKYB.country.*` section to render. Default `empty`. */
+  state?: EkybCountryState;
+  /** The selectable countries. Runtime data, not copy — the host owns the
+   *  catalogue. */
+  countries?: EkybOption[];
+  /** Selected `EkybOption.value`. Omit to render the placeholder (`empty`). */
+  value?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * eKYB — the country-of-registration page, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all three purple `eKYB.country.*` sections (`empty`
+ * 2115:20444, `filled` 5655:42140, `dropdown` 5707:54174): measured against the
+ * 390 frames they share an identical skeleton — nav → Title (H2 + H5) →
+ * Spacing/32 → one labelled dropdown → "Continue" pushed to the bottom → tag —
+ * and differ ONLY in what the dropdown carries, which is exactly what
+ * GUIDELINES §6-E means by "states are separate screens sharing the identical
+ * layout".
+ *
+ * Three things are deliberate:
+ *
+ * 1. The field DOES carry a visible label. Unlike Phone Input's combined row
+ *    (#PI-4), Figma draws "Country" above this dropdown, which is Core's own
+ *    `label` slot — so the copy rides the visible label, not `aria-label`.
+ * 2. `dropdown` IS the open-menu spec state, which Core exposes as the
+ *    documentation-only `forceOpen` (a screen is one static spec state, never a
+ *    live interaction) — the same mechanism Phone Input's `countryCode` and
+ *    CURP's `Gene.dropdown` sections use. The search bar Figma draws inside the
+ *    menu is Core's own `searchable`.
+ * 3. The closed field and the menu row are DIFFERENT faces of one option:
+ *    5707:54174 draws "🇺🇸 United States" in the field while the rows read
+ *    "🇺🇸 +1 United States". That is Core's `PrizmaDropdownOption.fieldLabel`,
+ *    so nothing is hand-composed. The flag travels inside the label text
+ *    because Core still ships no country-flag primitive (#PI-3).
+ *
+ * This page is the only eKYB form page with NO "Back" secondary and NO Stepper —
+ * it is step 0, before the three-step wizard starts.
+ */
+export const EkybCountryScreen = forwardRef<HTMLDivElement, EkybCountryScreenProps>(
+  (
+    {
+      strings,
+      state = 'empty',
+      countries = [],
+      value,
+      screenId = `ekyb-country-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.country;
+    // `empty` is the only section drawn on the placeholder; both other sections
+    // draw a chosen country in the closed field.
+    const selected = state === 'empty' ? null : (value ?? countries[0]?.value ?? null);
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        /* Every eKYB form frame LEFT-aligns its title block, while the archetype
+           defaults to centred. The module supplies its designed alignment
+           through the sanctioned override rather than declaring any layout of
+           its own, and a host that passes `align` still wins (#GEO-2). */
+        overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaDropdown
+          label={copy.field.label}
+          placeholder={copy.field.placeholder}
+          options={countries}
+          /* Uncontrolled: a screen is one static spec state, so no `onChange` is
+             needed. Core's `readOnly`/`disabled` are NOT used to freeze it —
+             they paint the DISABLED grey surface on a section Figma draws white
+             (DEVIATIONS #PI-6). */
+          defaultValue={selected}
+          searchable
+          searchPlaceholder={copy.searchPlaceholder}
+          clearSearchLabel={copy.clearSearchLabel}
+          /* The `dropdown` section IS the open-menu spec state. */
+          forceOpen={state === 'dropdown'}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+EkybCountryScreen.displayName = 'EkybCountryScreen';
+
+export default EkybCountryScreen;

package/src/EkybErrorScreen.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+
+export interface EkybErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'glyph'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice. */
+  strings: EkybStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * eKYB — the negative verdict (`eKYB.error`, 2116:34743), built on the Result
+ * archetype (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Nav → centred negative mark + H2 ("Something went wrong") → CTA band with the
+ * single "Try again" primary → anchored tag. It sits on F rather than C for one
+ * reason: it has a button, and §6-F reserves C for the pure no-button case —
+ * which is why its `success` sibling is on C and this one is not.
+ *
+ * This is a generic-error screen, and per the standing owner rule it KEEPS the
+ * logo header and the verified tag even where a module's Figma draws them bare
+ * (#PI-8, #F-34) — here Figma draws both anyway, so nothing is overridden.
+ *
+ * Core's outline status mark is used, not Figma's two-tone filled disc
+ * (icon-outline sweep, #15 / #DC-34).
+ */
+export const EkybErrorScreen = forwardRef<HTMLDivElement, EkybErrorScreenProps>(
+  ({ strings, screenId = 'ekyb-error', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="error"
+      title={strings.error.title}
+      subtitle={strings.error.subtitle}
+      ctaLabel={strings.error.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+EkybErrorScreen.displayName = 'EkybErrorScreen';
+
+export default EkybErrorScreen;