@oatfi/ui 0.6.0 → 0.7.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Theme as Theme$1 } from '@mui/material/styles';
 import * as react from 'react';
-import react__default from 'react';
+import react__default, { FC } from 'react';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import * as styled_components from 'styled-components';
 
@@ -811,6 +811,28 @@ interface AchVerificationConsentProps {
  */
 declare function AchVerificationConsent({ consentGiven, onChange, disabled, actionLabel, testId, }: AchVerificationConsentProps): react__default.JSX.Element;
 
+interface EnvironmentTagProps {
+    /** The Vercel project the bundle was built for (`OATFI_ENV`), `local` under a dev server. */
+    bundleEnv?: string;
+    /** The host's `environment` attribute. */
+    apiEnv?: string;
+    /** Git ref the bundle was built from, for the tooltip. */
+    buildRef?: string;
+    /** Short commit SHA, for the tooltip. */
+    buildSha?: string;
+    size?: 'small' | 'medium';
+    /** `data-testid` on the chip. Override when several embeds share a page. */
+    testId?: string;
+}
+/**
+ * The environment chip for embedded components. Shows which API the component
+ * calls and, when it differs, which Vercel project the bundle came from:
+ * `DEV` on a match, `LOCAL | API DEV` for a local dev server, `BUNDLE DEV | API STG`
+ * (red-bordered) on a mismatch, a red `API ?` for an unrecognised API env, and
+ * nothing in production/production. See `resolveComponentEnvTag` for the rules.
+ */
+declare const EnvironmentTag: FC<EnvironmentTagProps>;
+
 interface PreviewProps {
     /** Partner branding to render the sample with. Omit for the default theme. */
     branding?: Branding;
@@ -824,5 +846,78 @@ interface PreviewProps {
  */
 declare function Preview({ branding, className }: PreviewProps): react__default.JSX.Element;
 
-export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
-export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodStatus, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };
+/**
+ * Environment chip logic for embedded components. Framework-free so the
+ * React-18 bundle (`mf-remote-react`), which can't take this package, can copy
+ * it verbatim.
+ *
+ * Ported from `oatfi-app-shell/src/lib/environment.ts`. The difference: a
+ * dashboard has one environment, a component has two — the Vercel project the
+ * bundle was built for (`bundleEnv`) and the API the host points it at
+ * (`apiEnv`, the `environment` attribute). They render as one chip that splits
+ * when they disagree.
+ */
+type EnvironmentName = 'production' | 'staging' | 'qa' | 'development' | 'local';
+interface EnvironmentTagInfo {
+    /** Short chip text, e.g. "STG". */
+    readonly label: string;
+    /** Full name, for the tooltip. */
+    readonly name: string;
+    /** Chip fill. */
+    readonly fill: string;
+    /** Text color on the fill. */
+    readonly ink: string;
+}
+type ComponentEnvTag = 
+/** Bundle and API agree (or the bundle env is unset). */
+{
+    kind: 'single';
+    tag: EnvironmentTagInfo;
+}
+/** A local dev-server bundle on a non-prod API: informational, not a warning. */
+ | {
+    kind: 'local';
+    api: EnvironmentTagInfo;
+}
+/** Bundle and API disagree, or the bundle env is unrecognised (`bundleEnv: null`): a warning. */
+ | {
+    kind: 'split';
+    bundleEnv: EnvironmentName | null;
+    bundle: EnvironmentTagInfo;
+    api: EnvironmentTagInfo;
+}
+/** The API env is set but unrecognised, so the component calls the wrong API (or none). */
+ | {
+    kind: 'invalid-api';
+    apiEnv: string;
+};
+interface ComponentEnv {
+    /** The Vercel project the bundle was built for (`OATFI_ENV`), `local` under a dev server. */
+    bundleEnv?: string | null;
+    /** The host's `environment` attribute — which API the component calls. */
+    apiEnv?: string | null;
+}
+/**
+ * What the chip shows. Unset envs stay quiet; set-but-unrecognised ones are flagged:
+ * - API env unset → nothing (it means production)
+ * - API env unrecognised → `invalid-api`, an error (the host is calling the wrong API)
+ * - bundle env unset → treated as a match on the API env
+ * - bundle env unrecognised → a warning split against the API env
+ * - local bundle → informational `LOCAL | API X` on a non-prod API, a single `LOCAL` on
+ *   the local API, and a warning against prod
+ * - prod/prod → nothing
+ */
+declare const resolveComponentEnvTag: ({ bundleEnv, apiEnv, }: ComponentEnv) => ComponentEnvTag | null;
+interface ComponentBuildInfo extends ComponentEnv {
+    /** Git ref the bundle was built from, e.g. `dev12` or `v1.4.0`. */
+    ref?: string | null;
+    /** Short commit SHA. */
+    sha?: string | null;
+}
+/** One-line debug string for the console: `bundle=development api=staging ref=dev12 sha=abc1234`. */
+declare const describeComponentEnv: ({ bundleEnv, apiEnv, ref, sha }: ComponentBuildInfo) => string;
+/** Tooltip text: `Bundle: Development (dev12, abc1234) · API: Staging`. */
+declare const describeComponentEnvTitle: ({ bundleEnv, apiEnv, ref, sha, }: ComponentBuildInfo) => string;
+
+export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, EnvironmentTag, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, describeComponentEnv, describeComponentEnvTitle, mergeBranding, resolveComponentEnvTag, useTheme };
+export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, ComponentBuildInfo, ComponentEnv, ComponentEnvTag, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, EnvironmentName, EnvironmentTagInfo, EnvironmentTagProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodStatus, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };

package/dist/index.esm.js

@@ -2365,6 +2365,167 @@ function AchVerificationConsent({
   ] });
 }
 
+const AMBER = "#F59E0B";
+const CYAN = "#22D3EE";
+const GREY = "#9CA3AF";
+const GREEN = "#22C55E";
+const WHITE = "#FFFFFF";
+const INK = "#141312";
+const RED = "#DC2626";
+const ENVIRONMENT_MISMATCH_BORDER = RED;
+const ENVIRONMENT_TAGS = Object.freeze({
+  production: Object.freeze({ label: "PROD", name: "Production", fill: WHITE, ink: INK }),
+  staging: Object.freeze({ label: "STG", name: "Staging", fill: AMBER, ink: INK }),
+  qa: Object.freeze({ label: "QA", name: "QA", fill: CYAN, ink: INK }),
+  development: Object.freeze({ label: "DEV", name: "Development", fill: GREY, ink: INK }),
+  local: Object.freeze({ label: "LOCAL", name: "Local", fill: GREEN, ink: INK })
+});
+const UNKNOWN_ENVIRONMENT_TAG = Object.freeze({
+  label: "?",
+  name: "Unknown",
+  fill: WHITE,
+  ink: INK
+});
+const INVALID_API_TAG = Object.freeze({
+  label: "?",
+  name: "Unknown",
+  fill: RED,
+  ink: WHITE
+});
+const ALIASES = /* @__PURE__ */ new Map([
+  ["production", "production"],
+  ["prod", "production"],
+  ["staging", "staging"],
+  ["stg", "staging"],
+  ["qa", "qa"],
+  ["development", "development"],
+  ["dev", "development"],
+  ["local", "local"]
+]);
+const normalizeEnvironment = (value) => {
+  const key = value?.trim().toLowerCase();
+  return key && ALIASES.get(key) || null;
+};
+const resolveComponentEnvTag = ({
+  bundleEnv,
+  apiEnv
+}) => {
+  const apiValue = apiEnv?.trim();
+  if (!apiValue) return null;
+  const api = normalizeEnvironment(apiValue);
+  if (!api) return { kind: "invalid-api", apiEnv: apiValue };
+  const bundleValue = bundleEnv?.trim();
+  const bundle = normalizeEnvironment(bundleValue);
+  const apiTag = ENVIRONMENT_TAGS[api];
+  if (bundleValue && !bundle) {
+    return { kind: "split", bundleEnv: null, bundle: UNKNOWN_ENVIRONMENT_TAG, api: apiTag };
+  }
+  if (bundle === "local" && api !== "local" && api !== "production") {
+    return { kind: "local", api: apiTag };
+  }
+  if (bundle && bundle !== api) {
+    return { kind: "split", bundleEnv: bundle, bundle: ENVIRONMENT_TAGS[bundle], api: apiTag };
+  }
+  if (api === "production") return null;
+  return { kind: "single", tag: apiTag };
+};
+const environmentDebug = (value) => {
+  const env = normalizeEnvironment(value);
+  if (env) return env;
+  const raw = value?.trim();
+  return raw ? `unrecognised:${raw}` : "unknown";
+};
+const describeComponentEnv = ({ bundleEnv, apiEnv, ref, sha }) => [
+  `bundle=${environmentDebug(bundleEnv)}`,
+  `api=${environmentDebug(apiEnv)}`,
+  `ref=${ref || "unknown"}`,
+  `sha=${sha || "unknown"}`
+].join(" ");
+const environmentTitle = (value) => {
+  const env = normalizeEnvironment(value);
+  if (env) return ENVIRONMENT_TAGS[env].name;
+  const raw = value?.trim();
+  return raw ? `Unrecognised "${raw}"` : "Unknown";
+};
+const describeComponentEnvTitle = ({
+  bundleEnv,
+  apiEnv,
+  ref,
+  sha
+}) => {
+  const build = [ref, sha].filter(Boolean).join(", ");
+  return `Bundle: ${environmentTitle(bundleEnv)}${build ? ` (${build})` : ""} \xB7 API: ${environmentTitle(apiEnv)}`;
+};
+
+const FONT_SIZE = { small: 9, medium: 11 };
+const PADDING_X = { small: 6, medium: 8 };
+const FONT_FAMILY = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+const BORDER_WIDTH = 1.5;
+const base = (size) => ({
+  display: "inline-flex",
+  alignItems: "stretch",
+  boxSizing: "border-box",
+  fontFamily: FONT_FAMILY,
+  fontSize: FONT_SIZE[size],
+  fontWeight: 800,
+  letterSpacing: "0.1em",
+  lineHeight: 1.4,
+  whiteSpace: "nowrap",
+  borderRadius: 0
+});
+const half = (tag, label, size) => /* @__PURE__ */ jsx("span", { style: { padding: `2px ${PADDING_X[size]}px`, background: tag.fill, color: tag.ink }, children: label });
+const EnvironmentTag = ({
+  bundleEnv,
+  apiEnv,
+  buildRef,
+  buildSha,
+  size = "small",
+  testId = "oatfi-env-tag"
+}) => {
+  const result = resolveComponentEnvTag({ bundleEnv, apiEnv });
+  if (!result) return null;
+  const title = describeComponentEnvTitle({ bundleEnv, apiEnv, ref: buildRef, sha: buildSha });
+  const chip = (border, children) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "note",
+      "aria-label": `Environment: ${title}`,
+      "data-testid": testId,
+      "data-env-kind": result.kind,
+      title,
+      style: { ...base(size), border: `${BORDER_WIDTH}px solid ${border}` },
+      children
+    }
+  );
+  switch (result.kind) {
+    case "single":
+      return chip(result.tag.fill, half(result.tag, result.tag.label, size));
+    case "local":
+      return chip(
+        ENVIRONMENT_TAGS.local.fill,
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          half(ENVIRONMENT_TAGS.local, ENVIRONMENT_TAGS.local.label, size),
+          half(result.api, `API ${result.api.label}`, size)
+        ] })
+      );
+    case "invalid-api":
+      return chip(
+        INVALID_API_TAG.fill,
+        half(INVALID_API_TAG, `API ${INVALID_API_TAG.label}`, size)
+      );
+    case "split": {
+      const bundleLabel = result.bundleEnv === "local" ? "LOCAL" : `BUNDLE ${result.bundle.label}`;
+      return chip(
+        ENVIRONMENT_MISMATCH_BORDER,
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          half(result.bundle, bundleLabel, size),
+          half(result.api, `API ${result.api.label}`, size)
+        ] })
+      );
+    }
+  }
+};
+
 const PreviewCard = styled.div`
   display: flex;
   gap: 2rem;
@@ -2436,5 +2597,5 @@ function Preview({ branding, className }) {
   return /* @__PURE__ */ jsx(ThemeProvider, { branding, children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(PreviewContent, {}) }) });
 }
 
-export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content$1 as Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
+export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content$1 as Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, EnvironmentTag, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, describeComponentEnv, describeComponentEnvTitle, mergeBranding, resolveComponentEnvTag, useTheme };
 //# sourceMappingURL=index.esm.js.map