Harmony SDK Discovery Skill

Purpose

Learn what components and features are available in your installed Harmony packages without requiring GitHub repository access.

Quick Discovery: List All Components

Method 1: Component Directory Inspection (Fastest)

# List all available Harmony components
ls -1 node_modules/@uhg-harmony/react/component/

# Count total components
ls -1 node_modules/@uhg-harmony/react/component/ | wc -l

Method 2: Package Exports Inspection

# View main exports from package.json
cat node_modules/@uhg-harmony/react/package.json | grep -A 50 '"exports"'

# List all JavaScript exports
ls -1 node_modules/@uhg-harmony/react/component/*/index.js

Method 3: TypeScript Definitions

# View TypeScript type definitions
cat node_modules/@uhg-harmony/react/index.d.ts

# Search for specific component types
grep -r "export.*Props" node_modules/@uhg-harmony/react/component/Button/

Component Categories

Based on installed Harmony React v1.2.2, here are all available components:

Actions

• Button - Standard interactive button with multiple variants
• DropdownButton - Button with expandable dropdown menu
• IconButton - Icon-only button for compact interfaces
• SplitButton - Button with split primary/dropdown action
• GroupButton - Grouped button set for related actions

Containers

• Accordion - Collapsible content sections
• Card - Content card with optional header/footer
• DetailPane - Detailed information panel
• Modal - Overlay dialog for focused tasks
• Panel - General content container
• TabbedPanel - Multi-tab content interface

Feedback & Indicators

• Badge - Status indicator badge
• Chip - Selectable/dismissible tag component
• Count - Numerical count display
• InlineNotification - Inline feedback messages
• BannerNotification - Page-level notification banner
• Toast - Temporary notification popup
• LoadingIndicator - Loading state spinner
• ProgressIndicator - Progress bar with percentage
• StepTracker - Multi-step workflow indicator
• StoplightTag - Status indicator (red/yellow/green)

Inputs & Forms

• Checkbox - Boolean selection input
• DatePicker - Single date selection
• DateRangePicker - Date range selection
• Dropdown - Single/multi-select dropdown
• DropdownMenu - Contextual dropdown menu
• Fieldset - Form field grouping
• FormControl - Form field wrapper with validation
• RadioButton - Single choice from group
• SearchField - Search input with icon
• Select - Native HTML select
• TextArea - Multi-line text input
• TextInput - Single-line text input
• TimePicker - Time selection input
• ToggleSwitch - On/off toggle control

Navigation

• Breadcrumb - Hierarchical navigation trail
• Header - Page header with navigation
• Link - Navigational link element
• Masthead - Top-level application header
• Navigation - Navigation menu component
• Pagination - Data pagination controls

Layout & Typography

• Harmony - Root wrapper component
• Heading - Semantic heading component (h1-h6)
• Text - Body text with styling variants
• ThemeProvider - Theme configuration wrapper

Data Display

• Avatar - User/entity avatar display
• ReadOnlyFieldValueList - Display form values in read-only mode
• Table - Data table with sorting/filtering

Utility & Helpers

• Error - Error boundary component
• Footer - Page footer component
• HelperText - Form field helper text
• Label - Form field label
• Toolkit - Utility toolkit
• Tooltip - Contextual tooltip overlay
• ViewManager - View state management

Component Discovery Script

Use the provided discovery script to inspect your Harmony installation:

# Run the discovery script
./scripts/discovery-script.sh

echo "=== Harmony Component Discovery ==="
echo ""

echo "Installed Harmony Version:"
npm list @uhg-harmony/react --depth=0
echo ""

echo "Available Components ($(ls -1 node_modules/@uhg-harmony/react/component/ | wc -l)):"
ls -1 node_modules/@uhg-harmony/react/component/
echo ""

echo "Component Categories:"
echo "- Actions: Button, DropdownButton, IconButton, SplitButton"
echo "- Containers: Accordion, Card, Modal, Panel, TabbedPanel"
echo "- Forms: Checkbox, DatePicker, Dropdown, TextInput, etc."
echo "- Navigation: Breadcrumb, Header, Link, Navigation"
echo "- Indicators: Badge, Chip, Count, LoadingIndicator, ProgressIndicator"
echo ""

echo "For detailed component documentation:"
echo "- Storybook: https://storybook-harmony.ofp-elr.optum.com/"
echo "- Local: Check harmony.instructions.md"

Make executable: chmod +x scripts/discover-harmony.sh

Explore Component Props

TypeScript IntelliSense Method

import { Button } from '@uhg-harmony/react';

// Hover over component in VS Code to see available props
<Button
  variant="primary"    // Auto-complete will show: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'ghost'
  size="m"             // Auto-complete will show: 's' | 'm' | 'l'
  disabled={false}
  onPress={() => {}}
>
  Click me
</Button>

Props Interface Discovery

// Import props type
import type { ButtonProps } from '@uhg-harmony/react';

// View all available props
const exampleProps: ButtonProps = {
  variant: 'primary',
  size: 'm',
  disabled: false,
  onPress: () => {},
  className: '',
  children: 'Label'
};

Check for New Components After Updates

After upgrading Harmony packages, run:

# Before upgrade - save current components list
ls -1 node_modules/@uhg-harmony/react/component/ > /tmp/harmony-before.txt

# After upgrade
npm install @uhg-harmony/[email protected]

# Compare to see new components
ls -1 node_modules/@uhg-harmony/react/component/ > /tmp/harmony-after.txt
diff /tmp/harmony-before.txt /tmp/harmony-after.txt

Template Files

See the skill directory for:

• template/component-list.md - Full categorized component list
• template/component-examples.tsx - Import and usage examples
• scripts/discovery-script.sh - Automated discovery script

Component Usage Examples

Basic Import Pattern

import { 
  Button, 
  TextInput, 
  FormControl, 
  Label, 
  Panel 
} from '@uhg-harmony/react';

Discover Available Variants

// Most components support these common props:
interface CommonProps {
  className?: string;     // Custom CSS class
  disabled?: boolean;     // Disabled state
  id?: string;            // HTML id attribute
}

// Specific component variants
Button: variant = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'ghost'
Badge: variant = 'neutral' | 'positive' | 'warning' | 'negative' | 'info' | 'info-alt-light' | 'info-alt-dark'
Heading: level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
Text: size = 'xs' | 's' | 'm' | 'l' | 'xl'

Icons Discovery

List Available Icons

# List all icon exports
ls -1 node_modules/@uhg-harmony/icons-react/*.js | wc -l

# View icon names
cat node_modules/@uhg-harmony/icons-react/package.json | grep -A 200 '"exports"'

Common Icons

import { 
  CloseIcon,
  SearchIcon,
  ChevronRightIcon,
  ChevronLeftIcon,
  ChevronUpIcon,
  ChevronDownIcon,
  InfoOutlineIcon,
  CheckCircleIcon,
  ErrorIcon,
  WarningIcon
} from '@uhg-harmony/icons-react';

Design Tokens Discovery

Foundations Package Inspection

# List available design tokens
ls -1 node_modules/@uhg-harmony/foundations/

# View theme exports
cat node_modules/@uhg-harmony/foundations/package.json | grep -A 50 '"exports"'

Token Categories

import { useTheme } from 'styled-components';

function DiscoverTokens() {
  const theme = useTheme();
  
  // Log all Harmony tokens
  const harmonyTokens = Object.keys(theme).filter(key => 
    key.startsWith('Harmony')
  );
  
  console.log('Available Tokens:', harmonyTokens);
  
  // Common token patterns:
  // - HarmonySemanticColor*
  // - HarmonySemanticSpacing*
  // - HarmonySemanticFontSize*
  // - HarmonySemanticBorderRadius*
}

Version-Specific Components

Some components may only be available in certain versions:

# Check when a component was added
npm view @uhg-harmony/react versions
npm view @uhg-harmony/[email protected] # Check older version
npm view @uhg-harmony/[email protected] # Check current version

# Compare package contents between versions
npm pack @uhg-harmony/[email protected]
npm pack @uhg-harmony/[email protected]
tar -tzf uhg-harmony-react-1.0.0.tgz | grep component/
tar -tzf uhg-harmony-react-1.2.2.tgz | grep component/

Learning Resources

Official Documentation

• Storybook: https://storybook-harmony.ofp-elr.optum.com/

  • Live component demos
  • Interactive prop controls
  • Copy-paste code examples

• Design Guidelines: https://optum.zeroheight.com/styleguide/s/125389

  • UX patterns and best practices
  • Design principles
  • Component usage guidelines

• Teams Support: Harmony Channel

  • Ask questions
  • Share feedback
  • Report issues

Local Documentation

# In this repository
../instructions/harmony.instructions.md
../instructions/harmony-components.instructions.md
../instructions/harmony-foundation.instructions.md

Discovery Checklist

When exploring Harmony capabilities:

• List all components: ls -1 node_modules/@uhg-harmony/react/component/
• Check installed version: npm list @uhg-harmony/react
• Review component categories in this document
• Test TypeScript IntelliSense in VS Code
• Browse Storybook for visual examples
• Check design guidelines for UX patterns
• Review template examples in template/ folder
• Try discovery script: ./scripts/discovery-script.sh

Troubleshooting Discovery Issues

Issue: Can't find component directory

# Verify package is installed
npm list @uhg-harmony/react

# Reinstall if needed
npm install @uhg-harmony/react

Issue: TypeScript definitions not working

# Check for type definitions
ls node_modules/@uhg-harmony/react/*.d.ts

# Restart TypeScript server in VS Code
# Command Palette > TypeScript: Restart TS Server

Issue: Want to see component source code

# View compiled component code
cat node_modules/@uhg-harmony/react/component/Button/index.js

# Note: Source code requires GitHub access
# For source: https://github.com/OptumInsight-Platform/harmony