diff --git a/src/bb-components-generate.ts b/src/bb-components-generate.ts index 287dabe8..09c8b252 100644 --- a/src/bb-components-generate.ts +++ b/src/bb-components-generate.ts @@ -20,49 +20,112 @@ const name: string = args[0]; // eslint-disable-next-line no-void void (async (): Promise => { 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:
Hello World
, + jsx: (() => { + const { useText } = B; + const { content } = options; + return
{useText(content)}
; + })(), 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')), ]); })();