Add parameters story

code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts

@@ -1,27 +0,0 @@
-import { addParameters } from '@storybook/angular';
-import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
-
-const globalParameter = 'globalParameter';
-const chapterParameter = 'chapterParameter';
-const storyParameter = 'storyParameter';
-
-addParameters({ globalParameter });
-
-export default {
-  title: 'Core / Parameters / All parameters',
-  parameters: {
-    chapterParameter,
-  },
-} as Meta;
-
-export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({
-  component: Button,
-  props: {
-    text: `Parameters are ${JSON.stringify(parameters, null, 2)}`,
-    onClick: () => 0,
-  },
-});
-
-PassedToStory.storyName = 'All parameters passed to story';
-PassedToStory.parameters = { storyParameter };

code/examples/official-storybook/stories/core/parameters.stories.js

@@ -1,24 +0,0 @@
-import React from 'react';
-
-// We would need to add this in config.js idiomatically however that would make this file a bit confusing
-import { addParameters } from '@storybook/react';
-
-addParameters({ globalParameter: 'globalParameter' });
-
-export default {
-  title: 'Core/Parameters',
-  parameters: {
-    chapterParameter: 'chapterParameter',
-  },
-};
-
-// I'm not sure what we should recommend regarding propTypes? are they a good idea for examples?
-// Given we sort of control the props, should we export a prop type?
-export const Passed = (_args, { parameters: { options, fileName, ...parameters }, ...rest }) => (
-  <div>
-    Parameters:
-    <pre>{JSON.stringify(parameters, null, 2)}</pre>
-  </div>
-);
-Passed.storyName = 'passed to story';
-Passed.parameters = { storyParameter: 'storyParameter' };

code/lib/store/template/stories/parameters.stories.ts

@@ -0,0 +1,51 @@
+import globalThis from 'global';
+import { PlayFunctionContext, StoryContext } from '@storybook/csf';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+// TODO: is there some way to define a project-level annotation in sandboxes?
+
+export default {
+  component: globalThis.Components.Code,
+  parameters: {
+    componentParameter: 'componentParameter',
+    storyParameter: 'componentStoryParameter', // Checking this gets overridden
+    storyObject: {
+      a: 'component',
+      b: 'component',
+    },
+  },
+};
+
+export const Inheritance = {
+  parameters: {
+    storyParameter: 'storyParameter',
+    storyObject: {
+      a: 'story',
+    },
+  },
+  render: (_: any, context: StoryContext) => {
+    const { componentParameter, storyParameter, storyObject } = context.parameters;
+    return globalThis.Components.render(
+      { code: JSON.stringify({ componentParameter, storyParameter, storyObject }, null, 2) },
+      context
+    );
+  },
+  play: async ({ canvasElement }: PlayFunctionContext) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('code').innerHTML).toEqual(
+      JSON.stringify(
+        {
+          componentParameter: 'componentParameter',
+          storyParameter: 'storyParameter',
+          storyObject: {
+            a: 'story',
+            b: 'component',
+          },
+        },
+        null,
+        2
+      )
+    );
+  },
+};