@storybook/csf 0.0.2-next.1 → 0.0.2-next.3

package/dist/index.d.ts

@@ -51,9 +51,9 @@ interface StoryIdentifier {
     story: StoryName;
     tags: Tag[];
 }
-declare type Parameters = {
-    [name: string]: any;
-};
+interface Parameters {
+    [name: string]: unknown;
+}
 declare type ConditionalTest = {
     truthy?: boolean;
 } | {
@@ -99,24 +99,30 @@ declare type GlobalTypes = {
 declare type StrictGlobalTypes = {
     [name: string]: StrictInputType;
 };
-declare type AnyFramework = {
+declare type Renderer = {
+    /** What is the type of the `component` annotation in this renderer? */
     component: unknown;
+    /** What does the story function return in this renderer? */
     storyResult: unknown;
+    /** What type of element does this renderer render to? */
+    canvasElement: unknown;
     T?: unknown;
 };
-declare type StoryContextForEnhancers<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryIdentifier & {
-    component?: (TFramework & {
+/** @deprecated - use `Renderer` */
+declare type AnyFramework = Renderer;
+declare type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryIdentifier & {
+    component?: (TRenderer & {
         T: any;
     })['component'];
-    subcomponents?: Record<string, (TFramework & {
+    subcomponents?: Record<string, (TRenderer & {
         T: any;
     })['component']>;
     parameters: Parameters;
     initialArgs: TArgs;
     argTypes: StrictArgTypes<TArgs>;
 };
-declare type ArgsEnhancer<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContextForEnhancers<TFramework, TArgs>) => TArgs;
-declare type ArgTypesEnhancer<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ((context: StoryContextForEnhancers<TFramework, TArgs>) => StrictArgTypes<TArgs>) & {
+declare type ArgsEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForEnhancers<TRenderer, TArgs>) => TArgs;
+declare type ArgTypesEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = ((context: StoryContextForEnhancers<TRenderer, TArgs>) => StrictArgTypes<TArgs>) & {
     secondPass?: boolean;
 };
 declare type StoryContextUpdate<TArgs = Args> = {
@@ -125,40 +131,40 @@ declare type StoryContextUpdate<TArgs = Args> = {
     [key: string]: any;
 };
 declare type ViewMode = 'story' | 'docs';
-declare type StoryContextForLoaders<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContextForEnhancers<TFramework, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+declare type StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForEnhancers<TRenderer, TArgs> & Required<StoryContextUpdate<TArgs>> & {
     hooks: unknown;
     viewMode: ViewMode;
-    originalStoryFn: StoryFn<TFramework>;
+    originalStoryFn: StoryFn<TRenderer>;
 };
-declare type LoaderFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContextForLoaders<TFramework, TArgs>) => Promise<Record<string, any>>;
-declare type StoryContext<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContextForLoaders<TFramework, TArgs> & {
+declare type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any>>;
+declare type StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForLoaders<TRenderer, TArgs> & {
     loaded: Record<string, any>;
     abortSignal: AbortSignal;
-    canvasElement: HTMLElement;
+    canvasElement: TRenderer['canvasElement'];
 };
 declare type StepLabel = string;
-declare type StepFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (label: StepLabel, play: PlayFunction<TFramework, TArgs>) => Promise<void> | void;
-declare type PlayFunctionContext<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryContext<TFramework, TArgs> & {
-    step: StepFunction<TFramework, TArgs>;
+declare type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
+declare type PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContext<TRenderer, TArgs> & {
+    step: StepFunction<TRenderer, TArgs>;
 };
-declare type PlayFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: PlayFunctionContext<TFramework, TArgs>) => Promise<void> | void;
-declare type PartialStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TFramework['storyResult'];
-declare type LegacyStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (context: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
-declare type ArgsStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (args: TArgs, context: StoryContext<TFramework, TArgs>) => (TFramework & {
+declare type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
+declare type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
+declare type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+declare type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {
     T: TArgs;
 })['storyResult'];
-declare type StoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = LegacyStoryFn<TFramework, TArgs> | ArgsStoryFn<TFramework, TArgs>;
-declare type DecoratorFunction<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (fn: PartialStoryFn<TFramework, TArgs>, c: StoryContext<TFramework, TArgs>) => TFramework['storyResult'];
-declare type DecoratorApplicator<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (storyFn: LegacyStoryFn<TFramework, TArgs>, decorators: DecoratorFunction<TFramework, TArgs>[]) => LegacyStoryFn<TFramework, TArgs>;
-declare type StepRunner<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = (label: StepLabel, play: PlayFunction<TFramework, TArgs>, context: PlayFunctionContext<TFramework, TArgs>) => Promise<void>;
-declare type BaseAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = {
+declare type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
+declare type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+declare type DecoratorApplicator<TRenderer extends Renderer = Renderer, TArgs = Args> = (storyFn: LegacyStoryFn<TRenderer, TArgs>, decorators: DecoratorFunction<TRenderer, TArgs>[]) => LegacyStoryFn<TRenderer, TArgs>;
+declare type StepRunner<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>, context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void>;
+declare type BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = {
     /**
      * Wrapper components or Storybook decorators that wrap a story.
      *
      * Decorators defined in Meta will be applied to every story variation.
      * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
      */
-    decorators?: DecoratorFunction<TFramework, TArgs>[];
+    decorators?: DecoratorFunction<TRenderer, TArgs>[];
     /**
      * Custom metadata for a story.
      * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters)
@@ -178,22 +184,22 @@ declare type BaseAnnotations<TFramework extends AnyFramework = AnyFramework, TAr
      * Asynchronous functions which provide data for a story.
      * @see [Loaders](https://storybook.js.org/docs/react/writing-stories/loaders)
      */
-    loaders?: LoaderFunction<TFramework, TArgs>[];
+    loaders?: LoaderFunction<TRenderer, TArgs>[];
     /**
-     * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
+     * Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used.
      */
-    render?: ArgsStoryFn<TFramework, TArgs>;
+    render?: ArgsStoryFn<TRenderer, TArgs>;
 };
-declare type ProjectAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
-    argsEnhancers?: ArgsEnhancer<TFramework, Args>[];
-    argTypesEnhancers?: ArgTypesEnhancer<TFramework, Args>[];
+declare type ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = BaseAnnotations<TRenderer, TArgs> & {
+    argsEnhancers?: ArgsEnhancer<TRenderer, Args>[];
+    argTypesEnhancers?: ArgTypesEnhancer<TRenderer, Args>[];
     globals?: Globals;
     globalTypes?: GlobalTypes;
-    applyDecorators?: DecoratorApplicator<TFramework, Args>;
-    runStep?: StepRunner<TFramework, TArgs>;
+    applyDecorators?: DecoratorApplicator<TRenderer, Args>;
+    runStep?: StepRunner<TRenderer, TArgs>;
 };
 declare type StoryDescriptor$1 = string[] | RegExp;
-interface ComponentAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> extends BaseAnnotations<TFramework, TArgs> {
+interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> extends BaseAnnotations<TRenderer, TArgs> {
     /**
      * Title of the component which will be presented in the navigation. **Should be unique.**
      *
@@ -241,7 +247,7 @@ interface ComponentAnnotations<TFramework extends AnyFramework = AnyFramework, T
      *
      * Used by addons for automatic prop table generation and display of other component metadata.
      */
-    component?: (TFramework & {
+    component?: (TRenderer & {
         T: Args extends TArgs ? any : TArgs;
     })['component'];
     /**
@@ -259,17 +265,17 @@ interface ComponentAnnotations<TFramework extends AnyFramework = AnyFramework, T
      *
      * By defining them each component will have its tab in the args table.
      */
-    subcomponents?: Record<string, TFramework['component']>;
+    subcomponents?: Record<string, TRenderer['component']>;
     /**
      * Function that is executed after the story is rendered.
      */
-    play?: PlayFunction<TFramework, TArgs>;
+    play?: PlayFunction<TRenderer, TArgs>;
     /**
      * Named tags for a story, used to filter stories in different contexts.
      */
     tags?: Tag[];
 }
-declare type StoryAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args, TRequiredArgs = Partial<TArgs>> = BaseAnnotations<TFramework, TArgs> & {
+declare type StoryAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args, TRequiredArgs = Partial<TArgs>> = BaseAnnotations<TRenderer, TArgs> & {
     /**
      * Override the display name in the UI (CSF v3)
      */
@@ -281,29 +287,29 @@ declare type StoryAnnotations<TFramework extends AnyFramework = AnyFramework, TA
     /**
      * Function that is executed after the story is rendered.
      */
-    play?: PlayFunction<TFramework, TArgs>;
+    play?: PlayFunction<TRenderer, TArgs>;
     /**
      * Named tags for a story, used to filter stories in different contexts.
      */
     tags?: Tag[];
     /** @deprecated */
-    story?: Omit<StoryAnnotations<TFramework, TArgs>, 'story'>;
+    story?: Omit<StoryAnnotations<TRenderer, TArgs>, 'story'>;
 } & ({} extends TRequiredArgs ? {
     args?: TRequiredArgs;
 } : {
     args: TRequiredArgs;
 });
-declare type LegacyAnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = StoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
-declare type LegacyStoryAnnotationsOrFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = LegacyAnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
-declare type AnnotatedStoryFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = ArgsStoryFn<TFramework, TArgs> & StoryAnnotations<TFramework, TArgs>;
-declare type StoryAnnotationsOrFn<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>;
-declare type ArgsFromMeta<TFramework extends AnyFramework, Meta> = Meta extends {
-    render?: ArgsStoryFn<TFramework, infer RArgs>;
+declare type LegacyAnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryFn<TRenderer, TArgs> & StoryAnnotations<TRenderer, TArgs>;
+declare type LegacyStoryAnnotationsOrFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyAnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>;
+declare type AnnotatedStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = ArgsStoryFn<TRenderer, TArgs> & StoryAnnotations<TRenderer, TArgs>;
+declare type StoryAnnotationsOrFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>;
+declare type ArgsFromMeta<TRenderer extends Renderer, Meta> = Meta extends {
+    render?: ArgsStoryFn<TRenderer, infer RArgs>;
     loaders?: (infer Loaders)[];
     decorators?: (infer Decorators)[];
-} ? Simplify<RArgs & DecoratorsArgs<TFramework, Decorators> & LoaderArgs<TFramework, Loaders>> : unknown;
-declare type DecoratorsArgs<TFramework extends AnyFramework, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TFramework, infer TArgs> ? TArgs : unknown>;
-declare type LoaderArgs<TFramework extends AnyFramework, Loaders> = UnionToIntersection<Loaders extends LoaderFunction<TFramework, infer TArgs> ? TArgs : unknown>;
+} ? Simplify<RArgs & DecoratorsArgs<TRenderer, Decorators> & LoaderArgs<TRenderer, Loaders>> : unknown;
+declare type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
+declare type LoaderArgs<TRenderer extends Renderer, Loaders> = UnionToIntersection<Loaders extends LoaderFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
 
 /**
  * Helper function to include/exclude an arg based on the value of other other args
@@ -346,4 +352,4 @@ declare const parseKind: (kind: string, { rootSeparator, groupSeparator }: Separ
     groups: string[];
 };
 
-export { AnnotatedStoryFn, AnyFramework, ArgTypes, ArgTypesEnhancer, Args, ArgsEnhancer, ArgsFromMeta, ArgsStoryFn, BaseAnnotations, ComponentAnnotations, ComponentId, ComponentTitle, Conditional, DecoratorApplicator, DecoratorFunction, GlobalTypes, Globals, IncludeExcludeOptions, InputType, LegacyAnnotatedStoryFn, LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, ProjectAnnotations, SBArrayType, SBEnumType, SBIntersectionType, SBObjectType, SBOtherType, SBScalarType, SBType, SBUnionType, SeparatorOptions, StepFunction, StepLabel, StepRunner, StoryAnnotations, StoryAnnotationsOrFn, StoryContext, StoryContextForEnhancers, StoryContextForLoaders, StoryContextUpdate, StoryFn, StoryId, StoryIdentifier, StoryKind, StoryName, StrictArgTypes, StrictGlobalTypes, StrictInputType, Tag, ViewMode, includeConditionalArg, isExportStory, parseKind, sanitize, storyNameFromExport, toId };
+export { AnnotatedStoryFn, AnyFramework, ArgTypes, ArgTypesEnhancer, Args, ArgsEnhancer, ArgsFromMeta, ArgsStoryFn, BaseAnnotations, ComponentAnnotations, ComponentId, ComponentTitle, Conditional, DecoratorApplicator, DecoratorFunction, GlobalTypes, Globals, IncludeExcludeOptions, InputType, LegacyAnnotatedStoryFn, LegacyStoryAnnotationsOrFn, LegacyStoryFn, LoaderFunction, Parameters, PartialStoryFn, PlayFunction, PlayFunctionContext, ProjectAnnotations, Renderer, SBArrayType, SBEnumType, SBIntersectionType, SBObjectType, SBOtherType, SBScalarType, SBType, SBUnionType, SeparatorOptions, StepFunction, StepLabel, StepRunner, StoryAnnotations, StoryAnnotationsOrFn, StoryContext, StoryContextForEnhancers, StoryContextForLoaders, StoryContextUpdate, StoryFn, StoryId, StoryIdentifier, StoryKind, StoryName, StrictArgTypes, StrictGlobalTypes, StrictInputType, Tag, ViewMode, includeConditionalArg, isExportStory, parseKind, sanitize, storyNameFromExport, toId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf",
-  "version": "0.0.2-next.1",
+  "version": "0.0.2-next.3",
   "description": "Component Story Format (CSF) utilities",
   "keywords": [
     "storybook",
@@ -23,6 +23,12 @@
     "*.js",
     "*.d.ts"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -30,14 +36,29 @@
     "build": "tsup ./src/index.ts --format esm,cjs --dts",
     "check": "tsc",
     "lint": "eslint src --ext .ts",
-    "test": "jest",
+    "test": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules jest",
     "release": "yarn build && auto shipit"
   },
   "eslintConfig": {
     "extends": [
       "@storybook/eslint-config-storybook"
     ],
+    "parserOptions": {
+      "project": [
+        "./tsconfig.json"
+      ]
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {
+          "project": [
+            "./tsconfig.json"
+          ]
+        }
+      }
+    },
     "rules": {
+      "import/no-unresolved": "error",
       "jest/expect-expect": [
         "warn",
         {
@@ -51,7 +72,21 @@
   },
   "prettier": "@storybook/linter-config/prettier.config",
   "jest": {
-    "preset": "ts-jest",
+    "preset": "ts-jest/presets/default-esm",
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "transform": {
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "useESM": true
+        }
+      ]
+    },
     "testEnvironment": "node",
     "roots": [
       "<rootDir>/src"
@@ -63,19 +98,23 @@
     "type-fest": "^2.19.0"
   },
   "devDependencies": {
-    "@auto-it/released": "^10.37.1",
-    "@storybook/eslint-config-storybook": "^2.1.0",
+    "@auto-it/released": "^10.37.6",
+    "@storybook/eslint-config-storybook": "^3.1.2",
     "@types/jest": "^29.2.0",
     "@types/lodash": "^4.14.149",
     "@types/node": "^18.11.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "auto": "^10.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "auto": "^10.37.6",
     "common-tags": "^1.8.0",
-    "eslint": "^6.7.1",
-    "jest": "^29.2.0",
+    "eslint": "^8.27.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.4",
+    "jest": "^29.3.1",
     "prettier": "^2.7.1",
     "ts-jest": "^29.0.3",
-    "tsup": "^6.3.0",
+    "tsup": "^6.4.0",
     "typescript": "^4.8.4"
   },
   "auto": {