LCARS React Components

React bindings for Star Trek LCARS UI components - seamless integration of LCARS design system with React applications - Part of the Starfleet Technology LCARS Design System

🚀 Installation

npm/yarn/pnpm

# npm
npm install @starfleet-technology/lcars-react

# yarn
yarn add @starfleet-technology/lcars-react

# pnpm
pnpm add @starfleet-technology/lcars-react

Note: This package requires @starfleet-technology/lcars as a peer dependency.

📚 Documentation

• Complete Documentation - Full documentation site
• API Reference - Component API documentation
• React Integration Guide - React-specific tutorials
• Stencil Guide - Understanding the underlying technology

🎯 Usage

Basic Setup

import React from 'react';
import { LcarsButton } from '@starfleet-technology/lcars-react';

function App() {
  return (
    <div className="App">
      <LcarsButton color="primary">
        Engage
      </LcarsButton>
    </div>
  );
}

export default App;

With TypeScript

import React, { useState } from 'react';
import { LcarsButton } from '@starfleet-technology/lcars-react';
import type { LcarsButtonColor } from '@starfleet-technology/lcars-react';

interface StarfleetControlsProps {
  onEngageClick: () => void;
  alertStatus: 'normal' | 'alert';
}

export const StarfleetControls: React.FC<StarfleetControlsProps> = ({ 
  onEngageClick, 
  alertStatus 
}) => {
  const [systemStatus, setSystemStatus] = useState<'online' | 'offline'>('online');
  const buttonColor: LcarsButtonColor = alertStatus === 'alert' ? 'alert' : 'primary';

  return (
    <div>
      <LcarsButton 
        color={buttonColor}
        disabled={systemStatus === 'offline'}
        onClick={onEngageClick}
      >
        {alertStatus === 'alert' ? 'Red Alert' : 'Engage'}
      </LcarsButton>
      
      <LcarsButton 
        color="secondary"
        onClick={() => setSystemStatus(prev => prev === 'online' ? 'offline' : 'online')}
      >
        {systemStatus === 'online' ? 'Go Offline' : 'Come Online'}
      </LcarsButton>
    </div>
  );
};

Event Handling

import React, { useCallback } from 'react';
import { LcarsButton } from '@starfleet-technology/lcars-react';

export const EventExample: React.FC = () => {
  const handleClick = useCallback((event: React.MouseEvent<HTMLLcarsButtonElement>) => {
    console.log('Button clicked:', event.currentTarget);
    // Full access to native DOM event and element
  }, []);

  const handleEngageSequence = useCallback(async () => {
    console.log('Initiating warp sequence...');
    // Async operations work seamlessly
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('Warp drive engaged!');
  }, []);

  return (
    <div>
      <LcarsButton 
        color="primary"
        onClick={handleClick}
      >
        Tactical Systems
      </LcarsButton>
      
      <LcarsButton 
        color="warning"
        onClick={handleEngageSequence}
      >
        Engage Warp Drive
      </LcarsButton>
    </div>
  );
};

🧩 Components

Interactive Components

• LcarsButton - Distinctive LCARS-style buttons with React event handling

Coming Soon

• LcarsPanel - Layout containers with React children support
• LcarsDisplay - Data displays with React state integration
• LcarsIndicator - Status components with React prop binding

🎨 LCARS Design Integration

CSS Custom Properties

import React from 'react';
import { LcarsButton } from '@starfleet-technology/lcars-react';
import './lcars-theme.css'; // Your custom LCARS theme

const ThemedComponent: React.FC = () => {
  return (
    <div style={{
      '--lcars-primary-color': '#ff6600',
      '--lcars-secondary-color': '#6699ff'
    } as React.CSSProperties}>
      <LcarsButton color="primary">
        Custom Themed Button
      </LcarsButton>
    </div>
  );
};

Responsive Design

import React from 'react';
import { LcarsButton } from '@starfleet-technology/lcars-react';

const ResponsiveControls: React.FC = () => {
  return (
    <div className="controls-container">
      {/* Small screens */}
      <div className="sm:hidden">
        <LcarsButton size="small" color="primary">
          Engage
        </LcarsButton>
      </div>
      
      {/* Large screens */}
      <div className="hidden sm:block">
        <LcarsButton size="large" color="primary">
          Engage Warp Drive
        </LcarsButton>
      </div>
    </div>
  );
};

📖 API Reference

LcarsButton

React wrapper for the LCARS button component with full TypeScript support.

interface LcarsButtonProps extends React.HTMLAttributes<HTMLLcarsButtonElement> {
  /**
   * Color variant for the button
   */
  color?: 'default' | 'primary' | 'secondary' | 'alert' | 'warning';
  
  /**
   * Size of the button
   */
  size?: 'small' | 'medium' | 'large';
  
  /**
   * Whether the button is disabled
   */
  disabled?: boolean;
  
  /**
   * Click event handler
   */
  onClick?: (event: React.MouseEvent<HTMLLcarsButtonElement>) => void;
  
  /**
   * Children elements
   */
  children?: React.ReactNode;
}

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | color | LcarsButtonColor | 'default' | Button color variant | | size | LcarsButtonSize | 'medium' | Button size | | disabled | boolean | false | Whether the button is disabled | | onClick | MouseEventHandler | - | Click event handler | | children | ReactNode | - | Button content |

For complete API documentation, see the API Reference.

🛠️ Development

Prerequisites

• Node.js 18+
• pnpm 8+
• React 18+

Setup

# Clone the monorepo
git clone https://github.com/starfleet-technology/lcars-webcomponents.git
cd lcars-webcomponents

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Start development mode
pnpm dev

Testing with React

# Run all tests
pnpm test

# Run tests for this package only
pnpm test --filter="@starfleet-technology/lcars-react"

# Start React demo
pnpm dev --filter="@starfleet-technology/demo-lcars-react"

Integration Testing

// Example test with React Testing Library
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { LcarsButton } from '@starfleet-technology/lcars-react';

describe('LcarsButton', () => {
  test('handles click events', () => {
    const handleClick = jest.fn();
    
    render(
      <LcarsButton color="primary" onClick={handleClick}>
        Test Button
      </LcarsButton>
    );
    
    const button = screen.getByText('Test Button');
    fireEvent.click(button);
    
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

🚀 Framework Compatibility

React Versions

• React 18+: Full support with Concurrent Features
• React 17: Compatible with legacy mode
• React 16.8+: Hooks support available

Build Tools

• Vite: Optimal performance and development experience
• Create React App: Full compatibility
• Next.js: SSR and SSG support
• Webpack: Custom configurations supported

TypeScript Integration

// Full type safety out of the box
import type { 
  LcarsButtonProps,
  LcarsButtonColor,
  LcarsButtonSize 
} from '@starfleet-technology/lcars-react';

const MyComponent: React.FC<{
  variant: LcarsButtonColor;
  size: LcarsButtonSize;
}> = ({ variant, size }) => {
  return (
    <LcarsButton color={variant} size={size}>
      Typed Button
    </LcarsButton>
  );
};

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

React-Specific Guidelines

1. Follow React best practices and hooks patterns
2. Ensure TypeScript types are accurate and exported
3. Add React Testing Library tests for new components
4. Document React-specific usage patterns
5. Test with multiple React versions when possible

🐛 Issues & Support

• Bug Reports: GitHub Issues
• React-Specific Questions: Tag with react label
• Feature Requests: GitHub Discussions
• Documentation: Complete Documentation

📦 Related Packages

• @starfleet-technology/lcars - Core LCARS web components
• @starfleet-technology/lcars-vue - Vue bindings

🌟 Demo Applications

• React Demo - Complete React application showcase
• HTML Demo - Vanilla HTML/JavaScript implementation
• Vue Demo - Vue application showcase

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🖖 Acknowledgments

• Star Trek and LCARS are trademarks of CBS Studios Inc.
• Inspired by the original LCARS design from Star Trek: The Next Generation
• Built with Stencil for maximum React compatibility
• React bindings generated using Stencil's official React output target
• Thanks to all contributors who help maintain this project

Live long and prosper 🖖

Created with ❤️ by the Starfleet Technology team