CLI: Add Marko framework

code/lib/cli/src/generators/MARKO/index.ts

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

code/lib/cli/src/generators/baseGenerator.ts

@@ -167,9 +167,18 @@ const getFrameworkDetails = (
 const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
 
 const hasInteractiveStories = (rendererId: SupportedRenderers) =>
-  ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html', 'solid', 'qwik'].includes(
-    rendererId
-  );
+  [
+    'react',
+    'angular',
+    'preact',
+    'svelte',
+    'vue',
+    'vue3',
+    'html',
+    'solid',
+    'marko',
+    'qwik',
+  ].includes(rendererId);
 
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
   framework ? ['angular', 'nextjs'].includes(framework) : false;

code/lib/cli/src/helpers.ts

@@ -197,6 +197,7 @@ const frameworkToRenderer: Record<SupportedFrameworks | SupportedRenderers, Supp
   angular: 'angular',
   ember: 'ember',
   html: 'html',
+  marko: 'marko',
   nextjs: 'react',
   preact: 'preact',
   qwik: 'qwik',

code/lib/cli/src/initiate.ts

@@ -30,6 +30,7 @@ import svelteGenerator from './generators/SVELTE';
 import qwikGenerator from './generators/QWIK';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import solidGenerator from './generators/SOLID';
+import markoGenerator from './generators/MARKO';
 import serverGenerator from './generators/SERVER';
 import type { JsPackageManager, PackageManagerName } from './js-package-manager';
 import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
@@ -162,6 +163,11 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "SolidJS" app')
         );
 
+      case ProjectType.MARKO:
+        return markoGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "Marko" app')
+        );
+
       case ProjectType.UNSUPPORTED:
         paddedLog(`We detected a project type that we don't support yet.`);
         paddedLog(

code/lib/cli/src/project_types.ts

@@ -30,7 +30,7 @@ export const externalFrameworks: ExternalFramework[] = [
 ];
 
 // Should match @storybook/<framework>
-export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid';
+export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik' | 'solid' | 'marko';
 
 // Should match @storybook/<renderer>
 export type SupportedRenderers =
@@ -46,7 +46,8 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid';
+  | 'solid'
+  | 'marko';
 
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
@@ -59,6 +60,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'svelte',
   'qwik',
   'solid',
+  'marko',
 ];
 
 export enum ProjectType {
@@ -84,6 +86,7 @@ export enum ProjectType {
   SERVER = 'SERVER',
   NX = 'NX',
   SOLID = 'SOLID',
+  MARKO = 'MARKO',
 }
 
 export enum CoreBuilder {
@@ -242,6 +245,13 @@ export const supportedTemplates: TemplateConfiguration[] = [
       return dependencies?.every(Boolean) ?? true;
     },
   },
+  {
+    preset: ProjectType.MARKO,
+    dependencies: ['marko'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
   // DO NOT MOVE ANY TEMPLATES BELOW THIS LINE
   // React is part of every Template, after Storybook is initialized once
   {

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

@@ -107,6 +107,46 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'marko-vite/default-js': {
+    name: 'Marko Latest (Vite | JavaScript)',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template marko',
+    expected: {
+      framework: '@storybook/marko-vite',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'marko-vite/default-ts': {
+    name: 'Marko Latest (Vite | TypeScript)',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template marko-ts',
+    expected: {
+      framework: '@storybook/marko-vite',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'marko-webpack5/default-js': {
+    name: 'Marko Latest (Webpack | JavaScript)',
+    script: 'yarn create webpack5-marko {{beforeDir}}',
+    expected: {
+      framework: '@storybook/marko-webpack5',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
+  'marko-webpack5/default-ts': {
+    name: 'Marko Latest (Webpack | TypeScript)',
+    script: 'yarn create webpack5-marko {{beforeDir}} --typescript',
+    expected: {
+      framework: '@storybook/marko-webpack5',
+      renderer: '@storybook/marko',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'nextjs/12-js': {
     name: 'Next.js v12 (Webpack | JavaScript)',
     script:

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

@@ -15,6 +15,7 @@ export const rendererPackages: Record<string, string> = {
   '@storybook/svelte': 'svelte',
   '@storybook/preact': 'preact',
   '@storybook/server': 'server',
+  '@storybook/marko': 'marko',
   // community (outside of monorepo)
   'storybook-framework-qwik': 'qwik',
   'storybook-solidjs': 'solid',
@@ -40,6 +41,7 @@ export const frameworkPackages: Record<string, string> = {
   '@storybook/vue-webpack5': 'vue-webpack5',
   '@storybook/web-components-vite': 'web-components-vite',
   '@storybook/web-components-webpack5': 'web-components-webpack5',
+  '@storybook/marko': 'marko',
   // community (outside of monorepo)
   'storybook-framework-qwik': 'qwik',
   'storybook-solidjs-vite': 'solid',

docs/configure/environment-variables.md

@@ -31,7 +31,7 @@ Then we can access these environment variables anywhere inside our preview JavaS
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
+<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'marko', 'vue', 'web-components' ]}>
 
 <!-- prettier-ignore-start -->
 
@@ -78,7 +78,7 @@ Then you can access this environment variable anywhere, even within your stories
 
 <!-- prettier-ignore-end -->
 
-<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
+<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'marko', 'vue', 'web-components' ]}>
 
 #### With Vite
 

docs/configure/frameworks.md

@@ -12,10 +12,10 @@ You start by [installing](../get-started/install.md) Storybook into an existing
 
 Storybook provides support for the leading industry builders and frameworks. However, that doesn't mean you can't use Storybook with other frameworks. Below is a list of currently supported frameworks divided by their builders.
 
-| Builder | Framework                                                                |
-| ------- | ------------------------------------------------------------------------ |
-| Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte |
-| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid         |
+| Builder | Framework                                                                       |
+| ------- | ------------------------------------------------------------------------------- |
+| Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte, Marko |
+| Vite    | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid, Marko         |
 
 ### What about feature support?
 

docs/frameworks.js

@@ -1,6 +1,6 @@
 module.exports = {
   coreFrameworks: ['react', 'vue', 'angular', 'web-components'],
-  communityFrameworks: ['ember', 'html', 'svelte', 'preact', 'qwik', 'solid'],
+  communityFrameworks: ['ember', 'html', 'svelte', 'preact', 'qwik', 'solid', 'marko'],
   featureGroups: [
     {
       name: 'Essentials',

docs/get-started/install.md

@@ -99,6 +99,7 @@ Below are some of the most common installation issues and instructions on how to
    'get-started/installation-problems/web-components.mdx',
    'get-started/installation-problems/qwik.mdx',
    'get-started/installation-problems/solid.mdx',
+   'get-started/installation-problems/marko.mdx',
   ]}
 />
 
@@ -120,7 +121,7 @@ Now that you have successfully installed Storybook and understood how it works,
 
 </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', 'marko' ]}>
 
 Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
 

docs/get-started/installation-problems/marko.mdx

@@ -0,0 +1,11 @@
+- Add the `--type marko` flag to the installation command to set up Storybook manually:
+
+  ```shell
+  npx storybook init --type marko
+  ```
+
+- Storybook's CLI provides support for [Yarn](https://yarnpkg.com/), [npm](https://www.npmjs.com/), and [pnpm](https://pnpm.io/) package managers. If you have Yarn installed in your environment but prefer to use another as your default package manager add the `--package-manager` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --package-manager=npm
+  ```

docs/snippets/marko/button-group-story.js.mdx

@@ -0,0 +1,19 @@
+```js
+// ButtonGroup.stories.js
+
+import ButtonGroup from '../ButtonGroup.marko';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+export default {
+  component: ButtonGroup,
+};
+
+export const Pair = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```

docs/snippets/marko/button-group-story.ts-4-9.mdx

@@ -0,0 +1,24 @@
+```tsx
+// ButtonGroup.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/marko';
+
+import ButtonGroup from '../ButtonGroup.marko';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = {
+  component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```

docs/snippets/marko/button-group-story.ts.mdx

@@ -0,0 +1,24 @@
+```tsx
+// ButtonGroup.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/marko';
+
+import ButtonGroup from '../ButtonGroup.marko';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta: Meta<typeof ButtonGroup> = {
+  component: ButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```

docs/snippets/marko/button-story-auto-docs.js.mdx

@@ -0,0 +1,28 @@
+```js
+// Button.stories.js
+
+import Button from './Button.marko';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```

docs/snippets/marko/button-story-auto-docs.ts-4-9.mdx

@@ -0,0 +1,33 @@
+```tsx
+// Button.stories.ts
+
+import type { Meta } from '@storybook/marko';
+
+import Button from './Button.marko';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```