Skip to main content

​
Overview

The Sample UI Library is a comprehensive collection of React components and hooks designed specifically for building workflow screens in the SampleHC platform. Built on top of shadcn/ui, it provides both low-level UI primitives and high-level, domain-specific components for healthcare workflows.

​
Getting Started

All workflow templates come with the Sample UI library pre-configured. To use any component in your screen: 
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Form, RichTextEditor } from "@samplehc/ui/components";
import { useTaskState } from "@samplehc/ui/data";
import { useScreenFunctions } from "@samplehc/ui/contexts";

export default function MyWorkflowScreen() {
  const [data, setData] = useTaskState("formData", {});
  const { handleComplete } = useScreenFunctions();

  return (
    <Card className="p-6">
      <Form 
        elements={[
          { type: "text", key: "patientName", label: "Patient Name" },
          { type: "document", key: "records", label: "Medical Records" }
        ]}
        onSubmit={(results) => {
          setData(results);
          handleComplete({ result: results });
        }}
      />
    </Card>
  );
}

​
Pre-installed Components

The following shadcn/ui components are pre-installed and available in every workflow template:
Older workflows built from the previous templates may not have all components available - please use the shadcn CLI to install any packages you need.

​
Workflow Integration

​
Screen Functions

The useScreenFunctions hook provides essential workflow operations: 
import { useScreenFunctions } from "@samplehc/ui/contexts";

function MyScreen() {
  const { handleComplete, handleCancel, isCompleting, taskId } = useScreenFunctions();

  const onSubmit = async (formData) => {
    await handleComplete({ result: formData });
  };

  return (
    <Button 
      onClick={onSubmit} 
      disabled={isCompleting}
    >
      {isCompleting ? "Processing..." : "Complete Task"}
    </Button>
  );
}

​
Task State Management

As React components are stateless by default, the SampleHC UI library provides a hook to persist data across workflow steps. 
import { useTaskState } from "@samplehc/ui/data";

function MyScreen() {
  // Automatically syncs with backend
  const [patientData, setPatientData] = useTaskState("patient", {
    name: "",
    age: null,
    records: []
  });

  return (
    <Form 
      onSubmit={(data) => setPatientData(data)}
      defaultValues={patientData}
    />
  );
}

​
Data Fetching Hooks

Hooks for API integration and data management:
  • useDocumentUpload() - Upload documents to the platform
  • useDocumentMetadata(documentId) - Fetch document metadata
  • useDocuments(documentIds) - Fetch multiple documents
  • useDocumentExtractionResult(resultId) - Monitor extraction results
  • useTaskState(key, initialValue) - Persistent task state
  • useFullTaskState(taskId) - Complete task state object
  • useTaskSuspendedPayload(taskId) - Suspended task details
  • useCompleteMutation() - Complete workflow tasks
  • useCancelMutation() - Cancel workflow tasks
  • useDocumentSearch() - Search across documents
  • usePayerSearch(query) - Search healthcare payers
  • useDocumentClassificationResult() - Document classification results

​
Utility Hooks

Additional hooks for common patterns:
  • useDebounce(value, delay) - Debounce rapidly changing values
  • useLocalStorage(key, initialValue) - Persist data in browser storage

​
Sample Components

Specialized components built for healthcare workflows:

Form Component

Advanced form builder with document upload, CSV processing, and validation.

Rich Text Editor

Tiptap-based editor with healthcare-specific extensions and citation support.

Payer Search

Searchable combobox for finding healthcare payers with autocomplete.

PDF Viewer

Interactive PDF viewer with annotation and highlighting capabilities.

Document Viewer

Unified viewer for various document types including PDFs and FHIR data.

​
Configuration

The UI library is configured automatically in workflow templates through providers: 
import { Providers } from "@samplehc/ui/contexts";

// This is already set up in your workflow template
function App() {
  return (
    <Providers>
      <YourWorkflowScreens />
    </Providers>
  );
}
This includes React Query for data fetching, backend configuration, and screen function contexts.
⌘I