Component Reference Guide - UnlockedLabs/UnlockEdv2 GitHub Wiki

This page serves as a reference for the reusable components in the codebase. Each component is documented with its purpose, available props, and usage examples. This guide will act as a tool for understanding the components in the codebase.

Table of Contents

ClampedText

The ClampedText component is a utility that extends Tailwind's CSS line-clamp-# styling for handling text truncation. It ensures text is truncated to a specified number of lines and displays an ellipsis (...) when the limit is exceeded. When the text is truncated a browser tooltip shows the full content on hover.

Purpose

  • Reusable Logic: Encapsulates the logic for detecting and handling truncated text, saving time and avoiding repetition.

Clamped Text Properties

Property Name Type Default Value Description
as React.ElementType "div" The HTML element or custom component used to wrap the clamped text.
children React.ReactNode N/A The text to be clamped.
lines number 2 The maximum number of lines to display before truncating.
className string "" Additional CSS or Tailwind classes for styling the wrapper element.

Example Usage

Truncating a Long Title

This example demonstrates how to use ClampedText to truncate a long title to 3 lines, using the h3 HTML element.

<ClampedText as="h3" lines={3} className="card-title text-sm">
    The Unexpected Journey of Implementing Tailwind CSS Utilities Like Line Clamping in Web Development to Create Dynamic, Responsive, and Elegant User Interfaces
</ClampedText>

MultiSelectInput

The MultiSelectInput is a reusable form dropdown component built on top of react-select. It supports both single and multi-selection modes in case both modes need to be used on the same page. It allows use with enum values, strings, or preformatted label/value pairs (specifically for facility drop-downs).

Purpose

  • Reusable Form Input: Centralizes select input logic, styling, and validation.
  • Supports Select All & Custom Handling: Optional hook to override selection behavior.
  • Flexible Options: Accepts raw { value, label } objects.

MultiSelectInput Properties

Property Name Type Default Description
name string N/A Name of the form field. Required for react-hook-form.
label string N/A Label displayed above the select box.
control Control<any> N/A The control object from useForm() for react-hook-form.
optionList T[] [] The source list of options — { value, label } objects.
required boolean false Whether this field is required. Adds a default error message.
rules object {} Additional react-hook-form validation rules.
placeholder string 'Select…' Placeholder text for the input.
isMulti boolean false Enables multi-select behavior when true.
formatter (item: T) => string auto formatter Optional formatter for converting enum/values to display labels.
errors FieldErrors<any> undefined The error object from formState.errors. Used to display validation messages.
preformattedOptions boolean false Indicates if optionList is already in { value, label } format.
onChangeOverride (selected, allOptions) => any[] undefined Optional override logic to modify the selected values before form update. E.g., for Select All logic.

Example Usage

Basic MultiSelect for Enum

<SelectInput
  name="program_type"
  label="Program Type"
  control={control}
  optionList={Object.values(ProgramType)}
  isMulti
  required
  errors={errors}
/>

AddButton

The AddButton is a standard action button that is being used throughout the project for consistency. It includes an icon, a label, an onClick event handler, and an optional disable flag.

Purpose

  • Add: Provides consistency for all "Add" actions across the app.

AddButton Properties

Property Name Type Default Description
label string 'Add' The button's text label.
onClick () => void required Click handler triggered when the button is pressed.
disabled boolean false If true, disables the button.

Example Usage

<AddButton
  label="Add Program"
  onClick={() => navigate('/unlocked')}
/>

Create Program Form

  • Purpose: Form for the Add Program Modal
  • Date Removed: 03/20/2025
  • Related Commit/PR: PR #805
⚠️ **GitHub.com Fallback** ⚠️