@storybook/server 6.5.9 → 7.0.0-alpha.10

package/README.md

@@ -1,317 +1 @@
-# Storybook for Server
-
----
-
-Storybook for Server is a UI development environment for your plain HTML snippets rendered by your server backend.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-app
-npx sb init -t server
-```
-
-To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`:
-
-```js
-export const parameters = {
-  server: {
-    url: `http://localhost:${port}/storybook_preview`,
-  },
-};
-```
-
-The URL you connect to should have the ability to render a story, see [server rendering](#server-rendering) below.
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
-## Writing Stories
-
-To write a story, use whatever API is natural for your server-side rendering framework to generate set of JSON or YAML files of stories analogous to CSF files (see the [`server-kitchen-sink`](../../examples/server-kitchen-sink/stories) example for ideas).
-
-```json
-{
-  "title": "Component",
-  "parameters": {
-    "options": { "component": "my_widget" }
-  },
-  "stories": [
-    {
-      "name": "Default",
-      "parameters": {
-        "server": { "id": "path/of/your/story" }
-      }
-    }
-  ]
-}
-```
-
-In your `.storybook/main.js` you simply provide a glob specifying the location of those JSON files, e.g.
-
-```js
-module.exports = {
-  stories: ['../stories/**/*.stories.json'],
-};
-```
-
-Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended.
-
-For example the JSON story above is requivalent to the CSF3 definition:
-
-```javascript
-export default {
-  title: 'Component',
-  parameters: {
-    options: {
-      component: 'my_widget',
-    },
-  },
-};
-
-export const Default = {
-  name: 'Default',
-  parameters: {
-    server: {
-      id: 'path/of/your/story"',
-    },
-  },
-};
-```
-
-With the story HTML will be fetched from the server by making a GET request to http://localhost/storybook_preview/path/of/your/story`
-
-### Ruby/Rails support
-
-In particular the [View Component::Storybook](https://github.com/jonspalmer/view_component_storybook) gem provides a Ruby API for easily creating the above with a Ruby/Rails DSL (as well as providing a server rendering endpoint).
-
-## Server rendering
-
-The server rendering side of things is relatively straightfoward. When you browse to a story in the sidebar, Storybook will make a `fetch` request to `${parameters.server.url}/{parameters.server.id}` and display the HTML that is returned.
-
-You need to ensure the route in your server app renders the appropriate HTML when called in that fashion.
-
-### Passing parameters to the server
-
-Many components are likely to be dynamic - responding to parameters that change their content or appearance. `@storybook\server` has two mechanisms for passing those parameters to the server - `params` and `args`. Parameters defined in this way are appended to the fetch url as query string parameters. The server endpoint is responsible for interpreting those parameters and vary the returned html appropriately
-
-#### Constant parameters with `params`
-
-Static parameters can be defined using the `params` story parameter. For example suppose you have a Button component that has a label and color options:
-
-```json
-{
-  "title": "Buttons",
-  "stories": [
-    {
-      "name": "Red",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "color": "red", "label": "Stop" }
-        }
-      }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "color": "green", "label": "OK" }
-        }
-      }
-    }
-  ]
-}
-```
-
-The Red and Green story HTML will be fetched from the urls `server.url/controls/button?color=red&label=Stop` and `server.url/controls/button?color=green&label=OK`
-
-Like all story parameters server params can be defined in the default export and overridden in stories.
-
-```json
-{
-  "title": "Buttons",
-  "parameters": {
-    "server": {
-      "params": { "color": "red" }
-    }
-  },
-  "stories": [
-    {
-      "name": "Default",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "label": "Stop" }
-        }
-      }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button",
-          "params": { "color": "green", "label": "OK" }
-        }
-      }
-    }
-  ]
-}
-```
-
-#### Dynamic parameters with `args` and Controls
-
-Dynamic parameters can be defined using args and the Controls addon
-
-```json
-{
-  "title": "Buttons",
-  "stories": [
-    {
-      "name": "Red",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "red", "label": "Stop" }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "green", "label": "Go" }
-    }
-  ]
-}
-```
-
-Story args are passed to the server as url query parameters just like `params` except now they can be varied on the Controls addon panel.
-
-Just like CSF stories we can define `argTypes` to specify the controls used in the controls panel. `argTypes` can be defined at the default or story level.
-
-```json
-{
-  "title": "Buttons",
-  "argTypes": {
-    "color": { "control": { "type": "color" } }
-  },
-  "stories": [
-    {
-      "name": "Red",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "red", "label": "Stop" }
-    },
-    {
-      "name": "Green",
-      "parameters": {
-        "server": {
-          "id": "button"
-        }
-      },
-      "args": { "color": "green", "label": "Go" }
-    }
-  ]
-}
-```
-
-## Addon compatibility
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. As some addons assume the story is rendered in JS, they may not work with `@storybook/server` (yet!).
-
-Many addons that act on the manager side (such as `backgrounds` and `viewport`) will work out of the box with `@storybook/server` -- you can configure them with parameters written on the server as usual.
-
-### Controls
-
-To configure controls, simple add `args` and `argTypes` keys to the story JSON much like you would CSF:
-
-```json
-{
-  "title": "Controls",
-  "stories": [
-    {
-      "name": "Button",
-      "parameters": {
-        "server": { "id": "controls/button" }
-      },
-      "args": { "button_text": "Push Me", "color": "red" },
-      "argTypes": { "button_text": { "control": { "type": "color" } } }
-    }
-  ]
-}
-```
-
-The controls values will be added to your story URL as query parameters.
-
-### Actions
-
-To use actions, use the `parameters.actions.handles` parameter:
-
-```json
-{
-  "title": "Actions",
-  "stories": [
-    {
-      "name": "Button",
-      "parameters": {
-        "server": { "id": "actions/button" },
-        "actions": {
-          "handles": ["mouseover", "click .btn"]
-        }
-      }
-    }
-  ]
-}
-```
-
-## Advanced Configuration
-
-### fetchStoryHtml
-
-For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level.
-
-```javascript
-// .storybook/preview.js
-
-const fetchStoryHtml = async (url, path, params, context) => {
-  // Custom fetch implementation
-  // ....
-  return html;
-};
-
-export const parameters = {
-  server: {
-    url: `http://localhost:${port}/storybook_preview`,
-    fetchStoryHtml,
-  },
-};
-```
-
-`fetchStoryHtml` should be an async function with the following signature
-
-```javascript
-type FetchStoryHtmlType = (
-  url: string,
-  id: string,
-  params: any,
-  context: StoryContext
-) => Promise<string | Node>;
-```
-
-- url: Server url configured by the `parameters.server.url`
-- id: Id of the story being rendered given by `parameters.server.id`
-- params: Merged story params `parameters.server.params`and story args
-- context: The context of the story
+# Storybook Server renderer

package/dist/chunk-43Y6KZXY.mjs

@@ -0,0 +1,4 @@
+var h=Object.defineProperty;var l=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var y=(r,t,e)=>t in r?h(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e,n=(r,t)=>{for(var e in t||(t={}))T.call(t,e)&&y(r,e,t[e]);if(l)for(var e of l(t))x.call(t,e)&&y(r,e,t[e]);return r};var f=(r,t)=>h(r,"name",{value:t,configurable:!0});import C from"global";import D from"ts-dedent";import{simulatePageLoad as U,simulateDOMContentLoaded as $}from"@storybook/preview-web";var{fetch:A,Node:I}=C,P=f(async(r,t,e,o)=>{let s=new URL(`${r}/${t}`);return s.search=new URLSearchParams(n(n({},o.globals),e)).toString(),(await A(s)).text()},"defaultFetchStoryHtml"),j=f((r,t)=>{let e=n({},r);return Object.keys(t).forEach(o=>{let s=t[o],{control:a}=s,d=a&&a.type.toLowerCase(),p=e[o];switch(d){case"date":e[o]=new Date(p).toISOString();break;case"object":e[o]=JSON.stringify(p);break;default:}}),e},"buildStoryArgs"),k=f(r=>{},"render");async function q({id:r,title:t,name:e,showMain:o,showError:s,forceRemount:a,storyFn:d,storyContext:p,storyContext:{parameters:g,args:u,argTypes:L}},c){d();let m=j(u,L),{server:{url:w,id:S,fetchStoryHtml:b=P,params:M}}=g,H=S||r,O=n(n({},M),m),i=await b(w,H,O,p);if(o(),typeof i=="string")c.innerHTML=i,U(c);else if(i instanceof I){if(c.firstChild===i&&a===!1)return;c.innerHTML="",c.appendChild(i),$()}else s({title:`Expecting an HTML snippet or DOM node from the story: "${e}" of "${t}".`,description:D`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}f(q,"renderToDOM");export{f as a,k as b,q as c};

package/dist/config.d.ts

@@ -0,0 +1,12 @@
+import { RenderContext } from '@storybook/store';
+import { a as StoryFn, S as ServerFramework } from './public-types-07d4abb5.js';
+import '@storybook/csf';
+
+declare const render: StoryFn<ServerFramework>;
+declare function renderToDOM({ id, title, name, showMain, showError, forceRemount, storyFn, storyContext, storyContext: { parameters, args, argTypes }, }: RenderContext<ServerFramework>, domElement: Element): Promise<void>;
+
+declare const parameters: {
+    framework: "server";
+};
+
+export { parameters, render, renderToDOM };

package/dist/config.js

@@ -0,0 +1,4 @@
+var P=Object.create;var n=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames,h=Object.getOwnPropertySymbols,N=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var g=(t,e,r)=>e in t?n(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,a=(t,e)=>{for(var r in e||(e={}))u.call(e,r)&&g(t,r,e[r]);if(h)for(var r of h(e))R.call(e,r)&&g(t,r,e[r]);return t};var p=(t,e)=>n(t,"name",{value:e,configurable:!0});var k=(t,e)=>{for(var r in e)n(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of v(e))!u.call(t,o)&&o!==r&&n(t,o,{get:()=>e[o],enumerable:!(s=j(e,o))||s.enumerable});return t};var w=(t,e,r)=>(r=t!=null?P(N(t)):{},m(e||!t||!t.__esModule?n(r,"default",{value:t,enumerable:!0}):r,t)),F=t=>m(n({},"__esModule",{value:!0}),t);var K={};k(K,{parameters:()=>G,render:()=>S,renderToDOM:()=>b});module.exports=F(K);var L=w(require("global")),M=w(require("ts-dedent")),l=require("@storybook/preview-web"),{fetch:V,Node:q}=L.default,z=p(async(t,e,r,s)=>{let o=new URL(`${t}/${e}`);return o.search=new URLSearchParams(a(a({},s.globals),r)).toString(),(await V(o)).text()},"defaultFetchStoryHtml"),B=p((t,e)=>{let r=a({},t);return Object.keys(e).forEach(s=>{let o=e[s],{control:c}=o,y=c&&c.type.toLowerCase(),d=r[s];switch(y){case"date":r[s]=new Date(d).toISOString();break;case"object":r[s]=JSON.stringify(d);break;default:}}),r},"buildStoryArgs"),S=p(t=>{},"render");async function b({id:t,title:e,name:r,showMain:s,showError:o,forceRemount:c,storyFn:y,storyContext:d,storyContext:{parameters:x,args:O,argTypes:T}},i){y();let D=B(O,T),{server:{url:H,id:C,fetchStoryHtml:U=z,params:$}}=x,A=C||t,I=a(a({},$),D),f=await U(H,A,I,d);if(s(),typeof f=="string")i.innerHTML=f,(0,l.simulatePageLoad)(i);else if(f instanceof q){if(i.firstChild===f&&c===!1)return;i.innerHTML="",i.appendChild(f),(0,l.simulateDOMContentLoaded)()}else o({title:`Expecting an HTML snippet or DOM node from the story: "${r}" of "${e}".`,description:M.default`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}p(b,"renderToDOM");var G={framework:"server"};0&&(module.exports={parameters,render,renderToDOM});

package/dist/config.mjs

@@ -0,0 +1 @@
+import{b as r,c as e}from"./chunk-43Y6KZXY.mjs";var a={framework:"server"};export{a as parameters,r as render,e as renderToDOM};

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import * as lib_store_dist_types from 'lib/store/dist/types';
+import * as lib_client_api_dist_types_ClientApi from 'lib/client-api/dist/types/ClientApi';
+import * as _storybook_csf from '@storybook/csf';
+export { ArgTypes, Args, Parameters, StoryContext } from '@storybook/csf';
+import * as _storybook_addons from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
+import { S as ServerFramework, I as IStorybookSection } from './public-types-07d4abb5.js';
+export { M as Meta, c as Story, a as StoryFn, b as StoryObj } from './public-types-07d4abb5.js';
+
+interface ClientApi extends ClientStoryApi<ServerFramework['storyResult']> {
+    setAddon(addon: any): void;
+    configure(loader: Loadable, module: NodeModule): void;
+    getStorybook(): IStorybookSection[];
+    clearDecorators(): void;
+    forceReRender(): void;
+    raw: () => any;
+}
+declare const storiesOf: ClientApi['storiesOf'];
+declare const configure: ClientApi['configure'];
+declare const addDecorator: (() => never) | ((decorator: _storybook_csf.DecoratorFunction<ServerFramework, _storybook_addons.Args>) => void);
+declare const addParameters: (() => never) | (({ globals, globalTypes, ...parameters }: _storybook_csf.Parameters & {
+    globals?: _storybook_csf.Globals;
+    globalTypes?: _storybook_csf.GlobalTypes;
+}) => void);
+declare const clearDecorators: (() => never) | (() => void);
+declare const setAddon: (() => never) | ((addon: any) => void);
+declare const getStorybook: (() => never) | (() => lib_client_api_dist_types_ClientApi.GetStorybookKind<ServerFramework>[]);
+declare const raw: (() => never) | (() => lib_store_dist_types.BoundStory<ServerFramework>[]);
+declare const forceReRender: (() => never) | (() => void);
+
+export { addDecorator, addParameters, clearDecorators, configure, forceReRender, getStorybook, raw, setAddon, storiesOf };

package/dist/index.js

@@ -0,0 +1,4 @@
+var v=Object.create;var a=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames,h=Object.getOwnPropertySymbols,K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var w=(t,r,o)=>r in t?a(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o,c=(t,r)=>{for(var o in r||(r={}))O.call(r,o)&&w(t,o,r[o]);if(h)for(var o of h(r))W.call(r,o)&&w(t,o,r[o]);return t};var s=(t,r)=>a(t,"name",{value:r,configurable:!0});var B=(t,r)=>{for(var o in r)a(t,o,{get:r[o],enumerable:!0})},x=(t,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of F(r))!O.call(t,e)&&e!==o&&a(t,e,{get:()=>r[e],enumerable:!(n=E(r,e))||n.enumerable});return t};var y=(t,r,o)=>(o=t!=null?v(K(t)):{},x(r||!t||!t.__esModule?a(o,"default",{value:t,enumerable:!0}):o,t)),J=t=>x(a({},"__esModule",{value:!0}),t);var at={};B(at,{addDecorator:()=>Z,addParameters:()=>tt,clearDecorators:()=>rt,configure:()=>X,forceReRender:()=>st,getStorybook:()=>et,raw:()=>nt,setAddon:()=>ot,storiesOf:()=>Q});module.exports=J(at);var S=y(require("global")),{window:Y}=S.default;Y.STORYBOOK_ENV="SERVER";var D=require("@storybook/core-client");var b=y(require("global")),L=y(require("ts-dedent")),m=require("@storybook/preview-web"),{fetch:_,Node:q}=b.default,z=s(async(t,r,o,n)=>{let e=new URL(`${t}/${r}`);return e.search=new URLSearchParams(c(c({},n.globals),o)).toString(),(await _(e)).text()},"defaultFetchStoryHtml"),G=s((t,r)=>{let o=c({},t);return Object.keys(r).forEach(n=>{let e=r[n],{control:i}=e,u=i&&i.type.toLowerCase(),d=o[n];switch(u){case"date":o[n]=new Date(d).toISOString();break;case"object":o[n]=JSON.stringify(d);break;default:}}),o},"buildStoryArgs"),M=s(t=>{},"render");async function R({id:t,title:r,name:o,showMain:n,showError:e,forceRemount:i,storyFn:u,storyContext:d,storyContext:{parameters:H,args:C,argTypes:P}},f){u();let U=G(C,P),{server:{url:$,id:I,fetchStoryHtml:N=z,params:V}}=H,j=I||t,k=c(c({},V),U),p=await N($,j,k,d);if(n(),typeof p=="string")f.innerHTML=p,(0,m.simulatePageLoad)(f);else if(p instanceof q){if(f.firstChild===p&&i===!1)return;f.innerHTML="",f.appendChild(p),(0,m.simulateDOMContentLoaded)()}else e({title:`Expecting an HTML snippet or DOM node from the story: "${o}" of "${r}".`,description:L.default`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}s(R,"renderToDOM");var T="server",g=(0,D.start)(R,{render:M}),Q=s((t,r)=>g.clientApi.storiesOf(t,r).addParameters({framework:T}),"storiesOf"),X=s((...t)=>g.configure(T,...t),"configure"),{addDecorator:Z,addParameters:tt,clearDecorators:rt,setAddon:ot,getStorybook:et,raw:nt}=g.clientApi,{forceReRender:st}=g;var A;(A=module==null?void 0:module.hot)==null||A.decline();0&&(module.exports={addDecorator,addParameters,clearDecorators,configure,forceReRender,getStorybook,raw,setAddon,storiesOf});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{a as e,b as s,c as a}from"./chunk-43Y6KZXY.mjs";import p from"global";var{window:m}=p;m.STORYBOOK_ENV="SERVER";import{start as f}from"@storybook/core-client";var c="server",o=f(a,{render:s}),R=e((r,d)=>o.clientApi.storiesOf(r,d).addParameters({framework:c}),"storiesOf"),g=e((...r)=>o.configure(c,...r),"configure"),{addDecorator:w,addParameters:u,clearDecorators:A,setAddon:E,getStorybook:b,raw:D}=o.clientApi,{forceReRender:S}=o;var i;(i=module==null?void 0:module.hot)==null||i.decline();export{w as addDecorator,u as addParameters,A as clearDecorators,g as configure,S as forceReRender,b as getStorybook,D as raw,E as setAddon,R as storiesOf};

package/dist/public-types-07d4abb5.d.ts

@@ -0,0 +1,42 @@
+import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations } from '@storybook/csf';
+
+declare type StoryFnServerReturnType = any;
+declare type ServerFramework = {
+    component: string;
+    storyResult: StoryFnServerReturnType;
+};
+interface IStorybookStory {
+    name: string;
+    render: (context: any) => any;
+}
+interface IStorybookSection {
+    kind: string;
+    stories: IStorybookStory[];
+}
+
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+declare type Meta<TArgs = Args> = ComponentAnnotations<ServerFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+declare type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+declare type Story<TArgs = Args> = StoryObj<TArgs>;
+
+export { IStorybookSection as I, Meta as M, ServerFramework as S, StoryFn as a, StoryObj as b, Story as c };

package/package.json

@@ -1,74 +1,67 @@
 {
   "name": "@storybook/server",
-  "version": "6.5.9",
-  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
+  "version": "7.0.0-alpha.10",
+  "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/app/server",
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/server",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/server"
+    "directory": "renderers/server"
   },
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/client/index.js",
-  "module": "dist/esm/client/index.js",
-  "types": "dist/ts3.9/client/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "dist/ts3.9/*": [
-        "dist/ts3.4/*"
-      ]
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/config.js",
+      "import": "./dist/config.mjs",
+      "types": "./dist/config.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
     }
   },
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
-    "bin/**/*",
     "dist/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "esrun ../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.9",
-    "@storybook/api": "6.5.9",
-    "@storybook/client-api": "6.5.9",
-    "@storybook/core": "6.5.9",
-    "@storybook/core-common": "6.5.9",
+    "@storybook/addons": "7.0.0-alpha.10",
+    "@storybook/core-client": "7.0.0-alpha.10",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/node-logger": "6.5.9",
-    "@storybook/preview-web": "6.5.9",
-    "@storybook/store": "6.5.9",
-    "@types/node": "^14.14.20 || ^16.0.0",
-    "@types/webpack-env": "^1.16.0",
+    "@storybook/preview-web": "7.0.0-alpha.10",
+    "@storybook/store": "7.0.0-alpha.10",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "read-pkg-up": "^7.0.1",
-    "regenerator-runtime": "^0.13.7",
-    "safe-identifier": "^0.4.1",
-    "ts-dedent": "^2.0.0",
-    "yaml-loader": "^0.6.0"
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "fs-extra": "^9.0.1",
-    "yaml": "^1.10.0"
+    "@digitak/esrun": "^3.2.2"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -76,6 +69,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e2673f765722cbb542ef1b5cf8d533c8e746a127",
-  "sbmodern": "dist/modern/client/index.js"
+  "bundlerEntrypoint": [
+    "./src/index.ts",
+    "./src/config.ts"
+  ],
+  "gitHead": "b13dd8fb52819d73d4983148af8ffc5d683e8b75"
 }

package/preview.js

@@ -0,0 +1 @@
+export * from './dist/config';

package/bin/build.js

@@ -1,4 +0,0 @@
-#!/usr/bin/env node
-
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-require('../dist/cjs/server/build');

package/bin/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('../dist/cjs/server');

package/dist/cjs/client/index.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "addDecorator", {
-  enumerable: true,
-  get: function get() {
-    return _preview.addDecorator;
-  }
-});
-Object.defineProperty(exports, "addParameters", {
-  enumerable: true,
-  get: function get() {
-    return _preview.addParameters;
-  }
-});
-Object.defineProperty(exports, "configure", {
-  enumerable: true,
-  get: function get() {
-    return _preview.configure;
-  }
-});
-Object.defineProperty(exports, "forceReRender", {
-  enumerable: true,
-  get: function get() {
-    return _preview.forceReRender;
-  }
-});
-Object.defineProperty(exports, "getStorybook", {
-  enumerable: true,
-  get: function get() {
-    return _preview.getStorybook;
-  }
-});
-Object.defineProperty(exports, "raw", {
-  enumerable: true,
-  get: function get() {
-    return _preview.raw;
-  }
-});
-Object.defineProperty(exports, "setAddon", {
-  enumerable: true,
-  get: function get() {
-    return _preview.setAddon;
-  }
-});
-Object.defineProperty(exports, "storiesOf", {
-  enumerable: true,
-  get: function get() {
-    return _preview.storiesOf;
-  }
-});
-
-var _preview = require("./preview");
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}

package/dist/cjs/client/preview/config.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.parameters = void 0;
-Object.defineProperty(exports, "render", {
-  enumerable: true,
-  get: function get() {
-    return _render.render;
-  }
-});
-Object.defineProperty(exports, "renderToDOM", {
-  enumerable: true,
-  get: function get() {
-    return _render.renderToDOM;
-  }
-});
-
-var _render = require("./render");
-
-var parameters = {
-  framework: 'server'
-};
-exports.parameters = parameters;

package/dist/cjs/client/preview/globals.js

@@ -1,8 +0,0 @@
-"use strict";
-
-var _global = _interopRequireDefault(require("global"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var globalWindow = _global.default.window;
-globalWindow.STORYBOOK_ENV = 'SERVER';