Addons and app changes for on demand store

addons/a11y/package.json

@@ -48,10 +48,10 @@
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/api": "6.4.0-alpha.34",
     "@storybook/channels": "6.4.0-alpha.34",
-    "@storybook/client-api": "6.4.0-alpha.34",
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "@storybook/theming": "6.4.0-alpha.34",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",

addons/a11y/src/index.ts

@@ -1,4 +1,4 @@
-import { DecoratorFunction } from '@storybook/addons';
+import { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
@@ -9,7 +9,7 @@ if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
 
-export const withA11y: DecoratorFunction = deprecate(
+export const withA11y: DecoratorFunction<AnyFramework> = deprecate(
   (storyFn, storyContext) => {
     return storyFn(storyContext);
   },

addons/actions/package.json

@@ -43,9 +43,9 @@
   "dependencies": {
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/api": "6.4.0-alpha.34",
-    "@storybook/client-api": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "@storybook/theming": "6.4.0-alpha.34",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",

addons/actions/src/preset/addArgsHelpers.test.ts

@@ -8,7 +8,7 @@ describe('actions parameter enhancers', () => {
 
     it('should add actions that match a pattern', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: {},
+        initialArgs: {},
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -20,7 +20,7 @@ describe('actions parameter enhancers', () => {
 
     it('should NOT override pre-existing args', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: { onClick: 'pre-existing value' },
+        initialArgs: { onClick: 'pre-existing value' },
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -29,7 +29,7 @@ describe('actions parameter enhancers', () => {
 
     it('should NOT override pre-existing args, if null', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: { onClick: null },
+        initialArgs: { onClick: null },
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -38,7 +38,7 @@ describe('actions parameter enhancers', () => {
 
     it('should override pre-existing args, if undefined', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: { onClick: undefined },
+        initialArgs: { onClick: undefined },
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -47,7 +47,7 @@ describe('actions parameter enhancers', () => {
 
     it('should do nothing if actions are disabled', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: {},
+        initialArgs: {},
         argTypes,
         parameters: {
           ...parameters,
@@ -65,7 +65,11 @@ describe('actions parameter enhancers', () => {
     };
     it('should add actions based on action.args', () => {
       expect(
-        addActionsFromArgTypes(({ args: {}, argTypes, parameters: {} } as unknown) as StoryContext)
+        addActionsFromArgTypes(({
+          initialArgs: {},
+          argTypes,
+          parameters: {},
+        } as unknown) as StoryContext)
       ).toEqual({
         onClick: expect.any(Function),
         onBlur: expect.any(Function),
@@ -76,7 +80,7 @@ describe('actions parameter enhancers', () => {
       expect(
         addActionsFromArgTypes(({
           argTypes: { onClick: { action: 'clicked!' } },
-          args: { onClick: 'pre-existing value' },
+          initialArgs: { onClick: 'pre-existing value' },
           parameters: {},
         } as unknown) as StoryContext)
       ).toEqual({});
@@ -86,7 +90,7 @@ describe('actions parameter enhancers', () => {
       expect(
         addActionsFromArgTypes(({
           argTypes: { onClick: { action: 'clicked!' } },
-          args: { onClick: null },
+          initialArgs: { onClick: null },
           parameters: {},
         } as unknown) as StoryContext)
       ).toEqual({});
@@ -96,7 +100,7 @@ describe('actions parameter enhancers', () => {
       expect(
         addActionsFromArgTypes(({
           argTypes: { onClick: { action: 'clicked!' } },
-          args: { onClick: undefined },
+          initialArgs: { onClick: undefined },
           parameters: {},
         } as unknown) as StoryContext)
       ).toEqual({ onClick: expect.any(Function) });
@@ -105,7 +109,7 @@ describe('actions parameter enhancers', () => {
     it('should do nothing if actions are disabled', () => {
       expect(
         addActionsFromArgTypes(({
-          args: {},
+          initialArgs: {},
           argTypes,
           parameters: { actions: { disable: true } },
         } as unknown) as StoryContext)

addons/actions/src/preset/addArgsHelpers.ts

@@ -1,5 +1,5 @@
 import { Args } from '@storybook/addons';
-import { ArgsEnhancer } from '@storybook/client-api';
+import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
 import { action } from '../index';
 
 // interface ActionsParameter {
@@ -12,9 +12,9 @@ import { action } from '../index';
  * matches a regex, such as `^on.*` for react-style `onClick` etc.
  */
 
-export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (context) => {
   const {
-    args,
+    initialArgs,
     argTypes,
     parameters: { actions },
   } = context;
@@ -28,7 +28,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
   );
 
   return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
-    if (typeof args[name] === 'undefined') {
+    if (typeof initialArgs[name] === 'undefined') {
       acc[name] = action(name);
     }
     return acc;
@@ -38,9 +38,9 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
   const {
-    args,
+    initialArgs,
     argTypes,
     parameters: { actions },
   } = context;
@@ -51,7 +51,7 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
   const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
 
   return argTypesWithAction.reduce((acc, [name, argType]) => {
-    if (typeof args[name] === 'undefined') {
+    if (typeof initialArgs[name] === 'undefined') {
       acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
     }
     return acc;

addons/actions/src/preview/withActions.ts

@@ -1,10 +1,9 @@
 // Based on http://backbonejs.org/docs/backbone.html#section-164
 import global from 'global';
-import { useEffect } from '@storybook/client-api';
+import { useEffect, makeDecorator } from '@storybook/addons';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
-import { makeDecorator } from '@storybook/addons';
 import { actions } from './actions';
 
 import { PARAM_KEY } from '../constants';

addons/backgrounds/package.json

@@ -50,6 +50,7 @@
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "@storybook/theming": "6.4.0-alpha.34",
     "core-js": "^3.8.2",
     "global": "^4.4.0",

addons/backgrounds/src/decorators/withBackground.ts

@@ -1,4 +1,5 @@
-import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/addons';
+import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@@ -8,7 +9,10 @@ import {
   isReduceMotionEnabled,
 } from '../helpers';
 
-export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
+export const withBackground = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
   const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];

addons/backgrounds/src/decorators/withGrid.ts

@@ -1,6 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
-import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/addons';
+import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
@@ -15,7 +16,10 @@ const deprecatedCellSizeWarning = deprecate(
   `
 );
 
-export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => {
+export const withGrid = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;

addons/controls/package.json

@@ -47,11 +47,14 @@
   "dependencies": {
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/api": "6.4.0-alpha.34",
-    "@storybook/client-api": "6.4.0-alpha.34",
+    "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "@storybook/node-logger": "6.4.0-alpha.34",
+    "@storybook/store": "6.4.0-alpha.34",
     "@storybook/theming": "6.4.0-alpha.34",
     "core-js": "^3.8.2",
+    "lodash": "^4.17.20",
     "ts-dedent": "^2.0.0"
   },
   "peerDependencies": {

addons/links/package.json

@@ -44,7 +44,7 @@
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
-    "@storybook/csf": "0.0.1",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "@storybook/router": "6.4.0-alpha.34",
     "@types/qs": "^6.9.5",
     "core-js": "^3.8.2",

addons/measure/package.json

@@ -49,6 +49,7 @@
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },

addons/measure/src/withMeasure.ts

@@ -1,5 +1,6 @@
 /* eslint-env browser */
-import { StoryFn as StoryFunction, StoryContext, useEffect } from '@storybook/addons';
+import { useEffect } from '@storybook/addons';
+import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';
 import { deepElementFromPoint } from './util';
@@ -12,7 +13,10 @@ function findAndDrawElement(x: number, y: number) {
   drawSelectedElement(nodeAtPointerRef);
 }
 
-export const withMeasure = (StoryFn: StoryFunction, context: StoryContext) => {
+export const withMeasure = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { measureEnabled } = context.globals;
 
   useEffect(() => {

addons/outline/package.json

@@ -52,6 +52,7 @@
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
     "regenerator-runtime": "^0.13.7",

addons/outline/src/withOutline.ts

@@ -1,10 +1,14 @@
-import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/addons';
+import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';
 import outlineCSS from './outlineCSS';
 
-export const withOutline = (StoryFn: StoryFunction, context: StoryContext) => {
+export const withOutline = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { globals } = context;
   const isActive = globals[PARAM_KEY] === true;
   const isInDocs = context.viewMode === 'docs';

addons/storyshots/storyshots-core/package.json

@@ -48,7 +48,9 @@
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/client-api": "6.4.0-alpha.34",
     "@storybook/core": "6.4.0-alpha.34",
+    "@storybook/core-client": "6.4.0-alpha.34",
     "@storybook/core-common": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.b1d5348.0",
     "@types/glob": "^7.1.3",
     "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",

addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,19 +1,21 @@
+import { AnyFramework } from '@storybook/csf';
 import { ClientStoryApi, Loadable } from '@storybook/addons';
-import { ClientApi as ClientApiThing } from '@storybook/client-api';
+import { ClientApi as ClientApiClass } from '@storybook/client-api';
 import { StoryshotsOptions } from '../api/StoryshotsOptions';
 import { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
-export interface ClientApi extends ClientStoryApi<unknown> {
+export interface ClientApi<TFramework extends AnyFramework>
+  extends ClientStoryApi<TFramework['storyResult']> {
   configure(loader: Loadable, module: NodeModule | false, showDeprecationWarning?: boolean): void;
   forceReRender(): void;
-  clearDecorators: ClientApiThing['clearDecorators'];
-  getStorybook: ClientApiThing['getStorybook'];
-  setAddon: ClientApiThing['setAddon'];
-  raw: ClientApiThing['raw'];
-  addArgsEnhancer: ClientApiThing['addArgsEnhancer'];
-  addArgTypesEnhancer: ClientApiThing['addArgTypesEnhancer'];
+  clearDecorators: ClientApiClass<TFramework>['clearDecorators'];
+  getStorybook: ClientApiClass<TFramework>['getStorybook'];
+  setAddon: ClientApiClass<TFramework>['setAddon'];
+  addArgsEnhancer: ClientApiClass<TFramework>['addArgsEnhancer'];
+  addArgTypesEnhancer: ClientApiClass<TFramework>['addArgTypesEnhancer'];
+  raw: ClientApiClass<TFramework>['raw'];
 }
 
 export interface Loader {
@@ -23,7 +25,7 @@ export interface Loader {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;
-    storybook: ClientApi;
+    storybook: ClientApi<AnyFramework>;
   };
   test: (options: StoryshotsOptions) => boolean;
 }

addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts

@@ -15,7 +15,7 @@ function getRenderedTree(story: any) {
   const moduleMeta = getStorybookModuleMetadata(
     {
       storyFnAngular: currentStory,
-      parameters: story.parameters,
+      component: story.component,
       // TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
       targetSelector: 'storybook-wrapper',
     },