@delacour/react-native-ui 0.1.0-alpha.4 → 0.1.0

package/src/components/feedback/feedback-cancel.tsx

@@ -0,0 +1,34 @@
+import { type ReactElement, useCallback } from "react";
+import { Button, type ButtonProps } from "../button";
+import { useFeedbackPart } from "./feedback.context";
+
+export type FeedbackCancelProps = ButtonProps;
+
+/**
+ * Closes the dialog and keeps the draft — a `secondary` `Button` labelled
+ * "Cancel" unless given children. Clearing on cancel would throw away a long
+ * message the user only meant to put down for a moment.
+ *
+ * @example
+ * <Feedback.Cancel />
+ */
+export function FeedbackCancel({
+	variant = "secondary",
+	children = "Cancel",
+	onPress,
+	...props
+}: FeedbackCancelProps): ReactElement {
+	const { close } = useFeedbackPart("Feedback.Cancel");
+
+	const handlePress = useCallback(() => {
+		close();
+		onPress?.();
+	}, [close, onPress]);
+
+	return (
+		<Button onPress={handlePress} variant={variant} {...props}>
+			{children}
+		</Button>
+	);
+}
+FeedbackCancel.displayName = "DelacourUI.Feedback.Cancel";

package/src/components/feedback/feedback-close.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { Dialog, type DialogCloseProps } from "../dialog";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackCloseProps = DialogCloseProps;
+
+/**
+ * The ✕ in the well's top-right corner — `Dialog.Close`, positioned against
+ * the panel rather than the shell. `Feedback.Title`'s `pr-8` reserves its
+ * clearance. Labelled `"Close"`; the draft is kept.
+ *
+ * With `asChild` it donates the close to its child, as `Dialog.Close` does.
+ *
+ * @example
+ * <Feedback.Close />
+ */
+export function FeedbackClose(props: FeedbackCloseProps): ReactElement {
+	if (props.asChild) return <Dialog.Close {...props} />;
+	return <Dialog.Close {...props} className={feedbackVariants().close({ className: props.className })} />;
+}
+FeedbackClose.displayName = "DelacourUI.Feedback.Close";

package/src/components/feedback/feedback-content.tsx

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { Dialog, type DialogContentProps } from "../dialog";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackContentProps = DialogContentProps;
+
+/**
+ * The shell — a `Dialog.Content` on the muted band.
+ *
+ * Portal, scrim, motion, keyboard lift, back button, escape and focus are all
+ * Dialog's. This only swaps the card's fill for `bg-muted` and tightens its
+ * padding, so the `Feedback.Panel` inside reads as a well sunk into it and the
+ * footer's actions sit on the band around it.
+ *
+ * @example
+ * <Feedback.Content>
+ *   <Feedback.Panel>…</Feedback.Panel>
+ *   <Feedback.Footer>…</Feedback.Footer>
+ * </Feedback.Content>
+ */
+export function FeedbackContent({ className, ...props }: FeedbackContentProps): ReactElement {
+	return <Dialog.Content className={feedbackVariants().content({ className })} {...props} />;
+}
+FeedbackContent.displayName = "DelacourUI.Feedback.Content";

package/src/components/feedback/feedback-field.tsx

@@ -0,0 +1,70 @@
+import { type ReactElement, useCallback } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { resolvePlaceholderAccentClass, resolveSelectionAccentClass } from "../input/input.variants";
+import { useFeedbackPart } from "./feedback.context";
+import { feedbackVariants, resolveFeedbackFieldHeightStyle } from "./feedback.variants";
+
+export type FeedbackFieldProps = Omit<TextInputProps, "value" | "onChangeText" | "multiline"> & {
+	className?: string;
+	/** Rows before it grows. Default 6. */
+	minRows?: number;
+	/** Rows it grows to before it scrolls. Default 12. */
+	maxRows?: number;
+	/** Read-only — while sending, say. A send in flight makes it read-only on its own. */
+	isDisabled?: boolean;
+};
+
+/**
+ * Where the message is written: a bare multiline `TextInput` with no box of
+ * its own, because the well around it is the box.
+ *
+ * The draft is the root's — `value` and `onChangeText` are withheld — so it
+ * survives the dialog closing and reopening, and `useFeedback().clear()` is
+ * the one way to empty it. It is floored at `minRows` and grows to `maxRows`
+ * before it scrolls (`resolveFeedbackFieldHeightStyle`), as a style, since a
+ * runtime number cannot be a Tailwind class.
+ *
+ * While a promise from `Feedback.Submit` is in flight it is read-only, so what
+ * is being sent is what stays on screen. Its label defaults to the title's
+ * text when the title is a plain string.
+ *
+ * Placeholder, caret and selection take `Input`'s `accent-*` defaults.
+ *
+ * @example
+ * <Feedback.Field placeholder="Tell us what got in your way" />
+ */
+export function FeedbackField({
+	className,
+	minRows,
+	maxRows,
+	isDisabled = false,
+	accessibilityLabel,
+	editable,
+	style,
+	...props
+}: FeedbackFieldProps): ReactElement {
+	const { value, setValue, isSending, titleText } = useFeedbackPart("Feedback.Field");
+	const isReadOnly = isDisabled || isSending;
+	const selectionAccent = resolveSelectionAccentClass({});
+
+	const handleChangeText = useCallback((text: string) => setValue(text), [setValue]);
+
+	return (
+		<TextInput
+			accessibilityLabel={accessibilityLabel ?? titleText}
+			accessibilityState={{ disabled: isReadOnly }}
+			className={feedbackVariants().field({ className })}
+			cursorColorClassName={selectionAccent}
+			placeholderTextColorClassName={resolvePlaceholderAccentClass()}
+			selectionColorClassName={selectionAccent}
+			style={[resolveFeedbackFieldHeightStyle({ maxRows, minRows }), style]}
+			textAlignVertical="top"
+			{...props}
+			editable={isReadOnly ? false : editable}
+			multiline
+			onChangeText={handleChangeText}
+			value={value}
+		/>
+	);
+}
+FeedbackField.displayName = "DelacourUI.Feedback.Field";

package/src/components/feedback/feedback-footer.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackFooterProps = ViewProps & { className?: string };
+
+/**
+ * The actions, on the band under the well — an end-aligned row, inset less
+ * than the well so the buttons line up with the shell's edge rather than the
+ * well's text.
+ *
+ * @example
+ * <Feedback.Footer>
+ *   <Feedback.Cancel />
+ *   <Feedback.Submit onSubmit={send} />
+ * </Feedback.Footer>
+ */
+export function FeedbackFooter({ className, ...props }: FeedbackFooterProps): ReactElement {
+	return <View className={feedbackVariants().footer({ className })} {...props} />;
+}
+FeedbackFooter.displayName = "DelacourUI.Feedback.Footer";

package/src/components/feedback/feedback-panel.tsx

@@ -0,0 +1,54 @@
+import { type ReactElement, useCallback } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { FEEDBACK_PANEL_RESIZE_MS, feedbackVariants } from "./feedback.variants";
+
+export type FeedbackPanelProps = ViewProps & { className?: string };
+
+/** No height measured yet: the clip wraps its content until the first layout. */
+const UNMEASURED = -1;
+
+/**
+ * The recessed well the title, the close and the field sit in.
+ *
+ * **Its height is measured and animated, never laid out.** The well is drawn
+ * inside a clip whose height follows the well's own `onLayout` on a short
+ * timing, so when a multi-step flow swaps the panel's children — a rating, then
+ * a message, then thanks — the clip eases to the new height. The shell grows
+ * with it through ordinary layout and stays centred on every frame, so it never
+ * jumps; a layout transition on the panel alone would animate the panel inside
+ * a shell that had already snapped to its final size. The first layout lands
+ * without animating, and under reduce motion every change does.
+ *
+ * @example
+ * <Feedback.Panel>
+ *   <Feedback.Title>What should we fix first?</Feedback.Title>
+ *   <Feedback.Close />
+ *   <Feedback.Field placeholder="Tell us what got in your way" />
+ * </Feedback.Panel>
+ */
+export function FeedbackPanel({ className, onLayout, ...props }: FeedbackPanelProps): ReactElement {
+	const isReduced = useReducedMotion();
+	const height = useSharedValue(UNMEASURED);
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			const next = event.nativeEvent.layout.height;
+			height.value =
+				height.value === UNMEASURED || isReduced ? next : withTiming(next, { duration: FEEDBACK_PANEL_RESIZE_MS });
+			onLayout?.(event);
+		},
+		[height, isReduced, onLayout]
+	);
+
+	const clipStyle = useAnimatedStyle(() => (height.value === UNMEASURED ? {} : { height: height.value }));
+
+	const slots = feedbackVariants();
+
+	return (
+		<Animated.View className={slots.clip()} style={clipStyle}>
+			<View className={slots.panel({ className })} onLayout={handleLayout} {...props} />
+		</Animated.View>
+	);
+}
+FeedbackPanel.displayName = "DelacourUI.Feedback.Panel";

package/src/components/feedback/feedback-submit.tsx

@@ -0,0 +1,74 @@
+import { type ReactElement, useCallback } from "react";
+import { Button, type ButtonProps } from "../button";
+import { useFeedbackPart } from "./feedback.context";
+import { canSubmitFeedback } from "./feedback.variants";
+
+export type FeedbackSubmitProps = Omit<ButtonProps, "onPress"> & {
+	/** Receives the trimmed message. Does NOT close — sending has to finish first. */
+	onSubmit: (value: string) => void | Promise<void>;
+	/** Allow submitting an empty message (e.g. when chips were picked). Default false. */
+	canSubmitEmpty?: boolean;
+};
+
+/** Whether a value is a promise, without trusting `instanceof` across realms. */
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+	return typeof value === "object" && value !== null && typeof (value as PromiseLike<unknown>).then === "function";
+}
+
+/**
+ * Sends the message — a primary `Button` labelled "Send" unless given children.
+ *
+ * Disabled while `canSubmitFeedback` says no: an empty or whitespace draft,
+ * unless `canSubmitEmpty`. `onSubmit` receives the trimmed text.
+ *
+ * **It never closes the dialog.** When `onSubmit` returns a promise the button
+ * shows its loading state and the field turns read-only until the promise
+ * settles, and then the dialog is still open — so a failure can be shown in
+ * the well with the draft intact. Close and clear from `onSubmit` on success,
+ * through `useFeedback()` or controlled state. Handle a failure inside
+ * `onSubmit`: a rejection is not caught here, so it still reaches the app's
+ * unhandled-rejection reporting rather than vanishing.
+ *
+ * @example
+ * <Feedback.Submit
+ *   onSubmit={async (message) => {
+ *     await send(message);
+ *     clear();
+ *     close();
+ *   }}
+ * />
+ */
+export function FeedbackSubmit({
+	onSubmit,
+	canSubmitEmpty = false,
+	isDisabled = false,
+	isLoading = false,
+	children = "Send",
+	...props
+}: FeedbackSubmitProps): ReactElement {
+	const { value, isSending, setSending } = useFeedbackPart("Feedback.Submit");
+	const canSubmit = canSubmitFeedback({ canSubmitEmpty, isDisabled, value });
+
+	const handlePress = useCallback(() => {
+		if (!canSubmit || isSending) return;
+		const result = onSubmit(value.trim());
+		if (!isPromiseLike(result)) return;
+
+		setSending(true);
+		const settle = () => setSending(false);
+		void Promise.resolve(result).finally(settle);
+	}, [canSubmit, isSending, onSubmit, setSending, value]);
+
+	return (
+		<Button
+			isDisabled={!canSubmit}
+			isLoading={isLoading || isSending}
+			onPress={handlePress}
+			variant="primary"
+			{...props}
+		>
+			{children}
+		</Button>
+	);
+}
+FeedbackSubmit.displayName = "DelacourUI.Feedback.Submit";

package/src/components/feedback/feedback-title.tsx

@@ -0,0 +1,34 @@
+import { type ReactElement, useEffect } from "react";
+import { Dialog, type DialogTitleProps } from "../dialog";
+import { useFeedbackPart } from "./feedback.context";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackTitleProps = DialogTitleProps;
+
+/**
+ * The question the dialog asks — a `Dialog.Title`, inside the well.
+ *
+ * It is what the dialog is labelled by and where accessibility focus lands on
+ * open, exactly as in a `Dialog`. When its children are a plain string, that
+ * string also becomes `Feedback.Field`'s default `accessibilityLabel`, so the
+ * field announces the question rather than only its placeholder.
+ *
+ * @example
+ * <Feedback.Title>What should we fix first?</Feedback.Title>
+ */
+export function FeedbackTitle({ className, children, ...props }: FeedbackTitleProps): ReactElement {
+	const { setTitleText } = useFeedbackPart("Feedback.Title");
+	const text = typeof children === "string" ? children : undefined;
+
+	useEffect(() => {
+		setTitleText(text);
+		return () => setTitleText(undefined);
+	}, [setTitleText, text]);
+
+	return (
+		<Dialog.Title className={feedbackVariants().title({ className })} {...props}>
+			{children}
+		</Dialog.Title>
+	);
+}
+FeedbackTitle.displayName = "DelacourUI.Feedback.Title";

package/src/components/feedback/feedback-trigger.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import { Dialog, type DialogTriggerProps } from "../dialog";
+
+export type FeedbackTriggerProps = DialogTriggerProps;
+
+/**
+ * The control that opens the feedback dialog — `Dialog.Trigger`, unchanged.
+ *
+ * `asChild` donates the open to a `Button` rather than wrapping it, for the
+ * reason `Dialog.Trigger` gives: two tap gestures nested are not simultaneous.
+ *
+ * @example
+ * <Feedback.Trigger asChild>
+ *   <Button variant="secondary">Give feedback</Button>
+ * </Feedback.Trigger>
+ */
+export function FeedbackTrigger(props: FeedbackTriggerProps): ReactElement {
+	return <Dialog.Trigger {...props} />;
+}
+FeedbackTrigger.displayName = "DelacourUI.Feedback.Trigger";

package/src/components/feedback/feedback.context.tsx

@@ -0,0 +1,73 @@
+import { createContext, type ReactElement, type ReactNode, use } from "react";
+
+export type FeedbackContextValue = {
+	/** The draft as typed — untrimmed. */
+	value: string;
+	/** Replaces the draft. Reports through `onValueChange`. */
+	setValue: (value: string) => void;
+	/** Whether the dialog is open. */
+	isOpen: boolean;
+	/** Closes the dialog. The draft is kept. */
+	close: () => void;
+	/** Empties the draft — after a successful send, say. */
+	clear: () => void;
+};
+
+/** What the parts share that a caller has no use for. */
+export type FeedbackInternalValue = FeedbackContextValue & {
+	/** Whether a promise `onSubmit` returned is still in flight. */
+	isSending: boolean;
+	setSending: (isSending: boolean) => void;
+	/** The title's text when it is a plain string — the field's default label. */
+	titleText: string | undefined;
+	setTitleText: (text: string | undefined) => void;
+};
+
+const FeedbackContext = createContext<FeedbackInternalValue | null>(null);
+
+/**
+ * Supplies the feedback dialog's draft and send state to its parts.
+ *
+ * Its own module, importing nothing but React, so a part can read it without
+ * importing `./feedback` — that import would close a cycle, and Metro serves a
+ * partially initialised module for one.
+ */
+export function FeedbackProvider({
+	value,
+	children,
+}: {
+	value: FeedbackInternalValue;
+	children: ReactNode;
+}): ReactElement {
+	return <FeedbackContext value={value}>{children}</FeedbackContext>;
+}
+FeedbackProvider.displayName = "DelacourUI.Feedback.Provider";
+
+/** The enclosing feedback dialog's context, or null outside a `<Feedback>`. */
+export function useFeedbackContext(): FeedbackContextValue | null {
+	return use(FeedbackContext);
+}
+
+/**
+ * Reads the enclosing feedback dialog's draft, its setters and its open state.
+ *
+ * Lets a custom child — a row of chips, a rating step — read or replace the
+ * draft, and lets an `onSubmit` close and clear once the send has gone through.
+ * Throws outside a `<Feedback>`.
+ */
+export function useFeedback(): FeedbackContextValue {
+	const context = use(FeedbackContext);
+	if (!context) {
+		throw new Error("useFeedback must be called inside a <Feedback>.");
+	}
+	return context;
+}
+
+/** The full context, for a part that cannot work without one. Internal. */
+export function useFeedbackPart(component: string): FeedbackInternalValue {
+	const context = use(FeedbackContext);
+	if (!context) {
+		throw new Error(`${component} must be rendered inside a <Feedback>.`);
+	}
+	return context;
+}

package/src/components/feedback/feedback.tsx

@@ -0,0 +1,135 @@
+import { type ReactElement, type ReactNode, useCallback, useMemo, useState } from "react";
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { Dialog } from "../dialog";
+import { type FeedbackInternalValue, FeedbackProvider } from "./feedback.context";
+import { FeedbackAction } from "./feedback-action";
+import { FeedbackCancel } from "./feedback-cancel";
+import { FeedbackClose } from "./feedback-close";
+import { FeedbackContent } from "./feedback-content";
+import { FeedbackField } from "./feedback-field";
+import { FeedbackFooter } from "./feedback-footer";
+import { FeedbackPanel } from "./feedback-panel";
+import { FeedbackSubmit } from "./feedback-submit";
+import { FeedbackTitle } from "./feedback-title";
+import { FeedbackTrigger } from "./feedback-trigger";
+
+export type FeedbackProps = {
+	/** Whether the dialog is open. Pass it to control the dialog; omit it and the dialog holds its own state. */
+	isOpen?: boolean;
+	/** Whether an uncontrolled dialog starts open. Default false. */
+	defaultOpen?: boolean;
+	/** Called with the new value whenever the dialog opens or closes, from any path. */
+	onOpenChange?: (isOpen: boolean) => void;
+	/** The draft. Pass it to control the text; omit it and the dialog keeps its own draft. */
+	value?: string;
+	/** The draft an uncontrolled dialog starts with. Default "". */
+	defaultValue?: string;
+	/** Called with the draft on every keystroke, and on `clear()`. */
+	onValueChange?: (value: string) => void;
+	/** Whether a scrim tap, Android back and the iOS escape gesture close it. Default true. */
+	isDismissible?: boolean;
+	children: ReactNode;
+};
+
+function FeedbackRoot({
+	isOpen,
+	defaultOpen = false,
+	onOpenChange,
+	value,
+	defaultValue = "",
+	onValueChange,
+	isDismissible = true,
+	children,
+}: FeedbackProps): ReactElement {
+	const [open, setOpen] = useControllableState({ defaultValue: defaultOpen, onChange: onOpenChange, value: isOpen });
+	const [draft, setDraft] = useControllableState({ defaultValue, onChange: onValueChange, value });
+	const [isSending, setSending] = useState(false);
+	const [titleText, setTitleText] = useState<string | undefined>(undefined);
+
+	const close = useCallback(() => {
+		if (open) setOpen(false);
+	}, [open, setOpen]);
+	const clear = useCallback(() => setDraft(""), [setDraft]);
+
+	const context = useMemo<FeedbackInternalValue>(
+		() => ({
+			clear,
+			close,
+			isOpen: open,
+			isSending,
+			setSending,
+			setTitleText,
+			setValue: setDraft,
+			titleText,
+			value: draft,
+		}),
+		[clear, close, draft, isSending, open, setDraft, titleText]
+	);
+
+	// The draft lives here, above `Dialog.Content`, which unmounts once the exit
+	// animation ends — so an uncontrolled draft survives a close and a reopen.
+	return (
+		<Dialog isDismissible={isDismissible} isOpen={open} onOpenChange={setOpen}>
+			<FeedbackProvider value={context}>{children}</FeedbackProvider>
+		</Dialog>
+	);
+}
+
+/**
+ * A dialog for writing — "What should we fix first?", a bug report, a
+ * one-question survey.
+ *
+ * It is a `Dialog` whose text field sits in a recessed well, with the actions
+ * on the band around it. Open state, portal, scrim, back, escape, focus and the
+ * keyboard lift are all Dialog's; this adds the draft, a submit that waits for
+ * the send, and a well that eases between heights when a multi-step flow swaps
+ * its content. Not for confirmations or warnings — use a `Dialog`.
+ *
+ * The draft is kept across close and reopen while uncontrolled;
+ * `useFeedback().clear()` empties it. `Feedback.Submit` never closes the
+ * dialog: close from `onSubmit` once the send has gone through.
+ *
+ * Draws through `Overlay.Portal`, so the app needs `OverlayProvider` mounted
+ * once at its root.
+ *
+ * @example
+ * <Feedback>
+ *   <Feedback.Trigger asChild>
+ *     <Button variant="secondary">Give feedback</Button>
+ *   </Feedback.Trigger>
+ *   <Feedback.Content>
+ *     <Feedback.Panel>
+ *       <Feedback.Title>What should we fix first?</Feedback.Title>
+ *       <Feedback.Close />
+ *       <Feedback.Field placeholder="Tell us what got in your way" />
+ *     </Feedback.Panel>
+ *     <Feedback.Footer>
+ *       <Feedback.Cancel />
+ *       <Feedback.Submit onSubmit={send} />
+ *     </Feedback.Footer>
+ *   </Feedback.Content>
+ * </Feedback>
+ */
+export const Feedback = Object.assign(FeedbackRoot, {
+	/** The control that opens it. `asChild` donates the press to a `Button`. */
+	Trigger: FeedbackTrigger,
+	/** The shell — a `Dialog.Content` on the muted band. Renders nothing while closed. */
+	Content: FeedbackContent,
+	/** The recessed well holding the title, the close and the field. Eases between heights. */
+	Panel: FeedbackPanel,
+	/** The question — a `Dialog.Title`, and the field's default label. */
+	Title: FeedbackTitle,
+	/** The ✕ in the well's corner. Keeps the draft. */
+	Close: FeedbackClose,
+	/** The multiline text field, bound to the draft. */
+	Field: FeedbackField,
+	/** The actions, end-aligned on the band under the well. */
+	Footer: FeedbackFooter,
+	/** A custom footer action — a `secondary` `Button`. */
+	Action: FeedbackAction,
+	/** Closes and keeps the draft. */
+	Cancel: FeedbackCancel,
+	/** Sends the trimmed draft; waits on a promise; never closes. */
+	Submit: FeedbackSubmit,
+	displayName: "DelacourUI.Feedback",
+});