@starfleet-technology/lcars

v0.0.3

Published

4 months ago

Star Trek LCARS (Library Computer Access/Retrieval System) UI components built with Stencil for universal web framework compatibility

Downloads

0High
0Medium
0Low

starfleet-services

lcars star-trek web-components stencil starfleet-technology ui-components custom-elements

LCARS Web Components

Authentic Star Trek LCARS (Library Computer Access/Retrieval System) UI components built with Stencil for universal web framework compatibility - Part of the Starfleet Technology LCARS Design System

🚀 Installation

npm/yarn/pnpm

# npm
npm install @starfleet-technology/lcars

# yarn
yarn add @starfleet-technology/lcars

# pnpm
pnpm add @starfleet-technology/lcars

CDN

<!-- Latest version -->
<script type="module" src="https://unpkg.com/@starfleet-technology/lcars/dist/lcars/lcars.esm.js"></script>

<!-- Specific version -->
<script type="module" src="https://unpkg.com/@starfleet-technology/[email protected]/dist/lcars/lcars.esm.js"></script>

📚 Documentation

Complete Documentation - Full documentation site
API Reference - Component API documentation
Tutorials - Step-by-step guides
Stencil Guide - Stencil-specific documentation

🎯 Usage

Basic Usage

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/@starfleet-technology/lcars/dist/lcars/lcars.esm.js"></script>
</head>
<body>
  <!-- Use LCARS components directly in HTML -->
  <lcars-button color="primary">Engage</lcars-button>
</body>
</html>

Framework Integration

React

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

export function App() {
  return (
    <div>
      <LcarsButton color="primary" onClick={() => console.log('Engage!')}>
        Engage
      </LcarsButton>
    </div>
  );
}

Vue

<template>
  <div>
    <lcars-button color="primary" @click="handleClick">
      Engage
    </lcars-button>
  </div>
</template>

<script setup>
import { LcarsButton } from '@starfleet-technology/lcars/vue';

const handleClick = () => {
  console.log('Engage!');
};
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { defineCustomElements } from '@starfleet-technology/lcars/loader';

// Define custom elements for Angular
defineCustomElements();

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ... other module configuration
})
export class AppModule { }

<!-- app.component.html -->
<lcars-button color="primary" (click)="handleClick()">
  Engage
</lcars-button>

🧩 Components

Interactive Components

LcarsButton - Distinctive LCARS-style buttons with various colors and sizes

Layout Components

(Coming Soon)

LcarsPanel - Geometric panel containers with LCARS styling
LcarsGrid - LCARS-themed grid layout system
LcarsFrame - Outer frame containers with authentic border styling

Display Components

(Coming Soon)

LcarsDisplay - Data readout displays with scrolling text
LcarsIndicator - Status lights and indicators
LcarsProgressBar - Progress indicators with LCARS styling

Navigation Components

(Coming Soon)

LcarsTab - Tab navigation with LCARS design
LcarsMenu - Menu systems matching LCARS interfaces

🎨 LCARS Design System

This package implements the authentic Library Computer Access/Retrieval System (LCARS) design language from Star Trek: The Next Generation and beyond.

Design Principles

Functionality First: Clean, efficient interfaces that prioritize usability
Distinctive Typography: Custom fonts and text treatments
Color Coding: Consistent color usage for status and categorization
Geometric Shapes: Angular elements and distinctive button styles
Audio Feedback: Optional sound effects for enhanced immersion

Theming

/* Custom CSS properties for theming */
:root {
  --lcars-primary-color: #ff9900;
  --lcars-secondary-color: #9999ff;
  --lcars-background-color: #000000;
  --lcars-text-color: #ffcc99;
}

📖 API Reference

LcarsButton

The primary interactive component for LCARS interfaces.

interface LcarsButtonProps {
  /**
   * 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;
}

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | color | string | 'default' | Button color variant (default, primary, secondary, alert, warning) | | size | string | 'medium' | Button size (small, medium, large) | | disabled | boolean | false | Whether the button is disabled |

Usage

<!-- Basic button -->
<lcars-button>Default Button</lcars-button>

<!-- Primary button -->
<lcars-button color="primary">Engage</lcars-button>

<!-- Alert button -->
<lcars-button color="alert">Red Alert</lcars-button>

<!-- Large disabled button -->
<lcars-button size="large" disabled>Offline</lcars-button>

For complete API documentation, see the API Reference.

🛠️ Development

Prerequisites

Node.js 18+
pnpm 8+

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

# Run all tests
pnpm test

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

# Run with coverage
pnpm test:coverage

Building

# Build this package
pnpm build --filter="@starfleet-technology/lcars"

# Build with analysis
pnpm build:analyze

🤝 Contributing

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

Quick Start

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Make your changes
Add tests for new functionality
Ensure all tests pass (pnpm test)
Commit your changes (git commit -m 'Add amazing feature')
Push to your branch (git push origin feature/amazing-feature)
Open a Pull Request

🐛 Issues & Support

Bug Reports: GitHub Issues
Feature Requests: GitHub Discussions
Documentation: Complete Documentation

📦 Related Packages

@starfleet-technology/lcars-react - React bindings
@starfleet-technology/lcars-vue - Vue bindings

🌟 Demo Applications

HTML Demo - Vanilla HTML/JavaScript implementation
React Demo - React application showcase
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 compatibility and performance
Thanks to all contributors who help maintain this project

Live long and prosper 🖖

Created with ❤️ by the Starfleet Technology team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

LCARS Web Components

🚀 Installation

npm/yarn/pnpm

CDN

📚 Documentation

🎯 Usage

Basic Usage

Framework Integration

React

Vue

Angular

🧩 Components

Interactive Components

Layout Components

Display Components

Navigation Components

🎨 LCARS Design System

Design Principles

Theming

📖 API Reference

LcarsButton

Properties

Usage

🛠️ Development

Prerequisites

Setup

Testing

Building

🤝 Contributing

Quick Start

🐛 Issues & Support

📦 Related Packages

🌟 Demo Applications

📄 License

🖖 Acknowledgments