Introduction

​

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, Card } from "@/components/ui";
import { Form, RichTextEditor } from "@samplehc/ui/components";
import { useTaskState, useScreenFunctions } from "@samplehc/ui/lib";

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:

​

Workflow Integration

​

Screen Functions

The useScreenFunctions hook provides essential workflow operations:

import { useScreenFunctions } from "@samplehc/ui/lib/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/lib";

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:

​

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:

​

Configuration

The UI library is configured automatically in workflow templates through providers:

import { Providers } from "@samplehc/ui/lib";

// 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.