@health-portal/ui

Enterprise UI components extracted from Health Portal for reusable form wizards and components.

Installation

npm install @health-portal/ui

Components

Wizard

A multi-step form wizard with validation and loading states.

import { Wizard, FlashMessage } from '@health-portal/ui';
import * as Yup from 'yup';

const steps = [
  {
    title: 'Step 1',
    fields: [
      {
        name: 'email',
        label: 'Email',
        type: 'email',
        required: true,
        validation: Yup.string().email().required(),
      }
    ],
    schema: {
      fields: {
        email: Yup.string().email().required()
      }
    },
    onNext: async (data) => {
      // Handle step completion
      return true;
    }
  }
];

function MyForm() {
  return (
    <Wizard
      steps={steps}
      onSubmit={(data) => console.log(data)}
    />
  );
}

OtpField

OTP input field with automatic focus management.

import { OtpField } from '@health-portal/ui';

<OtpField
  field={{
    name: 'otp',
    label: 'OTP Code',
    type: 'otpInput',
    length: 6,
    required: true
  }}
  register={register}
  setValue={setValue}
  control={control}
/>

FlashMessage

Animated notification messages.

import { FlashMessage } from '@health-portal/ui';

<FlashMessage
  message="Success!"
  type="success"
  onClose={() => setMessage('')}
/>

Usage in Your Project

1. Install the package
2. Import components as needed
3. Ensure you have the required peer dependencies:
   • react >= 18.0.0
   • react-dom >= 18.0.0
   • react-hook-form ^7.0.0
   • react-router-dom ^7.6.2

Development

# Install dependencies
npm install

# Build the package
npm run build

# Start Storybook
npm run storybook