Skip to content

Commit

Permalink
feat(storybook): version 7 generators
Browse files Browse the repository at this point in the history
  • Loading branch information
mandarini committed Jan 12, 2023
1 parent 9f19e93 commit f47164b
Show file tree
Hide file tree
Showing 20 changed files with 238 additions and 138 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,11 @@
"configureTestRunner": {
"type": "boolean",
"description": "Add a Storybook Test-Runner target."
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,11 @@
"bundler": {
"description": "The Storybook builder to use.",
"enum": ["vite", "webpack"]
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"required": ["name"],
Expand Down
27 changes: 27 additions & 0 deletions docs/generated/packages/storybook/generators/configuration.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,33 @@
"enum": ["vite", "webpack"],
"x-prompt": "Which Storybook builder do you want to use?",
"default": "webpack"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
},
"storybook7UiFramework": {
"type": "string",
"description": "Storybook UI Framework to use.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
"@storybook/nextjs",
"@storybook/preact-webpack5",
"@storybook/react-webpack5",
"@storybook/react-vite",
"@storybook/server-webpack5",
"@storybook/svelte-webpack5",
"@storybook/svelte-vite",
"@storybook/sveltekit",
"@storybook/vue-webpack5",
"@storybook/vue-vite",
"@storybook/vue3-webpack5",
"@storybook/vue3-vite",
"@storybook/web-components-webpack5",
"@storybook/web-components-vite"
]
}
},
"required": ["name"],
Expand Down
20 changes: 20 additions & 0 deletions docs/generated/packages/storybook/generators/init.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,21 @@
"description": "Storybook UI Framework to use.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
"@storybook/nextjs",
"@storybook/preact-webpack5",
"@storybook/react-webpack5",
"@storybook/react-vite",
"@storybook/server-webpack5",
"@storybook/svelte-webpack5",
"@storybook/svelte-vite",
"@storybook/sveltekit",
"@storybook/vue-webpack5",
"@storybook/vue-vite",
"@storybook/vue3-webpack5",
"@storybook/vue3-vite",
"@storybook/web-components-webpack5",
"@storybook/web-components-vite",
"@storybook/react",
"@storybook/html",
"@storybook/web-components",
Expand All @@ -29,6 +44,11 @@
"enum": ["vite", "webpack"],
"x-prompt": "Which bundler do you want to use?",
"default": "webpack"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"presets": []
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@ export interface StorybookConfigurationOptions {
skipFormat?: boolean;
ignorePaths?: string[];
configureTestRunner?: boolean;
storybook7betaConfiguration?: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,11 @@
"configureTestRunner": {
"type": "boolean",
"description": "Add a Storybook Test-Runner target."
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"additionalProperties": false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@ export interface StorybookConfigureSchema {
ignorePaths?: string[];
bundler?: 'webpack' | 'vite';
configureTestRunner?: boolean;
storybook7betaConfiguration?: boolean;
}
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@
"bundler": {
"description": "The Storybook builder to use.",
"enum": ["vite", "webpack"]
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
}
},
"required": ["name"],
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook/src/executors/models.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export interface CommonNxStorybookConfig {
export type UiFramework7 =
| '@storybook/angular'
| '@storybook/html-webpack5'
| '@storybook/next'
| '@storybook/nextjs'
| '@storybook/preact-webpack5'
| '@storybook/react-webpack5'
| '@storybook/react-vite'
Expand Down
13 changes: 4 additions & 9 deletions packages/storybook/src/generators/configuration/schema.d.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
import { Linter } from '@nrwl/linter';
import { UiFramework7, UiFramework } from '../../executors/models';

export interface StorybookConfigureSchema {
name: string;
uiFramework:
| '@storybook/angular'
| '@storybook/react'
| '@storybook/react-native'
| '@storybook/html'
| '@storybook/web-components'
| '@storybook/vue'
| '@storybook/vue3'
| '@storybook/svelte';
uiFramework: UiFramework;
configureCypress?: boolean;
bundler?: 'webpack' | 'vite';
linter?: Linter;
Expand All @@ -19,4 +12,6 @@ export interface StorybookConfigureSchema {
cypressDirectory?: string;
standaloneConfig?: boolean;
configureTestRunner?: boolean;
storybook7betaConfiguration?: boolean;
storybook7UiFramework?: UiFramework7;
}
27 changes: 27 additions & 0 deletions packages/storybook/src/generators/configuration/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,33 @@
"enum": ["vite", "webpack"],
"x-prompt": "Which Storybook builder do you want to use?",
"default": "webpack"
},
"storybook7betaConfiguration": {
"description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
"type": "boolean",
"default": false
},
"storybook7UiFramework": {
"type": "string",
"description": "Storybook UI Framework to use.",
"enum": [
"@storybook/angular",
"@storybook/html-webpack5",
"@storybook/nextjs",
"@storybook/preact-webpack5",
"@storybook/react-webpack5",
"@storybook/react-vite",
"@storybook/server-webpack5",
"@storybook/svelte-webpack5",
"@storybook/svelte-vite",
"@storybook/sveltekit",
"@storybook/vue-webpack5",
"@storybook/vue-vite",
"@storybook/vue3-webpack5",
"@storybook/vue3-vite",
"@storybook/web-components-webpack5",
"@storybook/web-components-vite"
]
}
},
"required": ["name"],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import { join, relative } from 'path';
import {
dedupe,
findStorybookAndBuildTargetsAndCompiler,
isFramework,
TsConfig,
} from '../../utils/utilities';
import { StorybookConfigureSchema } from './schema';
Expand Down Expand Up @@ -168,7 +167,8 @@ export function configureTsProjectConfig(
...(tsConfigContent.exclude || []),
'**/*.stories.ts',
'**/*.stories.js',
...(isFramework('react', schema) || isFramework('react-native', schema)
...(schema.uiFramework === '@storybook/react' ||
schema.uiFramework === '@storybook/react-native'
? ['**/*.stories.jsx', '**/*.stories.tsx']
: []),
];
Expand Down
139 changes: 81 additions & 58 deletions packages/storybook/src/generators/init/init.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
updateJson,
updateNxJson,
} from '@nrwl/devkit';
import { isFramework } from '../../utils/utilities';

import {
babelCoreVersion,
Expand All @@ -17,6 +16,7 @@ import {
litHtmlVersion,
nxVersion,
reactNativeStorybookLoader,
storybook7Version,
storybookReactNativeVersion,
storybookVersion,
svgrVersion,
Expand All @@ -36,74 +36,97 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {

// base deps
devDependencies['@nrwl/storybook'] = nxVersion;
devDependencies['@storybook/core-server'] = storybookVersion;
devDependencies['@storybook/addon-essentials'] = storybookVersion;

if (schema.bundler === 'vite') {
devDependencies['@storybook/builder-vite'] = viteBuilderVersion;
} else {
devDependencies['@storybook/builder-webpack5'] = storybookVersion;
devDependencies['@storybook/manager-webpack5'] = storybookVersion;
}

// TODO(katerina): Remove this when Storybook 7.0 is added in Nx
devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion;
if (schema.storybook7betaConfiguration) {
if (schema.uiFramework === '@storybook/react-native') {
devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
} else {
devDependencies[schema.uiFramework] = storybook7Version;
}
devDependencies['@storybook/core-server'] = storybook7Version;
devDependencies['@storybook/addon-essentials'] = storybook7Version;

if (schema.uiFramework === '@storybook/angular') {
if (
!packageJson.dependencies['@angular/forms'] &&
!packageJson.devDependencies['@angular/forms']
) {
devDependencies['@angular/forms'] = '*';
}
}

if (isFramework('angular', schema)) {
devDependencies['@storybook/angular'] = storybookVersion;
devDependencies['webpack'] = webpack5Version;
if (schema.uiFramework === '@storybook/web-components') {
devDependencies['lit-html'] = litHtmlVersion;
}

if (
!packageJson.dependencies['@angular/forms'] &&
!packageJson.devDependencies['@angular/forms']
) {
devDependencies['@angular/forms'] = '*';
if (schema.uiFramework === '@storybook/react-native') {
devDependencies['@storybook/addon-ondevice-actions'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-backgrounds'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-controls'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-notes'] =
storybookReactNativeVersion;
devDependencies['react-native-storybook-loader'] =
reactNativeStorybookLoader;
}
} else {
if (schema.uiFramework === '@storybook/react-native') {
devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
} else {
devDependencies[schema.uiFramework] = storybookVersion;
}
}

if (isFramework('react', schema)) {
devDependencies['@storybook/react'] = storybookVersion;
devDependencies['@svgr/webpack'] = svgrVersion;
devDependencies['url-loader'] = urlLoaderVersion;
devDependencies['babel-loader'] = babelLoaderVersion;
devDependencies['@babel/core'] = babelCoreVersion;
devDependencies['@babel/preset-typescript'] = babelPresetTypescriptVersion;
devDependencies['@storybook/react'] = storybookVersion;
}
devDependencies[schema.uiFramework] = storybookVersion;
devDependencies['@storybook/core-server'] = storybookVersion;
devDependencies['@storybook/addon-essentials'] = storybookVersion;

if (isFramework('html', schema)) {
devDependencies['@storybook/html'] = storybookVersion;
}
if (schema.bundler === 'vite') {
devDependencies['@storybook/builder-vite'] = viteBuilderVersion;
} else {
devDependencies['@storybook/builder-webpack5'] = storybookVersion;
devDependencies['@storybook/manager-webpack5'] = storybookVersion;
}

if (isFramework('vue', schema)) {
devDependencies['@storybook/vue'] = storybookVersion;
}
devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion;

if (isFramework('vue3', schema)) {
devDependencies['@storybook/vue3'] = storybookVersion;
}
if (schema.uiFramework === '@storybook/angular') {
devDependencies['webpack'] = webpack5Version;

if (isFramework('web-components', schema)) {
devDependencies['@storybook/web-components'] = storybookVersion;
devDependencies['lit-html'] = litHtmlVersion;
}
if (
!packageJson.dependencies['@angular/forms'] &&
!packageJson.devDependencies['@angular/forms']
) {
devDependencies['@angular/forms'] = '*';
}
}

if (isFramework('svelte', schema)) {
devDependencies['@storybook/svelte'] = storybookVersion;
}
if (schema.uiFramework === '@storybook/react') {
devDependencies['@svgr/webpack'] = svgrVersion;
devDependencies['url-loader'] = urlLoaderVersion;
devDependencies['babel-loader'] = babelLoaderVersion;
devDependencies['@babel/core'] = babelCoreVersion;
devDependencies['@babel/preset-typescript'] =
babelPresetTypescriptVersion;
}

if (isFramework('react-native', schema)) {
devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-actions'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-backgrounds'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-controls'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-notes'] =
storybookReactNativeVersion;
devDependencies['react-native-storybook-loader'] =
reactNativeStorybookLoader;
if (schema.uiFramework === '@storybook/web-components') {
devDependencies['lit-html'] = litHtmlVersion;
}

if (schema.uiFramework === '@storybook/react-native') {
devDependencies['@storybook/addon-ondevice-actions'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-backgrounds'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-controls'] =
storybookReactNativeVersion;
devDependencies['@storybook/addon-ondevice-notes'] =
storybookReactNativeVersion;
devDependencies['react-native-storybook-loader'] =
reactNativeStorybookLoader;
}
}

return addDependenciesToPackageJson(host, dependencies, devDependencies);
Expand Down
Loading

0 comments on commit f47164b

Please sign in to comment.