handoff-app 1.0.3 → 1.0.5

package/templates/default/handoff.config.js.tpl

@@ -0,0 +1,181 @@
+
+
+/** @type {import('handoff-app').Config} */
+module.exports = {
+  app: {
+    theme: "default",
+    title: "{{projectName}} Design System",
+    client: "{{projectName}}",
+    google_tag_manager: null,
+    attribution: true,
+    type_copy: "Almost before we knew it, we had left the ground.",
+    type_sort: [
+      "Heading 1",
+      "Heading 2",
+      "Heading 3",
+      "Heading 4",
+      "Heading 5",
+      "Heading 6",
+      "Paragraph",
+      "Subheading",
+      "Blockquote",
+      "Input Labels",
+      "Link"
+    ],
+    color_sort: [
+      "primary",
+      "secondary",
+      "extra",
+      "system"
+    ],
+    component_sort: [
+      "primary",
+      "secondary",
+      "transparent"
+    ],
+    base_path: "",
+    breakpoints: {
+      sm: { size: 576, name: "Small" },
+      md: { size: 768, name: "Medium" },
+      lg: { size: 992, name: "Large" },
+      xl: { size: 1200, name: "Extra Large" }
+    }
+  },
+
+  // entries: {
+  //   /**
+  //    * Array of component paths to be included in the build
+  //    * Add your component directories here
+  //    */
+  //   components: ["components/button"]
+  // },
+
+  hooks: {
+    /**
+     * Optional validation callback for components
+     * @param component - The component instance to validate
+     * @returns A record of validation results where keys are validation types and values are detailed validation results
+     *
+     * @example
+     * validateComponent: async (component) => ({
+     *   a11y: {
+     *     description: 'Accessibility validation check',
+     *     passed: true,
+     *     messages: ['No accessibility issues found']
+     *   },
+     *   responsive: {
+     *     description: 'Responsive design validation',
+     *     passed: false,
+     *     messages: ['Component breaks at mobile breakpoint']
+     *   }
+     * })
+     */
+    // validateComponent: async (component) => {
+    //   // Add your custom validation logic here
+    //   return {};
+    // },
+
+    /**
+     * Optional hook to override the SSR build configuration used in the ssrRenderPlugin
+     * @param config - The default esbuild configuration
+     * @returns Modified esbuild configuration
+     *
+     * @example
+     * ssrBuildConfig: (config) => {
+     *   // Modify the esbuild config as needed
+     *   return config;
+     * }
+     */
+    // ssrBuildConfig: (config) => {
+    //   // Add your custom SSR build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to override the client-side build configuration used in the ssrRenderPlugin
+     * @param config - The default esbuild configuration
+     * @returns Modified esbuild configuration
+     *
+     * @example
+     * clientBuildConfig: (config) => {
+     *   // Modify the esbuild config as needed
+     *   return config;
+     * }
+     */
+    // clientBuildConfig: (config) => {
+    //   // Add your custom client build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to specify which export property contains the schema
+     * @param exports - The module exports object containing the schema
+     * @returns The schema object from the exports
+     *
+     * @example
+     * getSchemaFromExports: (exports) => exports.customSchema || exports.default
+     */
+    // getSchemaFromExports: (exports) => {
+    //   // Add your custom schema extraction logic here
+    //   return exports.default;
+    // },
+
+    /**
+     * Optional hook to transform the schema into properties
+     * @param schema - The schema object to transform
+     * @returns The transformed properties object
+     */
+    // schemaToProperties: (schema) => {
+    //   // Add your custom schema to properties transformation here
+    //   return {};
+    // },
+
+    /**
+     * Optional hook to override the JavaScript Vite configuration
+     * @param config - The default Vite configuration
+     * @returns Modified Vite configuration
+     *
+     * @example
+     * jsBuildConfig: (config) => {
+     *   // Modify the Vite config as needed
+     *   return config;
+     * }
+     */
+    // jsBuildConfig: (config) => {
+    //   // Add your custom JavaScript build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to override the CSS Vite configuration
+     * @param config - The default Vite configuration
+     * @returns Modified Vite configuration
+     *
+     * @example
+     * cssBuildConfig: (config) => {
+     *   // Modify the Vite config as needed
+     *   return config;
+     * }
+     */
+    // cssBuildConfig: (config) => {
+    //   // Add your custom CSS build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to override the HTML Vite configuration
+     * @param config - The default Vite configuration
+     * @returns Modified Vite configuration
+     *
+     * @example
+     * htmlBuildConfig: (config) => {
+     *   // Modify the Vite config as needed
+     *   return config;
+     * }
+     */
+    // htmlBuildConfig: (config) => {
+    //   // Add your custom HTML build configuration here
+    //   return config;
+    // },
+  },
+};

package/templates/default/handoff.config.with-examples.js.tpl

@@ -0,0 +1,182 @@
+
+
+
+/** @type {import('handoff-app').Config} */
+module.exports = {
+  app: {
+    theme: "default",
+    title: "{{projectName}} Design System",
+    client: "{{projectName}}",
+    google_tag_manager: null,
+    attribution: true,
+    type_copy: "Almost before we knew it, we had left the ground.",
+    type_sort: [
+      "Heading 1",
+      "Heading 2",
+      "Heading 3",
+      "Heading 4",
+      "Heading 5",
+      "Heading 6",
+      "Paragraph",
+      "Subheading",
+      "Blockquote",
+      "Input Labels",
+      "Link"
+    ],
+    color_sort: [
+      "primary",
+      "secondary",
+      "extra",
+      "system"
+    ],
+    component_sort: [
+      "primary",
+      "secondary",
+      "transparent"
+    ],
+    base_path: "",
+    breakpoints: {
+      sm: { size: 576, name: "Small" },
+      md: { size: 768, name: "Medium" },
+      lg: { size: 992, name: "Large" },
+      xl: { size: 1200, name: "Extra Large" }
+    }
+  },
+
+  entries: {
+    /**
+     * Array of component paths to be included in the build
+     * Add your component directories here
+     */
+    components: ["components/button"]
+  },
+
+  hooks: {
+    /**
+     * Optional validation callback for components
+     * @param component - The component instance to validate
+     * @returns A record of validation results where keys are validation types and values are detailed validation results
+     *
+     * @example
+     * validateComponent: async (component) => ({
+     *   a11y: {
+     *     description: 'Accessibility validation check',
+     *     passed: true,
+     *     messages: ['No accessibility issues found']
+     *   },
+     *   responsive: {
+     *     description: 'Responsive design validation',
+     *     passed: false,
+     *     messages: ['Component breaks at mobile breakpoint']
+     *   }
+     * })
+     */
+    // validateComponent: async (component) => {
+    //   // Add your custom validation logic here
+    //   return {};
+    // },
+
+    /**
+     * Optional hook to override the SSR build configuration used in the ssrRenderPlugin
+     * @param config - The default esbuild configuration
+     * @returns Modified esbuild configuration
+     *
+     * @example
+     * ssrBuildConfig: (config) => {
+     *   // Modify the esbuild config as needed
+     *   return config;
+     * }
+     */
+    // ssrBuildConfig: (config) => {
+    //   // Add your custom SSR build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to override the client-side build configuration used in the ssrRenderPlugin
+     * @param config - The default esbuild configuration
+     * @returns Modified esbuild configuration
+     *
+     * @example
+     * clientBuildConfig: (config) => {
+     *   // Modify the esbuild config as needed
+     *   return config;
+     * }
+     */
+    // clientBuildConfig: (config) => {
+    //   // Add your custom client build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to specify which export property contains the schema
+     * @param exports - The module exports object containing the schema
+     * @returns The schema object from the exports
+     *
+     * @example
+     * getSchemaFromExports: (exports) => exports.customSchema || exports.default
+     */
+    // getSchemaFromExports: (exports) => {
+    //   // Add your custom schema extraction logic here
+    //   return exports.default;
+    // },
+
+    /**
+     * Optional hook to transform the schema into properties
+     * @param schema - The schema object to transform
+     * @returns The transformed properties object
+     */
+    // schemaToProperties: (schema) => {
+    //   // Add your custom schema to properties transformation here
+    //   return {};
+    // },
+
+    /**
+     * Optional hook to override the JavaScript Vite configuration
+     * @param config - The default Vite configuration
+     * @returns Modified Vite configuration
+     *
+     * @example
+     * jsBuildConfig: (config) => {
+     *   // Modify the Vite config as needed
+     *   return config;
+     * }
+     */
+    // jsBuildConfig: (config) => {
+    //   // Add your custom JavaScript build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to override the CSS Vite configuration
+     * @param config - The default Vite configuration
+     * @returns Modified Vite configuration
+     *
+     * @example
+     * cssBuildConfig: (config) => {
+     *   // Modify the Vite config as needed
+     *   return config;
+     * }
+     */
+    // cssBuildConfig: (config) => {
+    //   // Add your custom CSS build configuration here
+    //   return config;
+    // },
+
+    /**
+     * Optional hook to override the HTML Vite configuration
+     * @param config - The default Vite configuration
+     * @returns Modified Vite configuration
+     *
+     * @example
+     * htmlBuildConfig: (config) => {
+     *   // Modify the Vite config as needed
+     *   return config;
+     * }
+     */
+    // htmlBuildConfig: (config) => {
+    //   // Add your custom HTML build configuration here
+    //   return config;
+    // },
+  },
+};

package/templates/default/package.json.tpl

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "description": "A handoff app project",
+  "private": true,
+  "scripts": {
+    "start": "handoff-app start",
+    "dev": "handoff-app dev",
+    "build": "handoff-app build:app",
+    "fetch": "handoff-app fetch"
+  },
+  "dependencies": {
+    "handoff-app": "^1.0.1"
+  },
+  "devDependencies": {},
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
+  }
+}

package/templates/default/tsconfig.json.tpl

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "components/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/commands/platform/init.d.ts

@@ -1,6 +0,0 @@
-import { CommandModule } from 'yargs';
-export interface PlatformInitArgs {
-    url?: string;
-}
-declare const command: CommandModule<{}, PlatformInitArgs>;
-export default command;

package/dist/commands/platform/init.js

@@ -1,231 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const p = __importStar(require("@clack/prompts"));
-const chalk_1 = __importDefault(require("chalk"));
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const path_1 = __importDefault(require("path"));
-const client_1 = require("../../platform/client");
-const credentials_1 = require("../../platform/credentials");
-const DEFAULT_PLATFORM_URL = 'http://localhost:3000';
-const CONFIG_FILES = ['handoff.config.json', 'handoff.config.js', 'handoff.config.cjs'];
-const command = {
-    command: 'platform:init',
-    describe: 'Link this directory to a Handoff platform project',
-    builder: (yargs) => {
-        return yargs.option('url', {
-            type: 'string',
-            description: 'Platform URL',
-            default: process.env.HANDOFF_PLATFORM_URL || DEFAULT_PLATFORM_URL,
-        });
-    },
-    handler: (args) => __awaiter(void 0, void 0, void 0, function* () {
-        const baseUrl = (args.url || DEFAULT_PLATFORM_URL).replace(/\/+$/, '');
-        const workingDir = process.cwd();
-        p.intro(chalk_1.default.bold('Handoff Platform Init'));
-        // 1. Check login
-        const token = (0, credentials_1.getToken)(baseUrl);
-        if (!token) {
-            p.cancel(`Not logged in to ${baseUrl}. Run ${chalk_1.default.cyan('handoff-app platform:login')} first.`);
-            process.exit(1);
-        }
-        const spinner = p.spinner();
-        try {
-            // 2. Fetch project list
-            spinner.start('Fetching projects...');
-            const projects = yield (0, client_1.listProjects)(baseUrl, token);
-            spinner.stop('Projects loaded.');
-            if (projects.length === 0) {
-                p.cancel('No projects found. Create a project in the Handoff platform first.');
-                process.exit(1);
-            }
-            // 3. Interactive project selection
-            const projectId = yield p.select({
-                message: 'Select a project to link:',
-                options: projects.map((proj) => ({
-                    value: proj.id,
-                    label: `${proj.name} (${proj.orgName})`,
-                    hint: `${proj.slug} — ${proj.role}`,
-                })),
-            });
-            if (p.isCancel(projectId)) {
-                p.cancel('Init cancelled.');
-                process.exit(0);
-            }
-            const selectedProject = projects.find((proj) => proj.id === projectId);
-            // 4. Check if a local config exists
-            const existingConfigFile = CONFIG_FILES.find((file) => fs_extra_1.default.existsSync(path_1.default.resolve(workingDir, file)));
-            if (!existingConfigFile) {
-                // No local config — pull it from the remote project
-                spinner.start('No local config found. Fetching config from platform...');
-                try {
-                    const manifest = yield (0, client_1.getManifest)(baseUrl, token, selectedProject.id);
-                    // Look for handoff.config.js in the manifest
-                    const remoteConfigKey = Object.keys(manifest.files).find((key) => key === 'handoff.config.js' || key === 'handoff.config.json' || key === 'handoff.config.cjs');
-                    if (remoteConfigKey) {
-                        const content = yield (0, client_1.downloadFile)(baseUrl, token, selectedProject.id, remoteConfigKey);
-                        const localConfigPath = path_1.default.resolve(workingDir, remoteConfigKey);
-                        fs_extra_1.default.writeFileSync(localConfigPath, content);
-                        spinner.stop(`Downloaded ${remoteConfigKey} from platform.`);
-                        // Now inject the platform fields into it
-                        yield injectPlatformFields(localConfigPath, selectedProject.id, baseUrl);
-                    }
-                    else {
-                        spinner.stop('No remote config found either. Creating a new config.');
-                        // Create a minimal config with just the platform fields
-                        const configPath = path_1.default.resolve(workingDir, 'handoff.config.js');
-                        const configContent = generateMinimalConfig(selectedProject.id, baseUrl);
-                        fs_extra_1.default.writeFileSync(configPath, configContent);
-                    }
-                }
-                catch (err) {
-                    spinner.stop('Could not fetch remote config.');
-                    // Fall back to creating a minimal config
-                    const configPath = path_1.default.resolve(workingDir, 'handoff.config.js');
-                    const configContent = generateMinimalConfig(selectedProject.id, baseUrl);
-                    fs_extra_1.default.writeFileSync(configPath, configContent);
-                }
-            }
-            else {
-                // Local config exists — add/update platform fields
-                const configPath = path_1.default.resolve(workingDir, existingConfigFile);
-                yield injectPlatformFields(configPath, selectedProject.id, baseUrl);
-            }
-            p.note([
-                `Project: ${chalk_1.default.bold(selectedProject.name)}`,
-                `Organization: ${chalk_1.default.dim(selectedProject.orgName)}`,
-                `Project ID: ${chalk_1.default.dim(selectedProject.id)}`,
-                `Platform: ${chalk_1.default.dim(baseUrl)}`,
-            ].join('\n'), 'Linked successfully');
-            p.outro(`Run ${chalk_1.default.cyan('handoff-app platform:pull')} to sync files from the platform.`);
-        }
-        catch (err) {
-            spinner.stop('Init failed.');
-            p.cancel(err.message || 'Init failed');
-            process.exit(1);
-        }
-    }),
-};
-/**
- * Inject platformProjectId and platformUrl into an existing config file.
- *
- * For JSON files, parse and re-serialize.
- * For JS/CJS files, use a regex approach to add/update the fields.
- */
-function injectPlatformFields(configPath, projectId, platformUrl) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const ext = path_1.default.extname(configPath);
-        if (ext === '.json') {
-            const config = fs_extra_1.default.readJsonSync(configPath);
-            config.platformProjectId = projectId;
-            config.platformUrl = platformUrl;
-            fs_extra_1.default.writeJsonSync(configPath, config, { spaces: 2 });
-        }
-        else {
-            // JS or CJS file — read as text, inject/replace fields
-            let content = fs_extra_1.default.readFileSync(configPath, 'utf8');
-            content = upsertConfigField(content, 'platformProjectId', JSON.stringify(projectId));
-            content = upsertConfigField(content, 'platformUrl', JSON.stringify(platformUrl));
-            fs_extra_1.default.writeFileSync(configPath, content, 'utf8');
-        }
-    });
-}
-/**
- * Insert or replace a top-level field in a JS config export.
- * Looks for `fieldName: ...` and replaces the value, or appends
- * the field before the closing `};` of module.exports.
- */
-function upsertConfigField(source, fieldName, value) {
-    // Pattern to match an existing field assignment (with optional trailing comma)
-    const existingPattern = new RegExp(`(${fieldName}\\s*:\\s*)([^,}\\n]+)(,?)`);
-    if (existingPattern.test(source)) {
-        return source.replace(existingPattern, `$1${value}$3`);
-    }
-    // Insert before the last `};` (end of module.exports)
-    // Handle both `module.exports = {` and `export default {` styles
-    // Also ensure the previous line ends with a comma so the JS stays valid
-    const closingBrace = /(\n)(};?\s*$)/;
-    if (closingBrace.test(source)) {
-        // Ensure the last property line before the closing brace has a trailing comma
-        source = ensureTrailingComma(source);
-        return source.replace(closingBrace, `$1  ${fieldName}: ${value},\n$2`);
-    }
-    // Fallback: just append as a comment warning
-    return source + `\n// Added by platform:init — could not auto-inject:\n// ${fieldName}: ${value}\n`;
-}
-/**
- * Ensure the last property line before the closing `};` has a trailing comma.
- * This prevents invalid JS when appending new properties to an object literal.
- */
-function ensureTrailingComma(source) {
-    const lines = source.split('\n');
-    // Find the closing `};` or `}` at the start of a line (module.exports / export default)
-    let closingIdx = -1;
-    for (let i = lines.length - 1; i >= 0; i--) {
-        if (/^};?\s*$/.test(lines[i])) {
-            closingIdx = i;
-            break;
-        }
-    }
-    if (closingIdx <= 0)
-        return source;
-    // Walk backwards past blank lines and comment-only lines to find the last property line
-    let lastPropIdx = closingIdx - 1;
-    while (lastPropIdx >= 0 && (/^\s*$/.test(lines[lastPropIdx]) || /^\s*\/\//.test(lines[lastPropIdx]))) {
-        lastPropIdx--;
-    }
-    if (lastPropIdx < 0)
-        return source;
-    // Strip inline comments for the check, but preserve them in the output
-    const stripped = lines[lastPropIdx].replace(/\s*\/\/.*$/, '').trimEnd();
-    if (stripped.length > 0 && !stripped.endsWith(',') && !stripped.endsWith('{')) {
-        // Insert a comma after the last significant character, preserving any inline comment
-        lines[lastPropIdx] = lines[lastPropIdx].replace(/(\S)(\s*(?:\/\/.*)?)$/, '$1,$2');
-    }
-    return lines.join('\n');
-}
-/**
- * Generate a minimal handoff.config.js with platform fields.
- */
-function generateMinimalConfig(projectId, platformUrl) {
-    return `module.exports = {
-  platformProjectId: ${JSON.stringify(projectId)},
-  platformUrl: ${JSON.stringify(platformUrl)},
-};
-`;
-}
-exports.default = command;

package/dist/commands/platform/login.d.ts

@@ -1,6 +0,0 @@
-import { CommandModule } from 'yargs';
-export interface PlatformLoginArgs {
-    url?: string;
-}
-declare const command: CommandModule<{}, PlatformLoginArgs>;
-export default command;