Merge branch 'jonmbake:master' into Fix_39_Remove_Id_Attributes

.github/workflows/greetings.yml

@@ -1,6 +1,10 @@
 name: Greetings
 
-on: [pull_request, issues]
+on:
+  issues:
+    types: [opened]
+  pull_request_target:
+    types: [opened]
 
 jobs:
   greeting:

README.md

@@ -5,7 +5,7 @@
 
 # React Terminal UI
 
-A [React](https://github.com/facebook/react) terminal component with support for light/dark modes. Styling courtesy of [termynal.js](https://github.com/ines/termynal).
+A [React](https://github.com/facebook/react) terminal component with support for light/dark modes. Styling is courtesy of [termynal.js](https://github.com/ines/termynal).
 
 Check out the **[Demo](https://jonmbake.github.io/react-terminal-ui/demo/)** :heart_eyes:
 
@@ -47,12 +47,15 @@ const TerminalController = (props = {}) => {
 
 | Name                | Description |
 | ------------------- | ------------- |
-| name                | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to _React Terminal UI_ |
-| colorMode           | Terminal color mode-- either Light or Dark. Defaults to Dark. |
+| name                | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to _React Terminal UI_. |
+| colorMode           | Terminal color mode - either Light or Dark. Defaults to Dark. |
 | onInput             | A callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. |
-| startingInputValue  | Starting input value. If this prop changes, any user entered input will be overriden by this value. Defaults to the empty string (""). |
-| prompt              | The prompt character. Defaults to '$' |
+| startingInputValue  | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to the empty string (""). |
+| prompt              | The prompt character. Defaults to '$'. |
 | height              | Height of the terminal. Defaults to 600px. |
+| redBtnCallback      | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked. |
+| yellowBtnCallback   | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked. |
+| greenBtnCallback    | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked. |
 
 ### Development
 

demo/index.tsx

@@ -35,6 +35,18 @@ const TerminalController = (props = {}) => {
     setLineData(ld);
   }
 
+  const redBtnClick = () => {
+    console.log("Clicked the red button.");
+  }
+
+  const yellowBtnClick = () => {
+    console.log("Clicked the yellow button.");
+  }
+
+  const greenBtnClick = () => {
+    console.log("Clicked the green button.");
+  }
+
   const btnClasses = ['btn'];
   if (colorMode === ColorMode.Light) {
     btnClasses.push('btn-dark');
@@ -46,7 +58,14 @@ const TerminalController = (props = {}) => {
       <div className="d-flex flex-row-reverse p-2">
         <button className={ btnClasses.join(' ') } onClick={ toggleColorMode } >Enable { colorMode === ColorMode.Light ? 'Dark' : 'Light' } Mode</button>
       </div>
-      <Terminal name='React Terminal UI' colorMode={ colorMode }  onInput={ onInput }>
+      <Terminal 
+        name='React Terminal UI' 
+        colorMode={ colorMode }  
+        onInput={ onInput } 
+        redBtnCallback={ redBtnClick } 
+        yellowBtnCallback={ yellowBtnClick } 
+        greenBtnCallback={ greenBtnClick }
+      >
         {lineData}
       </Terminal>
     </div>

src/index.tsx

@@ -9,16 +9,19 @@ export enum ColorMode {
 }
 
 export interface Props {
-  name?: string
-  prompt?: string
-  height?: string
-  colorMode?: ColorMode
+  name?: string;
+  prompt?: string;
+  height?: string;
+  colorMode?: ColorMode;
   children?: ReactNode;
-  onInput?: ((input: string) => void) | null | undefined,
-  startingInputValue?: string
+  onInput?: ((input: string) => void) | null | undefined;
+  startingInputValue?: string;
+  redBtnCallback?: () => void;
+  yellowBtnCallback?: () => void;
+  greenBtnCallback?: () => void;
 }
 
-const Terminal = ({name, prompt, height = "600px", colorMode, onInput, children, startingInputValue = ""}: Props) => {
+const Terminal = ({name, prompt, height = "600px", colorMode, onInput, children, startingInputValue = "", redBtnCallback, yellowBtnCallback, greenBtnCallback}: Props) => {
   const [currentLineInput, setCurrentLineInput] = useState('');
   const [cursorPos, setCursorPos] = useState(0);
 
@@ -118,6 +121,11 @@ const Terminal = ({name, prompt, height = "600px", colorMode, onInput, children,
   }
   return (
     <div className={ classes.join(' ') } data-terminal-name={ name }>
+      <div className="react-terminal-window-buttons">
+        <button className={`${yellowBtnCallback ? "clickable": ""} red-btn`} disabled={!redBtnCallback} onClick={ redBtnCallback } />
+        <button className={`${yellowBtnCallback ? "clickable" : ""} yellow-btn`} disabled={!yellowBtnCallback} onClick={ yellowBtnCallback } />
+        <button className={`${greenBtnCallback ? "clickable" : ""} green-btn`} disabled={!greenBtnCallback} onClick={ greenBtnCallback } />
+      </div>
       <div className="react-terminal" style={ { height } }>
         { children }
         { onInput && <div className="react-terminal-line react-terminal-input react-terminal-active-input" data-terminal-prompt={ prompt || '$' } key="terminal-line-prompt" >{ currentLineInput }<span className="cursor" style={{ left: `${cursorPos+1}px` }}></span></div> }

src/style.css

@@ -29,19 +29,36 @@
   color: #1a1e24;
 }
 
-.react-terminal-wrapper:before {
-  content: '';
+.react-terminal-window-buttons {
   position: absolute;
   top: 15px;
   left: 15px;
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.react-terminal-window-buttons button {
   width: 15px;
   height: 15px;
   border-radius: 50%;
-  /* A little hack to display the window buttons in one pseudo element. */
+  border: 0;
+}
+
+.react-terminal-window-buttons button.clickable {
+  cursor: pointer;
+}
+
+.react-terminal-window-buttons button.red-btn {
   background: #d9515d;
-  -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
-          box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
+}
+
+.react-terminal-window-buttons button.yellow-btn {
+  background: #f4c025;
+}
+
+.react-terminal-window-buttons button.green-btn {
+  background: #3ec930;
 }
 
 .react-terminal-wrapper:after {
@@ -52,6 +69,7 @@
   left: 0;
   width: 100%;
   text-align: center;
+  pointer-events: none;
 }
 
 .react-terminal-wrapper.react-terminal-light:after {