@openwarelabs/blocks 0.8.0 → 0.10.0

package/dist/faq/Faq03/Faq03.types.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Faq03Question {
+    /** The question, as a small title. */
+    question: ReactNode;
+    /** The answer, always on show under it. */
+    answer: ReactNode;
+}
+export interface Faq03Person {
+    /** Their name, for their avatar's initials. */
+    name: string;
+    /** A photo of them, as an image URL. */
+    avatar?: string;
+}
+export interface Faq03Contact {
+    /** The card's title: "Still have a question?". */
+    title: ReactNode;
+    /** A sentence on who answers and how. */
+    description?: ReactNode;
+    /** A small line after a green dot, such as how quickly they reply. */
+    status?: ReactNode;
+    /** The people who answer, as overlapping avatars on the left. */
+    people?: Faq03Person[];
+    /** Names the avatars for screen readers: "Lena, Omar and Aiko from support". */
+    peopleLabel?: string;
+    /** The main way to get in touch, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second way, beside it. */
+    secondaryAction?: BlockAction;
+}
+export interface Faq03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as "FAQ". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The questions, every answer on show, two to a row (one on phones). */
+    questions: Faq03Question[];
+    /** A card under the questions for anything they don't cover. */
+    contact?: Faq03Contact;
+}

package/dist/forms/Form01/Form01.d.cts

@@ -0,0 +1,3 @@
+import type { Form01Props } from "./Form01.types.cjs";
+/** One column on the canvas: a back link, the page's heading, then the fields on a card with the action in its footer. */
+export declare function Form01({ title, description, backLink, children, submitLabel, onSubmit, submitting, note, className, ...props }: Form01Props): import("react").JSX.Element;

package/dist/forms/Form01/Form01.d.ts

@@ -0,0 +1,3 @@
+import type { Form01Props } from "./Form01.types.js";
+/** One column on the canvas: a back link, the page's heading, then the fields on a card with the action in its footer. */
+export declare function Form01({ title, description, backLink, children, submitLabel, onSubmit, submitting, note, className, ...props }: Form01Props): import("react").JSX.Element;

package/dist/forms/Form01/Form01.types.d.cts

@@ -0,0 +1,20 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Form01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+    /** The page's heading: "New project". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A link back above the heading, with an arrow: the page this one came from. */
+    backLink?: BlockLink;
+    /** The fields, stacked on the card in order: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    children: ReactNode;
+    /** The button in the card's footer: "Create project". */
+    submitLabel: ReactNode;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Shows a spinner on the button while the form is saving. */
+    submitting?: boolean;
+    /** Small print beside the button. */
+    note?: ReactNode;
+}

package/dist/forms/Form01/Form01.types.d.ts

@@ -0,0 +1,20 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Form01Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+    /** The page's heading: "New project". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** A link back above the heading, with an arrow: the page this one came from. */
+    backLink?: BlockLink;
+    /** The fields, stacked on the card in order: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    children: ReactNode;
+    /** The button in the card's footer: "Create project". */
+    submitLabel: ReactNode;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Shows a spinner on the button while the form is saving. */
+    submitting?: boolean;
+    /** Small print beside the button. */
+    note?: ReactNode;
+}

package/dist/forms/Form02/Form02.d.cts

@@ -0,0 +1,3 @@
+import type { Form02Props } from "./Form02.types.cjs";
+/** Sections down the page, each one's title and purpose on the left and its fields on a card on the right, with Discard and Save at the end. */
+export declare function Form02({ title, description, sections, dirty, onSubmit, onDiscard, submitting, labels, className, ...props }: Form02Props): import("react").JSX.Element;

package/dist/forms/Form02/Form02.d.ts

@@ -0,0 +1,3 @@
+import type { Form02Props } from "./Form02.types.js";
+/** Sections down the page, each one's title and purpose on the left and its fields on a card on the right, with Discard and Save at the end. */
+export declare function Form02({ title, description, sections, dirty, onSubmit, onDiscard, submitting, labels, className, ...props }: Form02Props): import("react").JSX.Element;

package/dist/forms/Form02/Form02.types.d.cts

@@ -0,0 +1,38 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+export interface Form02Labels {
+    /** Beside the buttons while there are changes. @default "You have unsaved changes." */
+    unsaved?: string;
+    /** Beside them when there aren't. @default "Everything is saved." */
+    saved?: string;
+    /** The button that puts the saved values back. @default "Discard" */
+    discard?: string;
+    /** The button that saves. @default "Save changes" */
+    save?: string;
+}
+/** One section of the form: its title and purpose on the left, its fields on a card on the right. */
+export interface Form02Section {
+    /** The section's heading. */
+    title: ReactNode;
+    /** What it's for, under the heading. */
+    description?: ReactNode;
+    /** Its fields, stacked on the card: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    content: ReactNode;
+}
+export interface Form02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onSubmit"> {
+    /** The page's heading: "Workspace". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The sections, down the page. */
+    sections: Form02Section[];
+    /** Whether the values differ from what's saved: it turns the buttons on and says so beside them. */
+    dirty: boolean;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Puts the saved values back. */
+    onDiscard?(): void;
+    /** Shows a spinner on the save button while saving. */
+    submitting?: boolean;
+    /** Words that aren't content (the buttons, the status), in English unless you pass your own. */
+    labels?: Form02Labels;
+}

package/dist/forms/Form02/Form02.types.d.ts

@@ -0,0 +1,38 @@
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+export interface Form02Labels {
+    /** Beside the buttons while there are changes. @default "You have unsaved changes." */
+    unsaved?: string;
+    /** Beside them when there aren't. @default "Everything is saved." */
+    saved?: string;
+    /** The button that puts the saved values back. @default "Discard" */
+    discard?: string;
+    /** The button that saves. @default "Save changes" */
+    save?: string;
+}
+/** One section of the form: its title and purpose on the left, its fields on a card on the right. */
+export interface Form02Section {
+    /** The section's heading. */
+    title: ReactNode;
+    /** What it's for, under the heading. */
+    description?: ReactNode;
+    /** Its fields, stacked on the card: Field, RadioGroup, Checkbox and the like. Their values and errors are yours to keep. */
+    content: ReactNode;
+}
+export interface Form02Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onSubmit"> {
+    /** The page's heading: "Workspace". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The sections, down the page. */
+    sections: Form02Section[];
+    /** Whether the values differ from what's saved: it turns the buttons on and says so beside them. */
+    dirty: boolean;
+    /** Runs when the form is sent, by the button or Enter. The default (a page load) is already prevented. */
+    onSubmit?(event: FormEvent<HTMLFormElement>): void;
+    /** Puts the saved values back. */
+    onDiscard?(): void;
+    /** Shows a spinner on the save button while saving. */
+    submitting?: boolean;
+    /** Words that aren't content (the buttons, the status), in English unless you pass your own. */
+    labels?: Form02Labels;
+}

package/dist/forms/Form03/Form03.d.cts

@@ -0,0 +1,3 @@
+import type { Form03Props } from "./Form03.types.cjs";
+/** A longer form split into steps on one card: the progress at the top, one step's fields in the middle, Back and Continue at the bottom. */
+export declare function Form03({ title, description, steps, submitLabel, onSubmit, onStepChange, labels, className, ...props }: Form03Props): import("react").JSX.Element;

package/dist/forms/Form03/Form03.d.ts

@@ -0,0 +1,3 @@
+import type { Form03Props } from "./Form03.types.js";
+/** A longer form split into steps on one card: the progress at the top, one step's fields in the middle, Back and Continue at the bottom. */
+export declare function Form03({ title, description, steps, submitLabel, onSubmit, onStepChange, labels, className, ...props }: Form03Props): import("react").JSX.Element;

package/dist/forms/Form03/Form03.types.d.cts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Form03Labels {
+    /** The progress strip's name for screen readers. @default "Progress" */
+    progress?: string;
+    /** Over the step's heading. @default (step, total) => <>Step {step} of {total}</> */
+    stepOf?(step: number, total: number): ReactNode;
+    /** @default "Back" */
+    back?: string;
+    /** The button on every step but the last. @default "Continue" */
+    continue?: string;
+    /** The button on a review row. @default "Edit" */
+    edit?: string;
+    /** Its name for screen readers, given the row's label. @default `Edit ${label.toLowerCase()}` */
+    editLabel?(label: string): string;
+}
+/** A line on the review step, with a button back to the step it came from. */
+export interface Form03ReviewRow {
+    /** What it is: "Team". */
+    label: string;
+    /** What was chosen. */
+    value: ReactNode;
+    /** The index of the step that changes it. */
+    step: number;
+}
+/** One step of the form. */
+export interface Form03Step {
+    /** Its name in the progress strip: "Team". */
+    title: ReactNode;
+    /** A line under the name there: "Name and lead". */
+    description?: ReactNode;
+    /** The heading over its fields: "Name the team". */
+    heading: ReactNode;
+    /** Its fields: Field, RadioGroup, CheckboxGroup and the like. Their values and errors are yours to keep. */
+    content?: ReactNode;
+    /** For a last step that checks everything: rows of what was chosen, each with an Edit button. */
+    review?: Form03ReviewRow[];
+    /** Checks the step's fields before moving on: return false to stay (after showing what's wrong and focusing the field). */
+    validate?(): boolean;
+}
+export interface Form03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onSubmit"> {
+    /** The form's heading: "Create a team". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The steps, in order. */
+    steps: Form03Step[];
+    /** The last step's button: "Create team and invite 3". */
+    submitLabel: ReactNode;
+    /** Runs on the last step, once it validates. While its promise is pending the button shows a spinner; when it resolves the form goes back to the first step. */
+    onSubmit?(): void | Promise<void>;
+    /** Called when the step changes, with its index: by Continue, Back or a review row's Edit. */
+    onStepChange?(step: number): void;
+    /** Words that aren't content (the buttons, the step count), in English unless you pass your own. */
+    labels?: Form03Labels;
+}

package/dist/forms/Form03/Form03.types.d.ts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Form03Labels {
+    /** The progress strip's name for screen readers. @default "Progress" */
+    progress?: string;
+    /** Over the step's heading. @default (step, total) => <>Step {step} of {total}</> */
+    stepOf?(step: number, total: number): ReactNode;
+    /** @default "Back" */
+    back?: string;
+    /** The button on every step but the last. @default "Continue" */
+    continue?: string;
+    /** The button on a review row. @default "Edit" */
+    edit?: string;
+    /** Its name for screen readers, given the row's label. @default `Edit ${label.toLowerCase()}` */
+    editLabel?(label: string): string;
+}
+/** A line on the review step, with a button back to the step it came from. */
+export interface Form03ReviewRow {
+    /** What it is: "Team". */
+    label: string;
+    /** What was chosen. */
+    value: ReactNode;
+    /** The index of the step that changes it. */
+    step: number;
+}
+/** One step of the form. */
+export interface Form03Step {
+    /** Its name in the progress strip: "Team". */
+    title: ReactNode;
+    /** A line under the name there: "Name and lead". */
+    description?: ReactNode;
+    /** The heading over its fields: "Name the team". */
+    heading: ReactNode;
+    /** Its fields: Field, RadioGroup, CheckboxGroup and the like. Their values and errors are yours to keep. */
+    content?: ReactNode;
+    /** For a last step that checks everything: rows of what was chosen, each with an Edit button. */
+    review?: Form03ReviewRow[];
+    /** Checks the step's fields before moving on: return false to stay (after showing what's wrong and focusing the field). */
+    validate?(): boolean;
+}
+export interface Form03Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "children" | "onSubmit"> {
+    /** The form's heading: "Create a team". It also names the form. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The steps, in order. */
+    steps: Form03Step[];
+    /** The last step's button: "Create team and invite 3". */
+    submitLabel: ReactNode;
+    /** Runs on the last step, once it validates. While its promise is pending the button shows a spinner; when it resolves the form goes back to the first step. */
+    onSubmit?(): void | Promise<void>;
+    /** Called when the step changes, with its index: by Continue, Back or a review row's Edit. */
+    onStepChange?(step: number): void;
+    /** Words that aren't content (the buttons, the step count), in English unless you pass your own. */
+    labels?: Form03Labels;
+}