@openlearning/create-widget 1.0.0

package/README.md

@@ -0,0 +1,78 @@
+# @openlearning/create-widget
+
+Scaffold a new OpenLearning widget project with all necessary boilerplate.
+
+## Usage
+
+```bash
+npm create @openlearning/widget@latest my-widget
+```
+
+Or with pnpm:
+
+```bash
+pnpm create @openlearning/widget my-widget
+```
+
+## What It Creates
+
+The scaffolding tool generates a complete widget project structure:
+
+```
+my-widget/
+├── src/
+│   ├── components/
+│   │   ├── LearnerView.tsx
+│   │   └── SetupView.tsx
+│   ├── entries/
+│   │   ├── learner.tsx
+│   │   └── setup.tsx
+│   ├── data.ts
+│   ├── types.ts
+│   ├── DevApp.tsx
+│   ├── devMain.tsx
+│   └── index.css
+├── html/
+│   ├── learner.html
+│   └── setup.html
+├── index.html (dev server)
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+├── eslint.config.js
+└── README.md
+```
+
+## Next Steps
+
+After creating a new widget:
+
+```bash
+cd my-widget
+pnpm install
+pnpm dev
+```
+
+Then edit the components in `src/components/` to implement your widget's learner and setup interfaces.
+
+## Project Structure
+
+- **`src/components/`** - React components for learner and setup views
+- **`src/entries/`** - Widget entry points (created automatically by framework)
+- **`src/types.ts`** - Define your widget's config type
+- **`src/data.ts`** - Default configuration for your widget
+- **`html/`** - Production HTML templates
+- **`index.html`** - Development server entry point
+
+The framework handles all parent communication, config state management, and DOM rendering automatically.
+
+## Development
+
+```bash
+pnpm dev    # Start dev server
+pnpm build  # Build for production
+```
+
+## Framework
+
+This tool uses [@openlearning/widget-framework](../widget-framework) for all widget functionality. See its documentation for details on the parent message protocol, hooks, and component props.

package/bin/cli.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import path from "path";
+import { fileURLToPath } from "url";
+import { createWidget } from "../dist/index.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.log("Usage: create-widget <project-name>");
+  process.exit(1);
+}
+
+createWidget(projectName).catch((error) => {
+  console.error("Error creating widget:", error.message);
+  process.exit(1);
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export declare function createWidget(projectName: string): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA8dA,wBAAsB,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAyCrE"}

package/dist/index.js

@@ -0,0 +1,467 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+function getTemplateFiles(projectName) {
+    const camelCase = projectName.replace(/-./g, (x) => x[1].toUpperCase());
+    return [
+        // package.json
+        {
+            path: "package.json",
+            content: JSON.stringify({
+                name: projectName,
+                version: "0.0.0",
+                type: "module",
+                scripts: {
+                    dev: "vite",
+                    build: "tsc -b && vite build",
+                    preview: "vite preview",
+                },
+                dependencies: {
+                    "@openlearning/widget-framework": "workspace:*",
+                    react: "^19.2.0",
+                    "react-dom": "^19.2.0",
+                },
+                devDependencies: {
+                    "@types/node": "^20.0.0",
+                    "@types/react": "^19.0.0",
+                    "@types/react-dom": "^19.0.0",
+                    "@vitejs/plugin-react": "^4.0.0",
+                    eslint: "^8.0.0",
+                    "eslint-plugin-react-hooks": "^4.6.0",
+                    "eslint-plugin-react-refresh": "^0.4.0",
+                    typescript: "^5.7.2",
+                    vite: "^7.3.1",
+                },
+            }, null, 2),
+        },
+        // tsconfig.json
+        {
+            path: "tsconfig.json",
+            content: JSON.stringify({
+                compilerOptions: {
+                    target: "ES2020",
+                    useDefineForClassFields: true,
+                    lib: ["ES2020", "DOM", "DOM.Iterable"],
+                    module: "ES2020",
+                    skipLibCheck: true,
+                    esModuleInterop: true,
+                    jsx: "react-jsx",
+                    noEmit: true,
+                },
+                include: ["src"],
+                references: [{ path: "./tsconfig.app.json" }],
+            }, null, 2),
+        },
+        // tsconfig.app.json
+        {
+            path: "tsconfig.app.json",
+            content: JSON.stringify({
+                extends: "./tsconfig.json",
+                compilerOptions: {
+                    outDir: "./dist",
+                    rootDir: "./src",
+                },
+                include: ["src"],
+            }, null, 2),
+        },
+        // tsconfig.node.json
+        {
+            path: "tsconfig.node.json",
+            content: JSON.stringify({
+                compilerOptions: {
+                    composite: true,
+                    skipLibCheck: true,
+                    module: "ES2020",
+                    moduleResolution: "bundler",
+                    allowSyntheticDefaultImports: true,
+                },
+                include: ["vite.config.ts"],
+            }, null, 2),
+        },
+        // vite.config.ts
+        {
+            path: "vite.config.ts",
+            content: `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      input: {
+        learner: "html/learner.html",
+        setup: "html/setup.html",
+      },
+      output: {
+        entryFileNames: "[name].js",
+        dir: "dist",
+      },
+    },
+  },
+});
+`,
+        },
+        // .prettierrc
+        {
+            path: ".prettierrc",
+            content: JSON.stringify({
+                semi: true,
+                trailingComma: "es5",
+                singleQuote: false,
+            }),
+        },
+        // .gitignore
+        {
+            path: ".gitignore",
+            content: `# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependencies
+node_modules
+dist
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Environment
+.env
+.env.local
+`,
+        },
+        // README.md
+        {
+            path: "README.md",
+            content: `# ${projectName}
+
+A widget built with the OpenLearning widget framework.
+
+## Setup
+
+\`\`\`bash
+pnpm install
+\`\`\`
+
+## Development
+
+\`\`\`bash
+pnpm dev
+\`\`\`
+
+## Build
+
+\`\`\`bash
+pnpm build
+\`\`\`
+
+## Project Structure
+
+- \`src/components/\` - React components (LearnerView, SetupView)
+- \`src/entries/\` - Widget entry points
+- \`html/\` - HTML template files
+- \`src/types.ts\` - Widget configuration types
+- \`src/data.ts\` - Default configuration
+
+## Adding the Widget to a Parent
+
+The widget exposes two HTML endpoints:
+- \`/learner.html\` - Learner view
+- \`/setup.html\` - Setup/admin view
+
+The parent window communicates via \`postMessage\` protocol.
+`,
+        },
+        // public/.gitkeep
+        {
+            path: "public/.gitkeep",
+            content: "",
+        },
+        // src/index.css
+        {
+            path: "src/index.css",
+            content: `* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+}
+`,
+        },
+        // src/types.ts
+        {
+            path: "src/types.ts",
+            content: `import {
+  LearnerViewProps,
+  SetupViewProps,
+  JSONValue,
+  Attachment,
+} from "@openlearning/widget-framework";
+
+// Define your widget's configuration structure
+export type WidgetConfig = JSONValue;
+
+// Export framework types for use in your components
+export type { LearnerViewProps, SetupViewProps, JSONValue, Attachment };
+`,
+        },
+        // src/data.ts
+        {
+            path: "src/data.ts",
+            content: `import { WidgetConfig } from "./types";
+
+// Default configuration for this widget
+export const DEFAULT_CONFIG: WidgetConfig = {
+  // Add your default configuration here
+};
+`,
+        },
+        // src/DevApp.tsx
+        {
+            path: "src/DevApp.tsx",
+            content: `import { DevApp as FrameworkDevApp } from "@openlearning/widget-framework";
+import { LearnerView } from "./components/LearnerView";
+import { SetupView } from "./components/SetupView";
+import { DEFAULT_CONFIG } from "./data";
+
+export const DevApp = () => (
+  <FrameworkDevApp
+    LearnerViewComponent={LearnerView}
+    SetupViewComponent={SetupView}
+    defaultConfig={DEFAULT_CONFIG}
+  />
+);
+`,
+        },
+        // src/devMain.tsx
+        {
+            path: "src/devMain.tsx",
+            content: `import React from "react";
+import ReactDOM from "react-dom/client";
+import { DevApp } from "./DevApp";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <DevApp />
+  </React.StrictMode>
+);
+`,
+        },
+        // src/components/LearnerView.tsx
+        {
+            path: "src/components/LearnerView.tsx",
+            content: `import React from "react";
+import type { LearnerViewProps } from "@openlearning/widget-framework";
+import type { WidgetConfig } from "../types";
+
+export const LearnerView: React.FC<LearnerViewProps<WidgetConfig>> = ({
+  config,
+  onComplete,
+  onShare,
+  onResize,
+  onSave,
+  onReinit,
+}) => {
+  return (
+    <div style={{ padding: "1rem" }}>
+      <h1>Learner View</h1>
+      <p>Implement your learner interface here.</p>
+      
+      <div style={{ marginTop: "1rem" }}>
+        <button onClick={() => onComplete?.()}>Complete</button>
+        <button onClick={() => onShare?.([])}>Share</button>
+        <button onClick={() => onResize?.(400)}>Resize</button>
+      </div>
+    </div>
+  );
+};
+`,
+        },
+        // src/components/SetupView.tsx
+        {
+            path: "src/components/SetupView.tsx",
+            content: `import React from "react";
+import type { SetupViewProps } from "@openlearning/widget-framework";
+import type { WidgetConfig } from "../types";
+
+export const SetupView: React.FC<SetupViewProps<WidgetConfig>> = ({
+  config,
+  onChange,
+  onResize,
+  onReinit,
+}) => {
+  return (
+    <div style={{ padding: "1rem" }}>
+      <h1>Setup View</h1>
+      <p>Implement your setup/configuration interface here.</p>
+      
+      <div style={{ marginTop: "1rem" }}>
+        <button onClick={() => onChange?.(config)}>Save Configuration</button>
+        <button onClick={() => onResize?.(400)}>Resize</button>
+      </div>
+    </div>
+  );
+};
+`,
+        },
+        // src/entries/learner.tsx
+        {
+            path: "src/entries/learner.tsx",
+            content: `import { createLearnerEntry } from "@openlearning/widget-framework";
+import { LearnerView } from "../components/LearnerView";
+import "../index.css";
+
+createLearnerEntry(LearnerView);
+`,
+        },
+        // src/entries/setup.tsx
+        {
+            path: "src/entries/setup.tsx",
+            content: `import { createSetupEntry } from "@openlearning/widget-framework";
+import { SetupView } from "../components/SetupView";
+import { DEFAULT_CONFIG } from "../data";
+import "../index.css";
+
+createSetupEntry(SetupView, DEFAULT_CONFIG);
+`,
+        },
+        // index.html (dev server)
+        {
+            path: "index.html",
+            content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/devMain.tsx"></script>
+  </body>
+</html>
+`,
+        },
+        // html/learner.html
+        {
+            path: "html/learner.html",
+            content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learner</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/entries/learner.tsx"></script>
+  </body>
+</html>
+`,
+        },
+        // html/setup.html
+        {
+            path: "html/setup.html",
+            content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Setup</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/entries/setup.tsx"></script>
+  </body>
+</html>
+`,
+        },
+        // eslint.config.js
+        {
+            path: "eslint.config.js",
+            content: `import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react/configs/recommended.js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
+    },
+    settings: { react: { version: "18.3" } },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.rules,
+      ...reactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];
+`,
+        },
+    ];
+}
+export async function createWidget(projectName) {
+    const projectDir = path.resolve(projectName);
+    // Check if directory already exists
+    if (fs.existsSync(projectDir)) {
+        throw new Error(`Directory '${projectName}' already exists`);
+    }
+    console.log(`Creating widget project: ${projectName}`);
+    // Create the project directory
+    fs.mkdirSync(projectDir, { recursive: true });
+    // Create all template files
+    const files = getTemplateFiles(projectName);
+    for (const file of files) {
+        const filePath = path.join(projectDir, file.path);
+        const dirname = path.dirname(filePath);
+        // Create directories if they don't exist
+        fs.mkdirSync(dirname, { recursive: true });
+        // Write file
+        fs.writeFileSync(filePath, file.content);
+        console.log(`  created ${file.path}`);
+    }
+    const nextSteps = `
+✨ Widget project created!
+
+Next steps:
+  cd ${projectName}
+  pnpm install
+  pnpm dev
+
+The widget is ready to customize. Edit components in:
+  - src/components/LearnerView.tsx
+  - src/components/SetupView.tsx
+`;
+    console.log(nextSteps);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@openlearning/create-widget",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Scaffold a new OpenLearning widget project with all necessary boilerplate",
+  "license": "MIT",
+  "author": "OpenLearning",
+  "homepage": "https://github.com/openlearning/widgets#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/openlearning/widgets.git",
+    "directory": "libs/create-widget"
+  },
+  "bin": {
+    "create-widget": "./bin/cli.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "widget",
+    "scaffold",
+    "template",
+    "openlearning"
+  ],
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w"
+  }
+}

package/src/index.ts

@@ -0,0 +1,520 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+interface TemplateFile {
+  path: string;
+  content: string;
+}
+
+function getTemplateFiles(projectName: string): TemplateFile[] {
+  const camelCase = projectName.replace(/-./g, (x) => x[1].toUpperCase());
+
+  return [
+    // package.json
+    {
+      path: "package.json",
+      content: JSON.stringify(
+        {
+          name: projectName,
+          version: "0.0.0",
+          type: "module",
+          scripts: {
+            dev: "vite",
+            build: "tsc -b && vite build",
+            preview: "vite preview",
+          },
+          dependencies: {
+            "@openlearning/widget-framework": "workspace:*",
+            react: "^19.2.0",
+            "react-dom": "^19.2.0",
+          },
+          devDependencies: {
+            "@types/node": "^20.0.0",
+            "@types/react": "^19.0.0",
+            "@types/react-dom": "^19.0.0",
+            "@vitejs/plugin-react": "^4.0.0",
+            eslint: "^8.0.0",
+            "eslint-plugin-react-hooks": "^4.6.0",
+            "eslint-plugin-react-refresh": "^0.4.0",
+            typescript: "^5.7.2",
+            vite: "^7.3.1",
+          },
+        },
+        null,
+        2
+      ),
+    },
+
+    // tsconfig.json
+    {
+      path: "tsconfig.json",
+      content: JSON.stringify(
+        {
+          compilerOptions: {
+            target: "ES2020",
+            useDefineForClassFields: true,
+            lib: ["ES2020", "DOM", "DOM.Iterable"],
+            module: "ES2020",
+            skipLibCheck: true,
+            esModuleInterop: true,
+            jsx: "react-jsx",
+            noEmit: true,
+          },
+          include: ["src"],
+          references: [{ path: "./tsconfig.app.json" }],
+        },
+        null,
+        2
+      ),
+    },
+
+    // tsconfig.app.json
+    {
+      path: "tsconfig.app.json",
+      content: JSON.stringify(
+        {
+          extends: "./tsconfig.json",
+          compilerOptions: {
+            outDir: "./dist",
+            rootDir: "./src",
+          },
+          include: ["src"],
+        },
+        null,
+        2
+      ),
+    },
+
+    // tsconfig.node.json
+    {
+      path: "tsconfig.node.json",
+      content: JSON.stringify(
+        {
+          compilerOptions: {
+            composite: true,
+            skipLibCheck: true,
+            module: "ES2020",
+            moduleResolution: "bundler",
+            allowSyntheticDefaultImports: true,
+          },
+          include: ["vite.config.ts"],
+        },
+        null,
+        2
+      ),
+    },
+
+    // vite.config.ts
+    {
+      path: "vite.config.ts",
+      content: `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      input: {
+        learner: "html/learner.html",
+        setup: "html/setup.html",
+      },
+      output: {
+        entryFileNames: "[name].js",
+        dir: "dist",
+      },
+    },
+  },
+});
+`,
+    },
+
+    // .prettierrc
+    {
+      path: ".prettierrc",
+      content: JSON.stringify({
+        semi: true,
+        trailingComma: "es5",
+        singleQuote: false,
+      }),
+    },
+
+    // .gitignore
+    {
+      path: ".gitignore",
+      content: `# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependencies
+node_modules
+dist
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Environment
+.env
+.env.local
+`,
+    },
+
+    // README.md
+    {
+      path: "README.md",
+      content: `# ${projectName}
+
+A widget built with the OpenLearning widget framework.
+
+## Setup
+
+\`\`\`bash
+pnpm install
+\`\`\`
+
+## Development
+
+\`\`\`bash
+pnpm dev
+\`\`\`
+
+## Build
+
+\`\`\`bash
+pnpm build
+\`\`\`
+
+## Project Structure
+
+- \`src/components/\` - React components (LearnerView, SetupView)
+- \`src/entries/\` - Widget entry points
+- \`html/\` - HTML template files
+- \`src/types.ts\` - Widget configuration types
+- \`src/data.ts\` - Default configuration
+
+## Adding the Widget to a Parent
+
+The widget exposes two HTML endpoints:
+- \`/learner.html\` - Learner view
+- \`/setup.html\` - Setup/admin view
+
+The parent window communicates via \`postMessage\` protocol.
+`,
+    },
+
+    // public/.gitkeep
+    {
+      path: "public/.gitkeep",
+      content: "",
+    },
+
+    // src/index.css
+    {
+      path: "src/index.css",
+      content: `* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+}
+`,
+    },
+
+    // src/types.ts
+    {
+      path: "src/types.ts",
+      content: `import {
+  LearnerViewProps,
+  SetupViewProps,
+  JSONValue,
+  Attachment,
+} from "@openlearning/widget-framework";
+
+// Define your widget's configuration structure
+export type WidgetConfig = JSONValue;
+
+// Export framework types for use in your components
+export type { LearnerViewProps, SetupViewProps, JSONValue, Attachment };
+`,
+    },
+
+    // src/data.ts
+    {
+      path: "src/data.ts",
+      content: `import { WidgetConfig } from "./types";
+
+// Default configuration for this widget
+export const DEFAULT_CONFIG: WidgetConfig = {
+  // Add your default configuration here
+};
+`,
+    },
+
+    // src/DevApp.tsx
+    {
+      path: "src/DevApp.tsx",
+      content: `import { DevApp as FrameworkDevApp } from "@openlearning/widget-framework";
+import { LearnerView } from "./components/LearnerView";
+import { SetupView } from "./components/SetupView";
+import { DEFAULT_CONFIG } from "./data";
+
+export const DevApp = () => (
+  <FrameworkDevApp
+    LearnerViewComponent={LearnerView}
+    SetupViewComponent={SetupView}
+    defaultConfig={DEFAULT_CONFIG}
+  />
+);
+`,
+    },
+
+    // src/devMain.tsx
+    {
+      path: "src/devMain.tsx",
+      content: `import React from "react";
+import ReactDOM from "react-dom/client";
+import { DevApp } from "./DevApp";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <DevApp />
+  </React.StrictMode>
+);
+`,
+    },
+
+    // src/components/LearnerView.tsx
+    {
+      path: "src/components/LearnerView.tsx",
+      content: `import React from "react";
+import type { LearnerViewProps } from "@openlearning/widget-framework";
+import type { WidgetConfig } from "../types";
+
+export const LearnerView: React.FC<LearnerViewProps<WidgetConfig>> = ({
+  config,
+  onComplete,
+  onShare,
+  onResize,
+  onSave,
+  onReinit,
+}) => {
+  return (
+    <div style={{ padding: "1rem" }}>
+      <h1>Learner View</h1>
+      <p>Implement your learner interface here.</p>
+      
+      <div style={{ marginTop: "1rem" }}>
+        <button onClick={() => onComplete?.()}>Complete</button>
+        <button onClick={() => onShare?.([])}>Share</button>
+        <button onClick={() => onResize?.(400)}>Resize</button>
+      </div>
+    </div>
+  );
+};
+`,
+    },
+
+    // src/components/SetupView.tsx
+    {
+      path: "src/components/SetupView.tsx",
+      content: `import React from "react";
+import type { SetupViewProps } from "@openlearning/widget-framework";
+import type { WidgetConfig } from "../types";
+
+export const SetupView: React.FC<SetupViewProps<WidgetConfig>> = ({
+  config,
+  onChange,
+  onResize,
+  onReinit,
+}) => {
+  return (
+    <div style={{ padding: "1rem" }}>
+      <h1>Setup View</h1>
+      <p>Implement your setup/configuration interface here.</p>
+      
+      <div style={{ marginTop: "1rem" }}>
+        <button onClick={() => onChange?.(config)}>Save Configuration</button>
+        <button onClick={() => onResize?.(400)}>Resize</button>
+      </div>
+    </div>
+  );
+};
+`,
+    },
+
+    // src/entries/learner.tsx
+    {
+      path: "src/entries/learner.tsx",
+      content: `import { createLearnerEntry } from "@openlearning/widget-framework";
+import { LearnerView } from "../components/LearnerView";
+import "../index.css";
+
+createLearnerEntry(LearnerView);
+`,
+    },
+
+    // src/entries/setup.tsx
+    {
+      path: "src/entries/setup.tsx",
+      content: `import { createSetupEntry } from "@openlearning/widget-framework";
+import { SetupView } from "../components/SetupView";
+import { DEFAULT_CONFIG } from "../data";
+import "../index.css";
+
+createSetupEntry(SetupView, DEFAULT_CONFIG);
+`,
+    },
+
+    // index.html (dev server)
+    {
+      path: "index.html",
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/devMain.tsx"></script>
+  </body>
+</html>
+`,
+    },
+
+    // html/learner.html
+    {
+      path: "html/learner.html",
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learner</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/entries/learner.tsx"></script>
+  </body>
+</html>
+`,
+    },
+
+    // html/setup.html
+    {
+      path: "html/setup.html",
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Setup</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../src/entries/setup.tsx"></script>
+  </body>
+</html>
+`,
+    },
+
+    // eslint.config.js
+    {
+      path: "eslint.config.js",
+      content: `import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react/configs/recommended.js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
+    },
+    settings: { react: { version: "18.3" } },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.rules,
+      ...reactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];
+`,
+    },
+  ];
+}
+
+export async function createWidget(projectName: string): Promise<void> {
+  const projectDir = path.resolve(projectName);
+
+  // Check if directory already exists
+  if (fs.existsSync(projectDir)) {
+    throw new Error(`Directory '${projectName}' already exists`);
+  }
+
+  console.log(`Creating widget project: ${projectName}`);
+
+  // Create the project directory
+  fs.mkdirSync(projectDir, { recursive: true });
+
+  // Create all template files
+  const files = getTemplateFiles(projectName);
+
+  for (const file of files) {
+    const filePath = path.join(projectDir, file.path);
+    const dirname = path.dirname(filePath);
+
+    // Create directories if they don't exist
+    fs.mkdirSync(dirname, { recursive: true });
+
+    // Write file
+    fs.writeFileSync(filePath, file.content);
+    console.log(`  created ${file.path}`);
+  }
+
+  const nextSteps = `
+✨ Widget project created!
+
+Next steps:
+  cd ${projectName}
+  pnpm install
+  pnpm dev
+
+The widget is ready to customize. Edit components in:
+  - src/components/LearnerView.tsx
+  - src/components/SetupView.tsx
+`;
+  console.log(nextSteps);
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}