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.

Sign up for GitHub

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

Jump to bottom

[K7] Add additional documentation snippets to KUI generator. #13076

Merged
merged 1 commit into from
Jul 24, 2017
Merged

[K7] Add additional documentation snippets to KUI generator. #13076

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 14 additions & 20 deletions ui_framework/generator-kui/component/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,28 +107,22 @@ module.exports = class extends Generator {
const componentName = this.config.vars.componentName;
const componentPath = this.config.componentPath;

if (!this.config.shouldMakeDirectory) {
this.log(chalk.white(`\n// Export component from component's index.js.`));
this.log(
`${chalk.magenta('export')} {\n` +
` ${componentName},\n` +
`} ${chalk.magenta('from')} ${chalk.cyan(`'./${this.config.name}'`)};`
);
}
this.log(chalk.white(`\n// Export component (e.. from component's index.js).`));
this.log(
`${chalk.magenta('export')} {\n` +
` ${componentName},\n` +
`} ${chalk.magenta('from')} ${chalk.cyan(`'./${this.config.name}'`)};`
);

if (!this.config.shouldMakeDirectory) {
this.log(chalk.white('\n// Import styles.'));
this.log(
`${chalk.magenta('@import')} ${chalk.cyan(`'./${this.config.name}'`)};`
);
}
this.log(chalk.white('\n// Import styles.'));
this.log(
`${chalk.magenta('@import')} ${chalk.cyan(`'${this.config.name}'`)};`
);

if (this.config.shouldMakeDirectory) {
this.log(chalk.white('\n// Import component styles into the root index.scss.'));
this.log(
`${chalk.magenta('@import')} ${chalk.cyan(`'./${this.config.name}/index'`)};`
);
}
this.log(chalk.white('\n// Import component styles into the root index.scss.'));
this.log(
`${chalk.magenta('@import')} ${chalk.cyan(`'./${this.config.name}/index'`)};`
);
};

this.log('------------------------------------------------');
Expand Down
82 changes: 53 additions & 29 deletions ui_framework/generator-kui/documentation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,21 @@ module.exports = class extends Generator {
}

prompting() {
const prompts = [{
let prompts = [{
message: 'What\'s the name of the component you\'re documenting? Use snake_case, please.',
name: 'name',
type: 'input',
store: true,
}];

if (this.fileType === 'demo') {
prompts.push({
message: `What's the name of the directory this demo should go in? (Within ui_framework/doc_site/src/views). Use snake_case, please.`,
name: 'folderName',
type: 'input',
store: true,
});

prompts.push({
message: 'What would you like to name this demo? Use snake_case, please.',
name: 'demoName',
Expand Down Expand Up @@ -60,15 +67,14 @@ module.exports = class extends Generator {
);
};

const writeDocumentationPageDemo = () => {
const fileName = config.demoName || config.name;
const writeDocumentationPageDemo = (fileName, folderName) => {
const componentExampleName = utils.makeComponentName(fileName, false);
const componentExamplePrefix = utils.lowerCaseFirstLetter(componentExampleName);
const componentName = utils.makeComponentName(config.name);

const path = DOCUMENTATION_PAGE_PATH;

const vars = config.demoVars = {
const vars = config.documentationVars = {
componentExampleName,
componentExamplePrefix,
componentName,
Expand All @@ -77,7 +83,7 @@ module.exports = class extends Generator {

const documentationPageDemoPath
= config.documentationPageDemoPath
= `${path}/${config.name}/${fileName}.js`;
= `${path}/${folderName}/${fileName}.js`;

this.fs.copyTpl(
this.templatePath('documentation_page_demo.js'),
Expand All @@ -92,7 +98,7 @@ module.exports = class extends Generator {

const path = DOCUMENTATION_PAGE_PATH;

const vars = config.sandboxVars = {
const vars = config.documentationVars = {
componentExampleName,
fileName,
};
Expand All @@ -116,11 +122,11 @@ module.exports = class extends Generator {
switch (this.fileType) {
case 'documentation':
writeDocumentationPage();
writeDocumentationPageDemo();
writeDocumentationPageDemo(config.name, config.name);
break;

case 'demo':
writeDocumentationPageDemo();
writeDocumentationPageDemo(config.demoName, config.folderName);
break;

case 'sandbox':
Expand All @@ -130,61 +136,79 @@ module.exports = class extends Generator {
}

end() {
const showImportDocumentationPageSnippet = () => {
const {
componentExampleName,
fileName,
} = this.config.demoVars;

this.log(chalk.white('\n// Import example into routes.js.'));
this.log(
`${chalk.magenta('import')} ${componentExampleName}Example\n` +
` ${chalk.magenta('from')} ${chalk.cyan(`'../../views/${fileName}/${fileName}_example'`)};`
);
};

const showImportDemoSnippet = () => {
const {
componentExampleName,
componentExamplePrefix,
fileName,
} = this.config.demoVars;
} = this.config.documentationVars;

this.log(chalk.white('\n// Import demo into example.'));
this.log(
`${chalk.magenta('import')} ${componentExampleName} from ${chalk.cyan(`'./${fileName}'`)};\n` +
`${chalk.magenta('const')} ${componentExamplePrefix}Source = require(${chalk.cyan(`'!!raw!./${fileName}'`)});\n` +
`${chalk.magenta('const')} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});`
);

this.log(chalk.white('\n// Render demo.'));
this.log(
`<GuideSection\n` +
` title="${componentExampleName}"\n` +
` source={[{\n` +
` type: GuideSectionTypes.JS,\n` +
` code: ${componentExamplePrefix}Source,\n` +
` }, {\n` +
` type: GuideSectionTypes.HTML,\n` +
` code: ${componentExamplePrefix}Html,\n` +
` }]}\n` +
`>\n` +
` <GuideText>\n` +
` Description needed: how to use the ${componentExampleName} component.\n` +
` </GuideText>\n` +
`\n` +
` <GuideDemo>\n` +
` <${componentExampleName} />\n` +
` </GuideDemo>\n` +
`</GuideSection>\n`
);
};

const showImportSandboxSnippet = () => {
const showImportRouteSnippet = suffix => {
const {
componentExampleName,
fileName,
} = this.config.sandboxVars;
} = this.config.documentationVars;

this.log(chalk.white('\n// Import example into routes.js.'));
this.log(
`${chalk.magenta('import')} ${componentExampleName}Sandbox\n` +
` ${chalk.magenta('from')} ${chalk.cyan(`'../../views/${fileName}/${fileName}_sandbox'`)};`
`${chalk.magenta('import')} ${componentExampleName}${suffix}\n` +
` ${chalk.magenta('from')} ${chalk.cyan(`'../../views/${fileName}/${fileName}_${suffix.toLowerCase()}'`)};`
);
};

this.log(chalk.white('\n// Import route definition into routes.js.'));
this.log(
`{\n` +
` name: ${chalk.cyan(`"${componentExampleName}"`)},\n` +
` component: ${componentExampleName}${suffix},\n` +
` hasReact: ${chalk.magenta('true')},\n` +
`}`
);
}

this.log('------------------------------------------------');
this.log(chalk.bold('Import snippets:'));

switch (this.fileType) {
case 'documentation':
showImportDocumentationPageSnippet();
showImportRouteSnippet('Example');
break;

case 'demo':
showImportDemoSnippet();
break;

case 'sandbox':
showImportSandboxSnippet();
showImportRouteSnippet('Sandbox');
break;
}
this.log('------------------------------------------------');
Expand Down