From e37855fd5f0c140136b39cf181f260834b7e67ac Mon Sep 17 00:00:00 2001 From: Jon Palmer <328224+jonspalmer@users.noreply.github.com> Date: Sat, 20 Feb 2021 14:26:01 -0500 Subject: [PATCH 1/5] Support Server in cli generator - fixes #12077 --- lib/cli/src/generators/SERVER/index.ts | 14 ++++++++++++++ lib/cli/src/generators/baseGenerator.ts | 16 ++++++++++++++++ lib/cli/src/initiate.ts | 6 ++++++ lib/cli/src/project_types.ts | 4 +++- 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100755 lib/cli/src/generators/SERVER/index.ts diff --git a/lib/cli/src/generators/SERVER/index.ts b/lib/cli/src/generators/SERVER/index.ts new file mode 100755 index 000000000000..493864afd7d8 --- /dev/null +++ b/lib/cli/src/generators/SERVER/index.ts @@ -0,0 +1,14 @@ +import fse from 'fs-extra'; +import { baseGenerator, Generator } from '../baseGenerator'; + +const generator: Generator = async (packageManager, npmOptions, options) => { + const prefix = fse.existsSync('./src') ? '../src' : '../stories'; + const stories = [`${prefix}/**/*.stories.json`]; + + baseGenerator(packageManager, npmOptions, options, 'server', { + addComponents: false, + configureOptions: { stories }, + }); +}; + +export default generator; diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 85a270f8235c..9303f373e334 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -18,9 +18,13 @@ export interface FrameworkOptions { addComponents?: boolean; addBabel?: boolean; addESLint?: boolean; +<<<<<<< HEAD extraMain?: any; extensions?: string[]; commonJs?: boolean; +======= + configureOptions?: any; +>>>>>>> Support Server in cli generator - fixes #12077 } export type Generator = ( @@ -37,9 +41,13 @@ const defaultOptions: FrameworkOptions = { addComponents: true, addBabel: true, addESLint: false, +<<<<<<< HEAD extraMain: undefined, extensions: undefined, commonJs: false, +======= + configureOptions: {}, +>>>>>>> Support Server in cli generator - fixes #12077 }; export async function baseGenerator( @@ -57,8 +65,12 @@ export async function baseGenerator( addComponents, addBabel, addESLint, +<<<<<<< HEAD extraMain, extensions, +======= + configureOptions, +>>>>>>> Support Server in cli generator - fixes #12077 } = { ...defaultOptions, ...options, @@ -95,6 +107,7 @@ export async function baseGenerator( const versionedPackages = await packageManager.getVersionedPackages(...packages); +<<<<<<< HEAD const mainOptions = builder !== Builder.Webpack4 ? { @@ -110,6 +123,9 @@ export async function baseGenerator( commonJs: options.commonJs, ...mainOptions, }); +======= + configure(framework, [...addons, ...extraAddons], configureOptions); +>>>>>>> Support Server in cli generator - fixes #12077 if (addComponents) { copyComponents(framework, language); } diff --git a/lib/cli/src/initiate.ts b/lib/cli/src/initiate.ts index 026e34e5091d..d2427d1d577e 100644 --- a/lib/cli/src/initiate.ts +++ b/lib/cli/src/initiate.ts @@ -31,6 +31,7 @@ import riotGenerator from './generators/RIOT'; import preactGenerator from './generators/PREACT'; import svelteGenerator from './generators/SVELTE'; import raxGenerator from './generators/RAX'; +import serverGenerator from './generators/SERVER'; import { warn } from './warn'; import { JsPackageManagerFactory, readPackageJson } from './js-package-manager'; import { NpmOptions } from './NpmOptions'; @@ -231,6 +232,11 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr .then(commandLog('Adding Storybook support to your "Aurelia" app')) .then(end); + case ProjectType.SERVER: + return serverGenerator(packageManager, npmOptions, generatorOptions) + .then(commandLog('Adding Storybook support to your "Server" app')) + .then(end); + case ProjectType.UNSUPPORTED: paddedLog(`We detected a project type that we don't support yet.`); paddedLog( diff --git a/lib/cli/src/project_types.ts b/lib/cli/src/project_types.ts index c3fc9fa290ba..bc5db98bb91a 100644 --- a/lib/cli/src/project_types.ts +++ b/lib/cli/src/project_types.ts @@ -28,7 +28,8 @@ export type SupportedFrameworks = | 'rax' | 'aurelia' | 'html' - | 'web-components'; + | 'web-components' + | 'server'; export enum ProjectType { UNDETECTED = 'UNDETECTED', @@ -56,6 +57,7 @@ export enum ProjectType { SVELTE = 'SVELTE', RAX = 'RAX', AURELIA = 'AURELIA', + SERVER = 'SERVER', } export const SUPPORTED_FRAMEWORKS: SupportedFrameworks[] = [ From 659c9389a0c9cce328e1bebfecdb1fcaa3d0bcb7 Mon Sep 17 00:00:00 2001 From: Jon Palmer <328224+jonspalmer@users.noreply.github.com> Date: Thu, 15 Apr 2021 16:36:19 -0400 Subject: [PATCH 2/5] Updates from rebase --- lib/cli/src/generators/SERVER/index.ts | 6 ++---- lib/cli/src/generators/baseGenerator.ts | 16 ---------------- 2 files changed, 2 insertions(+), 20 deletions(-) diff --git a/lib/cli/src/generators/SERVER/index.ts b/lib/cli/src/generators/SERVER/index.ts index 493864afd7d8..f36bff5b3632 100755 --- a/lib/cli/src/generators/SERVER/index.ts +++ b/lib/cli/src/generators/SERVER/index.ts @@ -1,13 +1,11 @@ -import fse from 'fs-extra'; import { baseGenerator, Generator } from '../baseGenerator'; const generator: Generator = async (packageManager, npmOptions, options) => { - const prefix = fse.existsSync('./src') ? '../src' : '../stories'; - const stories = [`${prefix}/**/*.stories.json`]; + const stories = ['../stories/**/*.stories.json']; baseGenerator(packageManager, npmOptions, options, 'server', { addComponents: false, - configureOptions: { stories }, + extraMain: { stories }, }); }; diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 9303f373e334..85a270f8235c 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -18,13 +18,9 @@ export interface FrameworkOptions { addComponents?: boolean; addBabel?: boolean; addESLint?: boolean; -<<<<<<< HEAD extraMain?: any; extensions?: string[]; commonJs?: boolean; -======= - configureOptions?: any; ->>>>>>> Support Server in cli generator - fixes #12077 } export type Generator = ( @@ -41,13 +37,9 @@ const defaultOptions: FrameworkOptions = { addComponents: true, addBabel: true, addESLint: false, -<<<<<<< HEAD extraMain: undefined, extensions: undefined, commonJs: false, -======= - configureOptions: {}, ->>>>>>> Support Server in cli generator - fixes #12077 }; export async function baseGenerator( @@ -65,12 +57,8 @@ export async function baseGenerator( addComponents, addBabel, addESLint, -<<<<<<< HEAD extraMain, extensions, -======= - configureOptions, ->>>>>>> Support Server in cli generator - fixes #12077 } = { ...defaultOptions, ...options, @@ -107,7 +95,6 @@ export async function baseGenerator( const versionedPackages = await packageManager.getVersionedPackages(...packages); -<<<<<<< HEAD const mainOptions = builder !== Builder.Webpack4 ? { @@ -123,9 +110,6 @@ export async function baseGenerator( commonJs: options.commonJs, ...mainOptions, }); -======= - configure(framework, [...addons, ...extraAddons], configureOptions); ->>>>>>> Support Server in cli generator - fixes #12077 if (addComponents) { copyComponents(framework, language); } From 7d1d55f96520d8d883a82adf61e2b001730b9167 Mon Sep 17 00:00:00 2001 From: Jon Palmer <328224+jonspalmer@users.noreply.github.com> Date: Tue, 20 Apr 2021 08:42:50 -0400 Subject: [PATCH 3/5] Add example components --- .../src/frameworks/server/button.stories.json | 32 +++++++++++++++++++ .../src/frameworks/server/header.stories.json | 15 +++++++++ .../src/frameworks/server/page.stories.json | 15 +++++++++ lib/cli/src/generators/SERVER/index.ts | 6 ++-- .../SERVER/template-csf/.storybook/preview.js | 5 +++ lib/cli/src/helpers.ts | 16 +++++----- 6 files changed, 79 insertions(+), 10 deletions(-) create mode 100644 lib/cli/src/frameworks/server/button.stories.json create mode 100644 lib/cli/src/frameworks/server/header.stories.json create mode 100644 lib/cli/src/frameworks/server/page.stories.json create mode 100644 lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js diff --git a/lib/cli/src/frameworks/server/button.stories.json b/lib/cli/src/frameworks/server/button.stories.json new file mode 100644 index 000000000000..ab522def5bca --- /dev/null +++ b/lib/cli/src/frameworks/server/button.stories.json @@ -0,0 +1,32 @@ + { + "title": "Example/Button", + "parameters": { + "server": { "id": "button" } + }, + "args": { "label": "Button" }, + "argTypes": { + "label": { "control": "text" }, + "primary": { "control": "boolean" }, + "backgroundColor": { "control": "color" }, + "size": { + "control": { "type": "select", "options": ["small", "medium", "large"] } + } + }, + "stories": [ + { + "name": "Primary", + "args": { "primary": true } + }, + { + "name": "Secondary" + }, + { + "name": "Large", + "args": { "size": "large" } + }, + { + "name": "Small", + "args": { "size": "small" } + } + ] +} diff --git a/lib/cli/src/frameworks/server/header.stories.json b/lib/cli/src/frameworks/server/header.stories.json new file mode 100644 index 000000000000..e51cbfac7669 --- /dev/null +++ b/lib/cli/src/frameworks/server/header.stories.json @@ -0,0 +1,15 @@ +{ + "title": "Example/Header", + "parameters": { + "server": { "id": "header" } + }, + "stories": [ + { + "name": "LoggedIn", + "args": { "user": {} } + }, + { + "name": "LoggedOut" + } + ] +} diff --git a/lib/cli/src/frameworks/server/page.stories.json b/lib/cli/src/frameworks/server/page.stories.json new file mode 100644 index 000000000000..2245cb3f9db8 --- /dev/null +++ b/lib/cli/src/frameworks/server/page.stories.json @@ -0,0 +1,15 @@ +{ + "title": "Example/Page", + "parameters": { + "server": { "id": "page" } + }, + "stories": [ + { + "name": "LoggedIn", + "args": { "user": {} } + }, + { + "name": "LoggedOut" + } + ] +} diff --git a/lib/cli/src/generators/SERVER/index.ts b/lib/cli/src/generators/SERVER/index.ts index f36bff5b3632..ebdd25fa561c 100755 --- a/lib/cli/src/generators/SERVER/index.ts +++ b/lib/cli/src/generators/SERVER/index.ts @@ -1,12 +1,14 @@ import { baseGenerator, Generator } from '../baseGenerator'; +import { copyTemplate, storiesPath } from '../../helpers'; const generator: Generator = async (packageManager, npmOptions, options) => { - const stories = ['../stories/**/*.stories.json']; + const stories = [`${storiesPath()}/**/*.stories.json`]; baseGenerator(packageManager, npmOptions, options, 'server', { - addComponents: false, extraMain: { stories }, }); + + copyTemplate(__dirname, options.storyFormat); }; export default generator; diff --git a/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js b/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js new file mode 100644 index 000000000000..044621d9ac6c --- /dev/null +++ b/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js @@ -0,0 +1,5 @@ +export const parameters = { + server: { + url: 'http://storybook-server-demo.netlify.app/api/', + }, +}; diff --git a/lib/cli/src/helpers.ts b/lib/cli/src/helpers.ts index b80dbfeb9fd7..4dab2dc9b7c5 100644 --- a/lib/cli/src/helpers.ts +++ b/lib/cli/src/helpers.ts @@ -184,6 +184,13 @@ export function copyTemplate(templateRoot: string, storyFormat: StoryFormat) { fse.copySync(templateDir, '.', { overwrite: true }); } +export function storiesPath() { + if (fse.existsSync('./src')) { + return './src/stories'; + } + return './stories'; +} + export function copyComponents(framework: SupportedFrameworks, language: SupportedLanguage) { const languageFolderMapping: Record = { javascript: 'js', @@ -212,14 +219,7 @@ export function copyComponents(framework: SupportedFrameworks, language: Support throw new Error(`Unsupported framework: ${framework}`); }; - const targetPath = () => { - if (fse.existsSync('./src')) { - return './src/stories'; - } - return './stories'; - }; - - const destinationPath = targetPath(); + const destinationPath = storiesPath(); fse.copySync(componentsPath(), destinationPath, { overwrite: true }); fse.copySync(path.resolve(__dirname, 'frameworks/common'), destinationPath, { overwrite: true }); } From 5b91fd206dec4643c200de4c6dfed0889c96a0cb Mon Sep 17 00:00:00 2001 From: Jon Palmer <328224+jonspalmer@users.noreply.github.com> Date: Tue, 20 Apr 2021 21:26:45 -0400 Subject: [PATCH 4/5] Simplification and fix bug with preview getting overwritten --- lib/cli/src/generators/SERVER/index.ts | 6 ++---- .../SERVER/template-csf/.storybook/preview.js | 2 +- lib/cli/src/generators/configure.ts | 12 +++++++++--- lib/cli/src/helpers.ts | 17 +++++++++-------- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/lib/cli/src/generators/SERVER/index.ts b/lib/cli/src/generators/SERVER/index.ts index ebdd25fa561c..885d72f8ad4e 100755 --- a/lib/cli/src/generators/SERVER/index.ts +++ b/lib/cli/src/generators/SERVER/index.ts @@ -1,11 +1,9 @@ import { baseGenerator, Generator } from '../baseGenerator'; -import { copyTemplate, storiesPath } from '../../helpers'; +import { copyTemplate } from '../../helpers'; const generator: Generator = async (packageManager, npmOptions, options) => { - const stories = [`${storiesPath()}/**/*.stories.json`]; - baseGenerator(packageManager, npmOptions, options, 'server', { - extraMain: { stories }, + extensions: ['json'], }); copyTemplate(__dirname, options.storyFormat); diff --git a/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js b/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js index 044621d9ac6c..2a78818e1e95 100644 --- a/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js +++ b/lib/cli/src/generators/SERVER/template-csf/.storybook/preview.js @@ -1,5 +1,5 @@ export const parameters = { server: { - url: 'http://storybook-server-demo.netlify.app/api/', + url: 'http://storybook-server-demo.netlify.app/api', }, }; diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts index 1cca8936ee07..81306c4c2fee 100644 --- a/lib/cli/src/generators/configure.ts +++ b/lib/cli/src/generators/configure.ts @@ -1,4 +1,5 @@ import fse from 'fs-extra'; +import fs from 'fs'; import { SupportedFrameworks } from '../project_types'; interface ConfigureMainOptions { @@ -43,6 +44,13 @@ function configureMain({ } function configurePreview(framework: SupportedFrameworks, commonJs: boolean) { + const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`; + + // If the framework template included a preview then we have nothing to do + if (fs.existsSync(previewPath)) { + return; + } + const parameters = ` export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, @@ -64,9 +72,7 @@ setCompodocJson(docJson); ${parameters}` : parameters; - fse.writeFileSync(`./.storybook/preview.${commonJs ? 'cjs' : 'js'}`, preview, { - encoding: 'utf8', - }); + fse.writeFileSync(previewPath, preview, { encoding: 'utf8' }); } export function configure(framework: SupportedFrameworks, mainOptions: ConfigureMainOptions) { diff --git a/lib/cli/src/helpers.ts b/lib/cli/src/helpers.ts index 4dab2dc9b7c5..1c8268884b28 100644 --- a/lib/cli/src/helpers.ts +++ b/lib/cli/src/helpers.ts @@ -181,14 +181,8 @@ export function copyTemplate(templateRoot: string, storyFormat: StoryFormat) { throw new Error(`Unsupported story format: ${storyFormat}`); } - fse.copySync(templateDir, '.', { overwrite: true }); -} -export function storiesPath() { - if (fse.existsSync('./src')) { - return './src/stories'; - } - return './stories'; + fse.copySync(templateDir, '.', { overwrite: true }); } export function copyComponents(framework: SupportedFrameworks, language: SupportedLanguage) { @@ -219,7 +213,14 @@ export function copyComponents(framework: SupportedFrameworks, language: Support throw new Error(`Unsupported framework: ${framework}`); }; - const destinationPath = storiesPath(); + const targetPath = () => { + if (fse.existsSync('./src')) { + return './src/stories'; + } + return './stories'; + }; + + const destinationPath = targetPath(); fse.copySync(componentsPath(), destinationPath, { overwrite: true }); fse.copySync(path.resolve(__dirname, 'frameworks/common'), destinationPath, { overwrite: true }); } From 3c04dc611422c4f4194d0d79e187c851b1248910 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 31 May 2021 10:31:32 +0800 Subject: [PATCH 5/5] Update configure.ts --- lib/cli/src/generators/configure.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts index a8863dd61aaa..dbc2f9a0b85d 100644 --- a/lib/cli/src/generators/configure.ts +++ b/lib/cli/src/generators/configure.ts @@ -1,5 +1,4 @@ import fse from 'fs-extra'; -import fs from 'fs'; import dedent from 'ts-dedent'; import { SupportedFrameworks } from '../project_types'; @@ -62,7 +61,7 @@ function configurePreview(framework: SupportedFrameworks, commonJs: boolean) { const previewPath = `./.storybook/preview.${commonJs ? 'cjs' : 'js'}`; // If the framework template included a preview then we have nothing to do - if (fs.existsSync(previewPath)) { + if (fse.existsSync(previewPath)) { return; }