chore: create a demo workspace (#15)

jwcjs · Dec 20, 2022 · 2ee5c2f · 2ee5c2f
1 parent 85c6bf5
commit 2ee5c2f
Show file tree

Hide file tree

Showing 15 changed files with 297 additions and 1 deletion.
diff --git a/demo/LICENSE b/demo/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jwc.js
+
+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.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite + Jwc.js App</title>
+  <link rel="stylesheet" href="./src/index.css">
+  <script type="module" src="./src/index.ts"></script>
+</head>
+<body>
+  <app-element count="2022" ></app-element>
+</body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "vite": "^4.0.1",
+    "jwcjs": "*"
+  }
+}
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite + Jwc.js App</title>
+  <link rel="stylesheet" href="./index.css">
+  <script type="module" src="./index.es.js"></script>
+</head>
+<body>
+  <app-element></app-element>
+</body>
+</html>
diff --git a/demo/public/jwc-dark.svg b/demo/public/jwc-dark.svg
diff --git a/demo/public/jwc.svg b/demo/public/jwc.svg
diff --git a/demo/public/vite.svg b/demo/public/vite.svg
diff --git a/demo/src/App.css b/demo/src/App.css
@@ -0,0 +1,61 @@
+
+:host {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 0.25s;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.jwc:hover {
+  filter: drop-shadow(0 0 2em rgb(0, 0, 0));
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo.jwc:hover {
+    filter: drop-shadow(0 0 2em rgb(255, 255, 255));
+  }
+}
+
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+
+@media (prefers-color-scheme: light) {
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -0,0 +1,76 @@
+import { JwcComponent, Component, Prop, h, Fragment } from "jwcjs";
+import styles from "./App.css?inline";
+
+@Component({
+	name: "app-element",
+	css: styles,
+})
+export class App extends JwcComponent {
+	constructor() {
+		super();
+	}
+
+	@Prop({ default: 0, attr: "count" })
+	public count = 0;
+
+	public onClick = () => {
+		this.count++;
+	};
+
+	// get media
+	public getSystemColorScheme() {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches
+			? "dark"
+			: "light";
+	}
+
+	public override connectedCallback() {
+		super.connectedCallback();
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", () => {
+				this.updateDiff();
+				console.log("change");
+			});
+	}
+
+	public override disconnectedCallback() {
+		super.disconnectedCallback();
+		window
+			.matchMedia("(prefers-color-scheme: dark)")
+			.removeEventListener("change", () => {
+				this.updateDiff();
+			});
+	}
+
+	public override render() {
+		return (
+			<>
+				<div>
+					<a href="https://vitejs.dev" target="_blank">
+						<img src="/vite.svg" class="logo" alt="Vite logo" />
+					</a>
+					<a href="https://github.com/jwcjs/core" target="_blank">
+						<img
+							src={
+								this.getSystemColorScheme() === "dark"
+									? "/jwc-dark.svg"
+									: "/jwc.svg"
+							}
+							class="logo jwc"
+							alt="Jwc logo"
+						/>
+					</a>
+				</div>
+				<div class={"card"}>
+					<button onClick={this.onClick}>
+						count is {String(this.count)}
+					</button>
+				</div>
+				<p class="read-the-docs">
+					Click on the Vite and Jwc logos to learn more
+				</p>
+			</>
+		);
+	}
+}
diff --git a/demo/src/index.css b/demo/src/index.css
@@ -0,0 +1,62 @@
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -0,0 +1 @@
+export * from "./App";
diff --git a/demo/src/vite-env.d.ts b/demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -0,0 +1,2 @@
+import { defineConfig } from "vite";
+export default defineConfig({});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 packages: 
-  - packages/*
+  - packages/*
+  - demo