feat: input on drugs first version

.github/workflows/main.yml

@@ -0,0 +1,32 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
+      - name: Build
+        run: yarn build

.github/workflows/size.yml

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sarthak Bakre
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,9 @@
+# My Awesome Package
+
+A brief description of your package.
+
+## Installation
+
+```bash
+npm install my-awesome-package
+

example/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

example/components/code_editor_example.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { InputOD } from '../../src';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import { manageNumofLines } from '../utility/utility';
+
+const CodeEditorExample = () => {
+
+  const linesRef = React.useRef<any>(null);
+
+  const styles = {
+    container: {
+      padding: '20px',
+    },
+    input: {
+      fontSize: '16px',
+      color: 'white',
+    },
+    placeholder: {
+      color: '#999',
+    },
+    inputFocus: {
+      outline: 'none',
+      borderColor: '#00bfff',
+      boxShadow: '0 8px 16px rgba(0, 191, 255, 0.4)',
+    },
+  };
+
+  return (
+    <div style={{display: "flex", backgroundColor: "black", alignItems: "center", padding: "15px", gap: "10px"}}>
+      <div style={{color: "white", fontSize: "16px"}} id="lines" ref={linesRef}>
+        <span style={{fontSize: "15px"}}>1</span>
+      </div>
+      <InputOD
+        onChangeOD={text => {
+          var html = Prism.highlight(
+            text,
+            Prism.languages.javascript,
+            'javascript'
+          );
+
+          manageNumofLines(linesRef);
+
+          return html;
+        }}
+        initialText='// Write your JavaScript here'
+        inputStyle={styles.input}
+      />
+    </div>
+  );
+};
+
+export default CodeEditorExample;

example/components/validation_example.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { highlightWords, InputOD } from '../../src';
+import 'prismjs/themes/prism.css';
+
+const ValidationExample = () => {
+
+  const styles = {
+    input: {
+      border: '1px solid #1e90ff',
+      borderRadius: '5px',
+      padding: '5px 15px',
+      fontSize: '16px',
+      color: '#333',
+      backgroundColor: '#f0f8ff',
+      transition: 'all 0.3s ease-in-out',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+    },
+    inputFocus: {
+      outline: 'none',
+      borderColor: '#00bfff',
+      boxShadow: '0 8px 16px rgba(0, 191, 255, 0.4)',
+    },
+  };
+
+  return (
+    <div>
+      <div style={{padding: "10px"}}>
+        Hint: Try typing out an email with "_" or "|" in it.
+      </div>
+      <label style={{fontSize: "10px"}}>Email</label>
+      <InputOD
+        onChangeOD={text => {
+          let html = highlightWords(text, ['_', '|'], {
+            style: 'color: red; font-weight: bold;',
+            onlyHighlightIndependentWord: false,
+          });
+          return html;
+        }}
+        inputStyle={styles.input}
+      />
+    </div>
+  );
+};
+
+export default ValidationExample;
+

example/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

example/index.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import 'prismjs/themes/prism.css';
+import ValidationExample from './components/validation_example';
+import CodeEditorExample from './components/code_editor_example';
+
+// Component A
+const ComponentA = () => (
+  <div style={componentAStyle}>
+    <h2 style={headingAStyle}>Component A</h2>
+    <p style={paragraphAStyle}>
+      This is the beautifully styled content of Component A.
+    </p>
+  </div>
+);
+
+const componentAStyle = {
+  padding: '24px',
+  background: 'linear-gradient(to bottom right, #f3e8ff, #ffe4e6)',
+  borderRadius: '12px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  transition: 'all 0.3s ease-in-out',
+};
+
+const headingAStyle = {
+  fontSize: '24px',
+  fontWeight: 'bold',
+  marginBottom: '12px',
+  color: '#6B21A8',
+};
+
+const paragraphAStyle = {
+  color: '#7E22CE',
+};
+
+// Component B
+const ComponentB = () => (
+  <div style={componentBStyle}>
+    <h2 style={headingBStyle}>Component B</h2>
+    <p style={paragraphBStyle}>
+      This is the elegantly designed content of Component B.
+    </p>
+  </div>
+);
+
+const componentBStyle = {
+  padding: '24px',
+  background: 'linear-gradient(to bottom right, #d1fae5, #a7f3d0)',
+  borderRadius: '12px',
+  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  transition: 'all 0.3s ease-in-out',
+};
+
+const headingBStyle = {
+  fontSize: '24px',
+  fontWeight: 'bold',
+  marginBottom: '12px',
+  color: '#065F46',
+};
+
+const paragraphBStyle = {
+  color: '#10B981',
+};
+
+const buttonStyle = active => ({
+  padding: '10px 20px',
+  borderRadius: '8px',
+  border: active ? 'none' : '1px solid #ccc',
+  backgroundColor: active ? '#ccc' : 'white',
+  cursor: 'pointer',
+  transition: 'transform 0.3s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const buttonHoverStyle = {
+  transform: 'scale(1.05)',
+};
+
+const App = () => {
+  const [activeComponent, setActiveComponent] = React.useState<
+    'A' | 'B' | null
+  >(null);
+
+  return (
+    <div style={cardStyle}>
+      <div style={cardHeaderStyle}>
+        <h2 style={cardTitleStyle}>Input-on-drugs example</h2>
+      </div>
+      <div style={cardContentStyle}>
+        <div style={buttonGroupStyle}>
+          <button
+            onClick={() => setActiveComponent('A')}
+            style={buttonStyle(activeComponent === 'A')}
+            onMouseOver={e => (e.currentTarget.style.transform = 'scale(1.05)')}
+            onMouseOut={e => (e.currentTarget.style.transform = 'scale(1)')}
+          >
+            Code Editor Example
+          </button>
+          <button
+            onClick={() => setActiveComponent('B')}
+            style={buttonStyle(activeComponent === 'B')}
+            onMouseOver={e => (e.currentTarget.style.transform = 'scale(1.05)')}
+            onMouseOut={e => (e.currentTarget.style.transform = 'scale(1)')}
+          >
+            Email Validation Example
+          </button>
+        </div>
+        <div style={{ marginTop: '24px', transition: 'all 0.3s ease-in-out' }}>
+          {activeComponent === 'A' && <CodeEditorExample />}
+          {activeComponent === 'B' && <ValidationExample />}
+          {activeComponent === null && (
+            <p
+              style={{
+                textAlign: 'center',
+                color: '#888',
+                fontStyle: 'italic',
+              }}
+            >
+              Click a button above to load a component.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const cardStyle = {
+  width: '100%',
+  maxWidth: '600px',
+  margin: '0 auto',
+  borderRadius: '12px',
+  boxShadow: '0 6px 10px rgba(0, 0, 0, 0.1)',
+  overflow: 'hidden',
+}
+
+const cardHeaderStyle = {
+  padding: '16px',
+  backgroundColor: '#f0f0f0',
+  // textAlign: 'center',
+}
+
+const cardTitleStyle = {
+  fontSize: '24px',
+  fontWeight: 'bold',
+  margin: 0,
+}
+
+const cardContentStyle = {
+  padding: '24px',
+}
+
+const buttonGroupStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  gap: '16px',
+}
+
+const iconStyle = {
+  marginRight: '8px',
+  fontSize: '16px',
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));