@drawbridge/components 0.0.78 → 0.1.1

package/types/dashboard/form-verify-prize.d.ts

@@ -0,0 +1,40 @@
+import { ComponentType, ReactNode } from 'react';
+
+// A question on the prize, as GET /otc/:id returns prize.fields.
+export interface FormVerifyPrizeField {
+	attributes?: { max?: number | string };
+	// 'campaign:field:select' renders a select of settings.options; anything else a text input.
+	feature?: string;
+	label: string;
+	settings?: { options?: { option: string }[] };
+	slug: string;
+}
+
+export interface FormVerifyPrizeProps {
+	// The review modal's final button; defaults to 'Accept'.
+	action?: ReactNode;
+	// The review links campaign.agreements.terms.link when there is one.
+	campaign?: { agreements?: { terms?: { link?: string | null } } } | null;
+	children?: ReactNode;
+	// The page button that opens the review; defaults to 'Continue'.
+	confirm?: ReactNode;
+	fields?: FormVerifyPrizeField[];
+	// The one-time code id, posted to /api/otc/:id/verify.
+	id: string;
+	onError?: ( error: Error ) => void;
+	onSuccess?: ( response: unknown ) => void;
+	// Extra yup fields; any address field adds the shipping address to the post.
+	schema?: Record<string, unknown>;
+	// The review modal's title.
+	title?: ReactNode;
+}
+
+export interface PrizeTermsProps {
+	link?: string | null;
+}
+
+export declare const PrizeTerms: ComponentType<PrizeTermsProps>;
+
+declare const FormVerifyPrize: ComponentType<FormVerifyPrizeProps>;
+
+export default FormVerifyPrize;

package/types/dashboard/google.d.ts

@@ -0,0 +1,48 @@
+import { ComponentType } from 'react';
+
+// Both read the key from the [ 'app' ] query ( app.credentials.googleApiKey ).
+// The module has no default export.
+
+// lib/geo.js toAddressPayload.
+export interface GoogleAddressPayload {
+	address?: string;
+	address2: '';
+	city?: string;
+	country?: string;
+	fullAddress?: string;
+	postalCode?: string;
+	province?: string;
+}
+
+export interface InputGoogleAutocompleteProps {
+	// Place fields fetched on select.
+	fields?: string[];
+	includedPrimaryTypes?: string[];
+	// Characters typed before suggestions are asked for; defaults to 3.
+	minLength?: number;
+	onAddressChange?: ( address: GoogleAddressPayload ) => void;
+	onChange?: ( value: string ) => void;
+	// The Places Place, after its fields are fetched.
+	onSelect?: ( place: unknown ) => void;
+	placeholder?: string;
+	// Controlled when set; otherwise the field keeps its own text.
+	value?: string;
+}
+
+export interface InputMapValue {
+	// [ lng, lat ]
+	coordinates?: [ number, number ];
+	// Metres; defaults to 800.
+	radius?: number;
+	zoom?: number;
+}
+
+export interface InputMapProps {
+	onChange: ( value: InputMapValue ) => void;
+	onError?: ( error: unknown ) => void;
+	value?: InputMapValue | false | null;
+}
+
+export declare const InputGoogleAutocomplete: ComponentType<InputGoogleAutocompleteProps>;
+
+export declare const InputMap: ComponentType<InputMapProps>;

package/types/dashboard/guard-navigation.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+
+// Takes no props: it reads the [ 'dirty' ] query the useForm wrapper writes.
+export type GuardNavigationProps = Record<string, never>;
+
+// Hands a save that redirects the back-button trap; true when there was one.
+export declare const releaseTrap: () => boolean;
+
+declare const GuardNavigation: ComponentType<GuardNavigationProps>;
+
+export default GuardNavigation;

package/types/dashboard/guide.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface GuideStep {
+	content?: ReactNode[];
+	// data.video is an mp4 shown above the content; other keys are the
+	// caller's callback hooks ( e.g. 'next.step:before' ).
+	data?: { video?: string; [ key: string ]: unknown };
+	disableBeacon?: boolean;
+	placement?: string;
+	target: string | HTMLElement;
+	title?: ReactNode;
+	[ key: string ]: unknown;
+}
+
+// Everything else is passed to react-joyride ( run, stepIndex, callback… ).
+export interface GuideProps {
+	steps?: GuideStep[];
+	[ key: string ]: unknown;
+}
+
+declare const Guide: ComponentType<GuideProps>;
+
+export default Guide;

package/types/dashboard/iframe.d.ts

@@ -0,0 +1,18 @@
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+
+export interface IframeProps {
+	className?: string;
+	// Shown over the loader while `loading`.
+	children?: ReactNode;
+	// The caller is not ready: loader only, no iframe.
+	loading?: boolean;
+	// Target origin for the { connect, referrer } message sent on load ( needs a ref ).
+	origin?: string;
+	position?: 'center' | 'start' | 'end';
+	referrer?: string;
+	src?: string;
+}
+
+declare const Iframe: ForwardRefExoticComponent<IframeProps & RefAttributes<HTMLIFrameElement>>;
+
+export default Iframe;

package/types/dashboard/input-address-saved.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from 'react';
+
+// Takes no props: it reads and writes address, address2, city, country,
+// postal and province on the surrounding react-hook-form ( useFormContext ).
+export type InputAddressSavedProps = Record<string, never>;
+
+declare const InputAddressSaved: ComponentType<InputAddressSavedProps>;
+
+export default InputAddressSaved;

package/types/dashboard/input-array.d.ts

@@ -0,0 +1,56 @@
+import { ButtonHTMLAttributes, ComponentType, ReactNode } from 'react';
+import { ButtonProps } from '../shared/button';
+import { Control, FieldValues, UseFieldArrayAppend, UseFieldArrayRemove, UseFieldArrayUpdate } from 'react-hook-form';
+
+// The module has no default export.
+
+type IconComponent = ComponentType<{ className?: string }>;
+
+// A secondary Button, label and icon at opposite edges; other Button props pass through.
+export interface InputArrayButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className'> {
+	// Defaults to Plus; null for none.
+	icon?: IconComponent | null;
+	justify?: ButtonProps[ 'justify' ];
+	reverse?: ButtonProps[ 'reverse' ];
+	text?: ReactNode;
+	className?: never;
+	[ key: string ]: unknown;
+}
+
+// A link Button drawing a round outline around the icon.
+export interface InputArrayControlProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+	// Defaults to Trash.
+	icon?: IconComponent;
+	className?: never;
+	[ key: string ]: unknown;
+}
+
+export interface InputArrayRow {
+	field: Record<string, unknown>;
+	// Only from InputArraySortable: the row's drag handle.
+	handle?: ReactNode;
+	index: number;
+	remove: UseFieldArrayRemove;
+	update: UseFieldArrayUpdate<FieldValues>;
+}
+
+export interface InputArrayProps {
+	children: ( row: InputArrayRow ) => ReactNode;
+	control: Control<any>;
+	// Shown with no rows; false or null for nothing. Defaults to 'No items added'.
+	empty?: ReactNode | false | null;
+	name: string;
+	renderButton?: ( append: UseFieldArrayAppend<FieldValues> ) => ReactNode;
+	renderControls?: ( row: Omit<InputArrayRow, 'handle'> ) => ReactNode[];
+	// Only 'data-guide' is passed on.
+	[ key: string ]: unknown;
+}
+
+export interface InputArraySortableProps extends InputArrayProps {
+	onSort?: ( items: Record<string, unknown>[] ) => void;
+}
+
+export declare const InputArrayButton: ComponentType<InputArrayButtonProps>;
+export declare const InputArrayControl: ComponentType<InputArrayControlProps>;
+export declare const InputArray: ComponentType<InputArrayProps>;
+export declare const InputArraySortable: ComponentType<InputArraySortableProps>;

package/types/dashboard/input-color.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+
+// What onChange hands back, from tinycolor.
+export interface InputColorValue {
+	attributes?: { brightness: number; dark: boolean; light: boolean; luminance: number };
+	hex: string;
+	hsl?: { h: number; s: number; l: number; a: number };
+	hsv?: { h: number; s: number; v: number; a: number };
+	rgb?: string;
+}
+
+export interface InputColorProps {
+	onChange: ( value: InputColorValue ) => void;
+	// Without a hex the field reads #000000; its swatch still opens the picker.
+	value?: Partial<InputColorValue> | null;
+}
+
+declare const InputColor: ComponentType<InputColorProps>;
+
+export default InputColor;

package/types/dashboard/input-combobox.d.ts

@@ -0,0 +1,30 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+
+export interface InputComboboxOption {
+	badge?: { text?: ReactNode; type?: string };
+	className?: string;
+	disabled?: boolean;
+	// Renders the option as this element instead of a ComboboxOption.
+	element?: ElementType;
+	// A non-selectable group label.
+	header?: boolean;
+	image?: string;
+	// The label.
+	key: string;
+	props?: Record<string, unknown>;
+	value?: unknown;
+}
+
+export interface InputComboboxProps {
+	disabled?: boolean;
+	onChange: ( value: unknown ) => void;
+	options: InputComboboxOption[];
+	placeholder?: string;
+	// Typing filters the options.
+	searchable?: boolean;
+	value?: unknown;
+}
+
+declare const InputCombobox: ComponentType<InputComboboxProps>;
+
+export default InputCombobox;

package/types/dashboard/input-date.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+
+export interface InputDateProps {
+	className?: string;
+	disabled?: boolean;
+	// 'YYYY-MM-DD' or anything Date parses.
+	max?: string | Date;
+	min?: string | Date;
+	// 'YYYY-MM-DD', or an ISO string when `time`.
+	onChange: ( value: string ) => void;
+	// Adds hour, minute and AM/PM under the calendar.
+	time?: boolean;
+	value?: string | Date | null;
+}
+
+export interface InputDateRangeValue {
+	// 'YYYY-MM-DD', or '' when unset.
+	end?: string;
+	start?: string;
+}
+
+export interface InputDateRangeProps {
+	className?: string;
+	onChange: ( value: InputDateRangeValue ) => void;
+	value?: InputDateRangeValue;
+}
+
+export declare const InputDateRange: ComponentType<InputDateRangeProps>;
+
+declare const InputDate: ComponentType<InputDateProps>;
+
+export default InputDate;

package/types/dashboard/input-editor.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+import { Node } from '@tiptap/core';
+
+export interface InputEditorVariable {
+	// Inserted as {{key}} in the html and text.
+	key: string;
+	label: string;
+}
+
+export interface InputEditorProps {
+	disabled?: boolean;
+	// Both renderings; pass `html` to a react-hook-form field, not the object.
+	onChange?: ( value: { html: string; text: string } ) => void;
+	// HTML.
+	value?: string;
+	variables?: InputEditorVariable[];
+}
+
+export interface EditorViewProps {
+	value?: string;
+}
+
+export declare const Variable: Node;
+
+// The text serializer that keeps a link's address in the plain rendering.
+export declare const linkText: ( props: { node: any; parent: any; index: number } ) => string;
+
+export declare const EditorView: ComponentType<EditorViewProps>;
+
+declare const InputEditor: ComponentType<InputEditorProps>;
+
+export default InputEditor;

package/types/dashboard/input-fields.d.ts

@@ -0,0 +1,49 @@
+import { ComponentType } from 'react';
+import { InputFileValue } from './input-file';
+
+// Field groups for a parent form: each reads useFormContext, so it must sit
+// inside the form's FormProvider.
+
+type OnUpdate = ( values: Record<string, unknown> ) => void;
+
+interface Organization { id: string; [ key: string ]: unknown }
+
+// yup shape builders the parent form spreads into its schema.
+export const schemas: {
+	address: () => unknown;
+	campaign: ( args: { typeEnum: string[] } ) => Record<string, unknown>;
+	currency: () => Record<string, unknown>;
+	images: () => Record<string, unknown>;
+	page: () => Record<string, unknown>;
+	style: () => Record<string, unknown>;
+};
+
+// address, address2, city, country, province, postal; countries from the
+// cached [ 'countries' ] query.
+export const InputFieldsAddress: ComponentType<{ showAutocomplete?: boolean }>;
+
+// style.heading/body fonts, colours and radii.
+export const InputFieldsStyle: ComponentType<{ disabled?: boolean; onUpdate?: OnUpdate }>;
+
+// title and type ( options from the cached [ 'app' ] enums ).
+export const InputFieldsCampaign: ComponentType<{ onUpdate?: ( title: string ) => void }>;
+
+// currency ( options from the cached [ 'app' ] enums ).
+export const InputFieldsCurrency: ComponentType<{ label?: string }>;
+
+export const InputFieldsPage: ComponentType<{ onUpdate?: ( title: string ) => void }>;
+
+// headline and description, each with the AI drawer.
+export const InputFieldsDetails: ComponentType<{ onUpdate?: OnUpdate; organization?: Organization }>;
+
+interface InputFieldsImagesProps {
+	onUpdate?: OnUpdate;
+	organization?: Organization;
+	values?: { images?: { logo?: InputFileValue | null; preview?: InputFileValue | null }; organization?: string; [ key: string ]: unknown };
+}
+
+// images.logo and images.preview.
+export const InputFieldsImages: ComponentType<InputFieldsImagesProps>;
+
+// A sortable gallery above InputFieldsImages.
+export const InputFieldsMedia: ComponentType<InputFieldsImagesProps>;

package/types/dashboard/input-file.d.ts

@@ -0,0 +1,30 @@
+import { ComponentType, ReactNode, SVGProps } from 'react';
+
+export interface InputFileValue {
+	extension?: string;
+	filename?: string;
+	id: string;
+	mimetype?: string;
+	// A value with sizes renders as the chosen file; anything else as the button.
+	sizes?: Record<string, string>;
+	updatedAt?: string;
+	[ key: string ]: unknown;
+}
+
+export interface InputFileProps {
+	button?: { icon?: ComponentType<SVGProps<SVGSVGElement>>; text?: ReactNode };
+	disabled?: boolean;
+	// Base for the picker's library and upload ( /organization/:id ).
+	endpoint?: string;
+	filters?: Record<string, unknown>;
+	// false hides the remove button.
+	nullable?: boolean;
+	onChange: ( file: InputFileValue | null ) => void;
+	organization?: { id: string; [ key: string ]: unknown } | string;
+	type?: 'image' | 'media' | 'video' | 'all' | string;
+	value?: InputFileValue | null | '';
+}
+
+declare const InputFile: ComponentType<InputFileProps>;
+
+export default InputFile;

package/types/dashboard/input-font.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+
+export interface InputFontValue {
+	family?: string;
+	transform?: 'none' | 'capitalize' | 'lowercase' | 'uppercase';
+	weight?: string;
+}
+
+export interface InputFontProps {
+	disabled?: boolean;
+	// A new family resets weight to that family's first.
+	onChange: ( value: InputFontValue ) => void;
+	// Empty means Roboto Flex, no transform.
+	value?: InputFontValue | '';
+}
+
+// Reads fonts from the cached [ 'app' ] query; renders nothing without them.
+declare const InputFont: ComponentType<InputFontProps>;
+
+export default InputFont;

package/types/dashboard/input-group-ai.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface InputGroupAIProps {
+	className?: string;
+	'data-guide'?: string;
+	error?: ReactNode;
+	// The control, usually an InputTextarea bound to the same value.
+	input: ReactNode;
+	label?: ReactNode;
+	// Passed to the AI drawer as the character limit.
+	limit?: number;
+	// The help line under the field: text or a component (a link, a badge). Errors go through Error.
+	message?: ReactNode;
+	// Called with the generated text.
+	onChange: ( value: string ) => void;
+	organization?: { id: string; [ key: string ]: unknown };
+	// The AI button is disabled while empty.
+	value?: string;
+	[ key: string ]: unknown;
+}
+
+declare const InputGroupAI: ComponentType<InputGroupAIProps>;
+
+export default InputGroupAI;

package/types/dashboard/input-radio.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType, MouseEvent, ReactNode } from 'react';
+import { BadgeProps } from '../shared/badge';
+
+export interface InputRadioProps {
+	badge?: { text?: ReactNode; type?: BadgeProps[ 'type' ] };
+	checked?: boolean;
+	className?: string;
+	disabled?: boolean;
+	label?: ReactNode;
+	// The radio is a button: this is its click.
+	onChange?: ( event: MouseEvent<HTMLButtonElement> ) => void;
+	value?: unknown;
+	// Spread onto the button ( id, name… ).
+	[ key: string ]: unknown;
+}
+
+declare const InputRadio: ComponentType<InputRadioProps>;
+
+export default InputRadio;

package/types/dashboard/input-resource.d.ts

@@ -0,0 +1,33 @@
+import { ComponentType, ReactNode } from 'react';
+import { ListResourceButton, ListResourceItem } from './list-resource';
+
+interface InputResourceBase {
+	empty?: ReactNode;
+	endpoint: string;
+	model: string;
+	params?: Record<string, unknown>;
+	// Labels both the chips and the picker rows; defaults to item.title.
+	render?: ( item: ListResourceItem ) => ReactNode;
+	renderButton?: ( args: ListResourceButton ) => ReactNode;
+	searchKeys?: string[];
+}
+
+export interface InputResourceSingleProps extends InputResourceBase {
+	multiple?: false;
+	onChange: ( item: ListResourceItem | null ) => void;
+	value?: ListResourceItem | null;
+}
+
+export interface InputResourceMultipleProps extends InputResourceBase {
+	// Disabled chips above the list, never offered by the picker.
+	fixed?: ListResourceItem[];
+	multiple: true;
+	onChange: ( items: ListResourceItem[] ) => void;
+	value?: ListResourceItem[];
+}
+
+export type InputResourceProps = InputResourceSingleProps | InputResourceMultipleProps;
+
+declare const InputResource: ComponentType<InputResourceProps>;
+
+export default InputResource;

package/types/dashboard/input-secret.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface InputSecretField {
+	// 'password' types as dots; anything else in the clear.
+	input?: string;
+	key?: string;
+	label: ReactNode;
+	// What a stored value shows ( never the value ).
+	mask?: string | null;
+	// The help line under the field: text or a component.
+	message?: ReactNode;
+	set?: boolean;
+	[ key: string ]: unknown;
+}
+
+export interface InputSecretProps {
+	// Pending removal: shows an empty box saying the save will remove it.
+	cleared?: boolean;
+	field: InputSecretField;
+	onChange: ( value: string ) => void;
+	onClear: () => void;
+	// Posts the emailed code; resolves to { result : { value } }.
+	onConfirm: ( code: string ) => Promise<{ result?: { value?: string } }>;
+	onError: ( error: unknown ) => void;
+	// Asks for the code; a rejection goes to onError.
+	onReveal: () => Promise<unknown>;
+	value?: string;
+}
+
+declare const InputSecret: ComponentType<InputSecretProps>;
+
+export default InputSecret;

package/types/dashboard/input-time.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType } from 'react';
+
+export interface InputTimeValue {
+	// '01'–'12'
+	hour: string;
+	// '00'–'59'
+	minute: string;
+	period: 'AM' | 'PM';
+	second?: string;
+}
+
+export interface InputTimeProps {
+	// The day picked; with min on the same day, slots before min are left off the lists.
+	date?: Date;
+	disabled?: boolean;
+	min?: Date;
+	// Always second '00'.
+	onChange: ( value: Required<InputTimeValue> ) => void;
+	// Defaults to 12:00 AM.
+	value?: InputTimeValue;
+}
+
+declare const InputTime: ComponentType<InputTimeProps>;
+
+export default InputTime;

package/types/dashboard/lib/confetti.d.ts

@@ -0,0 +1,2 @@
+// Three bursts of gold stars, 100ms apart (canvas-confetti; browser only).
+export declare const stars: () => void;

package/types/dashboard/lib/connection-controls.d.ts

@@ -0,0 +1,12 @@
+// What a connection page offers: `paused` (switched off on Drawbridge's side)
+// shows details and Disconnect only; `remove` is 'manage' (the vendor's own
+// page), 'disconnect' (ours) or null when nothing is connected.
+export declare const connectionControls: ( connection?: {
+	connect?: { manage?: unknown };
+	id?: string;
+	paused?: boolean;
+	[ key: string ]: unknown;
+} | null ) => {
+	paused: boolean;
+	remove: 'disconnect' | 'manage' | null;
+};

package/types/dashboard/lib/features.d.ts

@@ -0,0 +1,10 @@
+// Human labels for every feature key, flattened out of
+// @drawbridge/drawbridge-utils/features so nothing here has to be kept in
+// step by hand.
+export declare const featureLabels: Record<string, string>;
+
+export declare const featureLabel: ( key: string ) => string;
+
+// The features a plan can actually gate — the keys the free plan denies,
+// which is the only set a custom deal can decide either way.
+export declare const grantableFeatures: Array<{ key: string; label: string }>;

package/types/dashboard/lib/frames.d.ts

@@ -0,0 +1,12 @@
+// Video poster frame helpers. Mirrors frameMilliseconds in drawbridge-api's
+// route/organization-file.js.
+// @doc reference/media-assets.md#the-frames-model
+
+// Accepts both 'HH:MM:SS' (the api's stored format) and 'HH:MM:SS.mmm' (the
+// poster picker's scrubber format). Null when `timestamp` isn't a well-formed
+// 'HH:MM:SS[.mmm]' string.
+export declare const frameMilliseconds: ( timestamp: string | null | undefined ) => number | null;
+
+// frames[0] — the frame playback begins on, which is neither deletable nor
+// re-creatable.
+export declare const isStartingFrame: ( timestamp: string | null | undefined ) => boolean;

package/types/dashboard/lib/geo.d.ts

@@ -0,0 +1,37 @@
+export interface Coordinates {
+	lat: number;
+	lng: number;
+}
+
+export interface GeoError {
+	message: string;
+}
+
+export interface AddressComponent {
+	longText?: string;
+	shortText?: string;
+	types?: string[];
+}
+
+export interface AddressPayload {
+	address?: string;
+	address2: string;
+	country?: string;
+	city?: string;
+	province?: string;
+	postalCode?: string;
+	fullAddress?: string;
+}
+
+// Browser geolocation, wrapped so callers never touch navigator.geolocation
+// directly.
+export declare const getLocation: ( props: {
+	onError?: ( error: GeoError ) => void;
+	onSuccess: ( coordinates: Coordinates ) => void;
+} ) => void;
+
+export declare const toAddressPayload: ( addressComponents: AddressComponent[] | null | undefined, fullAddress?: string ) => AddressPayload;
+
+// Waits for window.google.maps, then resolves a lat/lng to an AddressPayload
+// via the Geocoding library. Resolves null when Google returns no result.
+export declare const reverseGeocode: ( coordinates: Coordinates ) => Promise<AddressPayload | null>;