diff --git a/cli/generate-component.mjs b/cli/generate-component.mjs index 00b1a79..60bc89f 100644 --- a/cli/generate-component.mjs +++ b/cli/generate-component.mjs @@ -1,5 +1,5 @@ import chalk from 'chalk'; -import inquirer from 'inquirer'; +import { select, input, confirm } from '@inquirer/prompts'; import prompts from './prompts.mjs'; import { fetchCTFContentTypes, scaffoldComponentFiles } from './utils.mjs'; @@ -20,19 +20,15 @@ const contentTypesList = await fetchCTFContentTypes( prompts.promptContentType.choices ); -inquirer - .prompt([ - { - ...prompts.promptContentType, - choices: contentTypesList, - }, - ]) - .then(({ promptContentType: contentType }) => { - if (contentType === prompts.promptContentType.choices[0]) { - inquirer.prompt([prompts.promptComponentName]).then(({ promptComponentName: componentName }) => { - scaffoldComponentFiles(componentName, false); - }); - } else { - scaffoldComponentFiles(contentType, true); - } - }); +const existentContentType = await select({ + ...prompts.promptContentType, + choices: contentTypesList, +}); +const confirmNewUIComponent = await confirm(prompts.promptNewUIComponent); + +if (existentContentType === prompts.promptContentType.choices[0]) { + const newContentType = await input(prompts.promptComponentName); + scaffoldComponentFiles(newContentType, false, confirmNewUIComponent); +} else { + scaffoldComponentFiles(existentContentType, true, confirmNewUIComponent); +} diff --git a/cli/prompts.mjs b/cli/prompts.mjs index 60336aa..c877006 100644 --- a/cli/prompts.mjs +++ b/cli/prompts.mjs @@ -1,21 +1,16 @@ const prompts = { promptContentType: { - name: 'promptContentType', - type: 'list', message: 'Please choose a CTF content type to generate the component for:', choices: ['---No content type yet---'], + pageSize: 10, }, promptComponentName: { - name: 'promptComponentName', - type: 'input', message: 'Please input the component name (use kebab case):', - validate: (input) => { - if (!input || input === '') { - return 'Please provide a component name.'; - } else { - return true; - } - }, + required: true, + }, + promptNewUIComponent: { + default: true, + message: 'Would you like to generate a matching UI component for your content type?', }, }; diff --git a/cli/scaffolds/components/{{hyphenCase name}}-client.{{ext}} b/cli/scaffolds/components/{{hyphenCase name}}-client.{{ext}} index 2d03fad..21a2963 100644 --- a/cli/scaffolds/components/{{hyphenCase name}}-client.{{ext}} +++ b/cli/scaffolds/components/{{hyphenCase name}}-client.{{ext}} @@ -3,15 +3,15 @@ import { ResultOf } from 'gql.tada'; import { {{pascalCase name}}Fragment } from '#/components/{{hyphenCase name}}/{{hyphenCase name}}'; -import { {{pascalCase name}} } from '#/components/ui/{{hyphenCase name}}'; - +{{#if includeUI}}import { {{pascalCase name}} } from '#/components/ui/{{hyphenCase name}}';{{/if}} import { useComponentPreview } from '../hooks/use-component-preview'; export const {{pascalCase name}}Client: React.FC<{ data: ResultOf; }> = (props) => { const { data: originalData } = props; - const { data, addAttributes } = useComponentPreview(originalData); + const { data{{#if includeUI}}, addAttributes{{/if}} } = useComponentPreview(originalData); - return <{{pascalCase name}} id={data.sys.id} addAttributes={addAttributes} />; +{{#if includeUI}} return <{{pascalCase name}} id={data.sys.id} addAttributes={addAttributes} />;{{/if~}} +{{~#unless includeUI}} return
{data.sys.id}
;{{/unless}} }; diff --git a/cli/utils.mjs b/cli/utils.mjs index a4bb8bb..40c731e 100644 --- a/cli/utils.mjs +++ b/cli/utils.mjs @@ -51,17 +51,23 @@ export const fetchCTFContentTypes = async (spaceID, envID, token, contentTypesPl Generates component files using content type or custom input string. Updates mappings.ts with the new component. */ -export const scaffoldComponentFiles = (contentType, updateMappings) => { +export const scaffoldComponentFiles = (contentType, updateMappings, includeUI) => { const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); + const templates = [path.join(__dirname, 'scaffolds', 'components')]; + + if (includeUI) { + templates.push(path.join(__dirname, 'scaffolds', 'ui')); + } // Scaffold component files. const config = { name: contentType, data: { + includeUI, ext: 'tsx', }, - templates: [path.join(__dirname, 'scaffolds', 'components'), path.join(__dirname, 'scaffolds', 'ui')], + templates, createSubFolder: true, output: (fullPath, baseDir, baseName) => { let outputPath = '../components'; diff --git a/package.json b/package.json index 52f9b76..c0a02bf 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@contentful/content-source-maps": "^0.11.5", "@contentful/live-preview": "^4.5.13", "@contentful/rich-text-react-renderer": "^15.17.1", + "@inquirer/prompts": "^7.0.1", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-slot": "^1.0.2", @@ -100,7 +101,6 @@ "eslint-plugin-storybook": "^0.8.0", "eslint-plugin-tailwindcss": "^3.17.5", "husky": "^8.0.3", - "inquirer": "^12.0.1", "lint-staged": "^14.0.1", "ora": "^8.1.0", "postcss": "^8.4.27", diff --git a/yarn.lock b/yarn.lock index 9e24968..adc109e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9130,19 +9130,6 @@ inquirer@8.2.5: through "^2.3.6" wrap-ansi "^7.0.0" -inquirer@^12.0.1: - version "12.0.1" - resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-12.0.1.tgz#d8c491e3f3c84e26a343f82965ca9243e8c8b6f0" - integrity sha512-o11Jc2Go6wDZA17SWofiJ6L8k7mB8lsdKB/QY0bI+8e+ATiAvQzmROjqoTd1iAY8RI6N/EDcQcxbQa4JYviDWg== - dependencies: - "@inquirer/core" "^10.0.1" - "@inquirer/prompts" "^7.0.1" - "@inquirer/type" "^3.0.0" - ansi-escapes "^4.3.2" - mute-stream "^2.0.0" - run-async "^3.0.0" - rxjs "^7.8.1" - internal-slot@^1.0.4, internal-slot@^1.0.5, internal-slot@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802" @@ -12314,11 +12301,6 @@ run-async@^2.4.0: resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ== -run-async@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz#42a432f6d76c689522058984384df28be379daad" - integrity sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q== - run-parallel@^1.1.9: version "1.2.0" resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee" @@ -12326,7 +12308,7 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" -rxjs@^7.5.1, rxjs@^7.5.5, rxjs@^7.8.1: +rxjs@^7.5.1, rxjs@^7.5.5: version "7.8.1" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==