@storybook/vue3 7.0.0-alpha.3 → 7.0.0-alpha.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-C4YTJRJQ.mjs +4 -0
- package/dist/config.d.ts +23 -0
- package/dist/config.js +4 -0
- package/dist/config.mjs +1 -0
- package/dist/index.d.ts +61 -0
- package/dist/index.js +4 -0
- package/dist/index.mjs +1 -0
- package/dist/render-ea26216d.d.ts +23 -0
- package/package.json +39 -15
- package/preview.js +1 -1
- package/LICENSE +0 -21
- package/dist/cjs/config.js +0 -36
- package/dist/cjs/docs/config.js +0 -21
- package/dist/cjs/docs/extractArgTypes.js +0 -53
- package/dist/cjs/index.js +0 -91
- package/dist/cjs/preview/config.js +0 -33
- package/dist/cjs/preview/decorateStory.js +0 -66
- package/dist/cjs/preview/globals.js +0 -11
- package/dist/cjs/preview/index.js +0 -67
- package/dist/cjs/preview/render.js +0 -84
- package/dist/cjs/preview/types-6-0.js +0 -5
- package/dist/cjs/preview/types-7-0.js +0 -5
- package/dist/cjs/preview/types.js +0 -5
- package/dist/esm/config.js +0 -6
- package/dist/esm/docs/config.js +0 -10
- package/dist/esm/docs/extractArgTypes.js +0 -42
- package/dist/esm/index.js +0 -4
- package/dist/esm/preview/config.js +0 -5
- package/dist/esm/preview/decorateStory.js +0 -58
- package/dist/esm/preview/globals.js +0 -6
- package/dist/esm/preview/index.js +0 -37
- package/dist/esm/preview/render.js +0 -66
- package/dist/esm/preview/types-6-0.js +0 -1
- package/dist/esm/preview/types-7-0.js +0 -1
- package/dist/esm/preview/types.js +0 -1
- package/dist/types/config.d.ts +0 -10
- package/dist/types/docs/config.d.ts +0 -9
- package/dist/types/docs/extractArgTypes.d.ts +0 -2
- package/dist/types/index.d.ts +0 -2
- package/dist/types/preview/config.d.ts +0 -5
- package/dist/types/preview/decorateStory.d.ts +0 -3
- package/dist/types/preview/globals.d.ts +0 -1
- package/dist/types/preview/index.d.ts +0 -30
- package/dist/types/preview/render.d.ts +0 -6
- package/dist/types/preview/types-6-0.d.ts +0 -35
- package/dist/types/preview/types-7-0.d.ts +0 -9
- package/dist/types/preview/types.d.ts +0 -15
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{h as F}from"vue";import{sanitizeStoryContextUpdate as l}from"@storybook/store";function C(e){return typeof e=="function"?{render:e,name:e.name}:e}function s(e,t){let o=e;return o==null?null:t?{...C(o),components:{...o.components||{},story:t}}:{render(){return F(o)}}}function g(e,t){return t.reduce((o,p)=>m=>{let r,n=p(u=>(r=o({...m,...l(u)}),r),m);return r||(r=o(m)),n===r?r:s(n,r)},o=>s(e(o)))}import{dedent as d}from"ts-dedent";import{createApp as k,h as c}from"vue";var R=(e,t)=>{let{id:o,component:p}=t;if(!p)throw new Error(`Unable to render story ${o} as the component annotation is missing from the default export`);return c(p,e)},i=e=>{},b=e=>{i=e},y=new Map;function A({title:e,name:t,storyFn:o,showMain:p,showError:m,showException:r},n){let u,a=k({unmounted(){y.delete(n)},render(){return y.set(n,a),i(a),c(u)}});if(a.config.errorHandler=r,u=o(),!u){m({title:`Expecting a Vue component from the story: "${t}" of "${e}".`,description:d`
|
|
2
|
+
Did you forget to return the Vue component from the story?
|
|
3
|
+
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
|
|
4
|
+
`});return}p(),y.has(n)&&y.get(n).unmount(),a.mount(n)}export{g as a,R as b,b as c,A as d};
|
package/dist/config.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as lib_docs_tools_dist_types from 'lib/docs-tools/dist/types';
|
|
2
|
+
import * as lib_addons_dist_types from 'lib/addons/dist/types';
|
|
3
|
+
import * as _storybook_csf from '@storybook/csf';
|
|
4
|
+
import { LegacyStoryFn, DecoratorFunction } from '@storybook/csf';
|
|
5
|
+
import { V as VueFramework } from './render-ea26216d.js';
|
|
6
|
+
export { r as render, a as renderToDOM } from './render-ea26216d.js';
|
|
7
|
+
import '@storybook/store';
|
|
8
|
+
import 'vue';
|
|
9
|
+
|
|
10
|
+
declare const argTypesEnhancers: (<TFramework extends _storybook_csf.AnyFramework>(context: _storybook_csf.StoryContextForEnhancers<TFramework, _storybook_csf.Args>) => _storybook_csf.StrictArgTypes<_storybook_csf.Args> | lib_addons_dist_types.Parameters)[];
|
|
11
|
+
|
|
12
|
+
declare function decorateStory(storyFn: LegacyStoryFn<VueFramework>, decorators: DecoratorFunction<VueFramework>[]): LegacyStoryFn<VueFramework>;
|
|
13
|
+
|
|
14
|
+
declare const parameters: {
|
|
15
|
+
docs: {
|
|
16
|
+
inlineStories: boolean;
|
|
17
|
+
extractArgTypes: lib_docs_tools_dist_types.ArgTypesExtractor;
|
|
18
|
+
extractComponentDescription: typeof lib_docs_tools_dist_types.extractComponentDescription;
|
|
19
|
+
};
|
|
20
|
+
framework: "vue3";
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { decorateStory as applyDecorators, argTypesEnhancers, parameters };
|
package/dist/config.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var f=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var v=(r,o)=>{for(var e in o)f(r,e,{get:o[e],enumerable:!0})},O=(r,o,e,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of D(o))!E.call(r,t)&&t!==e&&f(r,t,{get:()=>o[t],enumerable:!(p=R(o,t))||p.enumerable});return r};var L=r=>O(f({},"__esModule",{value:!0}),r);var z={};v(z,{applyDecorators:()=>h,argTypesEnhancers:()=>F,parameters:()=>$,render:()=>x,renderToDOM:()=>C});module.exports=L(z);var y=require("@storybook/docs-tools");var c=require("@storybook/docs-tools"),M=["props","events","slots","methods"],l=r=>{if(!(0,c.hasDocgen)(r))return null;let o={};return M.forEach(e=>{(0,c.extractComponentProps)(r,e).forEach(({propDef:t,docgenInfo:n,jsDocTags:s})=>{let{name:m,type:a,description:w,defaultValue:T,required:A}=t,b=e==="props"?(0,c.convert)(n):{name:"void"};o[m]={name:m,description:w,type:{required:A,...b},table:{type:a,jsDocTags:s,defaultValue:T,category:e}}})}),o};var d={docs:{inlineStories:!0,extractArgTypes:l,extractComponentDescription:y.extractComponentDescription}},F=[y.enhanceArgTypes];var g=require("ts-dedent"),u=require("vue"),x=(r,o)=>{let{id:e,component:p}=o;if(!p)throw new Error(`Unable to render story ${e} as the component annotation is missing from the default export`);return(0,u.h)(p,r)},P=r=>{};var i=new Map;function C({title:r,name:o,storyFn:e,showMain:p,showError:t,showException:n},s){let m,a=(0,u.createApp)({unmounted(){i.delete(s)},render(){return i.set(s,a),P(a),(0,u.h)(m)}});if(a.config.errorHandler=n,m=e(),!m){t({title:`Expecting a Vue component from the story: "${o}" of "${r}".`,description:g.dedent`
|
|
2
|
+
Did you forget to return the Vue component from the story?
|
|
3
|
+
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
|
|
4
|
+
`});return}p(),i.has(s)&&i.get(s).unmount(),a.mount(s)}var S=require("vue"),V=require("@storybook/store");function U(r){return typeof r=="function"?{render:r,name:r.name}:r}function k(r,o){let e=r;return e==null?null:o?{...U(e),components:{...e.components||{},story:o}}:{render(){return(0,S.h)(e)}}}function h(r,o){return o.reduce((e,p)=>t=>{let n,s=p(m=>(n=e({...t,...(0,V.sanitizeStoryContextUpdate)(m)}),n),t);return n||(n=e(t)),s===n?n:k(s,n)},e=>k(r(e)))}var $={framework:"vue3",...d};0&&(module.exports={applyDecorators,argTypesEnhancers,parameters,render,renderToDOM});
|
package/dist/config.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as u,b as x,d as T}from"./chunk-C4YTJRJQ.mjs";import{extractComponentDescription as S,enhanceArgTypes as b}from"@storybook/docs-tools";import{hasDocgen as g,extractComponentProps as h,convert as A}from"@storybook/docs-tools";var E=["props","events","slots","methods"],p=e=>{if(!g(e))return null;let o={};return E.forEach(r=>{h(e,r).forEach(({propDef:c,docgenInfo:n,jsDocTags:m})=>{let{name:t,type:y,description:f,defaultValue:i,required:d}=c,l=r==="props"?A(n):{name:"void"};o[t]={name:t,description:f,type:{required:d,...l},table:{type:y,jsDocTags:m,defaultValue:i,category:r}}})}),o};var a={docs:{inlineStories:!0,extractArgTypes:p,extractComponentDescription:S}},v=[b];var w={framework:"vue3",...a};export{u as applyDecorators,v as argTypesEnhancers,w as parameters,x as render,T as renderToDOM};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import * as lib_store_dist_types from 'lib/store/dist/types';
|
|
2
|
+
import * as lib_client_api_dist_types_ClientApi from 'lib/client-api/dist/types/ClientApi';
|
|
3
|
+
import * as _storybook_csf from '@storybook/csf';
|
|
4
|
+
import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/csf';
|
|
5
|
+
export { ArgTypes, Args, Parameters, StoryContext } from '@storybook/csf';
|
|
6
|
+
import * as _storybook_addons from '@storybook/addons';
|
|
7
|
+
import { ClientStoryApi, Loadable } from '@storybook/addons';
|
|
8
|
+
import { App } from 'vue';
|
|
9
|
+
import { V as VueFramework, I as IStorybookSection } from './render-ea26216d.js';
|
|
10
|
+
export { s as setup } from './render-ea26216d.js';
|
|
11
|
+
import '@storybook/store';
|
|
12
|
+
|
|
13
|
+
interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
|
|
14
|
+
setAddon(addon: any): void;
|
|
15
|
+
configure(loader: Loadable, module: NodeModule): void;
|
|
16
|
+
getStorybook(): IStorybookSection[];
|
|
17
|
+
clearDecorators(): void;
|
|
18
|
+
forceReRender(): void;
|
|
19
|
+
raw: () => any;
|
|
20
|
+
load: (...args: any[]) => void;
|
|
21
|
+
app: App;
|
|
22
|
+
}
|
|
23
|
+
declare const storiesOf: ClientApi['storiesOf'];
|
|
24
|
+
declare const configure: ClientApi['configure'];
|
|
25
|
+
declare const addDecorator: (() => never) | ((decorator: _storybook_csf.DecoratorFunction<VueFramework, _storybook_addons.Args>) => void);
|
|
26
|
+
declare const addParameters: (() => never) | (({ globals, globalTypes, ...parameters }: _storybook_csf.Parameters & {
|
|
27
|
+
globals?: _storybook_csf.Globals;
|
|
28
|
+
globalTypes?: _storybook_csf.GlobalTypes;
|
|
29
|
+
}) => void);
|
|
30
|
+
declare const clearDecorators: (() => never) | (() => void);
|
|
31
|
+
declare const setAddon: (() => never) | ((addon: any) => void);
|
|
32
|
+
declare const forceReRender: (() => never) | (() => void);
|
|
33
|
+
declare const getStorybook: (() => never) | (() => lib_client_api_dist_types_ClientApi.GetStorybookKind<VueFramework>[]);
|
|
34
|
+
declare const raw: (() => never) | (() => lib_store_dist_types.BoundStory<VueFramework>[]);
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Metadata to configure the stories for a component.
|
|
38
|
+
*
|
|
39
|
+
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
|
|
40
|
+
*/
|
|
41
|
+
declare type Meta<TArgs = Args> = ComponentAnnotations<VueFramework, TArgs>;
|
|
42
|
+
/**
|
|
43
|
+
* Story function that represents a CSFv2 component example.
|
|
44
|
+
*
|
|
45
|
+
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
46
|
+
*/
|
|
47
|
+
declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
|
|
48
|
+
/**
|
|
49
|
+
* Story function that represents a CSFv3 component example.
|
|
50
|
+
*
|
|
51
|
+
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
52
|
+
*/
|
|
53
|
+
declare type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
|
|
54
|
+
/**
|
|
55
|
+
* Story function that represents a CSFv3 component example.
|
|
56
|
+
*
|
|
57
|
+
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
58
|
+
*/
|
|
59
|
+
declare type Story<TArgs = Args> = StoryObj<TArgs>;
|
|
60
|
+
|
|
61
|
+
export { Meta, Story, StoryFn, StoryObj, addDecorator, addParameters, clearDecorators, configure, forceReRender, getStorybook, raw, setAddon, storiesOf };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
var h=Object.create;var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var M=(o,e)=>{for(var r in e)u(o,r,{get:e[r],enumerable:!0})},f=(o,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of T(e))!L.call(o,t)&&t!==r&&u(o,t,{get:()=>e[t],enumerable:!(n=v(e,t))||n.enumerable});return o};var E=(o,e,r)=>(r=o!=null?h(D(o)):{},f(e||!o||!o.__esModule?u(r,"default",{value:o,enumerable:!0}):r,o)),K=o=>f(u({},"__esModule",{value:!0}),o);var H={};M(H,{addDecorator:()=>$,addParameters:()=>z,clearDecorators:()=>B,configure:()=>_,forceReRender:()=>N,getStorybook:()=>W,raw:()=>Y,setAddon:()=>I,setup:()=>x,storiesOf:()=>U});module.exports=K(H);var d=E(require("global")),{window:l}=d.default;l.STORYBOOK_REACT_CLASSES={};l.STORYBOOK_ENV="vue3";var R=require("@storybook/core-client");var C=require("vue"),S=require("@storybook/store");function P(o){return typeof o=="function"?{render:o,name:o.name}:o}function F(o,e){let r=o;return r==null?null:e?{...P(r),components:{...r.components||{},story:e}}:{render(){return(0,C.h)(r)}}}function k(o,e){return e.reduce((r,n)=>t=>{let p,m=n(a=>(p=r({...t,...(0,S.sanitizeStoryContextUpdate)(a)}),p),t);return p||(p=r(t)),m===p?p:F(m,p)},r=>F(o(r)))}var w=require("ts-dedent"),s=require("vue"),A=(o,e)=>{let{id:r,component:n}=e;if(!n)throw new Error(`Unable to render story ${r} as the component annotation is missing from the default export`);return(0,s.h)(n,o)},g=o=>{},x=o=>{g=o},y=new Map;function V({title:o,name:e,storyFn:r,showMain:n,showError:t,showException:p},m){let a,c=(0,s.createApp)({unmounted(){y.delete(m)},render(){return y.set(m,c),g(c),(0,s.h)(a)}});if(c.config.errorHandler=p,a=r(),!a){t({title:`Expecting a Vue component from the story: "${e}" of "${o}".`,description:w.dedent`
|
|
2
|
+
Did you forget to return the Vue component from the story?
|
|
3
|
+
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
|
|
4
|
+
`});return}n(),y.has(m)&&y.get(m).unmount(),c.mount(m)}var O="vue3",i=(0,R.start)(V,{decorateStory:k,render:A}),U=(o,e)=>i.clientApi.storiesOf(o,e).addParameters({framework:O}),_=(...o)=>i.configure(O,...o),{addDecorator:$}=i.clientApi,{addParameters:z}=i.clientApi,{clearDecorators:B}=i.clientApi,{setAddon:I}=i.clientApi,{forceReRender:N}=i,{getStorybook:W}=i.clientApi,{raw:Y}=i.clientApi;var b;(b=module==null?void 0:module.hot)==null||b.decline();0&&(module.exports={addDecorator,addParameters,clearDecorators,configure,forceReRender,getStorybook,raw,setAddon,setup,storiesOf});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as e,b as n,c as A,d as p}from"./chunk-C4YTJRJQ.mjs";import d from"global";var{window:i}=d;i.STORYBOOK_REACT_CLASSES={};i.STORYBOOK_ENV="vue3";import{start as c}from"@storybook/core-client";var s="vue3",o=c(p,{decorateStory:e,render:n}),g=(r,a)=>o.clientApi.storiesOf(r,a).addParameters({framework:s}),S=(...r)=>o.configure(s,...r),{addDecorator:u}=o.clientApi,{addParameters:x}=o.clientApi,{clearDecorators:k}=o.clientApi,{setAddon:O}=o.clientApi,{forceReRender:T}=o,{getStorybook:b}=o.clientApi,{raw:w}=o.clientApi;module?.hot?.decline();export{u as addDecorator,x as addParameters,k as clearDecorators,S as configure,T as forceReRender,b as getStorybook,w as raw,O as setAddon,A as setup,g as storiesOf};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { RenderContext } from '@storybook/store';
|
|
2
|
+
import { ArgsStoryFn } from '@storybook/csf';
|
|
3
|
+
import { ConcreteComponent } from 'vue';
|
|
4
|
+
|
|
5
|
+
declare type StoryFnVueReturnType = ConcreteComponent<any>;
|
|
6
|
+
interface IStorybookStory {
|
|
7
|
+
name: string;
|
|
8
|
+
render: (context: any) => any;
|
|
9
|
+
}
|
|
10
|
+
interface IStorybookSection {
|
|
11
|
+
kind: string;
|
|
12
|
+
stories: IStorybookStory[];
|
|
13
|
+
}
|
|
14
|
+
declare type VueFramework = {
|
|
15
|
+
component: ConcreteComponent<any>;
|
|
16
|
+
storyResult: StoryFnVueReturnType;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
declare const render: ArgsStoryFn<VueFramework>;
|
|
20
|
+
declare const setup: (fn: (app: any) => void) => void;
|
|
21
|
+
declare function renderToDOM({ title, name, storyFn, showMain, showError, showException }: RenderContext<VueFramework>, domElement: Element): void;
|
|
22
|
+
|
|
23
|
+
export { IStorybookSection as I, VueFramework as V, renderToDOM as a, render as r, setup as s };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/vue3",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.33",
|
|
4
4
|
"description": "Storybook Vue 3 renderer",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -19,34 +19,51 @@
|
|
|
19
19
|
"url": "https://opencollective.com/storybook"
|
|
20
20
|
},
|
|
21
21
|
"license": "MIT",
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"require": "./dist/index.js",
|
|
25
|
+
"import": "./dist/index.mjs",
|
|
26
|
+
"types": "./dist/index.d.ts"
|
|
27
|
+
},
|
|
28
|
+
"./preview": {
|
|
29
|
+
"require": "./dist/config.js",
|
|
30
|
+
"import": "./dist/config.mjs",
|
|
31
|
+
"types": "./dist/config.d.ts"
|
|
32
|
+
},
|
|
33
|
+
"./package.json": {
|
|
34
|
+
"require": "./package.json",
|
|
35
|
+
"import": "./package.json",
|
|
36
|
+
"types": "./package.json"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"main": "dist/index.js",
|
|
40
|
+
"module": "dist/index.mjs",
|
|
41
|
+
"types": "dist/index.d.ts",
|
|
25
42
|
"files": [
|
|
26
|
-
"bin/**/*",
|
|
27
43
|
"dist/**/*",
|
|
28
44
|
"README.md",
|
|
29
45
|
"*.js",
|
|
30
46
|
"*.d.ts"
|
|
31
47
|
],
|
|
32
48
|
"scripts": {
|
|
33
|
-
"
|
|
49
|
+
"check": "tsc --noEmit",
|
|
50
|
+
"prep": "../../../scripts/prepare/bundle.ts"
|
|
34
51
|
},
|
|
35
52
|
"dependencies": {
|
|
36
|
-
"@storybook/addons": "7.0.0-alpha.
|
|
37
|
-
"@storybook/core-client": "7.0.0-alpha.
|
|
38
|
-
"@storybook/csf": "0.0.2--canary.
|
|
39
|
-
"@storybook/docs-tools": "7.0.0-alpha.
|
|
40
|
-
"@storybook/store": "7.0.0-alpha.
|
|
41
|
-
"core-js": "^3.8.2",
|
|
53
|
+
"@storybook/addons": "7.0.0-alpha.33",
|
|
54
|
+
"@storybook/core-client": "7.0.0-alpha.33",
|
|
55
|
+
"@storybook/csf": "0.0.2--canary.0899bb7.0",
|
|
56
|
+
"@storybook/docs-tools": "7.0.0-alpha.33",
|
|
57
|
+
"@storybook/store": "7.0.0-alpha.33",
|
|
42
58
|
"global": "^4.4.0",
|
|
43
59
|
"react": "16.14.0",
|
|
44
60
|
"react-dom": "16.14.0",
|
|
45
|
-
"regenerator-runtime": "^0.13.7",
|
|
46
61
|
"ts-dedent": "^2.0.0"
|
|
47
62
|
},
|
|
48
63
|
"devDependencies": {
|
|
49
|
-
"
|
|
64
|
+
"@digitak/esrun": "^3.2.2",
|
|
65
|
+
"typescript": "~4.6.3",
|
|
66
|
+
"vue": "^3.0.0"
|
|
50
67
|
},
|
|
51
68
|
"peerDependencies": {
|
|
52
69
|
"@babel/core": "*",
|
|
@@ -59,5 +76,12 @@
|
|
|
59
76
|
"publishConfig": {
|
|
60
77
|
"access": "public"
|
|
61
78
|
},
|
|
62
|
-
"
|
|
79
|
+
"bundler": {
|
|
80
|
+
"entries": [
|
|
81
|
+
"./src/index.ts",
|
|
82
|
+
"./src/config.ts"
|
|
83
|
+
],
|
|
84
|
+
"platform": "browser"
|
|
85
|
+
},
|
|
86
|
+
"gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
|
|
63
87
|
}
|
package/preview.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './dist/
|
|
1
|
+
export * from './dist/config.mjs';
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
The MIT License (MIT)
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
|
13
|
-
all copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
-
THE SOFTWARE.
|
package/dist/cjs/config.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var _exportNames = {
|
|
7
|
-
parameters: true,
|
|
8
|
-
argTypesEnhancers: true
|
|
9
|
-
};
|
|
10
|
-
Object.defineProperty(exports, "argTypesEnhancers", {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function () {
|
|
13
|
-
return _config.argTypesEnhancers;
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
exports.parameters = void 0;
|
|
17
|
-
|
|
18
|
-
var _config = require("./docs/config");
|
|
19
|
-
|
|
20
|
-
var _config2 = require("./preview/config");
|
|
21
|
-
|
|
22
|
-
Object.keys(_config2).forEach(function (key) {
|
|
23
|
-
if (key === "default" || key === "__esModule") return;
|
|
24
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
25
|
-
if (key in exports && exports[key] === _config2[key]) return;
|
|
26
|
-
Object.defineProperty(exports, key, {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function () {
|
|
29
|
-
return _config2[key];
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
const parameters = Object.assign({
|
|
34
|
-
framework: 'vue3'
|
|
35
|
-
}, _config.parameters);
|
|
36
|
-
exports.parameters = parameters;
|
package/dist/cjs/docs/config.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.parameters = exports.argTypesEnhancers = void 0;
|
|
7
|
-
|
|
8
|
-
var _docsTools = require("@storybook/docs-tools");
|
|
9
|
-
|
|
10
|
-
var _extractArgTypes = require("./extractArgTypes");
|
|
11
|
-
|
|
12
|
-
const parameters = {
|
|
13
|
-
docs: {
|
|
14
|
-
inlineStories: true,
|
|
15
|
-
extractArgTypes: _extractArgTypes.extractArgTypes,
|
|
16
|
-
extractComponentDescription: _docsTools.extractComponentDescription
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
exports.parameters = parameters;
|
|
20
|
-
const argTypesEnhancers = [_docsTools.enhanceArgTypes];
|
|
21
|
-
exports.argTypesEnhancers = argTypesEnhancers;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.extractArgTypes = void 0;
|
|
7
|
-
|
|
8
|
-
var _docsTools = require("@storybook/docs-tools");
|
|
9
|
-
|
|
10
|
-
const SECTIONS = ['props', 'events', 'slots'];
|
|
11
|
-
|
|
12
|
-
const extractArgTypes = component => {
|
|
13
|
-
if (!(0, _docsTools.hasDocgen)(component)) {
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const results = {};
|
|
18
|
-
SECTIONS.forEach(section => {
|
|
19
|
-
const props = (0, _docsTools.extractComponentProps)(component, section);
|
|
20
|
-
props.forEach(({
|
|
21
|
-
propDef,
|
|
22
|
-
docgenInfo,
|
|
23
|
-
jsDocTags
|
|
24
|
-
}) => {
|
|
25
|
-
const {
|
|
26
|
-
name,
|
|
27
|
-
type,
|
|
28
|
-
description,
|
|
29
|
-
defaultValue: defaultSummary,
|
|
30
|
-
required
|
|
31
|
-
} = propDef;
|
|
32
|
-
const sbType = section === 'props' ? (0, _docsTools.convert)(docgenInfo) : {
|
|
33
|
-
name: 'void'
|
|
34
|
-
};
|
|
35
|
-
results[name] = {
|
|
36
|
-
name,
|
|
37
|
-
description,
|
|
38
|
-
type: Object.assign({
|
|
39
|
-
required
|
|
40
|
-
}, sbType),
|
|
41
|
-
table: {
|
|
42
|
-
type,
|
|
43
|
-
jsDocTags,
|
|
44
|
-
defaultValue: defaultSummary,
|
|
45
|
-
category: section
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
return results;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
exports.extractArgTypes = extractArgTypes;
|
package/dist/cjs/index.js
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var _exportNames = {
|
|
7
|
-
storiesOf: true,
|
|
8
|
-
setAddon: true,
|
|
9
|
-
addDecorator: true,
|
|
10
|
-
addParameters: true,
|
|
11
|
-
configure: true,
|
|
12
|
-
getStorybook: true,
|
|
13
|
-
forceReRender: true,
|
|
14
|
-
raw: true,
|
|
15
|
-
setup: true
|
|
16
|
-
};
|
|
17
|
-
Object.defineProperty(exports, "addDecorator", {
|
|
18
|
-
enumerable: true,
|
|
19
|
-
get: function () {
|
|
20
|
-
return _preview.addDecorator;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
Object.defineProperty(exports, "addParameters", {
|
|
24
|
-
enumerable: true,
|
|
25
|
-
get: function () {
|
|
26
|
-
return _preview.addParameters;
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
Object.defineProperty(exports, "configure", {
|
|
30
|
-
enumerable: true,
|
|
31
|
-
get: function () {
|
|
32
|
-
return _preview.configure;
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
Object.defineProperty(exports, "forceReRender", {
|
|
36
|
-
enumerable: true,
|
|
37
|
-
get: function () {
|
|
38
|
-
return _preview.forceReRender;
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
Object.defineProperty(exports, "getStorybook", {
|
|
42
|
-
enumerable: true,
|
|
43
|
-
get: function () {
|
|
44
|
-
return _preview.getStorybook;
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
Object.defineProperty(exports, "raw", {
|
|
48
|
-
enumerable: true,
|
|
49
|
-
get: function () {
|
|
50
|
-
return _preview.raw;
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
Object.defineProperty(exports, "setAddon", {
|
|
54
|
-
enumerable: true,
|
|
55
|
-
get: function () {
|
|
56
|
-
return _preview.setAddon;
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
Object.defineProperty(exports, "setup", {
|
|
60
|
-
enumerable: true,
|
|
61
|
-
get: function () {
|
|
62
|
-
return _preview.setup;
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
Object.defineProperty(exports, "storiesOf", {
|
|
66
|
-
enumerable: true,
|
|
67
|
-
get: function () {
|
|
68
|
-
return _preview.storiesOf;
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
var _preview = require("./preview");
|
|
73
|
-
|
|
74
|
-
var _types = require("./preview/types-6-0");
|
|
75
|
-
|
|
76
|
-
Object.keys(_types).forEach(function (key) {
|
|
77
|
-
if (key === "default" || key === "__esModule") return;
|
|
78
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
79
|
-
if (key in exports && exports[key] === _types[key]) return;
|
|
80
|
-
Object.defineProperty(exports, key, {
|
|
81
|
-
enumerable: true,
|
|
82
|
-
get: function () {
|
|
83
|
-
return _types[key];
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
var _module, _module$hot;
|
|
89
|
-
|
|
90
|
-
// optimization: stop HMR propagation in webpack
|
|
91
|
-
(_module = module) === null || _module === void 0 ? void 0 : (_module$hot = _module.hot) === null || _module$hot === void 0 ? void 0 : _module$hot.decline();
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "applyDecorators", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _decorateStory.decorateStory;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
exports.parameters = void 0;
|
|
13
|
-
Object.defineProperty(exports, "render", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
get: function () {
|
|
16
|
-
return _render.render;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(exports, "renderToDOM", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _render.renderToDOM;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
var _render = require("./render");
|
|
27
|
-
|
|
28
|
-
var _decorateStory = require("./decorateStory");
|
|
29
|
-
|
|
30
|
-
const parameters = {
|
|
31
|
-
framework: 'vue3'
|
|
32
|
-
};
|
|
33
|
-
exports.parameters = parameters;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.decorateStory = decorateStory;
|
|
7
|
-
|
|
8
|
-
var _vue = require("vue");
|
|
9
|
-
|
|
10
|
-
var _store = require("@storybook/store");
|
|
11
|
-
|
|
12
|
-
/*
|
|
13
|
-
This normalizes a functional component into a render method in ComponentOptions.
|
|
14
|
-
|
|
15
|
-
The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
|
|
16
|
-
method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
|
|
17
|
-
*/
|
|
18
|
-
function normalizeFunctionalComponent(options) {
|
|
19
|
-
return typeof options === 'function' ? {
|
|
20
|
-
render: options,
|
|
21
|
-
name: options.name
|
|
22
|
-
} : options;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function prepare(rawStory, innerStory) {
|
|
26
|
-
const story = rawStory;
|
|
27
|
-
|
|
28
|
-
if (story == null) {
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
if (innerStory) {
|
|
33
|
-
return Object.assign({}, normalizeFunctionalComponent(story), {
|
|
34
|
-
components: Object.assign({}, story.components || {}, {
|
|
35
|
-
story: innerStory
|
|
36
|
-
})
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
return {
|
|
41
|
-
render() {
|
|
42
|
-
return (0, _vue.h)(story);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function decorateStory(storyFn, decorators) {
|
|
49
|
-
return decorators.reduce((decorated, decorator) => context => {
|
|
50
|
-
let story;
|
|
51
|
-
const decoratedStory = decorator(update => {
|
|
52
|
-
story = decorated(Object.assign({}, context, (0, _store.sanitizeStoryContextUpdate)(update)));
|
|
53
|
-
return story;
|
|
54
|
-
}, context);
|
|
55
|
-
|
|
56
|
-
if (!story) {
|
|
57
|
-
story = decorated(context);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if (decoratedStory === story) {
|
|
61
|
-
return story;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
return prepare(decoratedStory, story);
|
|
65
|
-
}, context => prepare(storyFn(context)));
|
|
66
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _global = _interopRequireDefault(require("global"));
|
|
4
|
-
|
|
5
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
6
|
-
|
|
7
|
-
const {
|
|
8
|
-
window: globalWindow
|
|
9
|
-
} = _global.default;
|
|
10
|
-
globalWindow.STORYBOOK_REACT_CLASSES = {};
|
|
11
|
-
globalWindow.STORYBOOK_ENV = 'vue3';
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.setAddon = exports.raw = exports.getStorybook = exports.forceReRender = exports.configure = exports.clearDecorators = exports.addParameters = exports.addDecorator = void 0;
|
|
7
|
-
Object.defineProperty(exports, "setup", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _render.setup;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
exports.storiesOf = void 0;
|
|
14
|
-
|
|
15
|
-
var _coreClient = require("@storybook/core-client");
|
|
16
|
-
|
|
17
|
-
require("./globals");
|
|
18
|
-
|
|
19
|
-
var _decorateStory = require("./decorateStory");
|
|
20
|
-
|
|
21
|
-
var _render = require("./render");
|
|
22
|
-
|
|
23
|
-
const framework = 'vue3';
|
|
24
|
-
const api = (0, _coreClient.start)(_render.renderToDOM, {
|
|
25
|
-
decorateStory: _decorateStory.decorateStory,
|
|
26
|
-
render: _render.render
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
const storiesOf = (kind, m) => {
|
|
30
|
-
return api.clientApi.storiesOf(kind, m).addParameters({
|
|
31
|
-
framework
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
exports.storiesOf = storiesOf;
|
|
36
|
-
|
|
37
|
-
const configure = (...args) => api.configure(framework, ...args);
|
|
38
|
-
|
|
39
|
-
exports.configure = configure;
|
|
40
|
-
const {
|
|
41
|
-
addDecorator
|
|
42
|
-
} = api.clientApi;
|
|
43
|
-
exports.addDecorator = addDecorator;
|
|
44
|
-
const {
|
|
45
|
-
addParameters
|
|
46
|
-
} = api.clientApi;
|
|
47
|
-
exports.addParameters = addParameters;
|
|
48
|
-
const {
|
|
49
|
-
clearDecorators
|
|
50
|
-
} = api.clientApi;
|
|
51
|
-
exports.clearDecorators = clearDecorators;
|
|
52
|
-
const {
|
|
53
|
-
setAddon
|
|
54
|
-
} = api.clientApi;
|
|
55
|
-
exports.setAddon = setAddon;
|
|
56
|
-
const {
|
|
57
|
-
forceReRender
|
|
58
|
-
} = api;
|
|
59
|
-
exports.forceReRender = forceReRender;
|
|
60
|
-
const {
|
|
61
|
-
getStorybook
|
|
62
|
-
} = api.clientApi;
|
|
63
|
-
exports.getStorybook = getStorybook;
|
|
64
|
-
const {
|
|
65
|
-
raw
|
|
66
|
-
} = api.clientApi;
|
|
67
|
-
exports.raw = raw;
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.render = void 0;
|
|
7
|
-
exports.renderToDOM = renderToDOM;
|
|
8
|
-
exports.setup = void 0;
|
|
9
|
-
|
|
10
|
-
var _tsDedent = _interopRequireDefault(require("ts-dedent"));
|
|
11
|
-
|
|
12
|
-
var _vue = require("vue");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
const render = (props, context) => {
|
|
17
|
-
const {
|
|
18
|
-
id,
|
|
19
|
-
component: Component
|
|
20
|
-
} = context;
|
|
21
|
-
|
|
22
|
-
if (!Component) {
|
|
23
|
-
throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
|
|
24
|
-
} // TODO remove this hack
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return (0, _vue.h)(Component, props);
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
exports.render = render;
|
|
31
|
-
|
|
32
|
-
let setupFunction = app => {};
|
|
33
|
-
|
|
34
|
-
const setup = fn => {
|
|
35
|
-
setupFunction = fn;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
exports.setup = setup;
|
|
39
|
-
const map = new Map();
|
|
40
|
-
|
|
41
|
-
function renderToDOM({
|
|
42
|
-
title,
|
|
43
|
-
name,
|
|
44
|
-
storyFn,
|
|
45
|
-
showMain,
|
|
46
|
-
showError,
|
|
47
|
-
showException
|
|
48
|
-
}, domElement) {
|
|
49
|
-
// TODO: explain cyclical nature of these app => story => mount
|
|
50
|
-
let element;
|
|
51
|
-
const storybookApp = (0, _vue.createApp)({
|
|
52
|
-
unmounted() {
|
|
53
|
-
map.delete(domElement);
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
render() {
|
|
57
|
-
map.set(domElement, storybookApp);
|
|
58
|
-
setupFunction(storybookApp);
|
|
59
|
-
return (0, _vue.h)(element);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
});
|
|
63
|
-
storybookApp.config.errorHandler = showException;
|
|
64
|
-
element = storyFn();
|
|
65
|
-
|
|
66
|
-
if (!element) {
|
|
67
|
-
showError({
|
|
68
|
-
title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
|
|
69
|
-
description: (0, _tsDedent.default)`
|
|
70
|
-
Did you forget to return the Vue component from the story?
|
|
71
|
-
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
|
|
72
|
-
`
|
|
73
|
-
});
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
showMain();
|
|
78
|
-
|
|
79
|
-
if (map.has(domElement)) {
|
|
80
|
-
map.get(domElement).unmount(domElement);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
storybookApp.mount(domElement);
|
|
84
|
-
}
|
package/dist/esm/config.js
DELETED
package/dist/esm/docs/config.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
|
|
2
|
-
import { extractArgTypes } from './extractArgTypes';
|
|
3
|
-
export const parameters = {
|
|
4
|
-
docs: {
|
|
5
|
-
inlineStories: true,
|
|
6
|
-
extractArgTypes,
|
|
7
|
-
extractComponentDescription
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
export const argTypesEnhancers = [enhanceArgTypes];
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { hasDocgen, extractComponentProps, convert } from '@storybook/docs-tools';
|
|
2
|
-
const SECTIONS = ['props', 'events', 'slots'];
|
|
3
|
-
export const extractArgTypes = component => {
|
|
4
|
-
if (!hasDocgen(component)) {
|
|
5
|
-
return null;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const results = {};
|
|
9
|
-
SECTIONS.forEach(section => {
|
|
10
|
-
const props = extractComponentProps(component, section);
|
|
11
|
-
props.forEach(({
|
|
12
|
-
propDef,
|
|
13
|
-
docgenInfo,
|
|
14
|
-
jsDocTags
|
|
15
|
-
}) => {
|
|
16
|
-
const {
|
|
17
|
-
name,
|
|
18
|
-
type,
|
|
19
|
-
description,
|
|
20
|
-
defaultValue: defaultSummary,
|
|
21
|
-
required
|
|
22
|
-
} = propDef;
|
|
23
|
-
const sbType = section === 'props' ? convert(docgenInfo) : {
|
|
24
|
-
name: 'void'
|
|
25
|
-
};
|
|
26
|
-
results[name] = {
|
|
27
|
-
name,
|
|
28
|
-
description,
|
|
29
|
-
type: Object.assign({
|
|
30
|
-
required
|
|
31
|
-
}, sbType),
|
|
32
|
-
table: {
|
|
33
|
-
type,
|
|
34
|
-
jsDocTags,
|
|
35
|
-
defaultValue: defaultSummary,
|
|
36
|
-
category: section
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
|
-
return results;
|
|
42
|
-
};
|
package/dist/esm/index.js
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { h } from 'vue';
|
|
2
|
-
import { sanitizeStoryContextUpdate } from '@storybook/store';
|
|
3
|
-
|
|
4
|
-
/*
|
|
5
|
-
This normalizes a functional component into a render method in ComponentOptions.
|
|
6
|
-
|
|
7
|
-
The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup`
|
|
8
|
-
method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator.
|
|
9
|
-
*/
|
|
10
|
-
function normalizeFunctionalComponent(options) {
|
|
11
|
-
return typeof options === 'function' ? {
|
|
12
|
-
render: options,
|
|
13
|
-
name: options.name
|
|
14
|
-
} : options;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
function prepare(rawStory, innerStory) {
|
|
18
|
-
const story = rawStory;
|
|
19
|
-
|
|
20
|
-
if (story == null) {
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
if (innerStory) {
|
|
25
|
-
return Object.assign({}, normalizeFunctionalComponent(story), {
|
|
26
|
-
components: Object.assign({}, story.components || {}, {
|
|
27
|
-
story: innerStory
|
|
28
|
-
})
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return {
|
|
33
|
-
render() {
|
|
34
|
-
return h(story);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export function decorateStory(storyFn, decorators) {
|
|
41
|
-
return decorators.reduce((decorated, decorator) => context => {
|
|
42
|
-
let story;
|
|
43
|
-
const decoratedStory = decorator(update => {
|
|
44
|
-
story = decorated(Object.assign({}, context, sanitizeStoryContextUpdate(update)));
|
|
45
|
-
return story;
|
|
46
|
-
}, context);
|
|
47
|
-
|
|
48
|
-
if (!story) {
|
|
49
|
-
story = decorated(context);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
if (decoratedStory === story) {
|
|
53
|
-
return story;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return prepare(decoratedStory, story);
|
|
57
|
-
}, context => prepare(storyFn(context)));
|
|
58
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { start } from '@storybook/core-client';
|
|
2
|
-
import './globals';
|
|
3
|
-
import { decorateStory } from './decorateStory';
|
|
4
|
-
import { render, renderToDOM } from './render';
|
|
5
|
-
const framework = 'vue3';
|
|
6
|
-
const api = start(renderToDOM, {
|
|
7
|
-
decorateStory,
|
|
8
|
-
render
|
|
9
|
-
});
|
|
10
|
-
export const storiesOf = (kind, m) => {
|
|
11
|
-
return api.clientApi.storiesOf(kind, m).addParameters({
|
|
12
|
-
framework
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
export const configure = (...args) => api.configure(framework, ...args);
|
|
16
|
-
export const {
|
|
17
|
-
addDecorator
|
|
18
|
-
} = api.clientApi;
|
|
19
|
-
export const {
|
|
20
|
-
addParameters
|
|
21
|
-
} = api.clientApi;
|
|
22
|
-
export const {
|
|
23
|
-
clearDecorators
|
|
24
|
-
} = api.clientApi;
|
|
25
|
-
export const {
|
|
26
|
-
setAddon
|
|
27
|
-
} = api.clientApi;
|
|
28
|
-
export const {
|
|
29
|
-
forceReRender
|
|
30
|
-
} = api;
|
|
31
|
-
export const {
|
|
32
|
-
getStorybook
|
|
33
|
-
} = api.clientApi;
|
|
34
|
-
export const {
|
|
35
|
-
raw
|
|
36
|
-
} = api.clientApi;
|
|
37
|
-
export { setup } from './render';
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import dedent from 'ts-dedent';
|
|
2
|
-
import { createApp, h } from 'vue';
|
|
3
|
-
export const render = (props, context) => {
|
|
4
|
-
const {
|
|
5
|
-
id,
|
|
6
|
-
component: Component
|
|
7
|
-
} = context;
|
|
8
|
-
|
|
9
|
-
if (!Component) {
|
|
10
|
-
throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
|
|
11
|
-
} // TODO remove this hack
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return h(Component, props);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
let setupFunction = app => {};
|
|
18
|
-
|
|
19
|
-
export const setup = fn => {
|
|
20
|
-
setupFunction = fn;
|
|
21
|
-
};
|
|
22
|
-
const map = new Map();
|
|
23
|
-
export function renderToDOM({
|
|
24
|
-
title,
|
|
25
|
-
name,
|
|
26
|
-
storyFn,
|
|
27
|
-
showMain,
|
|
28
|
-
showError,
|
|
29
|
-
showException
|
|
30
|
-
}, domElement) {
|
|
31
|
-
// TODO: explain cyclical nature of these app => story => mount
|
|
32
|
-
let element;
|
|
33
|
-
const storybookApp = createApp({
|
|
34
|
-
unmounted() {
|
|
35
|
-
map.delete(domElement);
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
render() {
|
|
39
|
-
map.set(domElement, storybookApp);
|
|
40
|
-
setupFunction(storybookApp);
|
|
41
|
-
return h(element);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
});
|
|
45
|
-
storybookApp.config.errorHandler = showException;
|
|
46
|
-
element = storyFn();
|
|
47
|
-
|
|
48
|
-
if (!element) {
|
|
49
|
-
showError({
|
|
50
|
-
title: `Expecting a Vue component from the story: "${name}" of "${title}".`,
|
|
51
|
-
description: dedent`
|
|
52
|
-
Did you forget to return the Vue component from the story?
|
|
53
|
-
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
|
|
54
|
-
`
|
|
55
|
-
});
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
showMain();
|
|
60
|
-
|
|
61
|
-
if (map.has(domElement)) {
|
|
62
|
-
map.get(domElement).unmount(domElement);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
storybookApp.mount(domElement);
|
|
66
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/types/config.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export declare const parameters: {
|
|
2
|
-
docs: {
|
|
3
|
-
inlineStories: boolean;
|
|
4
|
-
extractArgTypes: import("lib/docs-tools/dist/types").ArgTypesExtractor;
|
|
5
|
-
extractComponentDescription: typeof import("lib/docs-tools/dist/types").extractComponentDescription;
|
|
6
|
-
};
|
|
7
|
-
framework: string;
|
|
8
|
-
};
|
|
9
|
-
export { argTypesEnhancers } from './docs/config';
|
|
10
|
-
export * from './preview/config';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { extractComponentDescription } from '@storybook/docs-tools';
|
|
2
|
-
export declare const parameters: {
|
|
3
|
-
docs: {
|
|
4
|
-
inlineStories: boolean;
|
|
5
|
-
extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
|
|
6
|
-
extractComponentDescription: typeof extractComponentDescription;
|
|
7
|
-
};
|
|
8
|
-
};
|
|
9
|
-
export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("lib/addons/dist/types").Parameters)[];
|
package/dist/types/index.d.ts
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import type { DecoratorFunction, LegacyStoryFn } from '@storybook/csf';
|
|
2
|
-
import type { VueFramework } from './types-6-0';
|
|
3
|
-
export declare function decorateStory(storyFn: LegacyStoryFn<VueFramework>, decorators: DecoratorFunction<VueFramework>[]): LegacyStoryFn<VueFramework>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
/// <reference types="webpack-env" />
|
|
2
|
-
/// <reference types="node" />
|
|
3
|
-
import type { App } from 'vue';
|
|
4
|
-
import type { ClientStoryApi, Loadable } from '@storybook/addons';
|
|
5
|
-
import './globals';
|
|
6
|
-
import type { IStorybookSection } from './types';
|
|
7
|
-
import type { VueFramework } from './types-6-0';
|
|
8
|
-
interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
|
|
9
|
-
setAddon(addon: any): void;
|
|
10
|
-
configure(loader: Loadable, module: NodeModule): void;
|
|
11
|
-
getStorybook(): IStorybookSection[];
|
|
12
|
-
clearDecorators(): void;
|
|
13
|
-
forceReRender(): void;
|
|
14
|
-
raw: () => any;
|
|
15
|
-
load: (...args: any[]) => void;
|
|
16
|
-
app: App;
|
|
17
|
-
}
|
|
18
|
-
export declare const storiesOf: ClientApi['storiesOf'];
|
|
19
|
-
export declare const configure: ClientApi['configure'];
|
|
20
|
-
export declare const addDecorator: (() => never) | ((decorator: import("@storybook/csf").DecoratorFunction<VueFramework, import("@storybook/addons").Args>) => void);
|
|
21
|
-
export declare const addParameters: (() => never) | (({ globals, globalTypes, ...parameters }: import("@storybook/csf/dist/story").Parameters & {
|
|
22
|
-
globals?: import("@storybook/csf").Globals;
|
|
23
|
-
globalTypes?: import("@storybook/csf").GlobalTypes;
|
|
24
|
-
}) => void);
|
|
25
|
-
export declare const clearDecorators: (() => never) | (() => void);
|
|
26
|
-
export declare const setAddon: (() => never) | ((addon: any) => void);
|
|
27
|
-
export declare const forceReRender: (() => never) | (() => void);
|
|
28
|
-
export declare const getStorybook: (() => never) | (() => import("lib/client-api/dist/types/ClientApi").GetStorybookKind<VueFramework>[]);
|
|
29
|
-
export declare const raw: (() => never) | (() => import("lib/store/dist/types").BoundStory<VueFramework>[]);
|
|
30
|
-
export { setup } from './render';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { RenderContext } from '@storybook/store';
|
|
2
|
-
import type { ArgsStoryFn } from '@storybook/csf';
|
|
3
|
-
import { VueFramework } from './types-6-0';
|
|
4
|
-
export declare const render: ArgsStoryFn<VueFramework>;
|
|
5
|
-
export declare const setup: (fn: (app: any) => void) => void;
|
|
6
|
-
export declare function renderToDOM({ title, name, storyFn, showMain, showError, showException }: RenderContext<VueFramework>, domElement: HTMLElement): void;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type { ConcreteComponent } from 'vue';
|
|
2
|
-
import type { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
|
|
3
|
-
import type { StoryFnVueReturnType } from './types';
|
|
4
|
-
export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
|
|
5
|
-
export declare type VueFramework = {
|
|
6
|
-
component: ConcreteComponent<any>;
|
|
7
|
-
storyResult: StoryFnVueReturnType;
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* Metadata to configure the stories for a component.
|
|
11
|
-
*
|
|
12
|
-
* @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
|
|
13
|
-
*/
|
|
14
|
-
export declare type Meta<TArgs = Args> = ComponentAnnotations<VueFramework, TArgs>;
|
|
15
|
-
/**
|
|
16
|
-
* Story function that represents a CSFv2 component example.
|
|
17
|
-
*
|
|
18
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
19
|
-
*/
|
|
20
|
-
export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
|
|
21
|
-
/**
|
|
22
|
-
* Story function that represents a CSFv3 component example.
|
|
23
|
-
*
|
|
24
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
25
|
-
*/
|
|
26
|
-
export declare type StoryObj<TArgs = Args> = StoryAnnotations<VueFramework, TArgs>;
|
|
27
|
-
/**
|
|
28
|
-
* Story function that represents a CSFv2 component example.
|
|
29
|
-
*
|
|
30
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
31
|
-
*
|
|
32
|
-
* NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
|
|
33
|
-
*
|
|
34
|
-
*/
|
|
35
|
-
export declare type Story<TArgs = Args> = StoryFn<TArgs>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { Args } from '@storybook/csf';
|
|
2
|
-
import type { StoryObj } from './types-6-0';
|
|
3
|
-
export type { StoryFn, StoryObj, Meta } from './types-6-0';
|
|
4
|
-
/**
|
|
5
|
-
* Story function that represents a CSFv3 component example.
|
|
6
|
-
*
|
|
7
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
8
|
-
*/
|
|
9
|
-
export declare type Story<TArgs = Args> = StoryObj<TArgs>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ConcreteComponent } from 'vue';
|
|
2
|
-
export type { RenderContext } from '@storybook/core-client';
|
|
3
|
-
export interface ShowErrorArgs {
|
|
4
|
-
title: string;
|
|
5
|
-
description: string;
|
|
6
|
-
}
|
|
7
|
-
export declare type StoryFnVueReturnType = ConcreteComponent<any>;
|
|
8
|
-
export interface IStorybookStory {
|
|
9
|
-
name: string;
|
|
10
|
-
render: (context: any) => any;
|
|
11
|
-
}
|
|
12
|
-
export interface IStorybookSection {
|
|
13
|
-
kind: string;
|
|
14
|
-
stories: IStorybookStory[];
|
|
15
|
-
}
|