osvalda
diff --git a/‎.github/workflows/node.js.yml‎
Lines changed: 17 additions & 0 deletions b/‎.github/workflows/node.js.yml‎
Lines changed: 17 additions & 0 deletions
diff --git a/‎demo/index.html‎
Lines changed: 42 additions & 0 deletions b/‎demo/index.html‎
Lines changed: 42 additions & 0 deletions
diff --git a/‎demo/index.jsx‎
Lines changed: 44 additions & 0 deletions b/‎demo/index.jsx‎
Lines changed: 44 additions & 0 deletions
@@ -25,6 +25,12 @@ jobs:
 
     - run: npm ci
     - run: npm run build
+    - run: npm run demo
+    - name: Upload demo files as artifact
+      id: deployment
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: demo/
 
   test:
     needs: build
@@ -72,3 +78,14 @@ jobs:
       run: |
         echo "Coverage is below 50%!"
         exit 1
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy Demo to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Smart Time Input</title>
+	<style>
+		body {
+			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+			text-align: center;
+		}
+
+		.input {
+			background-color: rgba(255, 255, 255, 0.85);
+			height: 32px;
+			padding: 1px;
+			padding-left: 10px;
+			padding-right: 10px;
+			text-align: center;
+			color: #211f26;
+			border: 0 solid #e5e7eb;
+			border-radius: max(calc(4px * 1 * 0.75), 0px);
+			box-shadow: inset 0 0 0 1px #10003332;
+			font-size: 14px;
+			letter-spacing: -0px;
+			line-height: 21px;
+			width: 50px;
+			margin-bottom: 10px;
+		}
+
+		.input:focus {
+			outline: none;
+			box-shadow: 0 0 0 2px #cf91d8;
+		}
+	</style>
+
+</head>
+<body>
+	<h1>Smart Time Input</h1>
+	<div id="myApp"></div>
+	<script src="demo.js" type="text/javascript"></script>
+</body>
+</html>
@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+// import { SmartTimeInput } from './../src/smart-time-input.tsx'
+import { SmartTimeInput } from './../dist/smart-time-input.js'
+
+const InputWrapper = (props) => {
+    console.log("hello: " + props.helpText);
+    // const onTimeChangeHandler = (val) => {
+    //     if (val.length === 5) {
+    //     }
+    // }
+
+    return (
+        <SmartTimeInput
+            initTime={props.init}
+            placeholder={props.helpText}
+            className='input'
+        // onTimeChange={onTimeChangeHandler}
+        />
+    );
+
+}
+
+function App() {
+    return (
+        <div>
+            <InputWrapper init="12:34"/>
+            <InputWrapper helpText="HH:mm"/>
+            <InputWrapper />
+        </div>
+    );
+}
+
+const rootElement = document.getElementById('myApp');
+const root = createRoot(rootElement);
+
+root.render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+);