@bgoodman/react-console-component - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

dist/main.js

@@ -99,7 +99,29 @@ var $8zHUo$reactjsxruntime = require("react/jsx-runtime");
 
+const $3128428d4dcbefd8$export$f30cb9bc4f736419 = {
+    font: {
+        size: "16px",
+        family: "monospace"
+    },
+    colors: {
+        background: "#FFFFFF",
+        text: "#5F6368"
+    }
+};
+const $3128428d4dcbefd8$export$3e936a8db52a10a0 = {
+    font: {
+        size: "16px",
+        family: "monospace"
+    },
+    colors: {
+        background: "#272822",
+        text: "#F8F8F2"
+    }
+};
+
+
 const $625755155932d0ee$var$StyledContainer = (0, ($parcel$interopDefault($8zHUo$styledcomponents))).div`
-    background-color: #FFFFFF;
-    color: #5F6368;
-    font-size: 16px;
-    font-family: monospace;
+    background-color: ${(props)=>props.theme.colors.background};
+    color: ${(props)=>props.theme.colors.text};
+    font-size: ${(props)=>props.theme.font.size};
+    font-family: ${(props)=>props.theme.font.family};
     border: 1px solid black;
@@ -109,3 +131,3 @@ height: ${(props)=>props.$height};
 `;
-const $625755155932d0ee$export$8d5400d15923e166 = ({ prompt: prompt = "$", autoScroll: autoScroll = true, height: height = "300px", ...props })=>{
+const $625755155932d0ee$export$8d5400d15923e166 = ({ prompt: prompt = "$", autoScroll: autoScroll = true, height: height = "300px", theme: theme = (0, $3128428d4dcbefd8$export$f30cb9bc4f736419), ...props })=>{
     const inputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
@@ -200,22 +222,25 @@ const [input, setInput] = (0, ($parcel$interopDefault($8zHUo$react))).useState("");
     ]);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)($625755155932d0ee$var$StyledContainer, {
-        $height: height,
-        onClick: ()=>{
-            inputRef.current?.focus();
-        },
-        children: [
-            output.map((item, index)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $67c30194ccfc4a00$export$dfd870618bc2daa5), {
-                    value: item.value,
-                    prefix: item.input ? "$" : ""
-                }, index)),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $b2c7564de5ecc2b7$export$5214e7c10cea1350), {
-                ref: inputRef,
-                onInput: handleInput,
-                onKeyUp: handleKeyUp,
-                value: input,
-                readOnly: isLoading,
-                prefix: isLoading ? "..." : "$",
-                onBlur: ()=>setHistoryCursor(0)
-            })
-        ]
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$styledcomponents.ThemeProvider), {
+        theme: theme,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)($625755155932d0ee$var$StyledContainer, {
+            $height: height,
+            onClick: ()=>{
+                inputRef.current?.focus();
+            },
+            children: [
+                output.map((item, index)=>/*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $67c30194ccfc4a00$export$dfd870618bc2daa5), {
+                        value: item.value,
+                        prefix: item.input ? prompt : ""
+                    }, index)),
+                /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $b2c7564de5ecc2b7$export$5214e7c10cea1350), {
+                    ref: inputRef,
+                    onInput: handleInput,
+                    onKeyUp: handleKeyUp,
+                    value: input,
+                    readOnly: isLoading,
+                    prefix: isLoading ? "..." : prompt,
+                    onBlur: ()=>setHistoryCursor(0)
+                })
+            ]
+        })
     });
@@ -222,0 +247,0 @@ };

dist/module.js

@@ -1,4 +0,4 @@
-import {jsxs as $hgUW1$jsxs, jsx as $hgUW1$jsx} from "react/jsx-runtime";
+import {jsx as $hgUW1$jsx, jsxs as $hgUW1$jsxs} from "react/jsx-runtime";
 import $hgUW1$react from "react";
-import $hgUW1$styledcomponents from "styled-components";
+import $hgUW1$styledcomponents, {ThemeProvider as $hgUW1$ThemeProvider} from "styled-components";
 import {AnsiUp as $hgUW1$AnsiUp} from "ansi_up";
@@ -89,7 +89,29 @@
 
+const $e26bb6b1f8e6b6cc$export$f30cb9bc4f736419 = {
+    font: {
+        size: "16px",
+        family: "monospace"
+    },
+    colors: {
+        background: "#FFFFFF",
+        text: "#5F6368"
+    }
+};
+const $e26bb6b1f8e6b6cc$export$3e936a8db52a10a0 = {
+    font: {
+        size: "16px",
+        family: "monospace"
+    },
+    colors: {
+        background: "#272822",
+        text: "#F8F8F2"
+    }
+};
+
+
 const $b0a650cced5f48c6$var$StyledContainer = (0, $hgUW1$styledcomponents).div`
-    background-color: #FFFFFF;
-    color: #5F6368;
-    font-size: 16px;
-    font-family: monospace;
+    background-color: ${(props)=>props.theme.colors.background};
+    color: ${(props)=>props.theme.colors.text};
+    font-size: ${(props)=>props.theme.font.size};
+    font-family: ${(props)=>props.theme.font.family};
     border: 1px solid black;
@@ -99,3 +121,3 @@ height: ${(props)=>props.$height};
 `;
-const $b0a650cced5f48c6$export$8d5400d15923e166 = ({ prompt: prompt = "$", autoScroll: autoScroll = true, height: height = "300px", ...props })=>{
+const $b0a650cced5f48c6$export$8d5400d15923e166 = ({ prompt: prompt = "$", autoScroll: autoScroll = true, height: height = "300px", theme: theme = (0, $e26bb6b1f8e6b6cc$export$f30cb9bc4f736419), ...props })=>{
     const inputRef = (0, $hgUW1$react).useRef(null);
@@ -190,22 +212,25 @@ const [input, setInput] = (0, $hgUW1$react).useState("");
     ]);
-    return /*#__PURE__*/ (0, $hgUW1$jsxs)($b0a650cced5f48c6$var$StyledContainer, {
-        $height: height,
-        onClick: ()=>{
-            inputRef.current?.focus();
-        },
-        children: [
-            output.map((item, index)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $4ff550ffd6747888$export$dfd870618bc2daa5), {
-                    value: item.value,
-                    prefix: item.input ? "$" : ""
-                }, index)),
-            /*#__PURE__*/ (0, $hgUW1$jsx)((0, $94e845090d57bdad$export$5214e7c10cea1350), {
-                ref: inputRef,
-                onInput: handleInput,
-                onKeyUp: handleKeyUp,
-                value: input,
-                readOnly: isLoading,
-                prefix: isLoading ? "..." : "$",
-                onBlur: ()=>setHistoryCursor(0)
-            })
-        ]
+    return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$ThemeProvider), {
+        theme: theme,
+        children: /*#__PURE__*/ (0, $hgUW1$jsxs)($b0a650cced5f48c6$var$StyledContainer, {
+            $height: height,
+            onClick: ()=>{
+                inputRef.current?.focus();
+            },
+            children: [
+                output.map((item, index)=>/*#__PURE__*/ (0, $hgUW1$jsx)((0, $4ff550ffd6747888$export$dfd870618bc2daa5), {
+                        value: item.value,
+                        prefix: item.input ? prompt : ""
+                    }, index)),
+                /*#__PURE__*/ (0, $hgUW1$jsx)((0, $94e845090d57bdad$export$5214e7c10cea1350), {
+                    ref: inputRef,
+                    onInput: handleInput,
+                    onKeyUp: handleKeyUp,
+                    value: input,
+                    readOnly: isLoading,
+                    prefix: isLoading ? "..." : prompt,
+                    onBlur: ()=>setHistoryCursor(0)
+                })
+            ]
+        })
     });
@@ -212,0 +237,0 @@ };

dist/types.d.ts

 import React from "react";
+import { DefaultTheme } from "styled-components";
 interface ConsoleProps {
@@ -8,5 +9,6 @@ prompt?: string;
     height?: string;
+    theme?: DefaultTheme;
 }
-export const Console: ({ prompt, autoScroll, height, ...props }: ConsoleProps) => React.JSX.Element;
+export const Console: ({ prompt, autoScroll, height, theme, ...props }: ConsoleProps) => React.JSX.Element;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@bgoodman/react-console-component",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

README.md

 # React Console Component
 
-![](./docs/react-console.gif)
+A React component that provides a console-like interface for displaying the output of commands and to capture user input.  The component itself does not provide any functionality for executing commands.
 
+![An example using a Bash interpreter](./docs/react-console.gif)
+
+## Installation
+
+```bash
+npm install @bgoodman/react-console-component
+```
+
+## Usage
+
+```jsx
+import { Console } from '@bgoodman/react-console-component'
+
+const App = () => {
+    const onInit = (): Promise<string> => {
+        // do something when the console is initialized.
+        const output = new Date().toString()
+        // return the console output as a promise.
+        return new Promise( resolve => resolve(output) )
+    }
+
+    const evalCmd = (cmd: string): Promise<string> => {
+        // do something with the input command.
+        const result = eval(cmd).toString()
+        // return the result as a promise
+        return Promise.resolve(result)
+    }
+
+    return (
+        <Console
+            onEnter={execCode}
+            onInit={onInit}
+            prompt="$"
+            height="300px"
+            autoScroll
+        />
+    )
+}
+
+```
+
+![an example using javascript eval](./docs/react-console-javascript.gif)
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| onEnter | `(cmd: string) => Promise<string>` | `undefined` | Function to execute when the user presses 'Enter'. |
+| onInit | `() => Promise<string>` | `undefined` | Function to execute when the console is initialized. |
+| prompt | `string` | `"$"` | The prompt string. |
+| height | `string` | `"300px"` | The height of the console. |
+| autoScroll | `boolean` | `true` | If true, the console will automatically scroll to the bottom when new content is added. |
+| theme | `DefaultTheme` | See 'Themes' section. | A custom theme to use for the console.  If not provided, the default light theme will be used. |
+
+## Themes
+
+The console component uses the `styled-components` library to style the console.  You can provide your own theme by passing a `DefaultTheme` object to the `theme` prop.  For example, the default theme is defined as:
+
+```ts
+const lightTheme: DefaultTheme = {
+    font: {
+        size: '16px',
+        family: 'monospace'
+    },
+    colors: {
+        background: '#FFFFFF',
+        text: '#5F6368'
+    },
+}
+```
+
+Additional themes can be defined as needed.  For example, a dark theme could be defined as:
+
+```jsx
+const darkTheme: DefaultTheme = {
+    font: {
+        size: '16px',
+        family: 'monospace'
+    },
+    colors: {
+        background: '#272822',
+        text: '#F8F8F2'
+    },
+}
+```
+
+## Reserved Commands
+
+The console component reserves the following commands:
+
+- `clear` - Clears the console output.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

96

increased by1820%

Worsened metrics

Total package byte prevSize

43312

decreased by-99.01%

Number of package files

8

decreased by-27.27%

Lines of code

454

decreased by-98.59%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes