CLI: Add Stencil init support

README.md

@@ -110,6 +110,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
 | [SolidJS](https://github.com/storybookjs/solidjs)              | [![](https://img.shields.io/npm/v/storybook-solidjs/latest?style=flat-square&color=blue&label)](/)                                                                           | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs?style=flat-square&color=eee)](https://github.com/storybookjs/solidjs)                     |
 | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
+| [StencilJS](https://github.com/stenciljs/storybook)            | [![](https://img.shields.io/npm/v/@stencil/storybook-plugin/latest?style=flat-square&color=blue&label)](/)                                                                   | [![Stencil](https://img.shields.io/npm/dm/@stencil/storybook-plugin?style=flat-square&color=eee)](https://github.com/stenciljs/storybook)             |
 
 ### Addons
 

code/core/scripts/helpers/sourcefiles.ts

@@ -58,7 +58,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild'];
+  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild', 'stencil'];
   const location = join(__dirname, '..', '..', 'src', 'types', 'modules', 'frameworks.ts');
   const frameworksDirectory = join(__dirname, '..', '..', '..', 'frameworks');
 

code/core/src/cli/detect.test.ts

@@ -231,6 +231,16 @@ const MOCK_FRAMEWORK_FILES: {
       },
     },
   },
+  {
+    name: ProjectType.STENCIL,
+    files: {
+      'package.json': {
+        dependencies: {
+          '@stencil/core': '4.30.0',
+        },
+      },
+    },
+  },
 ];
 
 describe('Detect', () => {

code/core/src/cli/helpers.ts

@@ -159,6 +159,7 @@ export const frameworkToDefaultBuilder: Record<
   'react-webpack5': CoreBuilder.Webpack5,
   'server-webpack5': CoreBuilder.Webpack5,
   solid: CoreBuilder.Vite,
+  stencil: CoreBuilder.Vite,
   'svelte-vite': CoreBuilder.Vite,
   sveltekit: CoreBuilder.Vite,
   'vue3-vite': CoreBuilder.Vite,

code/core/src/cli/project_types.ts

@@ -27,6 +27,11 @@ export const externalFrameworks: ExternalFramework[] = [
     frameworks: ['@storybook-vue/nuxt'],
     renderer: '@storybook/vue3',
   },
+  {
+    name: 'stencil',
+    packageName: '@stencil/storybook-plugin',
+    frameworks: ['@stencil/storybook-plugin'],
+  },
 ];
 
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
@@ -39,6 +44,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'svelte',
   'qwik',
   'solid',
+  'stencil',
 ];
 
 export enum ProjectType {
@@ -64,6 +70,7 @@ export enum ProjectType {
   SERVER = 'SERVER',
   NX = 'NX',
   SOLID = 'SOLID',
+  STENCIL = 'STENCIL',
 }
 
 export enum CoreBuilder {

code/core/src/common/utils/framework-to-renderer.ts

@@ -31,6 +31,7 @@ export const frameworkToRenderer: Record<
   'react-native-web-vite': 'react',
   react: 'react',
   server: 'server',
+  stencil: 'stencil',
   svelte: 'svelte',
   vue3: 'vue3',
   'web-components': 'web-components',

code/core/src/common/utils/get-storybook-info.ts

@@ -21,6 +21,7 @@ export const rendererPackages: Record<string, string> = {
   // community (outside of monorepo)
   'storybook-framework-qwik': 'qwik',
   'storybook-solidjs': 'solid',
+  '@stencil/storybook-plugin': 'stencil',
 
   /** @deprecated This is deprecated. */
   '@storybook/vue': 'vue',
@@ -46,6 +47,7 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
   'storybook-solidjs-vite': 'solid',
   'storybook-react-rsbuild': 'react-rsbuild',
   'storybook-vue3-rsbuild': 'vue3-rsbuild',
+  '@stencil/storybook-plugin': 'stencil',
 };
 
 export const builderPackages = ['@storybook/builder-webpack5', '@storybook/builder-vite'];

code/core/src/types/modules/frameworks.ts

@@ -18,4 +18,5 @@ export type SupportedFrameworks =
   | 'solid'
   | 'nuxt'
   | 'react-rsbuild'
-  | 'vue3-rsbuild';
+  | 'vue3-rsbuild'
+  | 'stencil';

code/core/src/types/modules/renderers.ts

@@ -12,4 +12,5 @@ export type SupportedRenderers =
   | 'web-components'
   | 'server'
   | 'solid'
+  | 'stencil'
   | 'nuxt';

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -627,6 +627,19 @@ export const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
+  'stencil/default-ts': {
+    name: 'StencilJS CLI Latest (Vite | TypeScript)',
+    script: 'npm init stencil@latest component {{beforeDir}}',
+    // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
+    inDevelopment: true,
+    expected: {
+      framework: '@stencil/storybook-plugin',
+      renderer: '@stencil/storybook-plugin',
+      builder: '@stencil/storybook-plugin',
+    },
+    // TODO: The community template does not provide standard stories, which is required for e2e tests.
+    skipTasks: ['e2e-tests', 'e2e-tests-dev', 'bench', 'vitest-integration'],
+  },
 } satisfies Record<string, BaseTemplates>;
 
 /**
@@ -827,6 +840,7 @@ export const daily: TemplateKey[] = [
   'internal/react18-webpack-babel',
   'react-native-web-vite/expo-ts',
   // 'react-native-web-vite/rn-cli-ts',
+  // 'stencil/default-ts',
 ];
 
 export const templatesByCadence = { normal, merged, daily };

code/lib/create-storybook/src/bin/modernInputs.ts

@@ -16,6 +16,7 @@ export const supportedFrameworks = [
   'react-webpack5',
   'server-webpack5',
   'solid',
+  'stencil',
   'svelte-vite',
   'sveltekit',
   'vue3-rsbuild',
@@ -45,6 +46,7 @@ export const supportedFrameworksPackages = {
   nuxt: '@storybook/vue3-vite',
   qwik: 'storybook-framework-qwik',
   solid: 'storybook-solidjs-vite',
+  stencil: '@stencil/storybook-plugin',
   sveltekit: '@storybook/sveltekit',
   'react-native': '@storybook/react-native',
 } satisfies Record<Framework, string>;
@@ -68,6 +70,7 @@ export const supportedFrameworksNames = {
   nuxt: 'Nuxt',
   qwik: 'Qwik',
   solid: 'Solid',
+  stencil: 'Stencil',
   sveltekit: 'SvelteKit',
   'react-native': 'React Native',
 } satisfies Record<Framework, string>;

code/lib/create-storybook/src/generators/STENCIL/index.ts

@@ -0,0 +1,8 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(packageManager, npmOptions, options, 'stencil', {}, 'stencil');
+};
+
+export default generator;

code/lib/create-storybook/src/initiate.ts

@@ -40,6 +40,7 @@ import reactNativeWebGenerator from './generators/REACT_NATIVE_WEB';
 import reactScriptsGenerator from './generators/REACT_SCRIPTS';
 import serverGenerator from './generators/SERVER';
 import solidGenerator from './generators/SOLID';
+import stencilGenerator from './generators/STENCIL';
 import svelteGenerator from './generators/SVELTE';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import vue3Generator from './generators/VUE3';
@@ -169,6 +170,11 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "Server" app')
         );
 
+      case ProjectType.STENCIL:
+        return stencilGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "Stencil" app')
+        );
+
       case ProjectType.NX:
         throw new NxProjectDetectedError();
 

docs/get-started/install.mdx

@@ -111,6 +111,7 @@ There are some noteworthy items here:
   | Qwik           | `qwik`           |
   | React          | `react`          |
   | Server         | `server`         |
+  | Stencil        | `stencil`        |
   | Solid          | `solid`          |
   | Svelte         | `svelte`         |
   | Vue 3          | `vue3`           |
@@ -247,6 +248,11 @@ There are some noteworthy items here:
     * [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help.
   </IfRenderer>
 
+  <IfRenderer renderer="stencil">
+    * [Storybook's Stencil README](https://github.com/stenciljs/storybook) for more information on how to set up Storybook in your Stencil project.
+    * [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help.
+  </IfRenderer>
+
   <IfRenderer renderer="svelte">
     * Storybook's SvelteKit [framework documentation](./frameworks/sveltekit.mdx) for more information on how to set up Storybook in your SvelteKit project.
     * Storybook's Svelte Vite [framework documentation](./frameworks/svelte-vite.mdx) for more information on how to set up Storybook in your Svelte project with Vite.
@@ -268,6 +274,6 @@ There are some noteworthy items here:
   Now that you have successfully installed Storybook and understood how it works, let's continue where you left off in the [setup wizard](#run-the-setup-wizard) and delve deeper into writing stories.
 </IfRenderer>
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid' ]}>
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid', 'stencil' ]}>
   Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
 </IfRenderer>

scripts/create-nx-sandbox-projects.ts

@@ -19,7 +19,7 @@ const projectJson = (name: string, framework: string, tags: string[]) => ({
     'links',
     'onboarding',
     'blocks',
-    ...(!['storybook-framework-qwik', 'storybook-solidjs-vite'].includes(framework)
+    ...(!['storybook-framework-qwik', 'storybook-solidjs-vite', '@stencil/storybook-plugin'].includes(framework)
       ? [framework]
       : []),
   ],