@reqquest/ui 1.1.1 → 1.1.2

package/dist/components/FieldCardCheckbox.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CardSelectItem } from './FieldCardRadio.svelte'
+  import type { CardSelectItem } from '../components/FieldCardRadio.svelte'
   import { Card, CardGrid, FormInlineNotification } from '@txstate-mws/carbon-svelte'
   import { FORM_CONTEXT, FORM_INHERITED_PATH, Field, type FormStore } from '@txstate-mws/svelte-forms'
   import { Store } from '@txstate-mws/svelte-store'

package/dist/components/index.js

@@ -1,12 +1,3 @@
-export { default as ApplicantProgramList } from './ApplicantProgramList.svelte';
-export { default as ApplicantPromptPage } from './ApplicantPromptPage.svelte';
-export { default as ApplicationDetailsView } from './ApplicationDetailsView.svelte';
-export { default as AppRequestCard } from './AppRequestCard.svelte';
-export { default as ButtonLoadingIcon } from './ButtonLoadingIcon.svelte';
-export { default as IntroPanel } from './IntroPanel.svelte';
-export { default as PeriodPanel } from './PeriodPanel.svelte';
-export { default as QuestionnairePrompt } from './QuestionnairePrompt.svelte';
-export { default as RenderDisplayComponent } from './RenderDisplayComponent.svelte';
-export { default as FieldCardRadio } from './FieldCardRadio.svelte';
 export { default as FieldCardCheckbox } from './FieldCardCheckbox.svelte';
-export * from './types.js';
+export { default as FieldCardRadio } from './FieldCardRadio.svelte';
+export { default as QuestionnairePrompt } from '../../lib/components/QuestionnairePrompt.svelte';

package/dist/index.js

@@ -1,6 +1,4 @@
-export * from './registry.js';
-export * from './api.js';
 export * from './components/index.js';
+export * from './registry.js';
+export * from './types.js';
 export * from './typed-client/index.js';
-export * from './util.js';
-export * from './status-utils.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reqquest/ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
-    "svelte": "^4.2.15 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
     "@txstate-mws/carbon-svelte": "^1.5.5",

package/dist/components/AppRequestCard.svelte

@@ -1,172 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation'
-  import { resolve } from '$app/paths'
-  import { getApplicationStatusInfo, getAppRequestStatusInfo, getNavigationButton } from '../status-utils.js'
-  import { longNumericTime } from '../util.js'
-  import type { ActionItem } from '@txstate-mws/carbon-svelte'
-  import { Card, TagSet } from '@txstate-mws/carbon-svelte'
-  import Button from "carbon-components-svelte/src/Button/Button.svelte";
-  import type { PageData } from '../../routes/dashboards/applicant/$types'
-  import StatusMessageList from './StatusMessageList.svelte'
-  import WarningIconYellow from './WarningIconYellow.svelte'
-  import { enumPromptVisibility } from '../typed-client'
-
-  // Type for the partial AppRequest data passed from dashboard
-  type DashboardAppRequest = PageData['appRequests'][number]
-
-  export let request: DashboardAppRequest
-  export let actions: ActionItem[] = []
-  export let showAcceptanceButtons = true
-  export let onAcceptanceNavigate: ((requestId: string) => void) | undefined = undefined
-
-  $: statusInfo = getAppRequestStatusInfo(request.status)
-  $: firstInvalidatedPrompt = request.applications
-    .flatMap(app => app.requirements)
-    .flatMap(req => req.prompts)
-    .find(p => p.visibility === enumPromptVisibility.AVAILABLE && p.invalidated && p.invalidatedReason)
-  $: navButton = firstInvalidatedPrompt
-    ? { label: 'Make corrections', href: `/requests/${request.id}/apply/${firstInvalidatedPrompt.id}` }
-    : getNavigationButton(request.status, request.id)
-
-  async function handleAcceptanceClick () {
-    if (onAcceptanceNavigate) {
-      onAcceptanceNavigate(request.id)
-    } else {
-      await goto(resolve(`/requests/${request.id}/apply`))
-    }
-  }
-</script>
-
-<Card
-  title={request.period.name}
-  subhead={`Started: ${longNumericTime(request.createdAt)}`}
-  tags={[{ label: statusInfo.label, type: statusInfo.color }]}
-  tagsInBody
-  {actions}
-  forceOverflow={true}
-  navigations={navButton ? [navButton] : []}>
-
-  <!-- Status description -->
-  {#if statusInfo.description}
-    <p class="pl-1.5 mb-4 text-sm">{statusInfo.description}</p>
-  {/if}
-
-  <!-- Benefits section -->
-  <div class="rounded">
-    <h4 class="m-0 mb-2 text-lg benefits-title">Potential benefits</h4>
-    <p class="m-0 mb-3 benefits-subtitle text-sm">Benefit results will be finalized once the application submission and review is completed.</p>
-
-    {#if request.applications.length > 0}
-      {#each request.applications as application (application.id)}
-        {@const invalidatedPrompts = application.requirements
-          .flatMap(req => req.prompts)
-          .filter(p => p.visibility === enumPromptVisibility.AVAILABLE && p.invalidated && p.invalidatedReason)
-        }
-        {@const warningReqs = application.requirements.filter(r => r.status === 'WARNING' && r.statusReason)}
-        {@const appStatusTag = invalidatedPrompts.length > 0
-          ? { label: 'Needs corrections', color: 'magenta' as const }
-          : getApplicationStatusInfo(application.status)}
-        <div class="program-status py-2 px-4 mb-4">
-          <div class="flex items-center">
-            <span class="font-medium">{application.title}</span>
-            <div class="tagwrap">
-              <TagSet tags={[{ label: appStatusTag.label, type: appStatusTag.color }]} />
-            </div>
-            {#if (application.status === 'PENDING' || application.status === 'ELIGIBLE') && warningReqs.length > 0}
-              <WarningIconYellow size={20} />
-            {/if}
-
-            <!-- Acceptance buttons -->
-            {#if showAcceptanceButtons && (request.status === 'ACCEPTANCE' || request.status === 'READY_TO_ACCEPT') && application.status === 'ELIGIBLE'}
-              <Button kind="primary" size="small" class="ml-auto"
-                on:click={handleAcceptanceClick}>
-                {request.status === 'READY_TO_ACCEPT' ? 'Accept Offer' : 'Review Offer'}
-              </Button>
-            {/if}
-          </div>
-
-          <!-- Status reason -->
-          {#if application.statusReason && application.status !== 'INELIGIBLE' && invalidatedPrompts.length === 0}
-            <p class="status-reason mt-2 mb-0 text-sm">{application.statusReason}</p>
-          {/if}
-
-          <!-- Warnings for PENDING/ELIGIBLE applications -->
-          {#if (application.status === 'PENDING' || application.status === 'ELIGIBLE') && warningReqs.length > 0}
-            <StatusMessageList
-              items={warningReqs.map(r => ({ id: r.id, message: r.statusReason! }))}
-              variant="warning"
-              accordionTitle="Multiple warnings" />
-          {/if}
-
-          <!-- Failed requirements for INELIGIBLE applications -->
-          {#if application.status === 'INELIGIBLE' && application.requirements}
-            {@const failedRequirements = application.requirements.filter(req => req.status === 'DISQUALIFYING' && req.statusReason)}
-            <StatusMessageList
-              items={failedRequirements.map(r => ({ id: r.id, message: r.statusReason! }))}
-              accordionTitle="Multiple eligibility issues" />
-          {/if}
-
-          <!-- Corrections needed for non-INELIGIBLE applications -->
-          {#if invalidatedPrompts.length > 0}
-            <StatusMessageList
-              items={invalidatedPrompts.map(p => ({ id: p.id, message: p.invalidatedReason! }))}
-              accordionTitle="Multiple corrections needed" />
-          {/if}
-        </div>
-      {/each}
-    {:else}
-      <p>No benefits associated with this application.</p>
-    {/if}
-  </div>
-
-  <!-- Footer info grid -->
-  <div class="mt-4 grid grid-cols-3 footer-grid">
-    <div class="text-center py-4 px-2 footer-section">
-      <span class="block text-sm font-semibold footer-label mb-1">Request number:</span>
-      <span class="block text-sm footer-value">{request.id.slice(0, 6).toUpperCase()}</span>
-    </div>
-    <div class="text-center py-4 px-2 footer-section">
-      <span class="block text-sm font-semibold footer-label mb-1">Last updated:</span>
-      <span class="block text-sm footer-value">{longNumericTime(request.updatedAt)}</span>
-    </div>
-    <div class="text-center py-4 px-2 footer-section">
-      <span class="block text-sm font-semibold footer-label mb-1">Waiting on:</span>
-      <span class="block text-sm footer-value">{statusInfo.waitingOn}</span>
-    </div>
-  </div>
-</Card>
-
-<style>
-  /* Global styles for external component overrides */
-  :global(.tagwrap .tag-set > *) {
-    max-width: 100% !important;
-  }
-
-  .benefits-subtitle {
-    color: var(--cds-text-02);
-  }
-
-  .program-status {
-    background-color: var(--cds-ui-01);
-  }
-
-  .footer-grid {
-    background-color: var(--cds-ui-01);
-  }
-
-  .footer-section {
-    border-right: 1px solid var(--cds-ui-05);
-
-  }
-  .footer-section:last-child {
-    border-right: none;
-  }
-
-  .footer-label {
-    color: var(--cds-text-01);
-  }
-
-  .footer-value {
-    color: var(--cds-text-01);
-  }
-</style>

package/dist/components/ApplicantProgramList.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">
-  import { TagSet } from '@txstate-mws/carbon-svelte'
-  import Button from "carbon-components-svelte/src/Button/Button.svelte";
-  import Close from "carbon-icons-svelte/lib/Close.svelte";
-import InProgress from "carbon-icons-svelte/lib/InProgress.svelte";
-import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
-import Information from "carbon-icons-svelte/lib/Information.svelte";
-  import { ucfirst } from 'txstate-utils'
-  import type { ApplicationForDetails } from './types'
-  import { enumApplicationStatus, enumIneligiblePhases, enumRequirementType, getApplicationStatusInfo } from '..'
-  import ApplicantProgramListTooltip from './ApplicantProgramListTooltip.svelte'
-  import WarningIconYellow from './WarningIconYellow.svelte'
-
-  export let applications: ApplicationForDetails[]
-  export let viewMode = false
-  export let showTooltipsAsText = false
-
-  $: promptsByApplicationId = applications.reduce<Record<string, typeof applications[0]['requirements'][0]['prompts'] | undefined>>((acc, curr) => ({
-    ...acc,
-    [curr.id]: curr.requirements
-      .filter(r => r.type === enumRequirementType.QUALIFICATION)
-      .flatMap(r => r.prompts)
-  }), {})
-
-  $: programButtonStatus = applications.reduce((acc, curr) => ({
-    ...acc,
-    [curr.id]: curr.completionStatus === enumApplicationStatus.PENDING
-      ? curr.requirements.some(r => r.prompts.some(p => p.answered && !p.invalidated))
-        ? curr.requirements.filter(r => r.type === enumRequirementType.QUALIFICATION).every(r => r.prompts.every(p => p.answered && !p.invalidated))
-          ? 'complete'
-          : 'continue'
-        : 'start'
-      : curr.completionStatus === enumApplicationStatus.INELIGIBLE
-        ? curr.ineligiblePhase === enumIneligiblePhases.PREQUAL
-          ? 'ineligible'
-          : 'revisit'
-        : 'complete'
-  }), {})
-  $: programFirstPromptId = applications.reduce((acc, curr) => ({
-    ...acc,
-    [curr.id]: (promptsByApplicationId[curr.id]?.find(p => !p.answered || p.invalidated) ?? promptsByApplicationId[curr.id]?.[0])?.id
-  }), {})
-</script>
-
-<section class="programs-container">
-  <header>
-    <div class="program column">Program</div>
-    <div class="status column">Eligibility</div>
-  </header>
-  {#each applications as application (application.id)}
-    {@const programStatus = programButtonStatus[application.id]}
-    {@const programFirstPrompt = programFirstPromptId[application.id]}
-    <div class="program column">{application.title}</div>
-    <div class="status column" class:no-tooltip={!application.statusReason?.length}>
-      {#if !viewMode}
-        <div class="icon-and-tooltip" class:wide-icon={application.completionStatus === enumApplicationStatus.INELIGIBLE}>
-          {#if application.completionStatus === enumApplicationStatus.INELIGIBLE}
-            <Close size={32} class="status-icon-ineligible" />
-          {:else if ['start', 'continue'].includes(programStatus)}
-            <InProgress size={24} class="status-icon-pending" />
-          {:else if application.hasWarning}
-            <WarningIconYellow size={24} class="status-icon-warning" />
-          {:else}
-            <CheckmarkFilled size={24} class="status-icon-complete" />
-          {/if}
-          <ApplicantProgramListTooltip {application} />
-        </div>
-        {#if programFirstPrompt && programStatus !== 'ineligible'}
-          <Button size="small" kind={programStatus === 'complete' ? 'ghost' : programStatus === 'revisit' ? 'secondary' : 'primary'} href={programFirstPrompt}>{ucfirst(programStatus)}</Button>
-        {/if}
-      {:else}
-        {@const statusInfo = getApplicationStatusInfo(application.status)}
-        <TagSet tags={[{ type: statusInfo.color, label: statusInfo.label }]} />
-        <ApplicantProgramListTooltip {application} />
-      {/if}
-    </div>
-    {#if application.warningReasons.length || application.ineligibleReasons.length}
-      <div class="tooltip-text-row" class:visible={showTooltipsAsText}>
-        {#each application.ineligibleReasons as reason (reason)}
-          <div class="tooltip-text-item">
-            <Information size={16} /> {reason}
-          </div>
-        {/each}
-        {#each application.warningReasons as reason (reason)}
-          <div class="tooltip-text-item">
-            <Information size={16} /> {reason}
-          </div>
-        {/each}
-      </div>
-    {/if}
-  {/each}
-</section>
-
-<style>
-  .programs-container {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    margin-bottom: 1.5rem;
-  }
-
-  .programs-container header {
-    display: contents;
-    font-weight: bold;
-  }
-
-  .programs-container header .column {
-    padding: 0.5rem 8px;
-  }
-
-  .programs-container .column {
-    border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
-    padding: 1rem 8px;
-  }
-
-  .programs-container :global(.status-column) {
-    flex-grow: 0;
-  }
-
-  :not(.header) .program.column {
-    display: flex;
-    align-items: center;
-  }
-
-  :not(.header) .status.column {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 12px;
-  }
-
-  .status.column :global(.reason-tooltip) {
-    height: 16px;
-  }
-  :not(.header) .status.column.no-tooltip {
-    flex-wrap: nowrap
-  }
-
-  .programs-container :global(.status-icon-pending) {
-    fill: var(--cds-support-04);
-  }
-
-  .programs-container :global(.status-icon-complete) {
-    fill: var(--cds-support-04);
-  }
-
-  .programs-container :global(.status-icon-ineligible) {
-    margin-left: -4px;
-  }
-
-  .icon-and-tooltip {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .icon-and-tooltip.wide-icon {
-    gap: 4px;
-  }
-
-  .tooltip-text-row {
-    grid-column: span 2;
-    background-color: #FBF1DA;
-    padding: 0.5rem 1rem;
-    display: none;
-  }
-
-  .tooltip-text-row.visible {
-    display: block;
-  }
-
-  .tooltip-text-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.125rem 16px;
-    color: var(--cds-text-01);
-  }
-
-  @media print {
-    .tooltip-text-row {
-      display: block !important;
-    }
-  }
-</style>

package/dist/components/ApplicantProgramListTooltip.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import Tooltip from "carbon-components-svelte/src/Tooltip/Tooltip.svelte";
-  import type { ApplicationForDetails } from './types'
-
-  export let application: ApplicationForDetails
-</script>
-
-{#if application.warningReasons.length || application.ineligibleReasons.length}
-  <Tooltip align="end" direction="bottom" triggerText="" class="reason-tooltip">
-    {#if application.ineligibleReasons.length}
-      <p><strong>Ineligible Because:</strong></p>
-      {#each application.ineligibleReasons as reason (reason)}
-        <p>{reason}</p>
-      {/each}
-    {:else if application.warningReasons.length}
-      <p><strong>Warnings:</strong></p>
-      {#each application.warningReasons as reason (reason)}
-        <p>{reason}</p>
-      {/each}
-    {/if}
-  </Tooltip>
-{/if}

package/dist/components/ApplicantPromptPage.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  /**
-   * This page collects prompt data from the applicant. Only one route exists per
-   * prompt, even if the prompt is shared between multiple applications. We should
-   * be able to figure out which application we are in based on the full state of
-   * the app request since the prompt should only be visible in a single spot.
-   */
-
-  import { Form } from '@txstate-mws/carbon-svelte'
-  import type { FormStore } from '@txstate-mws/svelte-forms'
-  import Button from "carbon-components-svelte/src/Button/Button.svelte";
-  import { getContext } from 'svelte'
-  import type { Writable } from 'svelte/store'
-  import { afterNavigate, beforeNavigate, goto, invalidate } from '$app/navigation'
-  import type { ResolvedPathname } from '$app/types'
-  import { api, ButtonLoadingIcon } from '..'
-  import { uiRegistry } from '../../local/index.js'
-  import type { PageData } from '../../routes/requests/[id]/apply/[promptId]/$types.js'
-
-  export let data: PageData
-  $: ({ prompt, appRequestForExport } = data)
-  $: def = uiRegistry.getPrompt(prompt.key)
-  const nextHref = getContext<Writable<{ nextHref: ResolvedPathname, prevHref: ResolvedPathname | undefined }>>('nextHref')
-
-  let store: FormStore | undefined
-  let continueAfterSave = false
-  $: hasPreviousPrompt = $nextHref.prevHref != null
-
-  async function handleBack () {
-    const previousHref = $nextHref.prevHref
-    if (previousHref) {
-      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
-      await goto(previousHref)
-    }
-  }
-
-  async function onSubmit (data: any) {
-    const { success, messages } = await api.updatePrompt(prompt.id, data, false, appRequestForExport.dataVersion)
-    return {
-      success,
-      messages,
-      data
-    }
-  }
-
-  async function onValidate (data: any) {
-    const { messages } = await api.updatePrompt(prompt.id, data, true, appRequestForExport.dataVersion)
-    return messages
-  }
-
-  async function onSaved () {
-    await invalidate('request:apply')
-    if (continueAfterSave && prompt.answered) {
-      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
-      await goto($nextHref.nextHref)
-    } else await store?.setData(appRequestForExport.data[prompt.key] as object)
-  }
-
-  // Remove the form from the DOM when navigating between prompts
-  // to make sure state is reset
-  let hideForm = false
-  beforeNavigate(() => {
-    hideForm = true
-  })
-  afterNavigate(() => {
-    hideForm = false
-  })
-</script>
-
-{#if !hideForm}
-  <div class="prompt-intro flow max-w-screen-md mx-auto pt-10 px-6">
-    <!-- svelte-ignore a11y_autofocus -->
-    <h2 id="prompt-title" tabindex="-1" autofocus class="font-medium text-xl text-center">{prompt.title}</h2>
-    <p class="text-center"> {prompt.description}</p>
-  </div>
-  <Form bind:store hideFallbackMessage submit={onSubmit} validate={onValidate} preload={prompt.preloadData} on:saved={onSaved} let:data>
-    <svelte:component this={def!.formComponent} {data} appRequestId={appRequestForExport.id} appRequestData={appRequestForExport.data} fetched={prompt.fetchedData} configData={prompt.configurationData} gatheredConfigData={prompt.gatheredConfigData} />
-    <svelte:fragment slot="submit" let:submitting>
-      <div class='form-submit flex gap-12 justify-center mt-16'>
-        {#if hasPreviousPrompt}
-          <Button kind="ghost" on:click={handleBack}>Back</Button>
-        {/if}
-        <Button icon={submitting && !continueAfterSave ? ButtonLoadingIcon : null} type="submit" kind="secondary" disabled={submitting} on:click={() => { continueAfterSave = false }}>Save</Button>
-        <Button icon={submitting && !continueAfterSave ? ButtonLoadingIcon : null} type="submit" disabled={submitting} on:click={() => { continueAfterSave = true }}>Continue</Button>
-      </div>
-    </svelte:fragment>
-  </Form>
-{/if}