@businessdash/sdk 0.9.60 → 0.9.80

package/src/solid.tsx

@@ -27,22 +27,32 @@
  * @module
  */
 
-import type { JSX } from "solid-js";
+// Only the primitives that exist UNCHANGED in both Solid 1 and Solid 2.
+// Everything Solid 2 moved or dropped comes from `solid-compat` instead, so
+// this one binding compiles and runs on either version. See that module for
+// the measured API differences.
+import {
+	createContext,
+	createMemo,
+	createSignal,
+	onCleanup,
+	useContext,
+} from "solid-js";
+
 import {
 	type Accessor,
 	For,
 	Match,
 	Show,
+	type SolidNode,
 	Switch,
-	createContext,
-	createMemo,
-	createSignal,
 	createUniqueId,
-	from,
-	onCleanup,
+	cx,
+	fromStore,
 	onMount,
-	useContext,
-} from "solid-js";
+	providerFor,
+	renderNode,
+} from "./solid-compat.js";
 
 import type {
 	BiabClient,
@@ -72,11 +82,15 @@ import {
 // ─────────────────────────────────────────────────────────────────────────────
 
 const BiabClientContext = createContext<Accessor<BiabClient | undefined>>();
+/** Solid 1 exposes `.Provider`; Solid 2 makes the context its own provider. */
+const BiabClientProvider = providerFor<Accessor<BiabClient | undefined>>(
+	BiabClientContext,
+);
 
 export interface BiabProviderProps {
 	/** The SDK client shared with descendant `<BiabForm>`s. */
 	client: BiabClient;
-	children?: JSX.Element;
+	children?: SolidNode;
 }
 
 /**
@@ -84,12 +98,12 @@ export interface BiabProviderProps {
  * doesn't get its own `client` prop falls back to this one. Optional — passing
  * `client` directly to `<BiabForm>` works without a provider.
  */
-export function BiabProvider(props: BiabProviderProps): JSX.Element {
+export function BiabProvider(props: BiabProviderProps) {
 	const value = createMemo(() => props.client);
 	return (
-		<BiabClientContext.Provider value={value}>
-			{props.children}
-		</BiabClientContext.Provider>
+		<BiabClientProvider value={value}>
+			{renderNode(props.children)}
+		</BiabClientProvider>
 	);
 }
 
@@ -126,17 +140,12 @@ export function createFormStore(
 ): BiabFormStore {
 	const controller = createFormController(options);
 
-	// `from` wraps the subscribe contract: it calls subscribe(setter) and returns
-	// an accessor. We pre-seed with snapshot() because the core never replays on
-	// subscribe, so the very first read must not be undefined.
-	const tracked = from<FormSnapshot>((set) => {
-		set(controller.snapshot());
-		return controller.subscribe(set);
-	});
-	// `from` accessors are `T | undefined` until the first emit; the seed above
-	// makes that window empty, but narrow it for callers regardless.
-	const snapshot: Accessor<FormSnapshot> = () =>
-		tracked() ?? controller.snapshot();
+	// `fromStore` bridges the controller's snapshot/subscribe contract into a
+	// Solid accessor. It reads `snapshot()` up front because the core does NOT
+	// replay on subscribe — waiting for the first notification would render an
+	// empty form until something happened to change, which on an untouched form
+	// is forever. Unlike Solid 1's `from`, it is never `undefined`.
+	const snapshot: Accessor<FormSnapshot> = fromStore(controller);
 
 	onMount(() => {
 		void controller.load();
@@ -205,7 +214,7 @@ function asString(v: unknown): string {
 	return typeof v === "string" ? v : "";
 }
 
-function FieldInput(props: FieldInputProps): JSX.Element {
+function FieldInput(props: FieldInputProps) {
 	const t = () => props.field.type;
 	const field = () => props.field;
 	// Resolved HTML autofill token for this field (or undefined to omit the
@@ -415,11 +424,10 @@ function FieldInput(props: FieldInputProps): JSX.Element {
 						{(color) => (
 							<button
 								type="button"
-								class="biab-color-swatch"
-								classList={{
+								class={cx("biab-color-swatch", {
 									"biab-color-swatch--selected":
 										asString(props.value()) === color,
-								}}
+								})}
 								style={{ "background-color": color }}
 								title={color}
 								onClick={() => props.set(color)}
@@ -508,8 +516,7 @@ function FieldInput(props: FieldInputProps): JSX.Element {
 								{(_, i) => (
 									<button
 										type="button"
-										class="biab-stars__star"
-										classList={{ "biab-stars__star--on": i() < cur() }}
+										class={cx("biab-stars__star", { "biab-stars__star--on": i() < cur() })}
 										aria-label={`${i() + 1} star`}
 										onClick={() => props.set(i() + 1)}
 									>
@@ -533,8 +540,7 @@ function FieldInput(props: FieldInputProps): JSX.Element {
 								{(emoji, i) => (
 									<button
 										type="button"
-										class="biab-happiness__face"
-										classList={{ "biab-happiness__face--on": i() === cur() }}
+										class={cx("biab-happiness__face", { "biab-happiness__face--on": i() === cur() })}
 										onClick={() => props.set(i())}
 									>
 										{emoji}
@@ -754,10 +760,15 @@ function FieldInput(props: FieldInputProps): JSX.Element {
 						};
 					const maxFiles = () => cfg().maxFiles ?? 1;
 					const remaining = () => Math.max(maxFiles() - files().length, 0);
-					const accept = () =>
-						cfg().allowedTypes && cfg().allowedTypes.length > 0
-							? cfg().allowedTypes.join(",")
+					// Read the accessor ONCE. Calling `cfg()` again inside the branch
+					// starts a fresh, un-narrowed read, so the guard above buys
+					// nothing and `allowedTypes` is still possibly-undefined.
+					const accept = () => {
+						const allowed = cfg().allowedTypes;
+						return allowed && allowed.length > 0
+							? allowed.join(",")
 							: undefined;
+					};
 					let inputRef: HTMLInputElement | undefined;
 					const [localError, setLocalError] = createSignal<string | null>(null);
 
@@ -882,7 +893,7 @@ interface RenderCtx {
 	setValue: (id: string, value: unknown) => void;
 	upload: (fieldId: string, file: File, filename?: string) => Promise<FormFileValue>;
 	/** Optional consumer render override, per field. */
-	fieldSlot?: (args: FieldSlotArgs) => JSX.Element;
+	fieldSlot?: (args: FieldSlotArgs) => SolidNode;
 	/** Resolve the HTML autofill token for a field (or `undefined` to omit). */
 	autocomplete: (field: FormCoreField) => string | undefined;
 }
@@ -894,7 +905,7 @@ export interface FieldSlotArgs {
 	setValue: (value: unknown) => void;
 }
 
-function FieldRow(props: { field: FormCoreField; ctx: RenderCtx }): JSX.Element {
+function FieldRow(props: { field: FormCoreField; ctx: RenderCtx }) {
 	const field = () => props.field;
 	const value = () => props.ctx.snapshot().values[field().id];
 	const error = () => props.ctx.snapshot().errors[field().id];
@@ -914,12 +925,11 @@ function FieldRow(props: { field: FormCoreField; ctx: RenderCtx }): JSX.Element
 				data-field-id={field().id}
 				data-biab-field={fieldCssKey(field())}
 				data-biab-type={field().type}
-				class="biab-field"
-				classList={{
+				class={cx("biab-field", {
 					[`biab-field--${field().type}`]: true,
 					"biab-field--required": field().required === true,
 					"biab-field--error": Boolean(error()),
-				}}
+				})}
 			>
 				<Show when={showLabel() && (field().label || field().required)}>
 					<label class="biab-field__label">
@@ -961,7 +971,7 @@ function RenderTree(props: {
 	fields: FormCoreField[];
 	ctx: RenderCtx;
 	flat?: boolean;
-}): JSX.Element {
+}) {
 	return (
 		<div class="biab-tree">
 			<For each={props.fields}>
@@ -981,8 +991,7 @@ function RenderTree(props: {
 								return (
 									<div
 										data-biab-group={fieldCssKey(node)}
-										class="biab-group"
-										classList={{ "biab-group--bordered": !props.flat }}
+										class={cx("biab-group", { "biab-group--bordered": !props.flat })}
 									>
 										<Show
 											when={node.label && node.showGroupLabel === true}
@@ -1035,8 +1044,7 @@ function RenderTree(props: {
 									};
 								return (
 									<div
-										class="biab-or"
-										classList={{ "biab-or--error": errored() }}
+										class={cx("biab-or", { "biab-or--error": errored() })}
 									>
 										<Show when={node.label}>
 											<div class="biab-or__label">
@@ -1101,7 +1109,7 @@ function RenderTree(props: {
 // Progress — labeled "steps" or thin "bar". Mirrors FormPreview's two indicators.
 // ─────────────────────────────────────────────────────────────────────────────
 
-function StepProgress(props: { snapshot: Accessor<FormSnapshot> }): JSX.Element {
+function StepProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 	const steps = () => props.snapshot().steps;
 	const current = () => props.snapshot().step;
 	return (
@@ -1119,27 +1127,24 @@ function StepProgress(props: { snapshot: Accessor<FormSnapshot> }): JSX.Element
 							<>
 								<Show when={i() > 0}>
 									<div
-										class="biab-progress__line"
-										classList={{
+										class={cx("biab-progress__line", {
 											"biab-progress__line--filled": i() <= current(),
-										}}
+										})}
 									/>
 								</Show>
 								<div class="biab-progress__node">
 									<span
-										class="biab-progress__dot"
-										classList={{
+										class={cx("biab-progress__dot", {
 											"biab-progress__dot--current": isCurrent(),
 											"biab-progress__dot--done": done(),
-										}}
+										})}
 									>
 										{done() ? "✓" : i() + 1}
 									</span>
 									<span
-										class="biab-progress__step-label"
-										classList={{
+										class={cx("biab-progress__step-label", {
 											"biab-progress__step-label--current": isCurrent(),
-										}}
+										})}
 									>
 										{title()}
 									</span>
@@ -1153,7 +1158,7 @@ function StepProgress(props: { snapshot: Accessor<FormSnapshot> }): JSX.Element
 	);
 }
 
-function BarProgress(props: { snapshot: Accessor<FormSnapshot> }): JSX.Element {
+function BarProgress(props: { snapshot: Accessor<FormSnapshot> }) {
 	return (
 		<div class="biab-progress biab-progress--bar">
 			<span class="biab-progress__count">
@@ -1194,7 +1199,7 @@ export interface BiabFormProps {
 	/** Fired only on a failed submit. */
 	onError?: (result: Extract<FormSubmitResult, { ok: false }>) => void;
 	/** Per-field render override; return your own markup for any field. */
-	field?: (args: FieldSlotArgs) => JSX.Element;
+	field?: (args: FieldSlotArgs) => SolidNode;
 	/** Global HTML autofill switch. Defaults to inferring a token per field;
 	 *  `false` emits `autocomplete="off"` on every input. Override individual
 	 *  fields with `fieldAutoComplete`. */
@@ -1205,7 +1210,10 @@ export interface BiabFormProps {
 	/** Extra class on the form root (alias: `className`). */
 	class?: string;
 	className?: string;
-	style?: JSX.CSSProperties | string;
+		// `string` or a style object. Not `JSX.CSSProperties`: that type lives in
+	// `solid-js` on Solid 1 and `@solidjs/web` on Solid 2, and naming it would
+	// reintroduce the version split `solid-compat` exists to remove.
+	style?: Record<string, string | number> | string;
 }
 
 /**
@@ -1217,13 +1225,19 @@ export interface BiabFormProps {
  * All visual classes are `biab-*` on light DOM, so consumer CSS cascades. The
  * component ships no styles of its own.
  */
-export function BiabForm(props: BiabFormProps): JSX.Element {
+export function BiabForm(props: BiabFormProps) {
 	const providerClient = useBiabClient();
 	const resolvedClient = () => props.client ?? providerClient;
 	const formId = createUniqueId();
 
+	// Resolved once, for the same reason as `accept` above: the ternary narrows
+	// the FIRST call, and the second call in the branch is a fresh read that TS
+	// still types as possibly-undefined — which is also what would reach the
+	// controller if the provider ever changed between the two reads.
+	const initialClient = resolvedClient();
+
 	const store = createFormStore({
-		...(resolvedClient() ? { client: resolvedClient() } : {}),
+		...(initialClient ? { client: initialClient } : {}),
 		...(props.slug ? { slug: props.slug } : {}),
 		...(props.schema ? { schema: props.schema } : {}),
 		submitOptions: {
@@ -1464,3 +1478,11 @@ export type {
 	FormSubmitOptions,
 } from "./forms-core/index.js";
 export { createFormController } from "./forms-core/index.js";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// The rest of the product surface — storefront, cart, checkout, blog, chat,
+// the customer portal, auth, followers and social links. Split into its own
+// file to keep this one about forms; re-exported here so `/solid` stays a
+// single entry point.
+// ─────────────────────────────────────────────────────────────────────────────
+export * from "./solid-surfaces.js";