feat: setup lit + tailwind project

work on #9
bsorrentino · Jul 12, 2024 · 4ddc639 · 4ddc639
1 parent d57e917
commit 4ddc639
Show file tree

Hide file tree

Showing 12 changed files with 2,741 additions and 0 deletions.
diff --git a/jetty/src/main/js/.gitignore b/jetty/src/main/js/.gitignore
@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+bun.lockb
+.parcel-cache/7f973df67467291d-AssetGraph-0
+.parcel-cache/6054c31dbe703fb9-BundleGraph-0
+.parcel-cache/a8a28560cabca33b-AssetGraph-0
+.parcel-cache/data.mdb
+.parcel-cache/lock.mdb
+.parcel-cache/requestGraph-8b272c8491111040-0
+.parcel-cache/requestGraph-nodes-0-8b272c8491111040-0
+.parcel-cache/snapshot-8b272c8491111040.txt
diff --git a/jetty/src/main/js/.postcssrc b/jetty/src/main/js/.postcssrc
@@ -0,0 +1,5 @@
+{
+  plugins: {
+    tailwindcss: {}
+  }
+}
diff --git a/jetty/src/main/js/index.html b/jetty/src/main/js/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit App</title>
+    <script type="module" src="/src/my-element.js"></script>
+    <script type="module" src="/src/my-input.js"></script>
+  </head>
+  <body>
+    <my-element >
+      <p slot="left">PANEL1</p>
+      <p slot="right">PANEL2</p>
+      <div slot="bottom"><my-input></my-input></div>
+    </my-element>
+  </body>
+</html>
diff --git a/jetty/src/main/js/package.json b/jetty/src/main/js/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "lit-vite",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "autoprefixer": "^10.4.2",
+    "daisyui": "^4.12.2",
+    "parcel": "^2.12.0",
+    "postcss": "^8.4.7",
+    "tailwindcss": "^3.0.23",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/jetty/src/main/js/src/app.css b/jetty/src/main/js/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/jetty/src/main/js/src/favicon.svg b/jetty/src/main/js/src/favicon.svg
diff --git a/jetty/src/main/js/src/my-element.js b/jetty/src/main/js/src/my-element.js
@@ -0,0 +1,44 @@
+import './app.css';
+
+import { html, css, LitElement } from 'lit';
+
+export class MyElement extends LitElement {
+
+  static styles = css`
+    .item-a {
+      grid-area: left;
+      background-color: red;
+    }
+    .item-b {
+      grid-area: right;
+      background-color: blue;
+    }
+    .item-c {
+      grid-area: bottom;
+      //background-color: yellow;
+    }
+    .container {
+      height: 100vh;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-rows: 25% 25%  25%  25% ;
+
+      grid-template-areas: 
+        "left left right right"
+        "left left right right"
+        "left left right right"
+        "bottom bottom right right";
+    }
+  `;
+  render() {
+    return html`
+<div class="container">
+  <div class="item-a" id="panel1"><slot name="left">LEFT</slot></div>
+  <div class="item-b" id="panel3"><slot name="right">RIGHT</slot></div>
+  <div class="item-c border border-gray-200" id="panel2"><slot name="bottom">BOTTOM</slot></div>
+</div>
+    `;
+  }
+}
+
+window.customElements.define('my-element', MyElement);
diff --git a/jetty/src/main/js/src/my-input.js b/jetty/src/main/js/src/my-input.js
@@ -0,0 +1,32 @@
+import TWStyles from './twlit';
+
+import { html, css, LitElement } from 'lit';
+
+
+export class MyInputElement extends LitElement {
+
+  static styles = [  TWStyles, css`
+    .container {
+      display: flex;
+      flex-direction: row;
+    }
+    `]
+  // createRenderRoot() {
+  //   return this; // turn off shadow dom to access external styles. Now this element can use DaisyUI
+  // }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  render() {
+    return html`
+        <div class="container">
+          <input type="text" placeholder="Type here is" class="input w-full max-w-xs" />
+          <button class="btn">Button</button>
+        </div>
+    `;
+  }
+}
+
+window.customElements.define('my-input', MyInputElement);