@reqquest/ui 1.0.0

package/dist/registry.d.ts

@@ -0,0 +1,138 @@
+import type { LayoutStructureNode, LayoutStructureNodeRoot } from '@txstate-mws/carbon-svelte';
+import type { SvelteComponent } 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?: typeof SvelteComponent<any>;
+}
+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?: typeof SvelteComponent<any>;
+    /**
+     * A component that will be used to render the form for this prompt's configuration, if applicable.
+     */
+    configureComponent?: typeof SvelteComponent<any>;
+}
+export interface PromptDefinition {
+    key: string;
+    /**
+     * The component that will be used to render the form for this prompt.
+     */
+    formComponent: typeof SvelteComponent<any>;
+    /**
+     * 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: typeof SvelteComponent<any>;
+    /**
+     * A component that will be used to render the form for this prompt's configuration, if applicable.
+     */
+    configureComponent?: typeof SvelteComponent<any>;
+    /**
+     * An icon for the navigation.
+     */
+    icon?: typeof SvelteComponent<any>;
+}
+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;
+    extraNavItems?: LayoutStructureNodeRoot<LayoutStructureNode>[];
+    /**
+     * 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 card on the reviewer sidebar.
+         *
+         * It will be given the `basicRequestData` prop, which contains the basic information about the
+         * request, such as the name of the applicant and the period. Any custom user information returned
+         * by the userLookup function you provide will also be included at `basicRequestData.applicant.otherInfo`.
+         */
+        reviewerSidebarCard?: typeof SvelteComponent<any>;
+        /**
+         * This will be placed below the request details in the sidebar.
+         *
+         * It will only receive the `basicRequestData` prop, but you may use the `api` object from
+         * @reqquest/ui to fetch additional data.
+         */
+        reviewerSidebar?: typeof SvelteComponent<any>;
+    };
+}
+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;
+    getRequirement(key: string): RequirementDefinition;
+    getProgram(key: string): ProgramDefinition;
+}

package/dist/registry.js

@@ -0,0 +1,42 @@
+import { plural } from 'txstate-utils';
+export class UIRegistry {
+    config;
+    promptMap = {};
+    requirementMap = {};
+    programMap = {};
+    lang;
+    plural;
+    constructor(config) {
+        this.config = config;
+        for (const prompt of config.prompts)
+            this.promptMap[prompt.key] = prompt;
+        for (const requirement of config.requirements)
+            this.requirementMap[requirement.key] = requirement;
+        for (const program of config.programs)
+            this.programMap[program.key] = program;
+        this.lang = {
+            appRequest: config.terminology?.appRequest ?? config.programs.length > 1 ? 'App Request' : 'Application',
+            login: config.terminology?.login ?? 'Login',
+            period: config.terminology?.period ?? 'Period'
+        };
+        this.plural = {};
+        for (const key of Object.keys(this.lang)) {
+            this.plural[key] = config.terminology?.plural?.[key] ?? plural(this.lang[key]);
+        }
+    }
+    getWord(key, count = 1, inclusive = false) {
+        return (inclusive ? count + ' ' : '') + (count !== 1 ? this.plural[key] : this.lang[key]);
+    }
+    getPlural(key) {
+        return this.plural[key];
+    }
+    getPrompt(key) {
+        return this.promptMap[key];
+    }
+    getRequirement(key) {
+        return this.requirementMap[key];
+    }
+    getProgram(key) {
+        return this.programMap[key];
+    }
+}

package/dist/stores/IStateStore.d.ts

@@ -0,0 +1,5 @@
+interface IStateStore<T> {
+    isUpdating: boolean;
+    lastUpdate: Date;
+    data: T[];
+}

package/dist/stores/IStateStore.js

@@ -0,0 +1 @@
+"use strict";

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;

package/dist/typed-client/index.js

@@ -0,0 +1,23 @@
+import { linkTypeMap, createClient as createClientOriginal, generateGraphqlOperation, GenqlError, } from './runtime';
+export { GenqlError };
+import types from './types';
+export * from './schema';
+const typeMap = linkTypeMap(types);
+export const createClient = function (options) {
+    return createClientOriginal({
+        url: 'http://localhost:81/graphql',
+        ...options,
+        queryRoot: typeMap.Query,
+        mutationRoot: typeMap.Mutation,
+        subscriptionRoot: typeMap.Subscription,
+    });
+};
+export const everything = {
+    __scalar: true,
+};
+export const generateQueryOp = function (fields) {
+    return generateGraphqlOperation('query', typeMap.Query, fields);
+};
+export const generateMutationOp = function (fields) {
+    return generateGraphqlOperation('mutation', typeMap.Mutation, fields);
+};

package/dist/typed-client/runtime/batcher.d.ts

@@ -0,0 +1,105 @@
+import type { GraphqlOperation } from './generateGraphqlOperation';
+type Variables = Record<string, any>;
+type QueryError = Error & {
+    message: string;
+    locations?: Array<{
+        line: number;
+        column: number;
+    }>;
+    path?: any;
+    rid: string;
+    details?: Record<string, any>;
+};
+type Result = {
+    data: Record<string, any>;
+    errors: Array<QueryError>;
+};
+type Fetcher = (batchedQuery: GraphqlOperation | Array<GraphqlOperation>) => Promise<Array<Result>>;
+type Options = {
+    batchInterval?: number;
+    shouldBatch?: boolean;
+    maxBatchSize?: number;
+};
+type Queue = Array<{
+    request: GraphqlOperation;
+    resolve: (...args: Array<any>) => any;
+    reject: (...args: Array<any>) => any;
+}>;
+/**
+ * Create a batcher client.
+ * @param {Fetcher} fetcher                 - A function that can handle the network requests to graphql endpoint
+ * @param {Options} options                 - the options to be used by client
+ * @param {boolean} options.shouldBatch     - should the client batch requests. (default true)
+ * @param {integer} options.batchInterval   - duration (in MS) of each batch window. (default 6)
+ * @param {integer} options.maxBatchSize    - max number of requests in a batch. (default 0)
+ * @param {boolean} options.defaultHeaders  - default headers to include with every request
+ *
+ * @example
+ * const fetcher = batchedQuery => fetch('path/to/graphql', {
+ *    method: 'post',
+ *    headers: {
+ *      Accept: 'application/json',
+ *      'Content-Type': 'application/json',
+ *    },
+ *    body: JSON.stringify(batchedQuery),
+ *    credentials: 'include',
+ * })
+ * .then(response => response.json())
+ *
+ * const client = new QueryBatcher(fetcher, { maxBatchSize: 10 })
+ */
+export declare class QueryBatcher {
+    fetcher: Fetcher;
+    _options: Options;
+    _queue: Queue;
+    constructor(fetcher: Fetcher, { batchInterval, shouldBatch, maxBatchSize, }?: Options);
+    /**
+     * Fetch will send a graphql request and return the parsed json.
+     * @param {string}      query          - the graphql query.
+     * @param {Variables}   variables      - any variables you wish to inject as key/value pairs.
+     * @param {[string]}    operationName  - the graphql operationName.
+     * @param {Options}     overrides      - the client options overrides.
+     *
+     * @return {promise} resolves to parsed json of server response
+     *
+     * @example
+     * client.fetch(`
+     *    query getHuman($id: ID!) {
+     *      human(id: $id) {
+     *        name
+     *        height
+     *      }
+     *    }
+     * `, { id: "1001" }, 'getHuman')
+     *    .then(human => {
+     *      // do something with human
+     *      console.log(human);
+     *    });
+     */
+    fetch(query: string, variables?: Variables, operationName?: string, overrides?: Options): Promise<Result>;
+    /**
+     * Fetch will send a graphql request and return the parsed json.
+     * @param {string}      query          - the graphql query.
+     * @param {Variables}   variables      - any variables you wish to inject as key/value pairs.
+     * @param {[string]}    operationName  - the graphql operationName.
+     * @param {Options}     overrides      - the client options overrides.
+     *
+     * @return {Promise<Array<Result>>} resolves to parsed json of server response
+     *
+     * @example
+     * client.forceFetch(`
+     *    query getHuman($id: ID!) {
+     *      human(id: $id) {
+     *        name
+     *        height
+     *      }
+     *    }
+     * `, { id: "1001" }, 'getHuman')
+     *    .then(human => {
+     *      // do something with human
+     *      console.log(human);
+     *    });
+     */
+    forceFetch(query: string, variables?: Variables, operationName?: string, overrides?: Options): Promise<Result>;
+}
+export {};

package/dist/typed-client/runtime/batcher.js

@@ -0,0 +1,203 @@
+import { GenqlError } from './error';
+/**
+ * takes a list of requests (queue) and batches them into a single server request.
+ * It will then resolve each individual requests promise with the appropriate data.
+ * @private
+ * @param {QueryBatcher}   client - the client to use
+ * @param {Queue} queue  - the list of requests to batch
+ */
+function dispatchQueueBatch(client, queue) {
+    let batchedQuery = queue.map((item) => item.request);
+    if (batchedQuery.length === 1) {
+        batchedQuery = batchedQuery[0];
+    }
+    (() => {
+        try {
+            return client.fetcher(batchedQuery);
+        }
+        catch (e) {
+            return Promise.reject(e);
+        }
+    })().then((responses) => {
+        if (queue.length === 1 && !Array.isArray(responses)) {
+            if (responses.errors && responses.errors.length) {
+                queue[0].reject(new GenqlError(responses.errors, responses.data));
+                return;
+            }
+            queue[0].resolve(responses);
+            return;
+        }
+        else if (responses.length !== queue.length) {
+            throw new Error('response length did not match query length');
+        }
+        for (let i = 0; i < queue.length; i++) {
+            if (responses[i].errors && responses[i].errors.length) {
+                queue[i].reject(new GenqlError(responses[i].errors, responses[i].data));
+            }
+            else {
+                queue[i].resolve(responses[i]);
+            }
+        }
+    })
+        .catch((e) => {
+        for (let i = 0; i < queue.length; i++) {
+            queue[i].reject(e);
+        }
+    });
+}
+/**
+ * creates a list of requests to batch according to max batch size.
+ * @private
+ * @param {QueryBatcher} client - the client to create list of requests from from
+ * @param {Options} options - the options for the batch
+ */
+function dispatchQueue(client, options) {
+    const queue = client._queue;
+    const maxBatchSize = options.maxBatchSize || 0;
+    client._queue = [];
+    if (maxBatchSize > 0 && maxBatchSize < queue.length) {
+        for (let i = 0; i < queue.length / maxBatchSize; i++) {
+            dispatchQueueBatch(client, queue.slice(i * maxBatchSize, (i + 1) * maxBatchSize));
+        }
+    }
+    else {
+        dispatchQueueBatch(client, queue);
+    }
+}
+/**
+ * Create a batcher client.
+ * @param {Fetcher} fetcher                 - A function that can handle the network requests to graphql endpoint
+ * @param {Options} options                 - the options to be used by client
+ * @param {boolean} options.shouldBatch     - should the client batch requests. (default true)
+ * @param {integer} options.batchInterval   - duration (in MS) of each batch window. (default 6)
+ * @param {integer} options.maxBatchSize    - max number of requests in a batch. (default 0)
+ * @param {boolean} options.defaultHeaders  - default headers to include with every request
+ *
+ * @example
+ * const fetcher = batchedQuery => fetch('path/to/graphql', {
+ *    method: 'post',
+ *    headers: {
+ *      Accept: 'application/json',
+ *      'Content-Type': 'application/json',
+ *    },
+ *    body: JSON.stringify(batchedQuery),
+ *    credentials: 'include',
+ * })
+ * .then(response => response.json())
+ *
+ * const client = new QueryBatcher(fetcher, { maxBatchSize: 10 })
+ */
+export class QueryBatcher {
+    fetcher;
+    _options;
+    _queue;
+    constructor(fetcher, { batchInterval = 6, shouldBatch = true, maxBatchSize = 0, } = {}) {
+        this.fetcher = fetcher;
+        this._options = {
+            batchInterval,
+            shouldBatch,
+            maxBatchSize,
+        };
+        this._queue = [];
+    }
+    /**
+     * Fetch will send a graphql request and return the parsed json.
+     * @param {string}      query          - the graphql query.
+     * @param {Variables}   variables      - any variables you wish to inject as key/value pairs.
+     * @param {[string]}    operationName  - the graphql operationName.
+     * @param {Options}     overrides      - the client options overrides.
+     *
+     * @return {promise} resolves to parsed json of server response
+     *
+     * @example
+     * client.fetch(`
+     *    query getHuman($id: ID!) {
+     *      human(id: $id) {
+     *        name
+     *        height
+     *      }
+     *    }
+     * `, { id: "1001" }, 'getHuman')
+     *    .then(human => {
+     *      // do something with human
+     *      console.log(human);
+     *    });
+     */
+    fetch(query, variables, operationName, overrides = {}) {
+        const request = {
+            query,
+        };
+        const options = Object.assign({}, this._options, overrides);
+        if (variables) {
+            request.variables = variables;
+        }
+        if (operationName) {
+            request.operationName = operationName;
+        }
+        const promise = new Promise((resolve, reject) => {
+            this._queue.push({
+                request,
+                resolve,
+                reject,
+            });
+            if (this._queue.length === 1) {
+                if (options.shouldBatch) {
+                    setTimeout(() => dispatchQueue(this, options), options.batchInterval);
+                }
+                else {
+                    dispatchQueue(this, options);
+                }
+            }
+        });
+        return promise;
+    }
+    /**
+     * Fetch will send a graphql request and return the parsed json.
+     * @param {string}      query          - the graphql query.
+     * @param {Variables}   variables      - any variables you wish to inject as key/value pairs.
+     * @param {[string]}    operationName  - the graphql operationName.
+     * @param {Options}     overrides      - the client options overrides.
+     *
+     * @return {Promise<Array<Result>>} resolves to parsed json of server response
+     *
+     * @example
+     * client.forceFetch(`
+     *    query getHuman($id: ID!) {
+     *      human(id: $id) {
+     *        name
+     *        height
+     *      }
+     *    }
+     * `, { id: "1001" }, 'getHuman')
+     *    .then(human => {
+     *      // do something with human
+     *      console.log(human);
+     *    });
+     */
+    forceFetch(query, variables, operationName, overrides = {}) {
+        const request = {
+            query,
+        };
+        const options = Object.assign({}, this._options, overrides, {
+            shouldBatch: false,
+        });
+        if (variables) {
+            request.variables = variables;
+        }
+        if (operationName) {
+            request.operationName = operationName;
+        }
+        const promise = new Promise((resolve, reject) => {
+            const client = new QueryBatcher(this.fetcher, this._options);
+            client._queue = [
+                {
+                    request,
+                    resolve,
+                    reject,
+                },
+            ];
+            dispatchQueue(client, options);
+        });
+        return promise;
+    }
+}

package/dist/typed-client/runtime/createClient.d.ts

@@ -0,0 +1,17 @@
+import { type BatchOptions } from './fetcher';
+import type { ExecutionResult, LinkedType } from './types';
+import { type GraphqlOperation } from './generateGraphqlOperation';
+export type Headers = HeadersInit | (() => HeadersInit) | (() => Promise<HeadersInit>);
+export type BaseFetcher = (operation: GraphqlOperation | GraphqlOperation[]) => Promise<ExecutionResult | ExecutionResult[]>;
+export type ClientOptions = Omit<RequestInit, 'body' | 'headers'> & {
+    url?: string;
+    batch?: BatchOptions | boolean;
+    fetcher?: BaseFetcher;
+    fetch?: Function;
+    headers?: Headers;
+};
+export declare const createClient: ({ queryRoot, mutationRoot, subscriptionRoot, ...options }: ClientOptions & {
+    queryRoot?: LinkedType;
+    mutationRoot?: LinkedType;
+    subscriptionRoot?: LinkedType;
+}) => any;

package/dist/typed-client/runtime/createClient.js

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { createFetcher } from './fetcher';
+import { generateGraphqlOperation, } from './generateGraphqlOperation';
+export const createClient = ({ queryRoot, mutationRoot, subscriptionRoot, ...options }) => {
+    const fetcher = createFetcher(options);
+    const client = {};
+    if (queryRoot) {
+        client.query = (request) => {
+            if (!queryRoot)
+                throw new Error('queryRoot argument is missing');
+            const resultPromise = fetcher(generateGraphqlOperation('query', queryRoot, request));
+            return resultPromise;
+        };
+    }
+    if (mutationRoot) {
+        client.mutation = (request) => {
+            if (!mutationRoot)
+                throw new Error('mutationRoot argument is missing');
+            const resultPromise = fetcher(generateGraphqlOperation('mutation', mutationRoot, request));
+            return resultPromise;
+        };
+    }
+    return client;
+};

package/dist/typed-client/runtime/error.d.ts

@@ -0,0 +1,18 @@
+export declare class GenqlError extends Error {
+    errors: Array<GraphqlError>;
+    /**
+     * Partial data returned by the server
+     */
+    data?: any;
+    constructor(errors: any[], data: any);
+}
+interface GraphqlError {
+    message: string;
+    locations?: Array<{
+        line: number;
+        column: number;
+    }>;
+    path?: string[];
+    extensions?: Record<string, any>;
+}
+export {};

package/dist/typed-client/runtime/error.js

@@ -0,0 +1,19 @@
+// @ts-nocheck
+export class GenqlError extends Error {
+    errors = [];
+    /**
+     * Partial data returned by the server
+     */
+    data;
+    constructor(errors, data) {
+        let message = Array.isArray(errors)
+            ? errors.map((x) => x?.message || '').join('\n')
+            : '';
+        if (!message) {
+            message = 'GraphQL error';
+        }
+        super(message);
+        this.errors = errors;
+        this.data = data;
+    }
+}

package/dist/typed-client/runtime/fetcher.d.ts

@@ -0,0 +1,10 @@
+import type { ClientOptions } from './createClient';
+import type { GraphqlOperation } from './generateGraphqlOperation';
+export interface Fetcher {
+    (gql: GraphqlOperation): Promise<any>;
+}
+export type BatchOptions = {
+    batchInterval?: number;
+    maxBatchSize?: number;
+};
+export declare const createFetcher: ({ url, headers, fetcher, fetch: _fetch, batch, ...rest }: ClientOptions) => Fetcher;