Terminal UI Library

Terminal UI Library is a React component library inspired by the terminal look and feel, built with Tailwind CSS. It provides a set of components that allow you to create terminal-style UIs in your React applications.

Table of Contents

• Installation
• Getting Started
• Components
  • TerminalWindow
  • TerminalLine
  • TerminalInput
  • TerminalStatusBar
  • CommandHistory
  • TerminalOutput
• Example Usage
• Contributing
• License

Installation

To install the Terminal UI Library, use npm:

npm install react-terminal-ui-lib
yarn add react-terminal-ui-lib

Getting Started

After installing the library, you can start using the components in your React application. Make sure that you have Tailwind CSS set up in your project. If not, you can follow this guide to get started with Tailwind CSS. Components TerminalWindow

A container component that represents the terminal window.

import { TerminalWindow } from 'react-terminal-ui-lib';

<TerminalWindow>
  {/* Other components like TerminalLine, TerminalInput go here */}
</TerminalWindow>

TerminalLine

A component that displays a single line in the terminal, including a prompt and some text.

javascript

import { TerminalLine } from 'react-terminal-ui-lib';

<TerminalLine prompt="$">Hello, World!</TerminalLine>

TerminalInput

A component that allows users to input commands in the terminal. It takes a prompt prop and an onSubmit callback function.

javascript

import { TerminalInput } from 'react-terminal-ui-lib';

<TerminalInput prompt="$" onSubmit={(command) => console.log(command)} />

TerminalStatusBar

A component that represents the status bar at the bottom of the terminal, showing information like the current directory and status.

javascript

import { TerminalStatusBar } from 'react-terminal-ui-lib';

<TerminalStatusBar directory="~/projects/react-terminal-ui-lib" status="Normal Mode" />

CommandHistory

A component that displays a list of previously entered commands and their results.

javascript

import { CommandHistory } from 'react-terminal-ui-lib';

const history = [
  { prompt: '$', command: 'echo Hello', output: 'Hello' },
];

<CommandHistory history={history} />

TerminalOutput

A component that displays the output of the most recent command.

javascript

import { TerminalOutput } from 'react-terminal-ui-lib';

<TerminalOutput output="Command executed successfully." />

Example Usage

Here's an example of how you can put everything together:

javascript

import React, { useState } from 'react';
import {
  TerminalWindow,
  TerminalLine,
  TerminalInput,
  TerminalStatusBar,
  CommandHistory,
  TerminalOutput,
} from 'react-terminal-ui-lib';

function App() {
  const [history, setHistory] = useState([
    { prompt: '$', command: 'echo Welcome to the terminal!', output: 'Welcome to the terminal!' }
  ]);

  const handleCommandSubmit = (command) => {
    const newHistory = [...history, { prompt: '$', command, output: `You typed: ${command}` }];
    setHistory(newHistory);
  };

  return (
    <TerminalWindow>
      <CommandHistory history={history} />
      <TerminalInput prompt="$" onSubmit={handleCommandSubmit} />
      <TerminalOutput output="Type a command and press Enter..." />
      <TerminalStatusBar directory="~/projects/react-terminal-ui-lib" status="Normal Mode" />
    </TerminalWindow>
  );
}

export default App;

Contributing

Contributions are welcome! Please open an issue or submit a pull request if you'd like to help improve the library. License

This project is licensed under the MIT License. See the LICENSE file for more details.

Overview:

• Installation: Explains how to install the library.
• Getting Started: Guides the user to set up the library and Tailwind CSS.
• Components: Lists all available components with usage examples.
• Example Usage: Demonstrates how to use multiple components together in a React app.
• Contributing: Invites users to contribute to the library.
• License: Provides licensing information.

This README.md gives users a comprehensive guide to get started with your terminal-inspired UI library.