commontoolsinc · seefeldb · Jun 18, 2024 · Jun 18, 2024
diff --git a/typescript/packages/lookslike-high-level/index.html b/typescript/packages/lookslike-high-level/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title></title>
+    <link rel="stylesheet" href="src/main.css">
+    <script type="module" src="src/main.ts"></script>
+</head>
+<body class="theme">
+    <com-app></com-app>
+</body>
+</html>
diff --git a/typescript/packages/lookslike-high-level/package.json b/typescript/packages/lookslike-high-level/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@commontools/lookslike-high-level",
+  "author": "The Common Authors",
+  "version": "0.0.1",
+  "description": "High level UI experiments.",
+  "license": "UNLICENSED",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "wireit",
+    "clean": "wireit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/commontoolsinc/labs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/commontoolsinc/labs/issues"
+  },
+  "homepage": "https://github.com/commontoolsinc/labs#readme",
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "wireit": "^0.14.4"
+  },
+  "wireit": {
+    "build": {
+      "dependencies": [
+        "../common-ui:build"
+      ],
+      "command": "vite build"
+    },
+    "clean": {
+      "command": "rm -rf ./lib ./dist ./.wireit ./node_modules"
+    }
+  },
+  "dependencies": {
+    "@commontools/common-ui": "^0.0.1",
+    "@commontools/common-frp": "^0.0.1"
+  }
+}
diff --git a/typescript/packages/lookslike-high-level/src/index.ts b/typescript/packages/lookslike-high-level/src/index.ts
@@ -0,0 +1,21 @@
+// @ts-ignore
+import { read } from 'common:io/state@0.0.1';
+
+export class Body {
+  run() {
+    console.log('Running!');
+
+    const foo = read('foo');
+
+    console.log('Reference:', foo);
+
+    const value = foo?.deref();
+
+    console.log('Value:', value);
+  }
+}
+
+export const create = () => {
+  console.log('Creating!');
+  // return new Body();
+};
diff --git a/typescript/packages/lookslike-high-level/src/main.ts b/typescript/packages/lookslike-high-level/src/main.ts
@@ -0,0 +1,81 @@
+import { view, tags, render } from "@commontools/common-ui";
+const { dict, datatable, vstack, hstack, checkbox, div } = tags;
+
+const datatableNode = datatable({
+  cols: [
+    "title",
+    "day",
+    "time",
+    "location",
+    "address",
+    "description",
+    "level",
+    "price",
+    "email",
+    "reservation",
+  ],
+  rows: [
+    {
+      title: "Power Yoga",
+      day: "Monday",
+      time: "8:00am",
+      location: "Studio 1 & 2 (combined)",
+      description:
+        "Stretch and relax with yoga practice at the studio. All levels welcome. Bring your own mat. Namaste. 🧘‍♂️",
+      level: "Beginner to Advanced",
+      price: "$10",
+      address: "1234 Elm St, Springfield, IL 62701",
+      email: "yogazon124@example.com",
+      reservation: "https://example.com/reserve/power-yoga",
+    },
+    {
+      title: "Pilates",
+      day: "Wednesday",
+      time: "8:00am",
+      location: "Studio",
+      description: "Strengthen and tone",
+      level: "Intermediate",
+      price: "$15",
+      address: "1234 Elm St, Springfield, IL 62701",
+      email: "pilates14asdf@example.com",
+      reservation: "https://example.com/reserve/pilates",
+    },
+    {
+      title: "Zumba",
+      day: "Friday",
+      time: "8:00am",
+      location: "Studio",
+      description: "Dance and have fun",
+      level: "Advanced",
+      price: "$20",
+      address: "1234 Elm St, Springfield, IL 62701",
+      email: "zumba@example.com",
+      reservation: "https://example.com/reserve/zumba",
+    },
+  ],
+});
+
+const dictNode = dict({
+  records: {
+    one: "1",
+    two: "2",
+    three: "3",
+  },
+});
+
+const todoItems = [
+  { title: "Buy groceries", done: false },
+  { title: "Walk the dog", done: true },
+  { title: "Wash the car", done: false },
+];
+
+const todos = vstack(
+  {},
+  ...todoItems.map((item) => hstack({}, checkbox({}), div({}, item.title)))
+);
+
+const tree = vstack({}, todos, datatableNode, dictNode);
+
+const element = render.render(tree, {});
+
+document.body.appendChild(element);
diff --git a/typescript/packages/lookslike-high-level/tsconfig.json b/typescript/packages/lookslike-high-level/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "moduleResolution": "nodenext",
+  "compilerOptions": {
+    "lib": [
+      "es2022",
+      "esnext.array",
+      "esnext",
+      "dom"
+    ],
+    "outDir": "./",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": []
+}
diff --git a/typescript/packages/lookslike-high-level/vite.config.js b/typescript/packages/lookslike-high-level/vite.config.js
@@ -0,0 +1,15 @@
+// vite.config.js
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    target: "esnext"
+  },
+  resolve: {
+    preserveSymlinks: true
+  },
+  optimizeDeps: {
+    noDiscovery: true
+  }
+});