feat: create tsx prefab on component generate (#379)

* feat: create tsx prefab on component generate

* fix: small variable name change

* fix: added regex on component name

* fix: perfect component creation

src/bb-components-generate.ts

@@ -20,49 +20,112 @@ const name: string = args[0];
 // eslint-disable-next-line no-void
 void (async (): Promise<void> => {
   await checkUpdateAvailableCLI();
-  if (name.includes(' ')) {
-    throw new Error(chalk.red(`\nName cannot contain spaces\n`));
+  if (!/^[a-z][a-z0-9]*$/i.test(name)) {
+    throw Error(
+      chalk.red(`\nName cannot contain special characters or spaces\n`),
+    );
   }
 
-  if (await pathExists(`src/prefabs/${name}.js`)) {
-    throw new Error(chalk.red(`\nPrefab ${name} already exists\n`));
+  if (await pathExists(`src/prefabs/${name}.tsx`)) {
+    throw Error(chalk.red(`\nPrefab ${name} already exists\n`));
   }
 
   if (await pathExists(`src/components/${name}.js`)) {
-    throw new Error(chalk.red(`\nComponent ${name} already exists\n`));
+    throw Error(chalk.red(`\nComponent ${name} already exists\n`));
   }
+  const capitalisedName = name.charAt(0).toUpperCase() + name.slice(1);
 
-  const prefab = `
-(() => ({
-  name: '${name}',
-  icon: 'TitleIcon',
+  const prefab = `import { prefab, Icon } from '@betty-blocks/component-sdk';
+
+import { ${capitalisedName} } from './structures/${capitalisedName}';
+
+const attributes = {
   category: 'CONTENT',
-  structure: [
-    {
-      name: '${name}',
-      options: [],
-      descendants: [],
-    },
-  ],
-}))();
-  `;
+  icon: Icon.TitleIcon,
+  keywords: [''],
+};
+
+export default prefab('${capitalisedName}', attributes, undefined, [${capitalisedName}({})]);
+
+`;
+
+  const structureIndex = `import { component, PrefabReference } from '@betty-blocks/component-sdk';
+import { Configuration } from '../Configuration';
+import {
+  ${name}Options as defaultOptions,
+  categories as defaultCategories,
+} from './options';
+
+export const ${capitalisedName} = (
+  config: Configuration,
+  descendants: PrefabReference[] = [],
+) => {
+  const options = { ...(config.options || defaultOptions) };
+  const style = { ...config.style };
+  const ref = config.ref ? { ...config.ref } : undefined;
+  const label = config.label ? config.label : undefined;
+  const optionCategories = config.optionCategories
+    ? { ...config.optionCategories }
+    : defaultCategories;
+
+  return component(
+    '${capitalisedName}',
+    { options, ref, style, label, optionCategories },
+    descendants,
+  );
+};
+`;
 
-  const component = `
-(() => ({
-  name: '${name}',
-  type: 'ROW',
+  const optionsIndex = `import { variable } from '@betty-blocks/component-sdk';
+import { advanced } from '../../advanced';
+
+export const categories = [
+  {
+    label: 'Advanced Options',
+    expanded: false,
+    members: ['dataComponentAttribute'],
+  },
+];
+
+export const ${name}Options = {
+  content: variable('Content', {
+    value: ['Hello world'],
+    configuration: { as: 'MULTILINE' },
+  }),
+
+  ...advanced('${capitalisedName}'),
+};
+
+`;
+
+  const component = `(() => ({
+  name: '${capitalisedName}',
+  type: 'CONTENT_COMPONENT',
   allowedTypes: [],
   orientation: 'HORIZONTAL',
-  jsx: <div className={classes.root}>Hello World</div>,
+  jsx: (() => {
+    const { useText } = B;
+    const { content } = options;
+    return <div className={classes.root}>{useText(content)}</div>;
+  })(),
   styles: () => () => ({
     root: {},
   }),
 }))();
-  `;
+
+`;
 
   await Promise.all([
-    outputFile(`src/prefabs/${name}.js`, prefab.trim()),
-    outputFile(`src/components/${name}.js`, component.trim()),
+    outputFile(
+      `src/prefabs/structures/${capitalisedName}/index.ts`,
+      structureIndex,
+    ),
+    outputFile(
+      `src/prefabs/structures/${capitalisedName}/options/index.ts`,
+      optionsIndex,
+    ),
+    outputFile(`src/prefabs/${name}.tsx`, prefab),
+    outputFile(`src/components/${name}.js`, component),
     console.log(chalk.green('The component has been generated')),
   ]);
 })();