@stories-js/core
Version:
Stories web components to build stories
171 lines • 4.9 kB
JavaScript
/*!
* (C) StoriesJS https://storiesjs.org - GPL-2.0 License
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, Prop, h, Event, Listen } from '@stencil/core';
import { api } from '../../api';
import { state } from '../../store';
export class App {
constructor() {
/**
* Story Modules
*/
this.modules = [];
/**
* Story Modules
*/
this.store = state;
}
/**
* AddonsManager instance
*/
// @Prop() addons: AddonsManager = addonsManager;
/**
* Create story context
*/
createContext(story) {
const context = {
args: Object.assign({}, story.args),
argTypes: Object.assign({}, story.argTypes),
parameters: Object.assign({}, story.parameters),
initialArgs: Object.assign({}, story.args),
};
return context;
}
/**
* Listen the 'hashchange' event and get path from URL.
* First available story could be selected if there is no one was specified in the URL's path after hash
* Method will emmit the 'story' event
*/
onHash() {
// Get path from URL's hash or default value based on first story
const storyId = api.getStoryIdFromURL();
// Set story in state
const story = state.story = (storyId ? state.stories[storyId] : undefined);
console.log('onHash', storyId, story);
// We have to update the URL's hash to keep it in sync
api.selectStory(storyId);
// Send custom event about selected story
this.storyChange.emit(story);
console.log('storyChange emit', story);
// Create context for story
const context = story ? this.createContext(story) : undefined;
state.context = context;
// Send custom event about selected story
this.storyContextChange.emit(context);
console.log('storyContextChange emit', story);
// Inform Addons about changes
// this.addons.storyContextChanged(story, context);
}
;
componentDidLoad() {
console.log('componentDidLoad', this.modules);
api.setStories(this.modules);
// Update internal state and sync it with hash
this.onHash();
}
render() {
return (h("slot", null));
}
static get is() { return "stories-app"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["app.scss"]
}; }
static get styleUrls() { return {
"$": ["app.css"]
}; }
static get properties() { return {
"modules": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "StoryModules",
"resolved": "StoryModule[]",
"references": {
"StoryModules": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Story Modules"
},
"defaultValue": "[]"
},
"store": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "AppState",
"resolved": "StoriesState & NotificationsState & LayoutState & AddonsState",
"references": {
"AppState": {
"location": "import",
"path": "../../store"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Story Modules"
},
"defaultValue": "state"
}
}; }
static get events() { return [{
"method": "storyChange",
"name": "storyChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "StoryComponent",
"resolved": "{ storyId: string; kinds: string[]; storyName: string; storyFn: StoryFn<AnyFramework, Args>; component?: any; subcomponents?: Record<string, any>; decorators?: DecoratorFunction<AnyFramework, Args>[]; args: Partial<Args>; argTypes: Partial<ArgTypes<Args>>; parameters?: Parameters; }",
"references": {
"StoryComponent": {
"location": "import",
"path": "../../types"
}
}
}
}, {
"method": "storyContextChange",
"name": "storyContextChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "StoryContext",
"resolved": "{ component?: any; subcomponents?: Record<string, any>; } & StoryUpdate<Args>",
"references": {
"StoryContext": {
"location": "import",
"path": "../../types"
}
}
}
}]; }
static get listeners() { return [{
"name": "hashchange",
"method": "onHash",
"target": "window",
"capture": false,
"passive": false
}]; }
}
//# sourceMappingURL=app.js.map