Added loader stories

code/examples/html-kitchen-sink/stories/loaders.stories.js

@@ -1,7 +0,0 @@
-export default {
-  title: 'Core/Loaders',
-  loaders: [async () => new Promise((r) => setTimeout(() => r({ kindValue: 7 }), 3000))],
-};
-
-export const Story = (args, { loaded }) =>
-  `<div>Loaded Value is ${JSON.stringify(loaded, null, 2)}</div>`;

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

@@ -1,25 +0,0 @@
-import React from 'react';
-
-export default {
-  title: 'Core/Loaders',
-  loaders: [async () => new Promise((r) => setTimeout(() => r({ kindValue: 7 }), 3000))],
-};
-
-export const Story = (args, { loaded }) => (
-  <div>Loaded Value is {JSON.stringify(loaded, null, 2)}</div>
-);
-Story.loaders = [async () => ({ storyValue: 3 })];
-
-export const ZIndex = (args, { loaded }) => (
-  <div
-    style={{
-      position: 'relative',
-      zIndex: 1000,
-      width: '100px',
-      height: '100px',
-      background: 'coral',
-    }}
-  >
-    This story has a very high <code>z-index</code>
-  </div>
-);

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

@@ -0,0 +1,33 @@
+import globalThis from 'global';
+import { PlayFunctionContext, StoryContext } from '@storybook/csf';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export default {
+  component: globalThis.Components.Code,
+  loaders: [async () => new Promise((r) => setTimeout(() => r({ componentValue: 7 }), 3000))],
+  render: (_: any, context: StoryContext) =>
+    globalThis.Components.render({ code: JSON.stringify(context.loaded, null, 2) }, context),
+};
+
+export const Inheritance = {
+  loaders: [async () => new Promise((r) => setTimeout(() => r({ storyValue: 3 }), 1000))],
+  play: async ({ canvasElement }: PlayFunctionContext) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('code').innerHTML).toEqual(
+      JSON.stringify({ componentValue: 7, storyValue: 3 }, null, 2)
+    );
+  },
+};
+
+export const ZIndex = {
+  decorators: [
+    globalThis.Components.styleDecorator({
+      position: 'relative',
+      zIndex: 1000,
+      width: '500px',
+      height: '500px',
+      background: 'coral',
+    }),
+  ],
+};

code/renderers/react/template/components/index.js

@@ -4,5 +4,6 @@ import { render } from '@storybook/react/preview';
 
 import { Button } from './Button.jsx';
 import { Code } from './Code.jsx';
+import { styleDecorator } from './styleDecorator.jsx';
 
-globalThis.Components = { Button, Code, render };
+globalThis.Components = { Button, Code, styleDecorator, render };

code/renderers/react/template/components/styleDecorator.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function styleDecorator(style) {
+  return (StoryFn) => (
+    <div style={style}>
+      <StoryFn />
+    </div>
+  );
+}