@developer_tribe/react-builder 0.1.2 → 0.1.7

package/dist/build-components/Button/Button.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { ButtonProps } from './ButtonProps';
+import type { ButtonPropsGenerated } from './ButtonProps.generated';
 type ButtonComponentProps = {
-    node: NodeData<ButtonProps['attributes']>;
+    node: NodeData<ButtonPropsGenerated['attributes']>;
 };
 declare function Button({ node }: ButtonComponentProps): string;
 declare const _default: React.MemoExoticComponent<typeof Button>;

package/dist/build-components/Carousel/Carousel.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { CarouselProps } from './CarouselProps';
+import type { CarouselPropsGenerated } from './CarouselProps.generated';
 type CarouselComponentProps = {
-    node: NodeData<CarouselProps['attributes']>;
+    node: NodeData<CarouselPropsGenerated['attributes']>;
 };
 declare function Carousel({ node }: CarouselComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Carousel>;

package/dist/build-components/CarouselButtons/CarouselButtons.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { CarouselButtonsProps } from './CarouselButtonsProps';
+import type { CarouselButtonsPropsGenerated } from './CarouselButtonsProps.generated';
 type CarouselButtonsComponentProps = {
-    node: NodeData<CarouselButtonsProps['attributes']>;
+    node: NodeData<CarouselButtonsPropsGenerated['attributes']>;
 };
 declare function CarouselButtons({ node }: CarouselButtonsComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CarouselButtons>;

package/dist/build-components/CarouselDots/CarouselDots.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { CarouselDotsProps } from './CarouselDotsProps';
+import type { CarouselDotsPropsGenerated } from './CarouselDotsProps.generated';
 type CarouselDotsComponentProps = {
-    node: NodeData<CarouselDotsProps['attributes']>;
+    node: NodeData<CarouselDotsPropsGenerated['attributes']>;
 };
 declare function CarouselDots({ node }: CarouselDotsComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CarouselDots>;

package/dist/build-components/CarouselItem/CarouselItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { CarouselItemProps } from './CarouselItemProps';
+import type { CarouselItemPropsGenerated } from './CarouselItemProps.generated';
 type CarouselItemComponentProps = {
-    node: NodeData<CarouselItemProps['attributes']>;
+    node: NodeData<CarouselItemPropsGenerated['attributes']>;
 };
 export declare function CarouselItem({ node }: CarouselItemComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CarouselItem>;

package/dist/build-components/CarouselProvider/CarouselProvider.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { CarouselProviderProps } from './CarouselProviderProps';
+import type { CarouselProviderPropsGenerated } from './CarouselProviderProps.generated';
 type CarouselProviderComponentProps = {
-    node: NodeData<CarouselProviderProps['attributes']>;
+    node: NodeData<CarouselProviderPropsGenerated['attributes']>;
 };
 export declare const carouselContext: React.Context<any>;
 declare function CarouselProvider({ node }: CarouselProviderComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/build-components/Image/Image.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { ImageProps } from './ImageProps';
+import type { ImagePropsGenerated } from './ImageProps.generated';
 type ImageComponentProps = {
-    node: NodeData<ImageProps['attributes']>;
+    node: NodeData<ImagePropsGenerated['attributes']>;
 };
 declare function Image({ node }: ImageComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Image>;

package/dist/build-components/Onboard/Onboard.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardProps } from './OnboardProps';
+import type { OnboardPropsGenerated } from './OnboardProps.generated';
 type OnboardComponentProps = {
-    node: NodeData<OnboardProps['attributes']>;
+    node: NodeData<OnboardPropsGenerated['attributes']>;
 };
 declare function Onboard({ node }: OnboardComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Onboard>;

package/dist/build-components/OnboardBoardTitle/OnboardBoardTitle.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardBoardTitleProps } from './OnboardBoardTitleProps';
+import type { OnboardBoardTitlePropsGenerated } from './OnboardBoardTitleProps.generated';
 type OnboardBoardTitleComponentProps = {
-    node: NodeData<OnboardBoardTitleProps['attributes']>;
+    node: NodeData<OnboardBoardTitlePropsGenerated['attributes']>;
 };
 declare function OnboardBoardTitle({ node }: OnboardBoardTitleComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardBoardTitle>;

package/dist/build-components/OnboardButton/OnboardButton.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardButtonProps } from './OnboardButtonProps';
+import type { OnboardButtonPropsGenerated } from './OnboardButtonProps.generated';
 type OnboardButtonComponentProps = {
-    node: NodeData<OnboardButtonProps['attributes']>;
+    node: NodeData<OnboardButtonPropsGenerated['attributes']>;
 };
 declare function OnboardButton({ node }: OnboardButtonComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardButton>;

package/dist/build-components/OnboardButtons/OnboardButtons.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardButtonsProps } from './OnboardButtonsProps';
+import type { OnboardButtonsPropsGenerated } from './OnboardButtonsProps.generated';
 type OnboardButtonsComponentProps = {
-    node: NodeData<OnboardButtonsProps['attributes']>;
+    node: NodeData<OnboardButtonsPropsGenerated['attributes']>;
 };
 declare function OnboardButtons({ node }: OnboardButtonsComponentProps): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: React.MemoExoticComponent<typeof OnboardButtons>;

package/dist/build-components/OnboardExpandingDot/OnboardExpandingDot.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardExpandingDotProps } from './OnboardExpandingDotProps';
+import type { OnboardExpandingDotPropsGenerated } from './OnboardExpandingDotProps.generated';
 type OnboardExpandingDotComponentProps = {
-    node: NodeData<OnboardExpandingDotProps['attributes']>;
+    node: NodeData<OnboardExpandingDotPropsGenerated['attributes']>;
 };
 declare function OnboardExpandingDot({ node }: OnboardExpandingDotComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardExpandingDot>;

package/dist/build-components/OnboardFooter/OnboardFooter.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardFooterProps } from './OnboardFooterProps';
+import type { OnboardFooterPropsGenerated } from './OnboardFooterProps.generated';
 type OnboardFooterComponentProps = {
-    node: NodeData<OnboardFooterProps['attributes']>;
+    node: NodeData<OnboardFooterPropsGenerated['attributes']>;
 };
 declare function OnboardFooter({ node }: OnboardFooterComponentProps): string;
 declare const _default: React.MemoExoticComponent<typeof OnboardFooter>;

package/dist/build-components/OnboardImage/OnboardImage.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardImageProps } from './OnboardImageProps';
+import type { OnboardImagePropsGenerated } from './OnboardImageProps.generated';
 type OnboardImageComponentProps = {
-    node: NodeData<OnboardImageProps['attributes']>;
+    node: NodeData<OnboardImagePropsGenerated['attributes']>;
 };
 declare function OnboardImage({ node }: OnboardImageComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardImage>;

package/dist/build-components/OnboardItem/OnboardItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardItemProps } from './OnboardItemProps';
+import type { OnboardItemPropsGenerated } from './OnboardItemProps.generated';
 type OnboardItemComponentProps = {
-    node: NodeData<OnboardItemProps['attributes']>;
+    node: NodeData<OnboardItemPropsGenerated['attributes']>;
 };
 declare function OnboardItem({ node }: OnboardItemComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardItem>;

package/dist/build-components/OnboardProvider/OnboardProvider.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardProviderProps } from './OnboardProviderProps';
+import type { OnboardProviderPropsGenerated } from './OnboardProviderProps.generated';
 type OnboardProviderComponentProps = {
-    node: NodeData<OnboardProviderProps['attributes']>;
+    node: NodeData<OnboardProviderPropsGenerated['attributes']>;
 };
 declare function OnboardProvider({ node }: OnboardProviderComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardProvider>;

package/dist/build-components/OnboardSubtitle/OnboardSubtitle.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { OnboardSubtitleProps } from './OnboardSubtitleProps';
+import type { OnboardSubtitlePropsGenerated } from './OnboardSubtitleProps.generated';
 type OnboardSubtitleComponentProps = {
-    node: NodeData<OnboardSubtitleProps['attributes']>;
+    node: NodeData<OnboardSubtitlePropsGenerated['attributes']>;
 };
 declare function OnboardSubtitle({ node }: OnboardSubtitleComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OnboardSubtitle>;

package/dist/build-components/RenderNode.generated.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { Node } from '../index';
 declare function RenderNode({ node }: {
     node: Node;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
 declare const _default: React.MemoExoticComponent<typeof RenderNode>;
 export default _default;

package/dist/build-components/Text/Text.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { NodeData } from '../../types/Node';
-import type { TextProps } from './TextProps';
+import type { TextPropsGenerated } from './TextProps.generated';
 type TextComponentProps = {
-    node: NodeData<TextProps['attributes']>;
+    node: NodeData<TextPropsGenerated['attributes']>;
 };
 declare function Text({ node }: TextComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Text>;

package/dist/build-components/View/View.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { ViewProps } from './ViewProps';
+import type { ViewPropsGenerated } from './ViewProps.generated';
 import { NodeData } from '../../types/Node';
 type ViewComponentProps = {
-    node: NodeData<ViewProps['attributes']>;
+    node: NodeData<ViewPropsGenerated['attributes']>;
 };
 export declare function View({ node }: ViewComponentProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof View>;

package/dist/build-components/other.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { Node } from '../types/Node';
+export declare function other(type: string, node: Node): React.ReactNode;

package/dist/utils/generateRandomKeyForNode.d.ts

@@ -0,0 +1 @@
+export declare function generateRandomKeyForNode(type: string): string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.2",
-  "private": false,
+  "version": "0.1.7",
   "type": "module",
+  "restricted": true,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,11 @@
     "typecheck": "tsc --noEmit",
     "example:dev": "npm --prefix example run dev",
     "example:build": "npm --prefix example run build",
-    "example:preview": "npm --prefix example run preview"
+    "example:preview": "npm --prefix example run preview",
+    "builder": "node ./scripts/public/bin.js"
+  },
+  "bin": {
+    "builder": "./scripts/public/bin.js"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -50,7 +54,8 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.93.2",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1"
+    "typescript-eslint": "^8.44.1",
+    "yargs": "^18.0.0"
   },
   "engines": {
     "node": ">=18"

package/scripts/{build-components.js → prebuild/build-components.js}

@@ -105,7 +105,9 @@ async function getAllEntriesInComponentsRoot() {
   return await fs
     .readdir(COMPONENTS_ROOT, { withFileTypes: true })
     .then(dirents => {
-      return dirents.filter(d => d.name !== 'RenderNode.generated.tsx');
+      return dirents.filter(
+        d => d.name !== 'RenderNode.generated.tsx' && d.name !== 'other.ts'
+      );
     });
 }
 
@@ -212,26 +214,9 @@ async function validatePatternJson(componentDir, componentName) {
 // (Moved to Actions section) ensurePropsTs
 
 /**
- * 6) Check <Name>Props.ts is valid if it already exists (in the component folder)
+ * 6) Custom <Name>Props.ts are deprecated; validation removed.
  */
-async function validateExistingPropsTs(componentDir, componentName) {
-  const filePath = path.join(componentDir, `${componentName}Props.ts`);
-  const exists = await fs
-    .stat(filePath)
-    .then(() => true)
-    .catch(() => false);
-  if (!exists) return; // Created in step 5 if missing
-
-  const content = await fs.readFile(filePath, 'utf8');
-  const hasExportedInterface = new RegExp(
-    `export\\s+interface\\s+${componentName}Props\\s+extends\\s+${componentName}PropsGenerated`
-  ).test(content);
-  if (!hasExportedInterface) {
-    throw new Error(
-      `${filePath} must export interface '${componentName}Props' extending '${componentName}PropsGenerated'`
-    );
-  }
-}
+// (intentionally left blank)
 
 /**
  * 7) Create <Name>.tsx inside its component folder
@@ -282,7 +267,6 @@ async function validateExistingComponentTsx(componentDir, componentName) {
  */
 async function validateComponent(componentDir, componentName) {
   const patternJson = await validatePatternJson(componentDir, componentName);
-  await validateExistingPropsTs(componentDir, componentName);
   await validateExistingComponentTsx(componentDir, componentName);
   return { componentDir, componentName, patternJson };
 }
@@ -382,7 +366,7 @@ async function createGeneratedProps(componentDir, componentName, patternJson) {
   await fs.writeFile(filePath, formatted, 'utf8');
 }
 
-/** Create <Name>Props.ts if it doesn't exist inside the component folder */
+/** Delete <Name>Props.ts if it exists inside the component folder */
 async function ensurePropsTs(componentDir, componentName) {
   await ensureDir(componentDir);
   const fileName = `${componentName}Props.ts`;
@@ -391,13 +375,8 @@ async function ensurePropsTs(componentDir, componentName) {
     .stat(filePath)
     .then(() => true)
     .catch(() => false);
-  if (exists) return; // Will be validated in step 6
-
-  const content =
-    `import type { ${componentName}PropsGenerated } from './${componentName}Props.generated';\n\n` +
-    `export interface ${componentName}Props extends ${componentName}PropsGenerated {\n}\n`;
-  const formatted = await formatWithPrettier(content);
-  await fs.writeFile(filePath, formatted, 'utf8');
+  if (!exists) return;
+  await fs.unlink(filePath);
 }
 
 /** Create <Name>.tsx inside its component folder */
@@ -536,7 +515,6 @@ async function run() {
     await createComponentTsx(componentDir, componentName);
 
     // Final sanity validations
-    await validateExistingPropsTs(componentDir, componentName);
     await validateExistingComponentTsx(componentDir, componentName);
   }
 

package/scripts/public/bin.js

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import fs from 'fs';
+import yargs from 'yargs/yargs';
+import { hideBin } from 'yargs/helpers';
+import Path from 'path';
+import { fileURLToPath } from 'url';
+
+const cli = yargs(hideBin(process.argv));
+
+const __dirname = Path.dirname(fileURLToPath(import.meta.url));
+const directoryPath = Path.join(__dirname, 'scripts');
+
+const getFolderNames = dirPath => {
+  try {
+    const items = fs.readdirSync(dirPath, { withFileTypes: true });
+
+    const folderNames = items
+      .filter(item => item.isDirectory()) // Keep only directories
+      .map(folder => folder.name); // Extract folder names
+
+    return folderNames;
+  } catch (err) {
+    console.error(`Error reading directory: ${err.message}`);
+    return [];
+  }
+};
+const folderNames = getFolderNames(directoryPath);
+
+folderNames.forEach(folderName => {
+  const infoPath = Path.join(directoryPath, folderName, 'info.json');
+  const res = fs.readFileSync(infoPath, 'utf8');
+  const json = JSON.parse(res.toString('utf8'));
+  cli.command(
+    folderName,
+    json.description,
+    y => {
+      Object.entries(json.options ?? {}).forEach(([key, value]) => {
+        y.option(key, value);
+      });
+    },
+    args => {
+      const keys = Object.keys(json.options ?? {});
+      const dynamicArgs = Object.entries(args ?? {})
+        .filter(([key]) => keys.includes(key)) // Only accept specified keys
+        .map(([key, value]) => `--${key} "${value}"`)
+        .join(' ');
+      execSync(
+        `node ${Path.join(directoryPath, folderName, 'index.js')} ${dynamicArgs}`,
+        {
+          stdio: 'inherit',
+        }
+      );
+    }
+  );
+});
+cli.demandCommand(1, 'You need to specify a command').help().strict().parse();

package/scripts/public/scripts/build/index.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+import yargs from 'yargs/yargs';
+import { hideBin } from 'yargs/helpers';
+import Path from 'path';
+import { fileURLToPath } from 'url';
+import { checkPathExists } from './utils/checkPathExists.js';
+import { getAllComponents } from './utils/getAllComponents.js';
+import { checkFolderAndFilesValid } from './utils/checkFolderAndFilesValid.js';
+import { createMissingFoldersAndFiles } from './utils/createMissingFoldersAndFiles.js';
+import { createRenderNodeGenerated } from './utils/createRenderNodeGenerated.js';
+
+const argv = yargs(hideBin(process.argv)).argv;
+export const args = argv;
+const builderPath = args.path || '/node_modules/@developer_tribe/react-builder';
+const targetPath = process.cwd();
+const selectedComponents = args.components || [];
+
+function run() {
+  const builderComponentsPath = Path.join(
+    builderPath,
+    'src',
+    'build-components'
+  );
+  checkPathExists(builderComponentsPath);
+  const components = getAllComponents(builderComponentsPath);
+  for (const component of components) {
+    if (!selectedComponents.includes(component)) {
+      console.error(`Component ${component} not found`);
+      process.exit(1);
+    }
+  }
+  checkFolderAndFilesValid(targetPath, selectedComponents);
+  createMissingFoldersAndFiles(targetPath, selectedComponents);
+  createRenderNodeGenerated(
+    builderComponentsPath,
+    targetPath,
+    selectedComponents
+  );
+}
+
+run();

package/scripts/public/scripts/build/info.json

@@ -0,0 +1,17 @@
+{
+  "description": "command for build",
+  "options": {
+    "path": {
+      "alias": "p",
+      "type": "string",
+      "describe": "path of project",
+      "demandOption": false
+    },
+    "components": {
+      "alias": "c",
+      "type": "array",
+      "describe": "component names",
+      "demandOption": false
+    }
+  }
+}

package/scripts/public/scripts/build/utils/checkFolderAndFilesValid.js

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import Path from 'path';
+
+// Ensure target build-components folder contains only folders from components list; create missing ones
+export function checkFolderAndFilesValid(targetRootPath, components) {
+  const buildComponentsTarget = Path.join(
+    targetRootPath,
+    'src',
+    'build-components'
+  );
+  if (!fs.existsSync(buildComponentsTarget)) {
+    fs.mkdirSync(buildComponentsTarget, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(buildComponentsTarget, {
+    withFileTypes: true,
+  });
+  const entryNames = new Set(
+    entries.filter(e => e.isDirectory()).map(e => e.name)
+  );
+
+  // Remove folders not in components
+  for (const name of Array.from(entryNames)) {
+    if (
+      !components.includes(name) &&
+      name !== 'RenderNode.generated.tsx' &&
+      name !== 'other.ts'
+    ) {
+      const full = Path.join(buildComponentsTarget, name);
+      fs.rmSync(full, { recursive: true, force: true });
+    }
+  }
+
+  // Create missing component folders
+  for (const component of components) {
+    const dir = Path.join(buildComponentsTarget, component);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  }
+}

package/scripts/public/scripts/build/utils/checkPathExists.js

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+export function checkPathExists(path) {
+  if (!fs.existsSync(path)) {
+    throw new Error(`Path does not exist: ${path}`);
+  }
+}
+
+// no default export

package/scripts/public/scripts/build/utils/createMissingFoldersAndFiles.js

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import Path from 'path';
+
+function toPropsName(name) {
+  return `${name}Props`;
+}
+
+// Create folders and base component files if missing
+export function createMissingFoldersAndFiles(targetRootPath, components) {
+  const buildComponentsTarget = Path.join(
+    targetRootPath,
+    'src',
+    'build-components'
+  );
+  if (!fs.existsSync(buildComponentsTarget)) {
+    fs.mkdirSync(buildComponentsTarget, { recursive: true });
+  }
+
+  // Ensure fallback helper exists
+  const otherPath = Path.join(buildComponentsTarget, 'other.ts');
+  if (!fs.existsSync(otherPath)) {
+    const otherContent = `import React from 'react';
+import type { Node } from '@developer_tribe/react-builder';
+
+export function other(type: string, node: Node): React.ReactNode {
+  return null;
+}
+`;
+    fs.writeFileSync(otherPath, otherContent, 'utf8');
+  }
+
+  for (const component of components) {
+    const dir = Path.join(buildComponentsTarget, component);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    // component tsx
+    const tsxPath = Path.join(dir, `${component}.tsx`);
+    if (!fs.existsSync(tsxPath)) {
+      const propsName = toPropsName(component);
+      const content = `import React from 'react';
+import type { ${propsName} } from '@developer_tribe/react-builder';
+
+function ${component}(props: { node: any }) {
+  return "hello world";
+}
+
+export default React.memo(${component});
+`;
+      fs.writeFileSync(tsxPath, content, 'utf8');
+    }
+  }
+}