mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-11 00:06:25 +08:00
remove .stories.mdx stories and fix tests
This commit is contained in:
parent
a80c3d5ce4
commit
1be44eb1b4
@ -1,25 +0,0 @@
|
|||||||
import { global as globalThis } from '@storybook/global';
|
|
||||||
import { moduleMetadata } from '@storybook/angular';
|
|
||||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
|
||||||
|
|
||||||
export const Button = globalThis.Components.Button;
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="angular/angular-mdx"
|
|
||||||
component={Button}
|
|
||||||
decorators={[moduleMetadata({ declarations: [Button] })]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
# Angular-specific MDX Stories
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Angular Story">
|
|
||||||
{{
|
|
||||||
template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
|
|
||||||
props: {
|
|
||||||
text: 'hello button',
|
|
||||||
onClick: () => {},
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
@ -7,7 +7,6 @@ import { describe, beforeEach, it, expect, vi } from 'vitest';
|
|||||||
|
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
// @ts-expect-error -- cannot find declaration file
|
// @ts-expect-error -- cannot find declaration file
|
||||||
import { createStoriesMdxIndexer } from '@storybook/addon-docs/preset';
|
|
||||||
import { normalizeStoriesEntry } from '@storybook/core-common';
|
import { normalizeStoriesEntry } from '@storybook/core-common';
|
||||||
import type { NormalizedStoriesSpecifier, StoryIndexEntry } from '@storybook/types';
|
import type { NormalizedStoriesSpecifier, StoryIndexEntry } from '@storybook/types';
|
||||||
import { readCsf, getStorySortParameter } from '@storybook/csf-tools';
|
import { readCsf, getStorySortParameter } from '@storybook/csf-tools';
|
||||||
@ -45,7 +44,7 @@ const options: StoryIndexGeneratorOptions = {
|
|||||||
configDir: path.join(__dirname, '__mockdata__'),
|
configDir: path.join(__dirname, '__mockdata__'),
|
||||||
workingDir: path.join(__dirname, '__mockdata__'),
|
workingDir: path.join(__dirname, '__mockdata__'),
|
||||||
storyIndexers: [],
|
storyIndexers: [],
|
||||||
indexers: [csfIndexer, createStoriesMdxIndexer(false)],
|
indexers: [csfIndexer],
|
||||||
storyStoreV7: true,
|
storyStoreV7: true,
|
||||||
docs: { defaultName: 'docs', autodocs: false },
|
docs: { defaultName: 'docs', autodocs: false },
|
||||||
};
|
};
|
||||||
@ -292,51 +291,6 @@ describe('StoryIndexGenerator', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('mdx tagged components', () => {
|
|
||||||
it('adds docs entry with docs enabled', async () => {
|
|
||||||
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
|
|
||||||
'./src/nested/Page.stories.mdx',
|
|
||||||
options
|
|
||||||
);
|
|
||||||
|
|
||||||
const generator = new StoryIndexGenerator([specifier], {
|
|
||||||
...options,
|
|
||||||
});
|
|
||||||
await generator.initialize();
|
|
||||||
|
|
||||||
expect(await generator.getIndex()).toMatchInlineSnapshot(`
|
|
||||||
{
|
|
||||||
"entries": {
|
|
||||||
"page--docs": {
|
|
||||||
"id": "page--docs",
|
|
||||||
"importPath": "./src/nested/Page.stories.mdx",
|
|
||||||
"name": "docs",
|
|
||||||
"storiesImports": [],
|
|
||||||
"tags": [
|
|
||||||
"stories-mdx",
|
|
||||||
"docs",
|
|
||||||
],
|
|
||||||
"title": "Page",
|
|
||||||
"type": "docs",
|
|
||||||
},
|
|
||||||
"page--story-one": {
|
|
||||||
"id": "page--story-one",
|
|
||||||
"importPath": "./src/nested/Page.stories.mdx",
|
|
||||||
"name": "StoryOne",
|
|
||||||
"tags": [
|
|
||||||
"stories-mdx",
|
|
||||||
"story",
|
|
||||||
],
|
|
||||||
"title": "Page",
|
|
||||||
"type": "story",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"v": 4,
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
}, 20_000);
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('autodocs', () => {
|
describe('autodocs', () => {
|
||||||
const autodocsOptions = {
|
const autodocsOptions = {
|
||||||
...options,
|
...options,
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
import { Meta, Story } from '@storybook/addon-docs';
|
|
||||||
|
|
||||||
<Meta component={{}} />
|
|
||||||
|
|
||||||
<Story name="StoryOne" />
|
|
@ -604,53 +604,4 @@ describe('docs entries from story extraction', () => {
|
|||||||
}
|
}
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
it(`Only adds a docs entry and not a story entry when an input has the "docsOnly" tag`, async () => {
|
|
||||||
const relativePath = './src/nested/Page.stories.mdx';
|
|
||||||
const absolutePath = path.join(options.workingDir, relativePath);
|
|
||||||
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
|
|
||||||
|
|
||||||
const generator = new StoryIndexGenerator([specifier], {
|
|
||||||
...options,
|
|
||||||
docs: { defaultName: 'docs', autodocs: false },
|
|
||||||
indexers: [
|
|
||||||
{
|
|
||||||
test: /\.stories\.mdx?$/,
|
|
||||||
createIndex: async (fileName) => [
|
|
||||||
{
|
|
||||||
exportName: '__page',
|
|
||||||
__id: 'page--page',
|
|
||||||
name: 'Page',
|
|
||||||
title: 'Page',
|
|
||||||
tags: [STORIES_MDX_TAG, 'stories-mdx-docsOnly'],
|
|
||||||
importPath: fileName,
|
|
||||||
type: 'story',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
const result = await generator.extractStories(specifier, absolutePath);
|
|
||||||
|
|
||||||
expect(result).toMatchInlineSnapshot(`
|
|
||||||
{
|
|
||||||
"dependents": [],
|
|
||||||
"entries": [
|
|
||||||
{
|
|
||||||
"id": "page--docs",
|
|
||||||
"importPath": "./src/nested/Page.stories.mdx",
|
|
||||||
"name": "docs",
|
|
||||||
"storiesImports": [],
|
|
||||||
"tags": [
|
|
||||||
"stories-mdx",
|
|
||||||
"stories-mdx-docsOnly",
|
|
||||||
"docs",
|
|
||||||
],
|
|
||||||
"title": "Page",
|
|
||||||
"type": "docs",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
"type": "stories",
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
@ -4,8 +4,6 @@ import type { Router, Request, Response } from 'express';
|
|||||||
import Watchpack from 'watchpack';
|
import Watchpack from 'watchpack';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import debounce from 'lodash/debounce.js';
|
import debounce from 'lodash/debounce.js';
|
||||||
// @ts-expect-error -- cannot find declaration file
|
|
||||||
import { createStoriesMdxIndexer } from '@storybook/addon-docs/preset';
|
|
||||||
import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
|
import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
|
||||||
import { normalizeStoriesEntry } from '@storybook/core-common';
|
import { normalizeStoriesEntry } from '@storybook/core-common';
|
||||||
|
|
||||||
@ -45,7 +43,7 @@ const getInitializedStoryIndexGenerator = async (
|
|||||||
) => {
|
) => {
|
||||||
const options: StoryIndexGeneratorOptions = {
|
const options: StoryIndexGeneratorOptions = {
|
||||||
storyIndexers: [],
|
storyIndexers: [],
|
||||||
indexers: [csfIndexer, createStoriesMdxIndexer(false)],
|
indexers: [csfIndexer],
|
||||||
configDir: workingDir,
|
configDir: workingDir,
|
||||||
workingDir,
|
workingDir,
|
||||||
storyStoreV7: true,
|
storyStoreV7: true,
|
||||||
@ -239,29 +237,6 @@ describe('useStoriesJson', () => {
|
|||||||
"title": "nested/Button",
|
"title": "nested/Button",
|
||||||
"type": "story",
|
"type": "story",
|
||||||
},
|
},
|
||||||
"nested-page--docs": {
|
|
||||||
"id": "nested-page--docs",
|
|
||||||
"importPath": "./src/nested/Page.stories.mdx",
|
|
||||||
"name": "docs",
|
|
||||||
"storiesImports": [],
|
|
||||||
"tags": [
|
|
||||||
"stories-mdx",
|
|
||||||
"docs",
|
|
||||||
],
|
|
||||||
"title": "nested/Page",
|
|
||||||
"type": "docs",
|
|
||||||
},
|
|
||||||
"nested-page--story-one": {
|
|
||||||
"id": "nested-page--story-one",
|
|
||||||
"importPath": "./src/nested/Page.stories.mdx",
|
|
||||||
"name": "StoryOne",
|
|
||||||
"tags": [
|
|
||||||
"stories-mdx",
|
|
||||||
"story",
|
|
||||||
],
|
|
||||||
"title": "nested/Page",
|
|
||||||
"type": "story",
|
|
||||||
},
|
|
||||||
"second-nested-g--story-one": {
|
"second-nested-g--story-one": {
|
||||||
"id": "second-nested-g--story-one",
|
"id": "second-nested-g--story-one",
|
||||||
"importPath": "./src/second-nested/G.stories.ts",
|
"importPath": "./src/second-nested/G.stories.ts",
|
||||||
|
@ -1,21 +0,0 @@
|
|||||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
|
||||||
|
|
||||||
<Meta title="html/html-mdx" />
|
|
||||||
|
|
||||||
## HTML-specific MDX Stories
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Basic" height="100px">
|
|
||||||
{'<h1>Hello World</h1>'}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Function" height="100px">
|
|
||||||
{() => {
|
|
||||||
const btn = document.createElement('button');
|
|
||||||
btn.innerHTML = 'Hello Button';
|
|
||||||
return btn;
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
@ -1,48 +0,0 @@
|
|||||||
import { global as globalThis } from '@storybook/global';
|
|
||||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
|
||||||
import ButtonView from './views/ButtonJavaScript.svelte';
|
|
||||||
import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
|
|
||||||
|
|
||||||
<Meta title="stories/renderers/svelte/svelte-mdx" />
|
|
||||||
|
|
||||||
# Svelte-specific MDX stories
|
|
||||||
|
|
||||||
## Primary
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Primary">
|
|
||||||
{{
|
|
||||||
Component: ButtonView,
|
|
||||||
props: {
|
|
||||||
primary: true,
|
|
||||||
text: 'Primary text',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Secondary
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Secondary">
|
|
||||||
{{
|
|
||||||
Component: ButtonView,
|
|
||||||
props: {
|
|
||||||
primary: false,
|
|
||||||
text: 'Secondary text',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="WithDecorator" decorators={[() => BorderDecoratorRed]}>
|
|
||||||
{{
|
|
||||||
Component: ButtonView,
|
|
||||||
props: {
|
|
||||||
primary: false,
|
|
||||||
text: 'Secondary text',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
@ -1,46 +0,0 @@
|
|||||||
import { global as globalThis } from '@storybook/global';
|
|
||||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
|
||||||
|
|
||||||
<Meta title="stories/renderers/vue3/vue3-mdx" />
|
|
||||||
|
|
||||||
# Vue3-specific MDX Stories
|
|
||||||
|
|
||||||
export const Button = globalThis.Components.Button;
|
|
||||||
|
|
||||||
export const Template = (args, { argTypes }) => ({
|
|
||||||
components: { MyButton: Button },
|
|
||||||
template: '<my-button v-bind="args" />',
|
|
||||||
setup() {
|
|
||||||
return { args };
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
## Primary
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Primary">
|
|
||||||
{{
|
|
||||||
components: { MyButton: Button },
|
|
||||||
template: '<my-button :primary="true" label="Primary button" />',
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Secondary
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Secondary">
|
|
||||||
{{
|
|
||||||
components: { MyButton: Button },
|
|
||||||
template: '<my-button :primary="false" label="Secondary button" />',
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## From template
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="From Template" args={{ label: 'From template' }}>
|
|
||||||
{Template.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
Loading…
x
Reference in New Issue
Block a user