@wise/dynamic-flow-types 2.16.0 → 2.17.0

package/build/renderers/index.d.ts

@@ -0,0 +1,364 @@
+import type { Action, Icon as DFIcon, Margin as DFMargin, Size as DFSize, SearchResult as SearchResultSpec, Step } from '../next';
+import type { ReactNode } from 'react';
+export type Align = 'start' | 'center' | 'end';
+export type Bias = 'none' | 'start' | 'end';
+export type Context = 'positive' | 'negative' | 'warning' | 'neutral';
+export type Margin = DFMargin;
+export type Size = DFSize;
+export type LoadingState = 'idle' | 'submitting' | 'refreshing';
+export type AnalyticsEventDispatcher = (eventName: string, properties?: Record<string, unknown>) => void;
+export type Image = {
+    url: string;
+    accessibilityDescription?: string;
+};
+export type Icon = DFIcon;
+export type DecisionOption = {
+    description?: string;
+    disabled?: boolean;
+    icon?: Icon;
+    image?: Image;
+    title: string;
+    onClick: () => void;
+};
+export type InstructionItem = {
+    context: Context;
+    text: string;
+};
+export type ReviewCallToAction = {
+    title: string;
+    onClick: () => void;
+};
+export type ReviewField = {
+    help?: string;
+    label: string;
+    value: string;
+};
+export type Renderer<P extends RendererProps> = {
+    canRenderType: P['type'];
+    canRender?: (props: P) => boolean;
+    render: (props: P) => JSX.Element;
+};
+export interface CoreContainerRendererProps {
+    type: 'container';
+    children: ReactNode;
+}
+export type RendererProps = AlertRendererProps | BooleanInputRendererProps | BoxRendererProps | ButtonRendererProps | ColumnsRendererProps | CoreContainerRendererProps | DateInputRendererProps | DecisionRendererProps | DividerRendererProps | FormRendererProps | FormSectionRendererProps | HeadingRendererProps | HiddenRendererProps | ImageRendererProps | InstructionsRendererProps | IntegerInputRendererProps | LoadingIndicatorRendererProps | MarkdownRendererProps | ModalRendererProps | MultiSelectInputRendererProps | MultiUploadInputRendererProps | NumberInputRendererProps | ParagraphRendererProps | RepeatableRendererProps | ReviewRendererProps | SearchRendererProps | SelectInputRendererProps | StatusListRendererProps | StepRendererProps | TextInputRendererProps | UploadInputRendererProps;
+export type Renderers = readonly (Renderer<StepRendererProps> | Renderer<CoreContainerRendererProps> | Renderer<AlertRendererProps> | Renderer<BoxRendererProps> | Renderer<ColumnsRendererProps> | Renderer<DecisionRendererProps> | Renderer<DividerRendererProps> | Renderer<FormRendererProps> | Renderer<HeadingRendererProps> | Renderer<InstructionsRendererProps> | Renderer<LoadingIndicatorRendererProps> | Renderer<MarkdownRendererProps> | Renderer<ImageRendererProps> | Renderer<ModalRendererProps> | Renderer<ParagraphRendererProps> | Renderer<ReviewRendererProps> | Renderer<SearchRendererProps> | Renderer<StatusListRendererProps> | Renderer<FormSectionRendererProps> | Renderer<BooleanInputRendererProps> | Renderer<ButtonRendererProps> | Renderer<DateInputRendererProps> | Renderer<HiddenRendererProps> | Renderer<IntegerInputRendererProps> | Renderer<NumberInputRendererProps> | Renderer<RepeatableRendererProps> | Renderer<SelectInputRendererProps> | Renderer<MultiSelectInputRendererProps> | Renderer<TextInputRendererProps> | Renderer<UploadInputRendererProps> | Renderer<MultiUploadInputRendererProps>)[];
+export type StepRendererProps = {
+    type: 'step';
+    control?: string;
+    back?: {
+        title?: string;
+        onClick: () => void;
+    };
+    description?: string;
+    error?: string;
+    external?: {
+        url: string;
+    };
+    loadingState: LoadingState;
+    title?: string;
+    trackEvent: AnalyticsEventDispatcher;
+    /** @experimental Please do not use this property. It is only here to support a legacy camera step. */
+    step?: Step;
+    /** @experimental Please do not use this function. Calling onAction from a step renderer completely bypasses the core logic and may result in unexpected behavior. It is only here to support a legacy camera step. */
+    onAction?: (action: Action) => void | Promise<void>;
+    children: ReactNode;
+};
+export type AlertRendererProps = {
+    type: 'alert';
+    control?: string;
+    context: Context;
+    margin: Margin;
+    markdown: string;
+};
+export type BoxRendererProps = {
+    type: 'box';
+    control?: string;
+    border: boolean;
+    children: ReactNode;
+    margin: Margin;
+    width: Size;
+};
+export type ColumnsRendererProps = {
+    type: 'columns';
+    control?: string;
+    bias: Bias;
+    margin: Margin;
+    startChildren: ReactNode;
+    endChildren: ReactNode;
+};
+export type DecisionRendererProps = {
+    type: 'decision';
+    control?: string;
+    options: DecisionOption[];
+    margin: Margin;
+    title?: string;
+};
+export type DividerRendererProps = {
+    type: 'divider';
+    control?: string;
+    margin: Margin;
+};
+export type FormRendererProps = {
+    type: 'form';
+    control?: string;
+    children: ReactNode;
+    margin: Margin;
+};
+/**
+ * Known values for "control" are: 'display'.
+ */
+export type HeadingRendererProps = {
+    type: 'heading';
+    control?: string;
+    align: Align;
+    margin: Margin;
+    size: Size;
+    text: string;
+};
+export type InstructionsRendererProps = {
+    type: 'instructions';
+    control?: string;
+    items: InstructionItem[];
+    margin: Margin;
+    title?: string;
+};
+export type LoadingIndicatorRendererProps = {
+    type: 'loading-indicator';
+    control?: string;
+    margin: Margin;
+    size: Size;
+};
+export type MarkdownRendererProps = {
+    type: 'markdown';
+    control?: string;
+    align: Align;
+    margin: Margin;
+    content: string;
+};
+export type ImageRendererProps = {
+    type: 'image';
+    control?: string;
+    accessibilityDescription?: string;
+    size: Size;
+    margin: Margin;
+    url: string;
+};
+export type ModalRendererProps = {
+    type: 'modal';
+    control?: string;
+    content: {
+        components: ReactNode;
+    };
+    margin: Margin;
+    trigger: {
+        title: string;
+    };
+};
+/**
+ * Known values for "control" are: 'copyable'.
+ */
+export type ParagraphRendererProps = {
+    type: 'paragraph';
+    control?: string;
+    align: Align;
+    margin: Margin;
+    text: string;
+};
+export type ReviewRendererProps = {
+    type: 'review';
+    control?: string;
+    fields: ReviewField[];
+    margin: Margin;
+    title?: string;
+    callToAction?: ReviewCallToAction;
+};
+export type SearchRendererProps = {
+    type: 'search';
+    control?: string;
+    id: string;
+    isLoading: boolean;
+    margin: Margin;
+    query: string;
+    onChange: (query: string) => void;
+    state: SearchState;
+    title: string;
+};
+export type SearchState = PendingSearchState | NoResultsSearchState | ResultsSearchState | ErrorSearchState;
+export type PendingSearchState = {
+    type: 'pending';
+};
+export type NoResultsSearchState = {
+    type: 'noResults';
+    message: string;
+};
+export type ErrorSearchState = {
+    type: 'error';
+    onRetry: () => void;
+};
+export type ResultsSearchState = {
+    type: 'results';
+    results: SearchResult[];
+};
+export type SearchResult = Pick<SearchResultSpec, 'description' | 'icon' | 'image' | 'title' | 'type'> & {
+    id?: string;
+    onClick: () => void;
+};
+export type StatusListRendererProps = {
+    type: 'status-list';
+    control?: string;
+    items: StatusListItem[];
+    margin: Margin;
+    title?: string;
+};
+export type StatusListItem = {
+    description?: string;
+    icon: Icon;
+    status?: 'done' | 'not-done' | 'pending';
+    title: string;
+};
+export type StatusListItemStatus = 'done' | 'not-done' | 'pending';
+export type FormSectionRendererProps = {
+    type: 'form-section';
+    control?: string;
+    title?: string;
+    description?: string;
+    help?: string;
+    children: ReactNode;
+};
+interface BaseInputRendererProps {
+    id: string;
+    control?: string;
+    autoComplete: string;
+    description?: string;
+    disabled: boolean;
+    error?: string;
+    help?: string;
+    label?: string;
+    placeholder?: string;
+    required: boolean;
+    onBlur: () => void;
+    onFocus: () => void;
+}
+export interface BooleanInputRendererProps extends BaseInputRendererProps {
+    type: 'input-boolean';
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+/**
+ * Known values for "control" are: 'primary' | 'secondary' | 'tertiary'.
+ */
+export type ButtonRendererProps = {
+    type: 'button';
+    control?: string;
+    context: Context;
+    disabled: boolean;
+    margin: Margin;
+    pinOrder?: number;
+    size?: Size;
+    title: string;
+    onClick: () => void;
+};
+/**
+ * Known values for "control" are: 'date-lookup'.
+ */
+export type DateInputRendererProps = BaseInputRendererProps & {
+    type: 'input-date';
+    minimumDate?: string;
+    maximumDate?: string;
+    value: string | null;
+    onChange: (value: string | null) => void;
+};
+export type HiddenRendererProps = {
+    type: 'hidden';
+    control?: string;
+};
+export type IntegerInputRendererProps = BaseInputRendererProps & {
+    type: 'input-integer';
+    value: number | null;
+    onChange: (value: number | null) => void;
+};
+export type MultiSelectInputRendererProps = BaseInputRendererProps & {
+    type: 'input-multi-select';
+    label?: string;
+    description?: string;
+    selectedIndices: number[];
+    options: SelectInputRendererOption[];
+    onSelect: (indices: number[]) => void;
+};
+export type NumberInputRendererProps = BaseInputRendererProps & {
+    type: 'input-number';
+    value: number | null;
+    onChange: (value: number | null) => void;
+};
+export type RepeatableRendererProps = {
+    type: 'repeatable';
+    control?: string;
+    addItemTitle: string;
+    description?: string;
+    children: ReactNode[];
+    editableItem: ReactNode;
+    editItemTitle: string;
+    error?: string;
+    items: RepeatableItemRendererProps[];
+    title: string;
+    onAdd: () => void;
+    onEdit: (itemIndex: number) => void;
+    onSave: () => boolean;
+    onRemove: () => void;
+};
+export type RepeatableItemRendererProps = {
+    id: string;
+    description?: string;
+    icon?: Icon;
+    image?: Image;
+    title?: string;
+};
+export type SelectInputRendererProps = BaseInputRendererProps & {
+    type: 'input-select';
+    children: ReactNode;
+    options: SelectInputRendererOption[];
+    selectedIndex: number | null;
+    onSelect: (index: number | null) => void;
+};
+export type SelectInputRendererOption = {
+    description?: string;
+    disabled: boolean;
+    icon?: Icon;
+    image?: Image;
+    keywords?: string[];
+    title: string;
+};
+/**
+ * Known values for "control" are: 'password' | 'textarea' | 'email' | 'numeric' | 'phone-number'.
+ */
+export type TextInputRendererProps = BaseInputRendererProps & {
+    type: 'input-text';
+    displayFormat?: string;
+    value: string | null;
+    onChange: (value: string | null) => void;
+};
+export type UploadInputRendererProps = BaseInputRendererProps & {
+    type: 'input-upload';
+    maxSize?: number;
+    accepts?: string[];
+    value: File | null;
+    onUpload: (file: File | null) => Promise<void>;
+};
+export type MultiUploadInputRendererProps = BaseInputRendererProps & {
+    type: 'input-upload-multi';
+    maxSize?: number;
+    minItems?: number;
+    maxItems?: number;
+    accepts?: string[];
+    uploadLabel?: string;
+    value: FileWithId[];
+    onUpload: (file: File, fileId: string) => Promise<void>;
+    onDelete: (fileId: string) => Promise<void>;
+};
+type FileWithId = {
+    id: string;
+    file: File;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-types",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Dynamic Flow TypeScript Types",
   "license": "Apache-2.0",
   "repository": {
@@ -24,8 +24,9 @@
   ],
   "devDependencies": {
     "@formatjs/cli": "^6.2.12",
+    "@types/react": "18.3.3",
     "esbuild": "0.20.2",
-    "npm-run-all2": "5.0.2",
+    "npm-run-all2": "6.2.2",
     "ts-to-zod": "3.6.1",
     "typescript": "5.4.5"
   },