@drawbridge/components 0.0.78 → 0.1.0

package/types/dashboard/avatar.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType } from 'react';
+
+export interface AvatarProps {
+	// Its first letter shows when there is no name.
+	email?: string | null;
+	// A file record: its 100x100 ( 200x200 when large ) shows, cache-busted by its updatedAt.
+	image?: { sizes?: Record<string, string>; updatedAt?: string | number | Date } | null;
+	// A person's name: its first and last words' letters show with no image.
+	name?: string | null;
+	size?: 'small' | 'default' | 'large';
+	// An organization's title: its first letter shows when there is no name.
+	title?: string | null;
+}
+
+declare const Avatar: ComponentType<AvatarProps>;
+
+export default Avatar;

package/types/dashboard/card-affiliate.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType } from 'react';
+
+export interface CardAffiliatePage {
+	campaign?: string;
+	id?: string;
+	organization?: string;
+	share?: { url?: string };
+	title?: string;
+	[ key: string ]: unknown;
+}
+
+export interface CardAffiliateProps {
+	// The affiliate is active on the campaign when campaigns includes its id.
+	affiliate?: { campaigns?: string[]; id?: string; organization?: string; slug?: string; [ key: string ]: unknown };
+	campaign?: { id?: string; pages?: CardAffiliatePage[]; title?: string; [ key: string ]: unknown };
+	canManage?: boolean;
+	onError?: ( error: unknown ) => void;
+	// Receives the PUT/DELETE /organization/:organization/affiliate/:affiliate/campaign/:campaign response.
+	onSuccess?: ( response: unknown ) => void;
+}
+
+declare const CardAffiliate: ComponentType<CardAffiliateProps>;
+
+export default CardAffiliate;

package/types/dashboard/card-connection.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType } from 'react';
+
+export interface CardConnectionHeaderProps {
+	group?: string;
+	image?: string;
+	slug?: string;
+	// 'active' reads green, 'error' red, anything else (or none) reads Not connected.
+	status?: 'active' | 'error' | string | null;
+	title?: string;
+}
+
+export interface CardConnectionProps extends CardConnectionHeaderProps {
+	content?: { excerpt?: string; [ key: string ]: unknown };
+	// The connection document's own error entries; the first is shown.
+	errors?: { message?: string; [ key: string ]: unknown }[];
+	href?: string;
+}
+
+export declare const CardConnectionHeader: ComponentType<CardConnectionHeaderProps>;
+
+declare const CardConnection: ComponentType<CardConnectionProps>;
+
+export default CardConnection;

package/types/dashboard/card-data-item.d.ts

@@ -0,0 +1,15 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+
+export interface CardDataItemProps {
+	className?: string | null;
+	classNameSlotLeft?: string;
+	classNameSlotRight?: string;
+	element?: ElementType;
+	label?: string | null;
+	value?: ReactNode;
+	[ key: string ]: unknown;
+}
+
+declare const CardDataItem: ComponentType<CardDataItemProps>;
+
+export default CardDataItem;

package/types/dashboard/card-integration.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CardIntegrationProps {
+	description?: ReactNode;
+	enabled?: boolean;
+	// Set once the integration is added to the campaign.
+	id?: string;
+	image?: string;
+	label?: string;
+	// The Learn more url.
+	link?: string;
+	onClickDelete?: () => void;
+	onClickManage?: () => void;
+	// The switch is disabled while settings is empty. Required once id is set.
+	settings?: Record<string, unknown>;
+	slug?: string;
+	// Replaces the controls.
+	task?: ReactNode;
+	title?: ReactNode;
+}
+
+declare const CardIntegration: ComponentType<CardIntegrationProps>;
+
+export default CardIntegration;

package/types/dashboard/card-metric.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+
+export interface CardMetricProps {
+	className?: string;
+	description?: ReactNode;
+	element?: ElementType;
+	locked?: boolean;
+	title?: ReactNode;
+	value?: number | null;
+	// Spread onto element; an href adds the arrow button.
+	[ key: string ]: unknown;
+}
+
+declare const CardMetric: ComponentType<CardMetricProps>;
+
+export default CardMetric;

package/types/dashboard/card-note.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CardNoteProps {
+	content?: ReactNode;
+	createdAt?: string | number | Date;
+	// Prefix for DELETE {endpoint}/note/:id, e.g. '/admin'.
+	endpoint?: string;
+	id?: string;
+	manage?: boolean;
+	onError?: ( error: unknown ) => void;
+	onSuccess?: ( response: unknown ) => void;
+	user?: {
+		email?: string;
+		firstName?: string;
+		id?: string;
+		image?: { sizes?: Record<string, string>; updatedAt?: string | number | Date } | null;
+		lastName?: string;
+		updatedAt?: string | number | Date;
+	};
+}
+
+declare const CardNote: ComponentType<CardNoteProps>;
+
+export default CardNote;

package/types/dashboard/card-order.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType } from 'react';
+
+export interface CardOrderLine {
+	price?: number;
+	quantity?: number;
+	title?: string;
+	variantTitle?: string;
+}
+
+export interface CardOrderProps {
+	// ISO code, lower or upper case; defaults to usd.
+	currency?: string;
+	fee?: number;
+	gross?: number;
+	lines?: CardOrderLine[];
+	net?: number;
+	purchasedAt?: string | number | Date;
+	// Fee rate in percent; not shown for a redemption.
+	rate?: number | null;
+	type?: 'conversion' | 'redemption' | string;
+}
+
+declare const CardOrder: ComponentType<CardOrderProps>;
+
+export default CardOrder;

package/types/dashboard/card-overage.d.ts

@@ -0,0 +1,26 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CardOverageItem {
+	// A grouped item lists its own entries under title.
+	items?: CardOverageItem[];
+	key?: string;
+	limit?: number;
+	link?: string;
+	title?: ReactNode;
+	total?: number;
+}
+
+export interface CardOverageGroup {
+	items?: CardOverageItem[];
+	title?: ReactNode;
+}
+
+export interface CardOverageProps {
+	label?: ReactNode;
+	// More than one group renders as tabs.
+	overages: CardOverageGroup[];
+}
+
+declare const CardOverage: ComponentType<CardOverageProps>;
+
+export default CardOverage;

package/types/dashboard/card-payment-method.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CardPaymentMethodProps {
+	card: {
+		brand?: string;
+		// Stored as a number; padded back to four digits.
+		last4?: number | string;
+		month?: number | string;
+		year?: number | string;
+	};
+	name?: ReactNode;
+}
+
+declare const CardPaymentMethod: ComponentType<CardPaymentMethodProps>;
+
+export default CardPaymentMethod;

package/types/dashboard/card-plan.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType, MouseEventHandler, ReactNode } from 'react';
+
+export interface CardPlanProps {
+	canceledAt?: string | number | Date | null;
+	currency: string;
+	current?: boolean;
+	custom?: boolean;
+	id?: string;
+	interval?: string;
+	marketing?: {
+		description?: ReactNode;
+		features?: ReactNode[];
+		limits?: [ ReactNode, ReactNode ][];
+		rates?: [ ReactNode, ReactNode ][];
+	};
+	onCancel?: MouseEventHandler<HTMLButtonElement>;
+	onClick?: MouseEventHandler<HTMLButtonElement>;
+	onResume?: MouseEventHandler<HTMLButtonElement>;
+	// A scheduled downgrade: the current plan reads "Downgrading to <title> on <date>"; other plans hide Select.
+	pending?: { effectiveAt?: string | number | Date; plan?: string; title?: ReactNode } | null;
+	// In cents.
+	price: number;
+	title?: ReactNode;
+}
+
+declare const CardPlan: ComponentType<CardPlanProps>;
+
+export default CardPlan;

package/types/dashboard/card-product.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+
+export interface CardProductProps {
+	// A Shopify CDN url; resized to 200x200.
+	image?: string;
+	title?: string;
+	type?: string;
+	updatedAt?: string | number | Date;
+	url?: string;
+}
+
+declare const CardProduct: ComponentType<CardProductProps>;
+
+export default CardProduct;

package/types/dashboard/card-score.d.ts

@@ -0,0 +1,38 @@
+import { ComponentType } from 'react';
+
+export interface CardScoreRule {
+	description?: string;
+	score: number;
+	source?: string;
+}
+
+// A stored score carries the subject and message it measured.
+export interface CardScoreScore {
+	message?: string;
+	rules?: CardScoreRule[];
+	subject?: string;
+	subtotal?: number;
+	total?: number;
+	[ key: string ]: unknown;
+}
+
+export interface CardScoreChange {
+	checking: boolean;
+	score?: CardScoreScore;
+}
+
+export interface CardScoreProps {
+	// Must be stable (useCallback): it is an effect dependency.
+	onChange?: ( change: CardScoreChange ) => void;
+	title?: string;
+	values?: {
+		message?: string;
+		organization?: string;
+		score?: CardScoreScore | null;
+		subject?: string;
+	} | null;
+}
+
+declare const CardScore: ComponentType<CardScoreProps>;
+
+export default CardScore;

package/types/dashboard/card-section.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CardSectionProps {
+	children?: ReactNode;
+	className?: string | null;
+	cta?: ReactNode;
+	title?: ReactNode;
+	[ key: string ]: unknown;
+}
+
+declare const CardSection: ComponentType<CardSectionProps>;
+
+export default CardSection;

package/types/dashboard/card-setting.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType, ReactNode } from 'react';
+import { TableActions } from './table';
+
+// One label/value row. `badge` and `button` are the Table actions shape, so a
+// settings page's rowActions result spreads straight in.
+export interface CardSettingRow {
+	badge?: TableActions[ 'badge' ];
+	button?: TableActions[ 'button' ];
+	// The product guide's anchor, set on the label.
+	'data-guide'?: string;
+	label?: ReactNode;
+	value?: ReactNode;
+}
+
+export interface CardSettingProps {
+	rows?: CardSettingRow[];
+}
+
+declare const CardSetting: ComponentType<CardSettingProps>;
+
+export default CardSetting;

package/types/dashboard/card-task.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType, ElementType, ReactNode, SVGProps } from 'react';
+import { ButtonProps } from '../shared/button';
+
+export interface CardTaskButton {
+	disabled?: boolean;
+	// Defaults to the dashboard Link.
+	element?: ElementType;
+	href?: string;
+	icon?: ComponentType<SVGProps<SVGSVGElement>>;
+	justify?: ButtonProps[ 'justify' ];
+	// Shows only the spinner, over the hidden label, and disables the button.
+	loading?: boolean;
+	onClick?: () => void;
+	reverse?: ButtonProps[ 'reverse' ];
+	text?: ReactNode;
+	// Drawn by Button, which takes no class.
+	className?: never;
+	[ key: string ]: unknown;
+}
+
+export interface CardTaskProps {
+	// Rendered only with an href or onClick.
+	button?: CardTaskButton;
+	className?: string;
+	'data-guide'?: string;
+	message?: ReactNode;
+	title?: ReactNode;
+	type?: 'default' | 'error' | 'success' | 'warning';
+	[ key: string ]: unknown;
+}
+
+declare const CardTask: ComponentType<CardTaskProps>;
+
+export default CardTask;

package/types/dashboard/card-template.d.ts

@@ -0,0 +1,34 @@
+import { ComponentType, ReactNode } from 'react';
+import { ProviderFontFamily } from '../provider-font';
+
+export interface CardTemplateColor {
+	hex?: string;
+	rgb?: string;
+}
+
+export interface CardTemplatePage {
+	description?: ReactNode;
+	headline?: ReactNode;
+	image?: { sizes?: Record<string, string> } | null;
+	style?: {
+		background?: { color?: CardTemplateColor };
+		body?: ProviderFontFamily;
+		button?: { background?: { color?: CardTemplateColor }; radius?: number | null; text?: { color?: CardTemplateColor } };
+		heading?: ProviderFontFamily;
+		text?: { color?: CardTemplateColor };
+	};
+	[ key: string ]: unknown;
+}
+
+export interface CardTemplateProps {
+	id?: string;
+	page?: CardTemplatePage;
+	// Only 'page' renders; any other type renders nothing.
+	type?: 'page' | string;
+	updatedAt?: string | number | Date;
+	[ key: string ]: unknown;
+}
+
+declare const CardTemplate: ComponentType<CardTemplateProps>;
+
+export default CardTemplate;

package/types/dashboard/card-tile.d.ts

@@ -0,0 +1,54 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CardTileProps {
+	badge?: ReactNode;
+	description?: ReactNode;
+	image?: string;
+	link?: { href?: string; title?: ReactNode };
+	title?: ReactNode;
+}
+
+export interface TileRecordPage {
+	gallery?: { sizes?: Record<string, string>; [ key: string ]: unknown }[];
+	id?: string;
+	images?: { preview?: { sizes?: Record<string, string> } };
+	process?: { ai?: { progress?: { completed?: number; total?: number }; status?: string } };
+	share?: { url?: string };
+	source?: { url?: string };
+	status?: string;
+	title?: string;
+	updatedAt?: string | number | Date;
+	[ key: string ]: unknown;
+}
+
+export interface TileCampaignProps {
+	campaign?: {
+		id?: string;
+		process?: { ai?: { progress?: { completed?: number; total?: number }; status?: string } };
+		source?: { url?: string };
+		status?: string;
+		title?: string;
+		// extend.campaign()'s enum option.
+		type?: { key?: string; value?: string };
+		updatedAt?: string | number | Date;
+		[ key: string ]: unknown;
+	};
+	organization?: string;
+	page?: TileRecordPage;
+	// The timestamp that won the tile; falls back to campaign.updatedAt.
+	updatedAt?: string | number | Date;
+}
+
+export interface TilePageProps {
+	campaign?: string;
+	organization?: string;
+	page?: TileRecordPage;
+}
+
+export declare const TileCampaign: ComponentType<TileCampaignProps>;
+
+export declare const TilePage: ComponentType<TilePageProps>;
+
+declare const CardTile: ComponentType<CardTileProps>;
+
+export default CardTile;

package/types/dashboard/card-utm.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+
+export interface CardUtmValues {
+	campaign?: string;
+	// Click ids by name, e.g. { gclid : '…' }.
+	click?: Record<string, string>;
+	content?: string;
+	id?: string;
+	medium?: string;
+	source?: string;
+	term?: string;
+}
+
+export interface CardUtmProps {
+	utm?: CardUtmValues | null;
+}
+
+declare const CardUtm: ComponentType<CardUtmProps>;
+
+export default CardUtm;

package/types/dashboard/carousel-tiles.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, ElementType } from 'react';
+import { CardTileProps } from './card-tile';
+
+// CardTile props, or any element's props with `element` naming it.
+export type CarouselTilesItem = ( CardTileProps & { element?: undefined } ) | { element: ElementType; [ key: string ]: unknown };
+
+export interface CarouselTilesProps {
+	items?: CarouselTilesItem[];
+}
+
+declare const CarouselTiles: ComponentType<CarouselTilesProps>;
+
+export default CarouselTiles;

package/types/dashboard/code-formatter.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface CodeFormatterProps {
+	label?: ReactNode;
+	language?: string;
+	showCopyButton?: boolean;
+	showLineNumbers?: boolean;
+	text?: string;
+	wrapLines?: boolean;
+}
+
+declare const CodeFormatter: ComponentType<CodeFormatterProps>;
+
+export default CodeFormatter;

package/types/dashboard/drawer-subscription.d.ts

@@ -0,0 +1,35 @@
+import { ComponentType } from 'react';
+
+export interface DrawerSubscriptionPending {
+	effectiveAt?: string | number | Date;
+	plan?: string;
+}
+
+export interface DrawerSubscriptionValues {
+	organization?: string;
+	plan?: { id?: string; [ key: string ]: unknown };
+	subscription?: {
+		id?: string;
+		method?: { card: { brand?: string; last4?: string; month?: number; year?: number }; id?: string; name?: string };
+		[ key: string ]: unknown;
+	};
+	[ key: string ]: unknown;
+}
+
+export interface DrawerSubscriptionProps {
+	canceledAt?: string | number | Date | null;
+	onCancel?: () => void;
+	// Opens the add-card flow; call the callback with the new method.
+	onClickAdd?: ( callback: ( method: unknown ) => void ) => void;
+	onError?: ( error: Error ) => void;
+	onResume?: () => void;
+	onSuccess?: ( response: unknown ) => void;
+	pending?: DrawerSubscriptionPending | null;
+	values?: DrawerSubscriptionValues;
+	// 'start' for an organization with no subscription, 'change' otherwise.
+	view: 'change' | 'start';
+}
+
+declare const DrawerSubscription: ComponentType<DrawerSubscriptionProps>;
+
+export default DrawerSubscription;

package/types/dashboard/drawer.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface DrawerProps {
+	active?: boolean;
+	children?: ReactNode;
+	// Stacking classes for the panel; defaults to 'z-40'.
+	className?: string;
+	// The overlay, the close button and GuardNavigation all call this.
+	onClose?: () => void;
+	overlay?: boolean;
+	title?: ReactNode;
+}
+
+declare const Drawer: ComponentType<DrawerProps>;
+
+export default Drawer;

package/types/dashboard/dropdown.d.ts

@@ -0,0 +1,33 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+import { ButtonProps } from '../shared/button';
+
+export interface DropdownItem {
+	badge?: { text?: ReactNode; type?: string };
+	className?: string;
+	disabled?: boolean;
+	// What each row renders as: 'a', 'button', next/link's Link, …
+	element?: ElementType;
+	icon?: ComponentType<{ className?: string }>;
+	iconClassName?: string;
+	title?: ReactNode;
+	// href, onClick, target, … go to the element.
+	[ key: string ]: unknown;
+}
+
+export interface DropdownProps {
+	// Headless UI anchor, e.g. 'bottom end'.
+	anchor?: string;
+	// The trigger's Button props; a small secondary inline button by default.
+	button?: Pick<ButtonProps, 'inline' | 'justify' | 'reverse' | 'size' | 'variant' | 'disabled'>;
+	// The chevron is the trigger's icon, pointing up while the menu is open.
+	chevron?: boolean;
+	children?: ReactNode;
+	className?: string;
+	classNameMenu?: string;
+	items?: DropdownItem[];
+	[ key: string ]: unknown;
+}
+
+declare const Dropdown: ComponentType<DropdownProps>;
+
+export default Dropdown;

package/types/dashboard/form-action.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface FormActionProps {
+	// The submit button's label; defaults to 'Confirm'.
+	action?: ReactNode;
+	// The mutation run on submit.
+	callback: () => Promise<unknown>;
+	// Shows a secondary button beside the action.
+	cancel?: { action?: ReactNode; onClick?: () => void };
+	children?: ReactNode;
+	className?: string;
+	disabled?: boolean;
+	fineprint?: ReactNode;
+	onError?: ( error: Error ) => void;
+	onSuccess?: ( response: unknown ) => void;
+}
+
+declare const FormAction: ComponentType<FormActionProps>;
+
+export default FormAction;

package/types/dashboard/form-address.d.ts

@@ -0,0 +1,28 @@
+import { ComponentType } from 'react';
+
+export interface FormAddressValues {
+	address?: string;
+	address2?: string | null;
+	city?: string;
+	// Country and province are the names GET /app/countries lists, e.g. 'Canada', 'Ontario'.
+	country?: string;
+	// Set: a saved account address (PUT /account/address/:id, no autocomplete).
+	id?: string;
+	postal?: string;
+	province?: string;
+}
+
+export interface FormAddressProps {
+	// Overrides POST/PUT /account/address, e.g. PUT /organization/:id/address.
+	endpoint?: string;
+	// With `endpoint`; defaults to 'PUT'.
+	method?: string;
+	// The submitted values ride along so a duplicate can be recovered.
+	onError: ( error: Error, values: FormAddressValues ) => void;
+	onSuccess: ( response: unknown ) => void;
+	values?: FormAddressValues;
+}
+
+declare const FormAddress: ComponentType<FormAddressProps>;
+
+export default FormAddress;

package/types/dashboard/form-admin-campaign.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+
+export interface FormAdminCampaignProps {
+	disabled?: boolean;
+	onError: ( error: Error ) => void;
+	onSuccess: ( response: unknown ) => void;
+	values?: {
+		id?: string;
+		organization?: string;
+		status?: string;
+		title?: string;
+		type?: { key?: string; value?: string };
+		[ key: string ]: unknown;
+	};
+}
+
+declare const FormAdminCampaign: ComponentType<FormAdminCampaignProps>;
+
+export default FormAdminCampaign;