create-table-app 0.0.1

package/README.md

@@ -0,0 +1,29 @@
+# create-table-app
+
+Create a new Table.js Smart TV application in one command.
+
+## Usage
+
+```bash
+npx create-table-app my-tv-app
+```
+
+Or with your preferred package manager:
+
+```bash
+pnpm create table-app my-tv-app
+yarn create table-app my-tv-app
+bun create table-app my-tv-app
+```
+
+## What's Included
+
+- File-based routing
+- Focus management
+- Tailwind CSS v4
+- TypeScript
+- Vite
+
+## License
+
+MIT

package/dist/index.mjs

@@ -0,0 +1,176 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import path2 from "path";
+import chalk from "chalk";
+import ora from "ora";
+import { Command } from "commander";
+
+// src/prompts.ts
+import prompts from "prompts";
+async function askProjectOptions(nameArg) {
+  const answers = await prompts([
+    {
+      type: nameArg ? null : "text",
+      name: "name",
+      message: "Project name",
+      initial: "my-table-app",
+      validate: (v) => {
+        return /^[a-z0-9-_]+$/.test(v) || "Use lowercase letters, numbers, - or _";
+      }
+    },
+    {
+      type: "select",
+      name: "platform",
+      message: "Target platform",
+      choices: [
+        { title: "All platforms", value: "all" },
+        { title: "Tizen (Samsung)", value: "tizen" },
+        { title: "WebOS (LG)", value: "webos" },
+        { title: "Android TV", value: "android" }
+      ],
+      initial: 0
+    },
+    {
+      type: "select",
+      name: "packageManager",
+      message: "Package manager",
+      choices: [
+        { title: "pnpm", value: "pnpm" },
+        { title: "npm", value: "npm" },
+        { title: "yarn", value: "yarn" },
+        { title: "bun", value: "bun" }
+      ],
+      initial: 0
+    },
+    {
+      type: "confirm",
+      name: "installDeps",
+      message: "Install dependencies?",
+      initial: true
+    },
+    {
+      type: "confirm",
+      name: "initGit",
+      message: "Initialize git repository?",
+      initial: true
+    }
+  ], {
+    onCancel: () => {
+      process.exit(0);
+    }
+  });
+  return {
+    name: nameArg ?? answers.name,
+    platform: answers.platform,
+    packageManager: answers.packageManager,
+    installDeps: answers.installDeps,
+    initGit: answers.initGit
+  };
+}
+
+// src/generator.ts
+import path from "path";
+import fs from "fs-extra";
+import { execa } from "execa";
+var TEMPLATE_DIR = path.join(
+  path.dirname(new URL(import.meta.url).pathname),
+  "..",
+  "templates",
+  "default"
+);
+async function applyTemplateVars(filePath, values) {
+  const TEXT_EXTENSIONS = [".ts", ".tsx", ".js", ".json", ".html", ".css", ".md"];
+  const ext = path.extname(filePath);
+  if (!TEXT_EXTENSIONS.includes(ext)) return;
+  let content = await fs.readFile(filePath, "utf-8");
+  let changed = false;
+  for (const [key, value] of Object.entries(values)) {
+    if (content.includes(key)) {
+      content = content.replaceAll(key, value);
+      changed = true;
+    }
+  }
+  if (changed) {
+    await fs.writeFile(filePath, content, "utf-8");
+  }
+}
+async function walk(dir, values) {
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  await Promise.all(
+    entries.map(async (entry) => {
+      const fullPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        await walk(fullPath, values);
+      } else {
+        await applyTemplateVars(fullPath, values);
+      }
+    })
+  );
+}
+async function generateProject(targetDir, options) {
+  await fs.copy(TEMPLATE_DIR, targetDir);
+  const values = {
+    "{{name}}": options.name,
+    "{{platform}}": options.platform
+  };
+  await walk(targetDir, values);
+}
+async function installDeps(dir, pm) {
+  await execa(pm, ["install"], { cwd: dir, stdio: "inherit" });
+}
+async function initGit(dir) {
+  await execa("git", ["init"], { cwd: dir });
+  await execa("git", ["add", "-A"], { cwd: dir });
+  await execa("git", ["commit", "-m", "chore: initial commit from create-table-app"], { cwd: dir });
+}
+
+// src/index.ts
+var program = new Command();
+program.name("create-table-app").description("Create a new Table.js Smart TV application").version("0.0.1").argument("[project-name]", "Name of the project").action(async (projectName) => {
+  console.log();
+  console.log(chalk.bold("  table.js") + chalk.dim(" \u2014 Smart TV framework"));
+  console.log();
+  const options = await askProjectOptions(projectName);
+  const targetDir = path2.resolve(process.cwd(), options.name);
+  console.log();
+  const spinner = ora("Creating project structure").start();
+  try {
+    await generateProject(targetDir, options);
+    spinner.succeed("Project structure created");
+  } catch (err) {
+    spinner.fail("Failed to create project");
+    console.error(err);
+    process.exit(1);
+  }
+  if (options.installDeps) {
+    const depSpinner = ora("Installing dependencies").start();
+    try {
+      await installDeps(targetDir, options.packageManager);
+      depSpinner.succeed("Dependencies installed");
+    } catch {
+      depSpinner.fail("Failed to install dependencies");
+    }
+  }
+  if (options.initGit) {
+    const gitSpinner = ora("Initializing git").start();
+    try {
+      await initGit(targetDir);
+      gitSpinner.succeed("Git initialized");
+    } catch {
+      gitSpinner.fail("Failed to initialize git");
+    }
+  }
+  console.log();
+  console.log(chalk.green("  Project ready!"));
+  console.log();
+  console.log("  Next steps:");
+  console.log();
+  console.log(chalk.dim(`  cd ${options.name}`));
+  if (!options.installDeps) {
+    console.log(chalk.dim(`  ${options.packageManager} install`));
+  }
+  console.log(chalk.dim(`  ${options.packageManager} run dev`));
+  console.log();
+});
+program.parse();

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "create-table-app",
+  "version": "0.0.1",
+  "description": "Create a new Table.js Smart TV app in one command",
+  "bin": {
+    "create-table-app": "./dist/index.mjs"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "smart-tv",
+    "create-app",
+    "cli",
+    "tizen",
+    "webos",
+    "android-tv"
+  ],
+  "author": "Table.js Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tablejs/tablejs"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "execa": "^9.6.1",
+    "fs-extra": "^11.3.4",
+    "ora": "^9.3.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@table/tsconfig": "workspace:*",
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2"
+  }
+}

package/templates/default/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=1920">
+    <title>{{name}}</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"></script>
+</body>
+</html>

package/templates/default/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "{{name}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "table build --platform {{platform}}",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@table-js/core": "latest",
+    "@table-js/ui": "latest",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@table-js/tsconfig": "latest",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@tailwindcss/vite": "^4.2.2",
+    "tailwindcss": "^4.2.2",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
+  }
+}

package/templates/default/src/app/movie/[id]/page.tsx

@@ -0,0 +1,29 @@
+import { Focusable, useParams, useRouter } from '@table/core'
+
+interface MovieParams {
+  id: string
+}
+
+export default function MoviePage() {
+  const { id } = useParams<MovieParams>()
+  const { back } = useRouter()
+
+  return (
+    <div className="min-h-screen bg-(--color-background) text-(--color-text-primary) p-16">
+      <Focusable onSelect={back} autoFocus>
+        {(focused) => (
+          <button
+            className={`
+              px-6 py-3 rounded-(--radius-button) bg-(--color-surface) mb-8
+              transition-colors duration-150
+              ${focused ? 'bg-(--color-surface-hover) outline-3 outline-(--color-accent)' : ''}
+            `}
+          >
+            ← Back
+          </button>
+        )}
+      </Focusable>
+      <h1 className="text-5xl font-bold">Movie #{id}</h1>
+    </div>
+  )
+}

package/templates/default/src/app/page.tsx

@@ -0,0 +1,37 @@
+import { Focusable, FocusGroup, useRouter } from '@table/core'
+
+const movies = [
+  { id: '1', title: 'Inception' },
+  { id: '2', title: 'Interstellar' },
+  { id: '3', title: 'The Dark Knight' },
+]
+
+export default function HomePage() {
+  const { navigate } = useRouter()
+
+  return (
+    <div className="min-h-screen bg-(--color-background) text-(--color-text-primary) p-16">
+      <h1 className="text-4xl font-bold mb-12">My TV App</h1>
+      <FocusGroup orientation="horizontal" loop>
+        {movies.map((movie) => (
+          <Focusable
+            key={movie.id}
+            onSelect={() => navigate(`/movie/${movie.id}`)}
+          >
+            {(focused) => (
+              <div
+                className={`
+                  w-48 h-72 rounded-(--radius-card) bg-(--color-surface)
+                  flex items-end p-4 mr-6 transition-transform duration-150
+                  ${focused ? 'scale-105 outline-3 outline-(--color-accent)' : ''}
+                `}
+              >
+                <span className="font-semibold">{movie.title}</span>
+              </div>
+            )}
+          </Focusable>
+        ))}
+      </FocusGroup>
+    </div>
+  )
+}

package/templates/default/src/main.tsx

@@ -0,0 +1,21 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { TableApp, defineRoutes } from '@table/core'
+import './styles/globals.css'
+
+const routes = defineRoutes([
+  {
+    path: '/',
+    component: () => import('./app/page'),
+  },
+  {
+    path: '/movie/[id]',
+    component: () => import('./app/movie/[id]/page'),
+  },
+])
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <TableApp routes={routes} />
+  </StrictMode>,
+)

package/templates/default/src/styles/globals.css

@@ -0,0 +1,35 @@
+@import "tailwindcss";
+
+@theme {
+  --screen-tv: 1920px;
+
+  --color-background: #0a0a0a;
+  --color-surface: #18181b;
+  --color-surface-hover: #27272a;
+  --color-border: #3f3f46;
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #a1a1aa;
+  --color-accent: #6366f1;
+  --color-accent-hover: #818cf8;
+
+  --radius-card: 0.75rem;
+  --radius-button: 0.5rem;
+
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+  font-family: var(--font-sans);
+  overflow: hidden;
+}
+
+[data-focused="true"] {
+  outline: 3px solid var(--color-accent);
+  outline-offset: 3px;
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@table/tsconfig/base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+    plugins: [
+        react(),
+        tailwindcss()
+    ],
+    define: {
+        __TABLE_PLATFORM__: JSON.stringify("{{platform}}")
+    }
+})