@builder.io/dev-tools 1.0.20 → 1.1.0-rc1

package/package.json

@@ -1,17 +1,32 @@
 {
   "name": "@builder.io/dev-tools",
-  "version": "1.0.20",
+  "version": "1.1.0-rc1",
   "description": "Builder.io Visual CMS Devtools",
   "type": "module",
   "main": "./core/index.cjs",
   "module": "./core/index.mjs",
   "types": "./core/index.d.ts",
   "exports": {
+    ".": {
+      "import": "./core/index.mjs",
+      "require": "./core/index.cjs",
+      "types": "./core/index.d.ts"
+    },
     "./core": {
       "import": "./core/index.mjs",
       "require": "./core/index.cjs",
       "types": "./core/index.d.ts"
     },
+    "./figma": {
+      "import": "./figma/index.mjs",
+      "require": "./figma/index.cjs",
+      "types": "./figma/index.d.ts"
+    },
+    "./figma/jsx-runtime": {
+      "import": "./figma/jsx-runtime/index.mjs",
+      "require": "./figma/jsx-runtime/index.cjs",
+      "types": "./figma/jsx-runtime/index.d.ts"
+    },
     "./next": {
       "import": "./next/index.mjs",
       "require": "./next/index.cjs",
@@ -54,7 +69,9 @@
     }
   },
   "bin": {
-    "builder-dev-tools": "./cli/index.cjs"
+    "builder-dev-tools": "./cli/index.cjs",
+    "builder.io": "./cli/index.cjs",
+    "bio": "./cli/index.cjs"
   },
   "files": [
     "core",
@@ -65,12 +82,14 @@
     "types",
     "vite",
     "webpack",
-    "angular"
+    "angular",
+    "figma"
   ],
   "dependencies": {
     "launch-editor": "^2.6.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "open": "^10.1.0"
   },
   "homepage": "https://builder.io/",
   "keywords": [
@@ -84,7 +103,20 @@
     "react",
     "remix",
     "next",
-    "qwik"
+    "qwik",
+    "vcp",
+    "visual copilot",
+    "figma to code",
+    "design to code",
+    "figma to react",
+    "figma"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "@clack/prompts": "^0.7.0",
+    "emphasize": "^7.0.0",
+    "enquirer": "^2.4.1",
+    "prompts": "^2.4.2"
+  }
 }

package/server/index.cjs

@@ -161,43 +161,44 @@ Visit https://www.docs.developers.amplitude.com/data/sdks/browser-2/#tracking-de
           <!-- Route message for react -->
           <div id="react-message-section" hidden>
             <span
-            >Next, add the following path and component in your React app routing
-            setup</span
-          >
-          <ol id="react-router-steps">
-            <li>
-              Update path to <strong>'/builder-demo'</strong> or
-              <strong>'/*'</strong>
-            </li>
-            <li>
-              Add <strong>'BuilderPage'</strong> component from
-              <code>builder-page</code> file
-            </li>
-          </ol>
+              >Next, add the following path and component in your React app
+              routing setup</span
+            >
+            <ol id="react-router-steps">
+              <li>
+                Update path to <strong>'/builder-demo'</strong> or
+                <strong>'/*'</strong>
+              </li>
+              <li>
+                Add <strong>'BuilderPage'</strong> component from
+                <code>builder-page</code> file
+              </li>
+            </ol>
           </div>
 
           <!-- Route message for angular -->
           <div id="angular-message-section" hidden>
-            <span>Next, add the following path for Builder page in your Angular routes</span>
-          <ol id="angular-router-steps">
-            <li>
-              Update path to <strong>'builder-demo'</strong> or
-              <strong>'**'</strong>
-            </li>
-            <li>
-              Add <strong>'BuilderPage'</strong> component from
-              <code>builder-page.component</code> file
-            </li>
-          </ol>
+            <span
+              >Next, add the following path for Builder page in your Angular
+              routes</span
+            >
+            <ol id="angular-router-steps">
+              <li>
+                Update path to <strong>'builder-demo'</strong> or
+                <strong>'**'</strong>
+              </li>
+              <li>
+                Add <strong>'BuilderPage'</strong> component from
+                <code>builder-page.component</code> file
+              </li>
+            </ol>
           </div>
-          
+
           <a id="need-help" href="#" hidden>
             <span id="help-text">Need help?</span>
             <span id="help-icon"></span>
           </a>
-          <div id="router-checkbox-div">
-          </div>
-          
+          <div id="router-checkbox-div"></div>
         </div>
         <div id="router-finish-button" hidden>
           <a class="button next-step" href="#">

package/server/index.mjs

@@ -161,43 +161,44 @@ Visit https://www.docs.developers.amplitude.com/data/sdks/browser-2/#tracking-de
           <!-- Route message for react -->
           <div id="react-message-section" hidden>
             <span
-            >Next, add the following path and component in your React app routing
-            setup</span
-          >
-          <ol id="react-router-steps">
-            <li>
-              Update path to <strong>'/builder-demo'</strong> or
-              <strong>'/*'</strong>
-            </li>
-            <li>
-              Add <strong>'BuilderPage'</strong> component from
-              <code>builder-page</code> file
-            </li>
-          </ol>
+              >Next, add the following path and component in your React app
+              routing setup</span
+            >
+            <ol id="react-router-steps">
+              <li>
+                Update path to <strong>'/builder-demo'</strong> or
+                <strong>'/*'</strong>
+              </li>
+              <li>
+                Add <strong>'BuilderPage'</strong> component from
+                <code>builder-page</code> file
+              </li>
+            </ol>
           </div>
 
           <!-- Route message for angular -->
           <div id="angular-message-section" hidden>
-            <span>Next, add the following path for Builder page in your Angular routes</span>
-          <ol id="angular-router-steps">
-            <li>
-              Update path to <strong>'builder-demo'</strong> or
-              <strong>'**'</strong>
-            </li>
-            <li>
-              Add <strong>'BuilderPage'</strong> component from
-              <code>builder-page.component</code> file
-            </li>
-          </ol>
+            <span
+              >Next, add the following path for Builder page in your Angular
+              routes</span
+            >
+            <ol id="angular-router-steps">
+              <li>
+                Update path to <strong>'builder-demo'</strong> or
+                <strong>'**'</strong>
+              </li>
+              <li>
+                Add <strong>'BuilderPage'</strong> component from
+                <code>builder-page.component</code> file
+              </li>
+            </ol>
           </div>
-          
+
           <a id="need-help" href="#" hidden>
             <span id="help-text">Need help?</span>
             <span id="help-icon"></span>
           </a>
-          <div id="router-checkbox-div">
-          </div>
-          
+          <div id="router-checkbox-div"></div>
         </div>
         <div id="router-finish-button" hidden>
           <a class="button next-step" href="#">

package/types/cli/add.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="@figma/plugin-typings" />
+import type { ComponentInfo, ComponentInput, ComponentRegistry, DevToolsSys } from "../types";
+import type { FigmaArgs } from "./figma";
+export declare const runFigmaAdd: (sys: DevToolsSys, args: FigmaArgs) => Promise<void>;
+export interface FigmaComponentInput {
+    id: string;
+    name: string;
+    value?: any;
+    type: string;
+    baseType: "text" | "variant" | "boolean" | "slot";
+    variantOptions?: string[];
+    isDefault: boolean;
+    ref?: string;
+}
+export interface FigmaComponentInfo {
+    documentName: string;
+    key: string;
+    tree: string;
+    jsx: string;
+    name: string;
+    inputs: FigmaComponentInput[];
+    description: string;
+    documentationLinks: string[];
+    instanceId: string;
+}
+export declare const parseFigmaURL: (str: string) => {
+    fileID: string;
+    nodeId: string;
+} | null;
+export declare const getFigmaNodeData: (auth: {
+    access_token: string;
+    oauth: boolean;
+}, fileId: string, nodeId: string) => Promise<any>;
+export declare function getInputsSlotsFromComponentPropertyDefinitions(mainComponent: ComponentSetNode | ComponentNode): {
+    inputs: FigmaComponentInput[];
+    nameMap: (key: string) => string;
+};
+export declare const REMOVE_EMOJI: RegExp;
+export declare function getFigmaComponentName(name: string): string;
+export interface MappingCodeV2 {
+    figmaInterface: string;
+    reactInterface: string;
+    componentRegistry: string;
+    figmaComponentName: string;
+    figmaTree: string;
+    meta?: Record<string, any>;
+    previousCode?: string;
+    prompt?: string;
+}
+export declare function getMappingData(figmaNode: FigmaComponentInfo, registeredCmp: ComponentInfo, cmpRegistry: ComponentRegistry, useJSX: boolean): MappingCodeV2;
+export declare const getTypeFromComponentInput: (input: ComponentInput) => string;
+export declare const getPropertyAccessor: (name: string) => string;
+export declare function getMappingPrompt(figmaNode: FigmaComponentInfo, registeredCmp: ComponentInfo, cmpRegistry: ComponentRegistry, useJSX?: boolean): string;

package/types/cli/credentials.d.ts

@@ -0,0 +1,31 @@
+import type { DevToolsSys } from "../types";
+import type { FigmaArgs } from "./figma";
+export interface CredentialsOptions {
+    builderPublicKey?: boolean;
+    builderPrivateKey?: boolean;
+    figmaAuth?: boolean;
+    force?: boolean;
+}
+export interface FigmaAuth {
+    access_token: string;
+    oauth: boolean;
+}
+export interface BuilderAuth {
+    privateKey: string;
+    spaceId: string;
+    name: string;
+    userId: string;
+}
+export interface Credentials {
+    figmaAuth?: FigmaAuth;
+    builderPublicKey?: string;
+    builderPrivateKey?: string;
+}
+export declare const isCI: (args: FigmaArgs) => boolean;
+export declare const getCredentials: (sys: DevToolsSys, args: FigmaArgs, opts: CredentialsOptions) => Promise<{
+    figmaAuth: FigmaAuth | undefined;
+    builderPublicKey: string | undefined;
+    builderPrivateKey: string | undefined;
+}>;
+export declare function getFigmaAuth(): Promise<FigmaAuth>;
+export declare function getBuilderAuth(sys: DevToolsSys): Promise<BuilderAuth>;

package/types/cli/download.d.ts

@@ -0,0 +1,10 @@
+import type { FigmaArgs } from "./figma";
+import type { DevToolsSys } from "../types";
+import { type FigmaBuilderLink } from "./figma-publish";
+interface KVGetRequest {
+    privateKey: string;
+    spaceId: string;
+}
+export declare const runFigmaMigrate: (sys: DevToolsSys, args: FigmaArgs) => Promise<void>;
+export declare function getBuilderSpaceFigmaLinks(kvReq: KVGetRequest): Promise<FigmaBuilderLink[]>;
+export {};

package/types/cli/figma-publish.d.ts

@@ -0,0 +1,39 @@
+import type { DevToolsSys, ExportType } from "../types";
+import type { FigmaArgs } from "./figma";
+export interface FigmaBuilderLink {
+    builderName: string;
+    figmaName: string;
+    figmaKey: string;
+    inputMapper?: string;
+    originalInputMapper?: string;
+    exportType?: ExportType;
+    importName?: string;
+    importPath?: string;
+    source: string;
+}
+export declare const runFigmaPublish: (sys: DevToolsSys, args: FigmaArgs) => Promise<void>;
+export declare const FIGMA_CONNECT_CALL = "figmaMapping";
+export declare function findAllMappingFiles(sys: DevToolsSys): Promise<string[]>;
+export interface BuilderSpace {
+    privateKey: string;
+    spaceId: string;
+    userId: string;
+    name?: string;
+}
+interface KVGetRequest extends BuilderSpace {
+    docId: string;
+}
+interface KVPutRequest extends KVGetRequest {
+    /**
+     * Must be an object but not an array. TS is a fool sometimes.
+     * https://stackoverflow.com/a/70448528/1520787
+     */
+    data: Record<string, any> & {
+        length?: never;
+    };
+}
+export interface FigmaBuilderData {
+    figmaBuilderLinks: FigmaBuilderLink[];
+}
+export declare function putBuilderSpaceKv(kvReq: KVPutRequest): Promise<void>;
+export {};

package/types/cli/figma.d.ts

@@ -0,0 +1,9 @@
+import type { DevToolsSys } from "../types";
+export interface FigmaArgs {
+    privateKey?: string;
+    figmaToken?: string;
+    ci?: boolean;
+    help?: boolean;
+    _: string[];
+}
+export declare const runFigmaCommand: (sys: DevToolsSys, subCommand: string, args: FigmaArgs) => Promise<void>;

package/types/cli/help.d.ts

@@ -0,0 +1 @@
+export declare function printHelp(): void;

package/types/cli/prettier.d.ts

@@ -0,0 +1 @@
+export declare function formatCode(code: string): Promise<string>;

package/types/figma/index.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="@figma/plugin-typings" />
+export type FigmaNodeType = "COMPONENT" | "ELLIPSE" | "FRAME" | "GROUP" | "INSTANCE" | "LINE" | "POLYGON" | "RECTANGLE" | "STAR" | "TEXT" | "VECTOR";
+export interface FigmaComponentInput {
+    id: string;
+    name: string;
+    value?: any;
+    type: string;
+    baseType: "text" | "variant" | "boolean" | "slot";
+    variantOptions?: string[];
+    isDefault: boolean;
+    ref?: string;
+}
+export interface FigmaNode {
+    "@type": "passedNode";
+    $id: string;
+    $name: string;
+    $type: FigmaNodeType;
+    $inputs: readonly FigmaComponentInput[];
+    $componentName?: string;
+    $rawNode: SceneNode;
+    /** Represents the text content of the node and its descendants */
+    $textContent: string;
+    /** URL to the rasterized image of this node */
+    $imageUrl: string;
+    $children: readonly FigmaNode[];
+    /** Recursively finds the first node that matches the callback */
+    $findOne(callback: (node: SceneNode) => boolean): FigmaNode | undefined;
+    /** Recursively finds the first figma child with the given name */
+    $findOneByName(name: string | RegExp): FigmaNode | undefined;
+    /** @deprecated Use $type instead */
+    type: FigmaNodeType;
+    /** @deprecated - */
+    props: {};
+    /** @deprecated - */
+    key: string | null;
+}
+export interface BaseFigmaProps {
+    $id: string;
+    $name: string;
+    $type: FigmaNodeType;
+    $inputs: readonly FigmaComponentInput[];
+    $componentName?: string;
+    /** Represents the text content of the node and its descendants */
+    $textContent: string;
+    $css: Readonly<Record<string, string>>;
+    /** URL to the rasterized image of this node */
+    $imageUrl: string;
+    /** Direct children of the root component node or instance */
+    $children: readonly FigmaNode[];
+    /** Recursively finds the first figma child with the given name */
+    $findOneByName(name: string | RegExp): FigmaNode | undefined;
+    /** Recursively finds the first node that matches the callback */
+    $findOne(callback: (node: SceneNode) => boolean): FigmaNode | undefined;
+}
+interface FigmaProps extends BaseFigmaProps {
+    [key: string]: any;
+}
+export interface FigmaMappingWithKeyMapper<T extends BaseFigmaProps> {
+    url?: string;
+    componentKey: string;
+    mapper?: (figma: T) => any;
+}
+export interface FigmaGenericMapper {
+    genericMapper: (figma: FigmaProps) => any;
+}
+export interface FigmaTokenMapper {
+    designTokenMapper: (token: string) => string | undefined | boolean;
+}
+export declare function figmaMapping<T extends BaseFigmaProps = FigmaProps>(_config: FigmaMappingWithKeyMapper<T> | FigmaGenericMapper | FigmaTokenMapper): void;
+export {};

package/types/figma/jsx-runtime/index.d.cts

@@ -0,0 +1,2 @@
+export function jsx(): null;
+export function jsxs(): null;

package/types/figma/jsx-runtime/index.d.ts

@@ -0,0 +1,2 @@
+export function jsx(): null;
+export function jsxs(): null;