Merge pull request #7860 from storybookjs/hooks-context

Core: Pass a separate hooks context per story

addons/docs/src/blocks/DocsPage.tsx

@@ -110,9 +110,7 @@ export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
       const propsTableProps = propsSlot(context);
 
       const { selectedKind, storyStore } = context;
-      const componentStories = (storyStore.raw() as StoryData[]).filter(
-        s => s.kind === selectedKind
-      );
+      const componentStories = storyStore.getStoriesForKind(selectedKind);
       const primary = primarySlot(componentStories, context);
       const stories = storiesSlot(componentStories, context);
 

examples/official-storybook/stories/hooks.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useState } from '@storybook/client-api';
+
+export default {
+  title: 'Hooks',
+};
+
+export const Checkbox = () => {
+  const [on, setOn] = useState(false);
+  return (
+    <label>
+      <input type="checkbox" checked={on} onChange={e => setOn(e.target.checked)} />
+      On
+    </label>
+  );
+};
+
+export const Input = () => {
+  const [text, setText] = useState('foo');
+  return <input value={text} onChange={e => setText(e.target.value)} />;
+};

examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js

@@ -30,7 +30,7 @@ export const template = () => ({
   template: '<my-button>MyButton with template</my-button>',
 });
 
-export const withData = ({ parameters, ...rest }) => ({
+export const withData = ({ parameters, hooks, ...rest }) => ({
   template: `<pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
 });
 

lib/addons/package.json

@@ -24,6 +24,7 @@
     "@storybook/api": "5.2.0-beta.40",
     "@storybook/channels": "5.2.0-beta.40",
     "@storybook/client-logger": "5.2.0-beta.40",
+    "@storybook/core-events": "5.2.0-beta.40",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"