@reqquest/ui 1.1.10 → 1.1.11

package/dist/api.d.ts

@@ -0,0 +1,48 @@
+import type { APIBase } from '@txstate-mws/sveltekit-utils';
+import type { AppRequestStatus, createClient } from './typed-client/index.js';
+export interface ReqquestAPI extends APIBase {
+    client: ReturnType<typeof createClient>;
+    getDownloadTicket: () => Promise<string>;
+}
+export interface ReviewerCardRequest<OtherInfoType = any> {
+    complete: boolean;
+    status: AppRequestStatus;
+    closedAt: string;
+    applicant: ReviewerCardApplicant<OtherInfoType>;
+    period: {
+        id: string;
+        name: string;
+        code: string;
+        openDate: string;
+        closeDate: string;
+        archiveDate: string;
+    };
+    applications: {
+        id: string;
+        navTitle: string;
+        programKey: string;
+    }[];
+    actions: {
+        acceptOffer: boolean;
+        cancel: boolean;
+        close: boolean;
+        completeRequest: boolean;
+        completeReview: boolean;
+        reopen: boolean;
+        returnToApplicant: boolean;
+        returnToNonBlocking: boolean;
+        returnToOffer: boolean;
+        returnToReview: boolean;
+        review: boolean;
+        submit: boolean;
+    };
+}
+export interface ReviewerCardApplicant<OtherInfoType = any> {
+    login: string;
+    fullname: string;
+    otherIdentifiers: {
+        id: string;
+        label: string;
+    }[];
+    otherInfo: OtherInfoType;
+}

package/dist/components/FieldCardCheckbox.svelte.d.ts

@@ -0,0 +1,109 @@
+import type { CardSelectItem } from '../components/FieldCardRadio.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * A form field component that displays a grid of selectable cards (multiple selection).
+ * Similar to FieldCardRadio but allows selecting multiple cards (checkbox behavior).
+ *
+ * The form value is an array of selected item values.
+ *
+ * By default this component expects values to be strings. If you wish to use other types of values, you
+ * must provide a `serialize` and `deserialize` function that handle individual item values.
+ *
+ * If your `items` are not ready on first load (e.g. they're being loaded from an API fetch), you must
+ * place this field inside an `{#if}` block until they are ready.
+ */
+declare const FieldCardCheckbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * Path to the form field in the data structure
+       * @type {string}
+       */ path: string;
+    /**
+       * Array of card options
+       * @type {CardSelectItem[]}
+       */ items: CardSelectItem[];
+    /**
+       * Whether the field group is conditional
+       * @type {boolean}
+       * @default true
+       */ conditional?: boolean;
+    /**
+       * Set to true to prevent null/undefined values (will default to empty array)
+       * @type {boolean}
+       * @default false
+       */ notNull?: boolean;
+    /**
+       * Default selected values (array)
+       * @type {any[]}
+       * @default []
+       */ defaultValue?: any[];
+    /**
+       * Text to display in the fieldset legend
+       * @type {string | undefined}
+       * @default undefined
+       */ legendText?: string | undefined;
+    /**
+       * When true, the field is marked as required in the UI. This is only for visual indication
+       * and does not affect validation. Validation is handled by the API that receives the data.
+       * @type {boolean}
+       * @default false
+       */ required?: boolean;
+    /**
+       * CSS size for the grid minimum item width (like CardGrid)
+       * @type {string}
+       * @default '20rem'
+       */ cardSize?: string;
+    /**
+       * Gap between cards in the grid
+       * @type {string}
+       * @default '16px'
+       */ gap?: string;
+    /**
+       * Custom function to serialize individual item values for form submission.
+       * Each item value is serialized independently before being stored in the array.
+       * @type {((value: any) => string) | undefined}
+       * @default undefined
+       */ serialize?: ((value: any) => string) | undefined;
+    /**
+       * Custom function to deserialize individual item values from form data.
+       * Each item value is deserialized independently after being retrieved from the array.
+       * @type {((value: string) => any) | undefined}
+       * @default undefined
+       */ deserialize?: ((value: string) => any) | undefined;
+}, {
+    default: {
+        item: CardSelectItem;
+        selected: any;
+        index: any;
+    };
+}>, {
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    update: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: CardSelectItem;
+        selected: any;
+        index: any;
+    };
+}, {}, string>;
+type FieldCardCheckbox = InstanceType<typeof FieldCardCheckbox>;
+export default FieldCardCheckbox;

package/dist/components/FieldCardRadio.svelte.d.ts

@@ -0,0 +1,125 @@
+import type { CardImage, TagItem } from '@txstate-mws/carbon-svelte';
+export interface CardSelectItem {
+    value: any;
+    title: string;
+    subhead?: string;
+    image?: CardImage;
+    tags?: TagItem[];
+    disabled?: boolean;
+    selectionLabel?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+/**
+ * A form field component that displays a grid of selectable cards (single selection).
+ * Similar to FieldRadioTile but with richer card-based visuals including images and tags.
+ *
+ * By default this component expects values to be strings. If you wish to use other types of values, you
+ * must provide a `serialize` and `deserialize` function. If you set the `number` prop, an appropriate
+ * serializer and deserializer will be provided by default.
+ *
+ * If your `items` are not ready on first load (e.g. they're being loaded from an API fetch), you must
+ * place this field inside an `{#if}` block until they are ready.
+ */
+declare const FieldCardRadio: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * Path to the form field in the data structure
+       * @type {string}
+       */ path: string;
+    /**
+       * Array of card options
+       * @type {CardSelectItem[]}
+       */ items: CardSelectItem[];
+    /**
+       * Set to true to treat the value as a number instead of string
+       * @type {boolean}
+       * @default false
+       */ number?: boolean;
+    /**
+       * Set to true to treat the value as a boolean
+       * @type {boolean}
+       * @default false
+       */ boolean?: boolean;
+    /**
+       * Set to true to prevent null values
+       * @type {boolean}
+       * @default false
+       */ notNull?: boolean;
+    /**
+       * Whether the field group is conditional
+       * @type {boolean}
+       * @default true
+       */ conditional?: boolean;
+    /**
+       * Default selected value
+       * @type {any}
+       * @default undefined
+       */ defaultValue?: any;
+    /**
+       * Text to display in the fieldset legend
+       * @type {string | undefined}
+       * @default undefined
+       */ legendText?: string | undefined;
+    /**
+       * When true, the field is marked as required in the UI. This is only for visual indication
+       * and does not affect validation. Validation is handled by the API that receives the data.
+       * @type {boolean}
+       * @default false
+       */ required?: boolean;
+    /**
+       * CSS size for the grid minimum item width (like CardGrid)
+       * @type {string}
+       * @default '20rem'
+       */ cardSize?: string;
+    /**
+       * Gap between cards in the grid
+       * @type {string}
+       * @default '16px'
+       */ gap?: string;
+    /**
+       * Custom function to serialize values for form submission
+       * @type {((value: any) => string) | undefined}
+       * @default undefined
+       */ serialize?: ((value: any) => string) | undefined;
+    /**
+       * Custom function to deserialize values from form data
+       * @type {((value: string) => any) | undefined}
+       * @default undefined
+       */ deserialize?: ((value: string) => any) | undefined;
+}, {
+    default: {
+        item: CardSelectItem;
+        selected: any;
+        index: any;
+    };
+}>, {
+    focus: CustomEvent<any>;
+    blur: CustomEvent<any>;
+    update: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: CardSelectItem;
+        selected: any;
+        index: any;
+    };
+}, {}, string>;
+type FieldCardRadio = InstanceType<typeof FieldCardRadio>;
+export default FieldCardRadio;

package/dist/components/QuestionnairePrompt.svelte

@@ -7,7 +7,7 @@
      * There can be up to 3 external links to help applicants if there are things they need to do externally to the app request.
      * @type {{ url: string, label: string }[]}
      */
-    export let externalLinks: { url: string, label: string, target?: string, rel?: string}[] = []
+    export let externalLinks: { url: string, label: string, target?: string, rel?: string }[] = []
 
     /**
      * If true, the form will take the full width of its container. If false, it will be constrained to max-w-screen-md.
@@ -20,12 +20,25 @@
      * @type {'left' | 'center'}
      */
     export let align: 'left' | 'center' = 'center'
+
+    /**
+     * Text alignment for the intro slot content. Defaults to the value of `align`.
+     * @type {'left' | 'center' | 'right' | undefined}
+     */
+    export let introTextAlignment: 'left' | 'center' | 'right' | undefined = undefined
+
+    $: effectiveIntroAlignment = introTextAlignment ?? align
 </script>
+{#if $$slots.intro}
+    <div id="questionnaire-intro" class="prompt-intro flow max-w-screen-md px-6" class:mx-auto={align === 'center'} class:text-center={effectiveIntroAlignment === 'center'} class:text-right={effectiveIntroAlignment === 'right'} style:color="var(--cds-text-02)">
+        <slot name="intro" />
+    </div>
+{/if}
 {#if externalLinks.length > 0}
-    <div class="prompt-intro-links flow max-w-screen-md mx-auto px-6">
-        <ul class="flex gap-4 flex-wrap mb-4 justify-center">
+    <div class="prompt-intro-links flow max-w-screen-md px-6" class:mx-auto={align === 'center'}>
+        <ul class="flex gap-4 flex-wrap mb-4" class:justify-center={align === 'center'}>
         {#each externalLinks.slice(0, 3) as link (link.url)}
-            <li><Button kind="ghost" icon={Launch} href={link.url} target={link.target ?? '_blank'} rel={link.rel ?? 'noopener noreferrer'}>{link.label}</Button></li>
+            <li><Button kind="ghost" icon={Launch} href={link.url} target={link.target ?? '_blank'} rel={link.rel ?? 'noopener noreferrer'}>{link.label}{#if (link.target ?? '_blank') === '_blank'}<span class="sr-only"> (opens in a new tab)</span>{/if}</Button></li>
         {/each}
         </ul>
     </div>

package/dist/components/QuestionnairePrompt.svelte.d.ts

@@ -0,0 +1,52 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const QuestionnairePrompt: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+         * Array of external links to show above the form.
+         * There can be up to 3 external links to help applicants if there are things they need to do externally to the app request.
+         * @type {{ url: string, label: string }[]}
+         */ externalLinks?: {
+        url: string;
+        label: string;
+        target?: string;
+        rel?: string;
+    }[];
+    /**
+         * If true, the form will take the full width of its container. If false, it will be constrained to max-w-screen-md.
+         * @type {boolean}
+         */ fullWidth?: boolean;
+    /**
+         * Alignment of the form container. 'center' will center it and 'left' will align it to the left.
+         * @type {'left' | 'center'}
+         */ align?: "left" | "center";
+    /**
+         * Text alignment for the intro slot content. Defaults to the value of `align`.
+         * @type {'left' | 'center' | 'right' | undefined}
+         */ introTextAlignment?: "left" | "center" | "right" | undefined;
+}, {
+    intro: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    intro: {};
+    default: {};
+}, {}, string>;
+type QuestionnairePrompt = InstanceType<typeof QuestionnairePrompt>;
+export default QuestionnairePrompt;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FieldCardCheckbox } from './FieldCardCheckbox.svelte';
+export { default as FieldCardRadio } from './FieldCardRadio.svelte';
+export { default as QuestionnairePrompt } from './QuestionnairePrompt.svelte';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type * from './api.js';
+export * from './components/index.js';
+export * from './registry.js';
+export * from './types.js';
+export * from './typed-client/index.js';

package/dist/registry.d.ts

@@ -0,0 +1,216 @@
+import type { LayoutStructureNode, LayoutStructureNodeRoot } from '@txstate-mws/carbon-svelte';
+import type { Component } from 'svelte';
+export interface ProgramDefinition {
+    /**
+     * The key for the program. Allows us to match up API programs with
+     * the appropriate definition.
+     */
+    key: string;
+    /**
+     * An icon to represent this program in the navigation.
+     */
+    icon?: Component;
+}
+export interface RequirementDefinition {
+    /**
+     * The key for the requirement. Allows us to match up API requirements with
+     * the appropriate definition.
+     */
+    key: string;
+    /**
+     * An icon to represent this requirement in the navigation. Requirements do not appear
+     * in the navigation in the applicant's view.
+     */
+    icon?: Component;
+    /**
+     * A component that will be used to render the form for this prompt's configuration, if applicable.
+     */
+    configureComponent?: Component;
+    /**
+     * Read-only version of the configuration.
+     */
+    configureDisplayComponent?: Component;
+}
+export interface PromptDefinition {
+    key: string;
+    /**
+     * The component that will be used to render the form for this prompt.
+     *
+     * If not provided, it will be assumed that the prompt is meant to be filled in
+     * by an automation. The applicant view cannot handle this, so always include
+     * a formComponent for applicant prompts.
+     */
+    formComponent?: Component;
+    /**
+     * Control the size of the area the formComponent will be rendered in.
+     * - 'small' will render the form in a small area (about 8 lines or less at 320px width).
+     * - 'large' will render the form in a large area (about 32 lines or less at 800px width) (still has to be responsive down to 320px).
+     * - 'full' will render the form in a modal that takes up the full screen (still has to be responsive down to 320px). This also disables autosaving in the reviewer UI.
+     * Defaults to 'small'.
+     */
+    formMode?: 'small' | 'large' | 'full';
+    /**
+     * Set this to true to make the prompt visually distinct as something that is meant to
+     * be filled in by an automation. If you provide a formComponent, humans with permission
+     * will still have an edit pencil and be able to edit the prompt in a modal.
+     *
+     * - If you didn't provide a formComponent, `automation` defaults to true.
+     * - When `automation` is true, `formMode` is ignored (behaves like 'full').
+     * - The applicant view will ignore this setting.
+     *
+     * Note: if you set this and also provide a formComponent, it might be a good idea to add
+     * a hidden field to the formComponent to mark the data as written by a human, so automations
+     * know to stop updating the data. Automations will set data directly so anything you do
+     * in the formComponent will only affect human edits / overrides.
+     */
+    automation?: boolean;
+    /**
+     * A component that displays the data collected from this prompt instead of collecting
+     * it. Should be as compact as possible, as it will be displayed in a big list of prompts.
+     */
+    displayComponent: Component;
+    /**
+     * Control the size of the area the displayComponent will be rendered in.
+     * - 'small' will render the component in a small area (about 8 lines or less at 320px width).
+     * - 'large' will render the component in a large area (about 32 lines or less at 800px width) (still has to be responsive down to 320px).
+     * Defaults to 'small'.
+     *
+     * There is no 'full' mode for displayComponent, since we always want to be able to print the
+     * full information dump on a one-pager.
+     */
+    displayMode?: 'small' | 'large';
+    /**
+     * A component that will be used to render the form for this prompt's configuration, if applicable.
+     *
+     * Configuration forms are always rendered in a modal that takes up (up to) the full screen.
+     */
+    configureComponent?: Component;
+    /**
+     * Read-only version of the configuration.
+     */
+    configureDisplayComponent?: Component;
+    /**
+     * An icon for the navigation.
+     */
+    icon?: Component;
+}
+export interface Terminologies {
+    /**
+    * The name of the container for all the applications/programes.
+    *
+    * Defaults to "App Request", but can be changed to something like "Request" or "Application".
+    * "Application" works well if the project only has one program.
+    */
+    appRequest?: string;
+    /**
+    * What to call the login for each user.
+    *
+    * Defaults to "Login", but can be changed to something like "Username" or "Email" or something
+    * unique to the organization like "NetID".
+    */
+    login?: string;
+    /**
+     * The name of the time periods that applications are placed inside.
+     *
+     * Defaults to "Period", but can be changed to something like "Year" or "Term" or "Application
+     * Window".
+     */
+    period?: string;
+}
+/**
+ * A type for the config object that should be exported from a CMS instance's admin/local/index.js
+ * to configure how that instance should work.
+ */
+export interface UIConfig {
+    programs: ProgramDefinition[];
+    requirements: RequirementDefinition[];
+    prompts: PromptDefinition[];
+    appName: string;
+    applicantDashboardTitle?: string;
+    applicantDashboardNavTitle?: string;
+    /**
+     * The header text for the applicant dashboard intro section.
+     */
+    applicantDashboardIntroHeader?: string;
+    applicantDashboardIntroDetail?: string;
+    /**
+     * The number of days an application is considered "recent" on the applicant dashboard.
+     * Defaults to 30 if not specified.
+     */
+    applicantDashboardRecentDays?: number;
+    /**
+     * Whether to constrain the applicant review/submission page to a medium
+     * screen-width container. Defaults to true.
+     */
+    applicantReviewMaxWidth?: boolean;
+    /**
+     * URL to the support/help page. If provided, a support link will be shown on applicant review screen.
+     */
+    supportUrl?: string;
+    extraNavItems?: LayoutStructureNodeRoot<LayoutStructureNode>[];
+    /**
+     * This is where you should describe what kind of attributes app users will be able to search users by.
+     * Displayed on user management page /roles/users.
+     */
+    roleUsersAttributeDescription?: string;
+    /**
+     * These options give you the ability to customize the terminology used in the UI.
+     *
+     * This is useful for changing the wording to better fit your project's
+     * context.
+     */
+    terminology?: Terminologies & {
+        /**
+         * Optionally, provide plural forms for each of the above. By default we will use a pluralization
+         * library.
+         */
+        plural?: Terminologies;
+    };
+    /**
+     * Several spots in the UI allow you to provide custom components to add extra data or functionality.
+     *
+     * Specify the components here.
+     */
+    slots?: {
+        /**
+         * This will be placed inside the top card on the reviewer sidebar that displays applicant information.
+         *
+         * It will receive receive the following props:
+         * - `appRequest` with lots of app request details, import the ReviewerCardRequest type from `@reqquest/ui`
+         * - `applicant` with applicant details, import the ReviewerCardApplicant type from `@reqquest/ui`. Notably
+         *   this includes `otherInfo`, which contains any custom user information returned by the userLookup function you provided.
+         * - `api` which is an instance of the API client, import the ReqquestAPI type from `@reqquest/ui`. This allows you to make
+         * additional API calls if you need information not included in the other props.
+         */
+        reviewerSidebarCard?: Component;
+        /**
+         * This will be placed below the request details in the sidebar.
+         *
+         * It will receive receive the following props:
+         * - `appRequest` with lots of app request details, import the ReviewerCardRequest type from `@reqquest/ui`
+         * - `applicant` with applicant details, import the ReviewerCardApplicant type from `@reqquest/ui`. Notably
+         *   this includes `otherInfo`, which contains any custom user information returned by the userLookup function you provided.
+         * - `api` which is an instance of the API client, import the ReqquestAPI type from `@reqquest/ui`. This allows you to make
+         * additional API calls if you need information not included in the other props.
+         */
+        reviewerSidebar?: Component;
+    };
+}
+export interface UIConfigWithDefaults extends UIConfig {
+    terminology: Required<Terminologies>;
+    plural: Required<Terminologies>;
+}
+export declare class UIRegistry {
+    config: UIConfig;
+    protected promptMap: Record<string, PromptDefinition>;
+    protected requirementMap: Record<string, RequirementDefinition>;
+    protected programMap: Record<string, ProgramDefinition>;
+    protected lang: Required<Terminologies>;
+    protected plural: Required<Terminologies>;
+    constructor(config: UIConfig);
+    getWord(key: keyof Terminologies, count?: number, inclusive?: boolean): string;
+    getPlural(key: keyof Terminologies): string;
+    getPrompt(key: string): PromptDefinition | undefined;
+    getRequirement(key: string): RequirementDefinition | undefined;
+    getProgram(key: string): ProgramDefinition | undefined;
+}

package/dist/typed-client/index.d.ts

@@ -0,0 +1,25 @@
+import type { QueryGenqlSelection, Query, MutationGenqlSelection, Mutation } from './schema';
+import { type FieldsSelection, type GraphqlOperation, type ClientOptions, GenqlError } from './runtime';
+export type { FieldsSelection } from './runtime';
+export { GenqlError };
+export * from './schema';
+export interface Client {
+    query<R extends QueryGenqlSelection>(request: R & {
+        __name?: string;
+    }): Promise<FieldsSelection<Query, R>>;
+    mutation<R extends MutationGenqlSelection>(request: R & {
+        __name?: string;
+    }): Promise<FieldsSelection<Mutation, R>>;
+}
+export declare const createClient: (options?: ClientOptions) => Client;
+export declare const everything: {
+    __scalar: boolean;
+};
+export type QueryResult<fields extends QueryGenqlSelection> = FieldsSelection<Query, fields>;
+export declare const generateQueryOp: (fields: QueryGenqlSelection & {
+    __name?: string;
+}) => GraphqlOperation;
+export type MutationResult<fields extends MutationGenqlSelection> = FieldsSelection<Mutation, fields>;
+export declare const generateMutationOp: (fields: MutationGenqlSelection & {
+    __name?: string;
+}) => GraphqlOperation;