@incodetech/prizma-core-screens 0.1.3 → 0.2.4

package/src/DemoScreensEditSheetScreen.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
+import { PrizmaNavigation } from '@incodetech/prizma-core-web/navigation';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import { DemoScreensSheet } from './DemoScreensConfigSheetScreen';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+
+/**
+ * The five states of the `Edit Client ID or Environment` row (2118:21000 …):
+ *  - `default`          nothing changed yet, Update disabled
+ *  - `environmentOpen`  the environment menu open
+ *  - `filled`           a new environment chosen, Update live
+ *  - `loading`          Update pressed, the backend checking
+ *  - `error`            "Wrong Client ID"
+ */
+export type DemoScreensEditSheetState = 'default' | 'environmentOpen' | 'filled' | 'loading' | 'error';
+
+export interface DemoScreensEditSheetScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Family copy — this screen reads the `editSheet` slice. */
+  strings: DemoScreensStrings;
+  state?: DemoScreensEditSheetState;
+  screenId?: string;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Demo screens · NATIVE — the second sheet, reached from the first's link:
+ * change the Client ID or the environment, and let the backend check the pair.
+ * Navigation with back AND close, a left Title with subtitle, a TextField, a
+ * Dropdown, the Update CTA and the build caption.
+ */
+export const DemoScreensEditSheetScreen = forwardRef<HTMLDivElement, DemoScreensEditSheetScreenProps>(
+  (
+    { strings, state = 'default', screenId = `demo-screens-edit-sheet-${state}`, onAction, ...shell },
+    ref,
+  ) => {
+    const e = strings.editSheet;
+    const changed = state === 'filled' || state === 'loading' || state === 'error';
+    const options = e.environments.some(o => o.value === e.environmentValue)
+      ? e.environments
+      : [{ value: e.environmentValue, label: e.environmentValue }, ...e.environments];
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        <DemoScreensSheet ariaLabel={e.title}>
+          <div className="demo-screens-sheet__nav">
+            <PrizmaNavigation
+              showIncodeLogo={false}
+              showLeftIcon
+              backLabel={e.backLabel}
+              onLeftIconClick={() => onAction?.({ type: 'secondary', screenId })}
+              showRightIcon
+              closeLabel={e.closeLabel}
+              onRightIconClick={() => onAction?.({ type: 'help', screenId })}
+              aria-label={e.title}
+            />
+          </div>
+          <div className="demo-screens-sheet__title">
+            <PrizmaTitle variant="left" title={e.title} showSubtitle subtitle={e.subtitle} />
+          </div>
+          <div className="demo-screens-sheet__fields">
+            <PrizmaTextField
+              key={state}
+              label={e.clientIdLabel}
+              defaultValue={e.clientIdValue}
+              error={state === 'error'}
+              errorText={state === 'error' ? e.clientIdError : undefined}
+              showRequiredMarker={false}
+            />
+            <PrizmaDropdown
+              label={e.environmentLabel}
+              options={options}
+              value={changed ? e.environmentSelected : e.environmentValue}
+              showRequiredMarker={false}
+              forceOpen={state === 'environmentOpen'}
+            />
+          </div>
+          <div className="demo-screens-sheet__band">
+            <PrizmaButton
+              variant="primary"
+              size="L"
+              disabled={!changed || state === 'error'}
+              loading={state === 'loading'}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {e.ctaLabel}
+            </PrizmaButton>
+            <p className="demo-screens-build">{e.buildLabel}</p>
+          </div>
+        </DemoScreensSheet>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensEditSheetScreen.displayName = 'DemoScreensEditSheetScreen';
+
+export default DemoScreensEditSheetScreen;

package/src/DemoScreensEndScreen.tsx

@@ -1,54 +1,30 @@
 import React, { forwardRef } from 'react';
-import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
-import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
-import type { DemoScreensStrings } from './DemoScreensStrings';
+import {
+  DemoScreensResultScreen,
+  type DemoScreensResultScreenProps,
+} from './DemoScreensResultScreen';
 import './ScreenLayout.css';
 
 export interface DemoScreensEndScreenProps
-  extends Omit<
-    PrizmaResultScreenProps,
-    'status' | 'title' | 'subtitle' | 'glyph' | 'verifiedLabel' | 'navLabel'
-  > {
-  /** Family copy — this screen reads the `end` slice. */
-  strings: DemoScreensStrings;
-  screenId?: string;
-  overrides?: PrizmaScreenOverrides;
-  onAction?: PrizmaScreenActionHandler;
-}
+  extends Omit<DemoScreensResultScreenProps, 'status'> {}
 
 /**
- * Demo screens — "Verification complete!", built on the Result archetype
- * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ * Demo screens — "Verification complete!", `Module Generic Screens` frame
+ * `63:399`: the demo is over and the result is with a human.
  *
- * Figma: `Module Generic Screens` frame `63:399`. The last thing a prospect
- * sees in a sample flow: logo header → a centred title and supporting line →
- * the verified tag. No CTA, because the demo has nowhere left to go.
- *
- * Result rather than Processing, even though the skeleton is Processing's:
- * archetype C's status vocabulary is `loading | success | error | warning`, so
- * a MARK-FREE centred title is not expressible there. `status="none"` is
- * archetype F's, and with no CTA the band never renders — F degenerates to
- * exactly C's shape and keeps the mark off.
+ * Since 2026-09-24 this is the `inReview` case of `DemoScreensResultScreen`,
+ * kept under its original name so the hub entry `demo-screens-end` and the
+ * iPhone Duo exploration that renders it by id keep resolving. New consumers
+ * should reach for the result screen and pass the session status.
  *
  * Figma draws no status mark above the title, deliberately: the demo did not
  * verify anything, it finished. A success tick here would claim a verdict the
  * session never reached — the copy already says the result is still under
- * review.
+ * review. No CTA, because the demo has nowhere left to go.
  */
 export const DemoScreensEndScreen = forwardRef<HTMLDivElement, DemoScreensEndScreenProps>(
-  ({ strings, screenId = 'demo-screens-end', overrides, onAction, ...shell }, ref) => (
-    <PrizmaResultScreen
-      ref={ref}
-      status="none"
-      title={strings.end.title}
-      subtitle={strings.end.subtitle}
-      verifiedLabel={strings.verifiedLabel}
-      navLabel={strings.navLabel}
-      screenId={screenId}
-      overrides={overrides}
-      onAction={onAction}
-      {...shell}
-    />
+  ({ screenId = 'demo-screens-end', ...rest }, ref) => (
+    <DemoScreensResultScreen ref={ref} status="inReview" screenId={screenId} {...rest} />
   ),
 );
 DemoScreensEndScreen.displayName = 'DemoScreensEndScreen';

package/src/DemoScreensLaunchScreen.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaLogo } from '@incodetech/prizma-core-web/logo';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import { MenuDotsGlyph } from './DemoScreensStartScreen';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+
+export interface DemoScreensLaunchScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Family copy — this screen reads `appName` and `launch`. */
+  strings: DemoScreensStrings;
+  /** The CTA is pressed and the session is being created (`Loading`). */
+  loading?: boolean;
+  /** The configuration sheet just saved: "Flow saved" over the header. */
+  saved?: boolean;
+  screenId?: string;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Demo screens · NATIVE — `Launch screen` (2010:5024), `Loading` (2082:8004)
+ * and the "Flow saved" return (2118:21170): the app is configured. Header row
+ * with the flow's name on the left and the menu on the right, the wordmark in
+ * the middle, one CTA, and the environment named under it.
+ *
+ * The web Start screen's twin: same header row, same wordmark block, same
+ * bare CTA band; only the header's left slot and the caption differ.
+ * `onAction`: `cta` for Start, `help` for the menu (it opens the sheet).
+ */
+export const DemoScreensLaunchScreen = forwardRef<HTMLDivElement, DemoScreensLaunchScreenProps>(
+  (
+    {
+      strings,
+      loading = false,
+      saved = false,
+      screenId = loading ? 'demo-screens-launch-loading' : saved ? 'demo-screens-launch-saved' : 'demo-screens-launch',
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const l = strings.launch;
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        {saved ? (
+          <div className="demo-screens-toast">
+            <PrizmaSnackbar state="success" contentResizing="fill">
+              {l.savedSnackbar}
+            </PrizmaSnackbar>
+          </div>
+        ) : null}
+        <header className="demo-screens-start__header" aria-label={strings.navLabel}>
+          <span className="demo-screens-start__flow">{l.flowLabel}</span>
+          <button
+            type="button"
+            className="prizma-nav__icon demo-screens-start__menu"
+            aria-label={l.menuLabel}
+            onClick={() => onAction?.({ type: 'help', screenId })}
+          >
+            <MenuDotsGlyph />
+          </button>
+        </header>
+        <div className="prizma-screen-layout__content">
+          <div className="demo-screens-start__middle">
+            <div className="demo-screens-wordmark">
+              <PrizmaLogo variant="incode" />
+              <p className="demo-screens-wordmark__caption">{strings.appName}</p>
+            </div>
+          </div>
+        </div>
+        <div className="prizma-screen-layout__band prizma-screen-layout__band--bare demo-screens-band">
+          <div className="prizma-screen-layout__band__ctas">
+            <PrizmaButton
+              variant="primary"
+              size="L"
+              loading={loading}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {l.ctaLabel}
+            </PrizmaButton>
+          </div>
+          <p className="demo-screens-launch__env">
+            {l.environmentCaption} <b>{l.environmentValue}</b>
+          </p>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensLaunchScreen.displayName = 'DemoScreensLaunchScreen';
+
+export default DemoScreensLaunchScreen;