-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor ExternalX to reuse DocsContext
Simplifies things down a lot!
- Loading branch information
Showing
9 changed files
with
161 additions
and
256 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React from 'react'; | ||
|
||
import { ThemeProvider, themes, ensure } from '@storybook/theming'; | ||
import { AnyFramework } from '@storybook/csf'; | ||
|
||
import { DocsContext } from '../DocsContext'; | ||
import { ExternalPreview } from './ExternalPreview'; | ||
|
||
let preview: ExternalPreview<AnyFramework>; | ||
|
||
export const ExternalDocsContainer: React.FC<{ projectAnnotations: any }> = ({ | ||
projectAnnotations, | ||
children, | ||
}) => { | ||
if (!preview) preview = new ExternalPreview(projectAnnotations); | ||
|
||
return ( | ||
<DocsContext.Provider value={preview.docsContext()}> | ||
<ThemeProvider theme={ensure(themes.normal)}>{children}</ThemeProvider> | ||
</DocsContext.Provider> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { StoryId, AnyFramework, ComponentTitle, StoryName } from '@storybook/csf'; | ||
import { DocsContext, DocsContextProps } from '@storybook/preview-web'; | ||
import { CSFFile, ModuleExport, ModuleExports, StoryStore } from '@storybook/store'; | ||
|
||
export class ExternalDocsContext<TFramework extends AnyFramework> extends DocsContext<TFramework> { | ||
constructor( | ||
public readonly id: StoryId, | ||
public readonly title: ComponentTitle, | ||
public readonly name: StoryName, | ||
protected store: StoryStore<TFramework>, | ||
public renderStoryToElement: DocsContextProps['renderStoryToElement'], | ||
private processMetaExports: (metaExports: ModuleExports) => CSFFile<TFramework> | ||
) { | ||
super(id, title, name, store, renderStoryToElement, [], true); | ||
} | ||
|
||
setMeta = (metaExports: ModuleExports) => { | ||
const csfFile = this.processMetaExports(metaExports); | ||
this.referenceCSFFile(csfFile, true); | ||
}; | ||
|
||
storyIdByModuleExport(storyExport: ModuleExport, metaExports?: ModuleExports) { | ||
if (metaExports) { | ||
const csfFile = this.processMetaExports(metaExports); | ||
this.referenceCSFFile(csfFile, false); | ||
} | ||
|
||
// This will end up looking up the story id in the CSF file referenced above or via setMeta() | ||
return super.storyIdByModuleExport(storyExport); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import { Preview } from '@storybook/preview-web'; | ||
import { Path, ModuleExports, StoryIndex, composeConfigs } from '@storybook/store'; | ||
import { toId, AnyFramework, ComponentTitle, ProjectAnnotations } from '@storybook/csf'; | ||
import { ExternalDocsContext } from './ExternalDocsContext'; | ||
|
||
type MetaExports = ModuleExports; | ||
|
||
class ConstantMap<TKey, TValue extends string> { | ||
entries = new Map<TKey, TValue>(); | ||
|
||
// eslint-disable-next-line no-useless-constructor | ||
constructor(private prefix: string) {} | ||
|
||
get(key: TKey) { | ||
if (!this.entries.has(key)) { | ||
this.entries.set(key, `${this.prefix}${this.entries.size}` as TValue); | ||
} | ||
return this.entries.get(key); | ||
} | ||
} | ||
|
||
export class ExternalPreview<TFramework extends AnyFramework> extends Preview<TFramework> { | ||
private importPaths = new ConstantMap<MetaExports, Path>('./importPath/'); | ||
|
||
private titles = new ConstantMap<MetaExports, ComponentTitle>('title-'); | ||
|
||
private storyIndex: StoryIndex = { v: 4, entries: {} }; | ||
|
||
private moduleExportsByImportPath: Record<Path, ModuleExports> = {}; | ||
|
||
constructor(public projectAnnotations: ProjectAnnotations) { | ||
super(); | ||
|
||
this.initialize({ | ||
getStoryIndex: () => this.storyIndex, | ||
importFn: (path: Path) => { | ||
return Promise.resolve(this.moduleExportsByImportPath[path]); | ||
}, | ||
getProjectAnnotations: () => | ||
composeConfigs([ | ||
{ parameters: { docs: { inlineStories: true } } }, | ||
this.projectAnnotations, | ||
]), | ||
}); | ||
} | ||
|
||
processMetaExports = (metaExports: MetaExports) => { | ||
const importPath = this.importPaths.get(metaExports); | ||
this.moduleExportsByImportPath[importPath] = metaExports; | ||
|
||
const title = metaExports.default.title || this.titles.get(metaExports); | ||
|
||
const csfFile = this.storyStore.processCSFFileWithCache<TFramework>( | ||
metaExports, | ||
importPath, | ||
title | ||
); | ||
|
||
Object.values(csfFile.stories).forEach(({ id, name }) => { | ||
this.storyIndex.entries[id] = { | ||
id, | ||
importPath, | ||
title, | ||
name, | ||
type: 'story', | ||
}; | ||
}); | ||
|
||
this.onStoriesChanged({ storyIndex: this.storyIndex }); | ||
|
||
return csfFile; | ||
}; | ||
|
||
docsContext = () => { | ||
return new ExternalDocsContext( | ||
'storybook--docs', | ||
'Storybook', | ||
'Docs', | ||
this.storyStore, | ||
this.renderStoryToElement.bind(this), | ||
this.processMetaExports.bind(this) | ||
); | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.