@empowernow/ui

Enterprise-grade UI components for React applications following the EmpowerNow design system.

🎨 Design System

📖 View Complete Design System Guide →

All components follow the Neon Flux design language with:

• Glass morphism with translucent backgrounds and blur effects
• Pulse cyan (#00E7F6) accent color for interactive elements
• Deep space blue (#0B1C3D) surface backgrounds
• 8px base grid spacing system
• Consistent component heights (32px, 48px, 64px)

Quick Reference

// ✅ Always use design system components
import { GlassCard, HeaderNav } from '@empowernow/ui';

// Standard glass header pattern
<Header className="glass-header" />

// Standard glass card pattern  
<GlassCard>Content</GlassCard>

Important: Always use .glass-header for toolbars and .glass-card for containers to maintain design consistency.

Installation

Monaco Editor Components

EmpowerNowMonacoEditor

The recommended wrapper for all Monaco editor usage. Provides consistent theming, accessibility, and best practices.

import { EmpowerNowMonacoEditor } from '@empowernow/ui';

// Basic usage
<EmpowerNowMonacoEditor
  height="400px"
  language="yaml"
  value={yamlContent}
  onChange={setYamlContent}
  aria-label="Configuration Editor"
/>

// With custom options
<EmpowerNowMonacoEditor
  height="100%"
  language="json"
  value={jsonContent}
  onChange={setJsonContent}
  options={{
    readOnly: true,
    fontSize: 16,
    // ... other Monaco options
  }}
  onMount={(editor, monaco) => {
    // Custom editor setup
  }}
/>

YamlEditor

A specialized YAML editor with schema validation and autocomplete support.

import { YamlEditor } from '@empowernow/ui';

<YamlEditor
  value={yamlContent}
  onChange={setYamlContent}
  height={400}
  schema={{
    uri: "schema://my-schema",
    schema: myJsonSchema
  }}
  suggestions={['{{ params.name }}', '{{ params.value }}']}
  aria-label="YAML Configuration"
/>

JsonEditor

A specialized JSON editor with schema validation.

import { JsonEditor } from '@empowernow/ui';

<JsonEditor
  value={jsonContent}
  onChange={setJsonContent}
  height={400}
  schema={{
    uri: "schema://my-schema",
    schema: myJsonSchema
  }}
  aria-label="JSON Configuration"
/>

Monaco Theme

Using the EmpowerNow Theme

The SDK provides a centralized Monaco theme with accessible colors and consistent branding:

import { EMPOWERNOW_DARK_THEME, EMPOWERNOW_DARK_THEME_NAME } from '@empowernow/ui';

// The theme is automatically applied in EmpowerNowMonacoEditor
// For custom usage:
monaco.editor.defineTheme(EMPOWERNOW_DARK_THEME_NAME, EMPOWERNOW_DARK_THEME);
monaco.editor.setTheme(EMPOWERNOW_DARK_THEME_NAME);

Theme Features

• Accessible Colors: High contrast ratios for WCAG AA/AAA compliance
• Brand Alignment: Uses EmpowerNow brand colors (#00E7F6, #0B1C3D)
• Syntax Highlighting: Comprehensive token color rules for all supported languages
• Consistent Styling: Unified look across all editors

Migration Guide

From Direct Monaco Usage

Before:

import MonacoEditor from '@monaco-editor/react';

<MonacoEditor
  height="400px"
  language="yaml"
  theme="vs-dark"
  value={content}
  onChange={setContent}
/>

After:

import { EmpowerNowMonacoEditor } from '@empowernow/ui';

<EmpowerNowMonacoEditor
  height="400px"
  language="yaml"
  value={content}
  onChange={setContent}
  aria-label="Editor"
/>

From SDK YamlEditor/JsonEditor (v1)

Before:

import { YamlEditor } from '@empowernow/ui';

<YamlEditor
  value={content}
  onChange={setContent}
  theme="vs-dark" // This will now default to empowernow-dark
/>

After:

import { YamlEditor } from '@empowernow/ui';

<YamlEditor
  value={content}
  onChange={setContent}
  // theme defaults to 'empowernow-dark'
  aria-label="YAML Editor" // New accessibility prop
/>

Accessibility

All Monaco editors include:

• ARIA Labels: Use the aria-label prop for screen readers
• Keyboard Navigation: Full keyboard support for editing and navigation
• Focus Management: Proper focus handling in modals and panels
• High Contrast: Accessible color scheme with proper contrast ratios
• Screen Reader Support: Compatible with assistive technologies

Best Practices

1. Always use EmpowerNowMonacoEditor for new Monaco usage
2. Provide meaningful aria-label for accessibility
3. Use the default theme unless you have specific branding requirements
4. Handle loading states with Suspense boundaries
5. Test with keyboard navigation and screen readers

Customization

Overriding Theme Colors

import { EMPOWERNOW_DARK_THEME } from '@empowernow/ui';

const customTheme = {
  ...EMPOWERNOW_DARK_THEME,
  colors: {
    ...EMPOWERNOW_DARK_THEME.colors,
    'editor.background': '#1a1a1a', // Custom background
  }
};

Custom Options

<EmpowerNowMonacoEditor
  options={{
    fontSize: 16,
    fontFamily: 'JetBrains Mono, monospace',
    // ... other Monaco options
  }}
/>

Troubleshooting

Theme Not Applying

• Ensure you're using EmpowerNowMonacoEditor or setting the theme prop to 'empowernow-dark'
• Check that the theme is defined before the editor mounts

Accessibility Issues

• Always provide aria-label for screen readers
• Test with keyboard navigation (Tab, Arrow keys, Ctrl+A, etc.)
• Verify contrast ratios meet WCAG guidelines

Performance Issues

• Use Suspense boundaries around Monaco editors
• Consider lazy loading for editors not immediately visible
• Monitor bundle size when using multiple editors