create-tinyjoin 0.0.5 → 0.0.6

package/templates/client/src/info.css.hbs

@@ -0,0 +1,93 @@
+#info {
+  --info-fg: var(--fg, oklch(85% 0.01 270));
+  --info-fg2: var(--fg2, oklch(60% 0.01 270));
+  --info-bg2: var(--bg2, oklch(25% 0.01 270));
+  --info-border: var(--border, oklch(30% 0.01 270));
+  --info-accent: var(--accent, #7c3aed);
+  --info-icon: #8a8f98;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+#infoTech {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.infoTechIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: block;
+  flex-shrink: 0;
+}
+
+#infoIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--info-icon);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--info-icon);
+  cursor: help;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+#infoIcon:hover {
+  border-color: var(--info-accent);
+  color: var(--info-accent);
+}
+
+#infoIcon:hover #infoTooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+#infoTooltip {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.5rem);
+  background: var(--info-bg2);
+  border: 1px solid var(--info-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 400;
+  width: 20rem;
+  white-space: normal;
+  color: var(--info-fg);
+  line-height: 1.5;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-0.25rem);
+  transition: all 0.2s;
+  pointer-events: none;
+  box-shadow: 0 1px 2px 0 #0007;
+  z-index: 1;
+}
+
+#infoTooltip a {
+  color: var(--info-fg);
+  text-decoration: underline;
+}
+
+#infoTooltip::before {
+  content: '';
+  position: absolute;
+  right: 0.75rem;
+  top: -0.375rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--info-bg2);
+  border-left: 1px solid var(--info-border);
+  border-top: 1px solid var(--info-border);
+  transform: rotate(45deg);
+}

package/templates/client/src/info.ts.hbs

@@ -0,0 +1,42 @@
+import './info.css';
+
+export const createInfo = (): HTMLDivElement => {
+  const container = document.createElement('div');
+  container.id = 'info';
+
+  const tech = document.createElement('div');
+  tech.id = 'infoTech';
+  container.appendChild(tech);
+
+{{#if typescript}}
+  addIcon(tech, '/ts.svg', 'Written in TypeScript');
+{{else}}
+  addIcon(tech, '/js.svg', 'Written in JavaScript');
+{{/if}}
+
+  const infoIcon = document.createElement('div');
+  infoIcon.id = 'infoIcon';
+  infoIcon.textContent = 'i';
+
+  const tooltip = document.createElement('div');
+  tooltip.id = 'infoTooltip';
+  tooltip.textContent = `A simple todo list application demonstrating TinyJoin's relational queries with CRUD operations.`;
+
+  infoIcon.appendChild(tooltip);
+  container.appendChild(infoIcon);
+
+  return container;
+};
+
+const addIcon = (
+  container: HTMLElement,
+  src: string,
+  title: string,
+): HTMLImageElement => {
+  const icon = document.createElement('img');
+  icon.src = src;
+  icon.className = 'infoTechIcon';
+  icon.title = title;
+  container.appendChild(icon);
+  return icon;
+};

package/templates/client/src/input.css.hbs

@@ -0,0 +1,22 @@
+input[type="text"] {
+  padding: 0.5rem 0.75rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  width: 100%;
+  box-sizing: border-box;
+  align-self: center;
+}
+
+input[type="text"]:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+input[type="text"]::placeholder {
+  color: var(--fg2);
+}

package/templates/client/src/input.ts.hbs

@@ -0,0 +1,16 @@
+import './input.css';
+
+export const createInput = (
+  placeholder: string = '',
+  value: string = '',
+  onInput?: (value: string) => void,
+): HTMLInputElement => {
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.placeholder = placeholder;
+  input.value = value;
+  if (onInput) {
+    input.addEventListener('input', () => onInput(input.value));
+  }
+  return input;
+};

package/templates/client/src/loading.css.hbs

@@ -0,0 +1,19 @@
+#loading {
+  animation: spin 1s infinite linear;
+  height: 2rem;
+  margin: 40vh auto;
+  width: 2rem;
+}
+
+#loading::before {
+  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 0 100 100"><path d="M50 10A40 40 0 1 1 10 50" stroke="%237c3aed" fill="none" stroke-width="4" /></svg>');
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/templates/client/src/loading.ts.hbs

@@ -0,0 +1,12 @@
+import './loading.css';
+
+export const showLoading = (container: HTMLElement): HTMLElement => {
+  const loadingDiv = document.createElement('div');
+  loadingDiv.id = 'loading';
+  container.appendChild(loadingDiv);
+  return loadingDiv;
+};
+
+export const hideLoading = (loadingDiv: HTMLElement): void => {
+  loadingDiv.remove();
+};

package/templates/client/src/title.css.hbs

@@ -0,0 +1,16 @@
+#topBarLogo {
+  height: 2rem;
+  width: 2rem;
+  flex-shrink: 0;
+}
+
+#topBarTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: inherit;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 0;
+}

package/templates/client/src/title.ts.hbs

@@ -0,0 +1,16 @@
+import './title.css';
+
+export const createTitle = (): HTMLHeadingElement => {
+  const title = document.createElement('h1');
+  title.id = 'topBarTitle';
+
+  const logo = document.createElement('img');
+  logo.src = '/favicon.svg';
+  logo.id = 'topBarLogo';
+  logo.alt = 'TinyJoin';
+  title.appendChild(logo);
+
+  title.append(`TinyJoin Todos`);
+
+  return title;
+};

package/templates/client/src/todoInput.css.hbs

@@ -0,0 +1,9 @@
+#todoInput {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+#todoInput input {
+  flex: 1;
+}

package/templates/client/src/todoInput.ts.hbs

@@ -0,0 +1,36 @@
+import './todoInput.css';
+import {type TodosDatabase} from './database';
+import {createButton} from './button';
+import {createInput} from './input';
+
+export const createTodoInput = (database: TodosDatabase): HTMLFormElement => {
+  const container = document.createElement('form');
+  container.id = 'todoInput';
+
+  const input = createInput('What needs to be done?');
+
+  const addTodo = () => {
+    const text = input.value.trim();
+    if (text) {
+      void database.query(
+        `INSERT INTO todos (id, text, completed, created)
+         VALUES ($1, $2, $3, $4)`,
+        [crypto.randomUUID(), text, false, Date.now()],
+      );
+      input.value = '';
+      input.focus();
+    }
+  };
+
+  container.addEventListener('submit', (event) => {
+    event.preventDefault();
+    addTodo();
+  });
+
+  const addButton = createButton('Add', null, 'primary', 'submit');
+
+  container.appendChild(input);
+  container.appendChild(addButton);
+
+  return container;
+};

package/templates/client/src/todoItem.css.hbs

@@ -0,0 +1,33 @@
+.todoItem {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.todoItem:last-child {
+  border-bottom: none;
+}
+
+.todoItem input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.todoItem label {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+
+.todoItem.completed label {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.todoItem button {
+  flex-shrink: 0;
+}

package/templates/client/src/todoItem.ts.hbs

@@ -0,0 +1,31 @@
+import './todoItem.css';
+import {createButton} from './button';
+
+export const createTodoItem = (
+  id: string,
+  text: string,
+  completed: boolean,
+  onToggle: () => void,
+  onDelete: () => void,
+): HTMLDivElement => {
+  const item = document.createElement('div');
+  item.className = `todoItem${completed ? ' completed' : ''}`;
+
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.checked = completed;
+  checkbox.id = `todo-${id}`;
+  checkbox.addEventListener('change', onToggle);
+
+  const label = document.createElement('label');
+  label.textContent = text;
+  label.htmlFor = `todo-${id}`;
+
+  const deleteBtn = createButton('Delete', onDelete);
+
+  item.appendChild(checkbox);
+  item.appendChild(label);
+  item.appendChild(deleteBtn);
+
+  return item;
+};

package/templates/client/src/todoList.css.hbs

@@ -0,0 +1,15 @@
+#todoList {
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  overflow: hidden;
+  background: var(--bg2);
+  width: 100%;
+}
+
+#todoList:empty::before {
+  content: 'No todos yet. Add one above!';
+  display: block;
+  padding: 2rem;
+  text-align: center;
+  color: var(--fg2);
+}

package/templates/client/src/todoList.ts.hbs

@@ -0,0 +1,38 @@
+import './todoList.css';
+import {type TodosDatabase, type TodoRow} from './database';
+import {createTodoItem} from './todoItem';
+
+export const createTodoList = (database: TodosDatabase): HTMLDivElement => {
+  const list = document.createElement('div');
+  list.id = 'todoList';
+
+  const render = async () => {
+    const {rows} = await database.query<TodoRow>(
+      'SELECT id, text, completed, created FROM todos ORDER BY created, id',
+    );
+
+    list.innerHTML = '';
+    rows.forEach((todo) => {
+      const item = createTodoItem(
+        todo.id,
+        todo.text,
+        todo.completed,
+        () => {
+          void database.query('UPDATE todos SET completed = $1 WHERE id = $2', [
+            !todo.completed,
+            todo.id,
+          ]);
+        },
+        () => {
+          void database.query('DELETE FROM todos WHERE id = $1', [todo.id]);
+        },
+      );
+      list.appendChild(item);
+    });
+  };
+
+  database.subscribe({tables: ['todos']}, () => void render());
+  void render();
+
+  return list;
+};

package/templates/client/src/topBar.css.hbs

@@ -0,0 +1,13 @@
+#topBar {
+  background: var(--bg-header);
+  border-bottom: 1px solid var(--border);
+  box-shadow: 0 1px 2px 0 #0007;
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(4px);
+}

package/templates/client/src/topBar.ts.hbs

@@ -0,0 +1,13 @@
+import './topBar.css';
+import {createTitle} from './title';
+import {createInfo} from './info';
+
+export const createTopBar = (): HTMLDivElement => {
+  const topBar = document.createElement('div');
+  topBar.id = 'topBar';
+
+  topBar.appendChild(createTitle());
+  topBar.appendChild(createInfo());
+
+  return topBar;
+};

package/templates/client/src/main.ts.hbs

@@ -1,159 +0,0 @@
-import './style.css';
-
-import {openDatabase, type Database, type Todo} from './database';
-
-const form = requiredElement<HTMLFormElement>('[data-testid="todo-form"]');
-const titleInput = requiredElement<HTMLInputElement>(
-  '[data-testid="todo-title"]',
-);
-const todosElement = requiredElement<HTMLUListElement>('[data-testid="todos"]');
-const statusElement = requiredElement<HTMLElement>('[data-testid="status"]');
-const errorElement = requiredElement<HTMLElement>('[data-testid="error"]');
-
-async function start(): Promise<void> {
-  const database = await openDatabase();
-  const unsubscribe = database.subscribe({tables: ['todos']}, () => {
-    runAction(() => renderTodos(database));
-  });
-
-  addEventListener(
-    'pagehide',
-    () => {
-      unsubscribe();
-      void database.close();
-    },
-    {once: true},
-  );
-
-  form.addEventListener('submit', (event) => {
-    event.preventDefault();
-    const title = titleInput.value.trim();
-    if (!title) {
-      return;
-    }
-    runAction(async () => {
-      await database.sql`
-        INSERT INTO todos (id, title, done)
-        VALUES (${crypto.randomUUID()}, ${title}, ${false})
-      `;
-      form.reset();
-      titleInput.focus();
-    });
-  });
-
-  todosElement.addEventListener('change', (event) => {
-    const checkbox = event.target;
-    const id =
-      checkbox instanceof HTMLInputElement
-        ? checkbox.dataset.todoId
-        : undefined;
-    if (
-      !(checkbox instanceof HTMLInputElement) ||
-      checkbox.dataset.action !== 'toggle' ||
-      !id
-    ) {
-      return;
-    }
-    runAction(async () => {
-      await database.sql`
-        UPDATE todos SET done = ${checkbox.checked}
-        WHERE id = ${id}
-      `;
-    });
-  });
-
-  todosElement.addEventListener('click', (event) => {
-    const target = event.target;
-    const button =
-      target instanceof Element
-        ? target.closest<HTMLButtonElement>('button[data-action="delete"]')
-        : null;
-    const id = button?.dataset.todoId;
-    if (!id) {
-      return;
-    }
-    runAction(async () => {
-      await database.sql`DELETE FROM todos WHERE id = ${id}`;
-    });
-  });
-
-  await renderTodos(database);
-  titleInput.focus();
-}
-
-async function renderTodos(database: Database): Promise<void> {
-  todosElement.setAttribute('aria-busy', 'true');
-  const {rows} = await database.query<Todo>(
-    'SELECT id, title, done FROM todos ORDER BY title, id',
-  );
-  todosElement.replaceChildren(
-    ...(rows.length === 0 ? [createEmptyState()] : rows.map(createTodo)),
-  );
-  todosElement.setAttribute('aria-busy', 'false');
-  statusElement.textContent = 'Ready';
-}
-
-function createTodo(todo: Todo): HTMLLIElement {
-  const item = document.createElement('li');
-  item.className = `todo${todo.done ? ' is-done' : ''}`;
-  item.dataset.todoId = todo.id;
-
-  const label = document.createElement('label');
-  const checkbox = document.createElement('input');
-  checkbox.type = 'checkbox';
-  checkbox.checked = todo.done;
-  checkbox.dataset.action = 'toggle';
-  checkbox.dataset.todoId = todo.id;
-  checkbox.setAttribute(
-    'aria-label',
-    `Mark ${todo.title} as ${todo.done ? 'not done' : 'done'}`,
-  );
-
-  const title = document.createElement('span');
-  title.textContent = todo.title;
-  label.append(checkbox, title);
-
-  const deleteButton = document.createElement('button');
-  deleteButton.type = 'button';
-  deleteButton.className = 'delete';
-  deleteButton.dataset.action = 'delete';
-  deleteButton.dataset.todoId = todo.id;
-  deleteButton.setAttribute('aria-label', `Delete ${todo.title}`);
-  deleteButton.textContent = 'Delete';
-
-  item.append(label, deleteButton);
-  return item;
-}
-
-function createEmptyState(): HTMLLIElement {
-  const item = document.createElement('li');
-  item.className = 'empty';
-  item.textContent = 'No todos yet. Add your first one above.';
-  return item;
-}
-
-function runAction(action: () => Promise<unknown>): void {
-  clearError();
-  void action().catch(showError);
-}
-
-function clearError(): void {
-  errorElement.hidden = true;
-  errorElement.textContent = '';
-}
-
-function showError(error: unknown): void {
-  statusElement.textContent = 'Something went wrong.';
-  errorElement.hidden = false;
-  errorElement.textContent = error instanceof Error ? error.message : String(error);
-}
-
-function requiredElement<ElementType extends Element>(selector: string): ElementType {
-  const element = document.querySelector<ElementType>(selector);
-  if (!element) {
-    throw new Error(`Missing starter element: ${selector}`);
-  }
-  return element;
-}
-
-void start().catch(showError);