CLI: Add Stencil Integration

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/solidjs-community/storybook)      | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/)                                                                      | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook)        |
 | [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/src/cli/detect.test.ts

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

code/core/src/cli/detect.ts

@@ -135,6 +135,7 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   switch (projectType) {
     case ProjectType.REACT_NATIVE_AND_RNW:
     case ProjectType.REACT_NATIVE_WEB:
+    case ProjectType.STENCIL:
       return CoreBuilder.Vite;
     case ProjectType.REACT_SCRIPTS:
     case ProjectType.ANGULAR:

code/core/src/cli/helpers.ts

@@ -153,6 +153,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

@@ -32,6 +32,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[] = [
@@ -44,6 +49,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'svelte',
   'qwik',
   'solid',
+  'stencil',
 ];
 
 export enum ProjectType {
@@ -70,6 +76,7 @@ export enum ProjectType {
   SERVER = 'SERVER',
   NX = 'NX',
   SOLID = 'SOLID',
+  STENCIL = 'STENCIL',
 }
 
 export enum CoreBuilder {
@@ -248,6 +255,13 @@ export const supportedTemplates: TemplateConfiguration[] = [
       return dependencies?.every(Boolean) ?? true;
     },
   },
+  {
+    preset: ProjectType.STENCIL,
+    dependencies: ['@stencil/core'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies?.some(Boolean) ?? false;
+    },
+  },
 ];
 
 // A TemplateConfiguration that matches unsupported frameworks

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/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

@@ -664,6 +664,19 @@ export const baseTemplates = {
     },
     skipTasks: ['e2e-tests', '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>;
 
 /**
@@ -874,6 +887,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

@@ -51,6 +51,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';
@@ -195,6 +196,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

@@ -153,6 +153,7 @@ There are some noteworthy items here:
   | Qwik           | `qwik`           |
   | React          | `react`          |
   | Server         | `server`         |
+  | Stencil        | `stencil`        |
   | Solid          | `solid`          |
   | Svelte         | `svelte`         |
   | Vue 3          | `vue3`           |
@@ -289,6 +290,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.
@@ -310,6 +316,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]
       : []),
   ],