Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(generation): generate playgrounds for guides #3098

Merged
merged 10 commits into from
Aug 28, 2023
Next Next commit
Refactor prompts to allow conditional prompting
  • Loading branch information
mapsandapps committed Aug 24, 2023
commit 37aa85614228a88e9cc9905d47bfa1cd507edd12
106 changes: 54 additions & 52 deletions _templates/playground/new/index.js
Original file line number Diff line number Diff line change
@@ -5,60 +5,62 @@ const changeCase = require('change-case');
//
module.exports = {
prompt: ({ inquirer }) => {
const questions = [
{
type: 'input',
name: 'name',
message: 'Which component is this playground for?',
initial: 'ion-button',
validate(value) {
return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'";
return inquirer
.prompt([
{
type: 'input',
name: 'name',
message: 'Which component is this playground for?',
initial: 'ion-button',
validate(value) {
return value.match(/^ion-[a-z/-]*[a-z]+$/)
? true
: "Component name must be kebab-case and begin with 'ion-'";
},
},
},
{
type: 'input',
name: 'path',
message: 'What should the playground path be?',
hint: 'e.g. `basic` or `theming/colors`',
validate(value) {
return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
? true
: "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
{
type: 'input',
name: 'path',
message: 'What should the playground path be?',
hint: 'e.g. `basic` or `theming/colors`',
validate(value) {
return value.match(/^[a-z]+[a-z/-]*[a-z]+$/)
? true
: "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'";
},
},
},
{
type: 'select',
name: 'version',
message: 'Select the Ionic Framework version for the playground',
initial: '7',
choices: ['6', '7'],
},
{
type: 'toggle',
name: 'css',
message: 'Generate custom CSS files?',
enabled: 'Yes',
disabled: 'No',
},
{
type: 'toggle',
name: 'angular_ts',
message: 'Generate an Angular TypeScript file?',
enabled: 'Yes',
disabled: 'No',
},
];

return inquirer.prompt(questions).then((answers) => {
const componentName = changeCase.pascal(answers.path.split('/').pop());
console.log(
`\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
'ion-',
''
)}/${answers.path}/index.md';\n\n<${componentName} />\n`
);
{
type: 'select',
name: 'version',
message: 'Select the Ionic Framework version for the playground',
initial: '7',
choices: ['6', '7'],
},
{
type: 'toggle',
name: 'css',
message: 'Generate custom CSS files?',
enabled: 'Yes',
disabled: 'No',
},
{
type: 'toggle',
name: 'angular_ts',
message: 'Generate an Angular TypeScript file?',
enabled: 'Yes',
disabled: 'No',
},
])
.then((answers) => {
const componentName = changeCase.pascal(answers.path.split('/').pop());
console.log(
`\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace(
'ion-',
''
)}/${answers.path}/index.md';\n\n<${componentName} />\n`
);

return answers;
});
return answers;
});
},
};