Merge pull request #6660 from storybooks/add/addon-contexts/preact-support

ADD addon-contexts: Preact support

ADDONS_SUPPORT.md

@@ -6,7 +6,7 @@
 |[actions](addons/actions)                   |+|+|+|+|+|+|+|+|+|+|+|+|
 |[backgrounds](addons/backgrounds)           |+|*|+|+|+|+|+|+|+|+|+|+|
 |[centered](addons/centered)                 |+| |+|+| |+|+| |+| |+|+|
-|[contexts](addons/contexts)                 |+| |+| | | | | | | | | |
+|[contexts](addons/contexts)                 |+| |+| | | | | | | | |+|
 |[events](addons/events)                     |+| |+|+|+|+|+|+| | |+|+|
 |[graphql](addons/graphql)                   |+| | | | | | | | | | | |
 |[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|

addons/contexts/README.md

@@ -31,13 +31,13 @@ once then apply it everywhere**.
    use it to bridge with your favorite routing, state-management solutions, or even your own
    [React Context](https://reactjs.org/docs/context.html) provider.
 4. Offer chainable and granular configurations. It is even possible to fine-tune at per story level.
-5. Visual regression friendly.  You can use this addon to driving the same story under different contexts to smoke
+5. Visual regression friendly. You can use this addon to driving the same story under different contexts to smoke
    testing important visual states.
 
 ## 🧰 Requirements
 
-Make sure the version of your Storybook is above v5. Currently, this addon supports the following frameworks:
-**React**, and **Vue**. Other frameworks might get support in the near future (PRs are welcome!).
+Make sure the version of your Storybook is above v5. For the full list the current supported framework, see
+[Addon / Framework Support Table](../../ADDONS_SUPPORT.md).
 
 ## 🎬 Getting started
 
@@ -58,8 +58,8 @@ To load your contextual setups for your stories globally, adding the following l
 see it near your `addon.js` file):
 
 ```js
-import { addDecorator } from '@storybook/react'; // or '@storybook/vue'
-import { withContexts } from '@storybook/addon-contexts/react'; // or '@storybook/addon-contexts/vue'
+import { addDecorator } from '@storybook/[framework]';
+import { withContexts } from '@storybook/addon-contexts/[framework]';
 import { contexts } from './configs/contexts'; // we will define the contextual setups later in API section
 
 addDecorator(withContexts(contexts));
@@ -68,8 +68,8 @@ addDecorator(withContexts(contexts));
 Alternatively, just like other addons, you can use this addon only for a given set of stories:
 
 ```js
-import { storiesOf } from '@storybook/react'; // or '@storybook/vue'
-import { withContexts } from '@storybook/addon-contexts/react'; // or '@storybook/addon-contexts/vue'
+import { storiesOf } from '@storybook/[framework]';
+import { withContexts } from '@storybook/addon-contexts/[framework]';
 import { contexts } from './configs/contexts';
 
 const story = storiesOf('Component With Contexts', module).addDecorator(withContexts(contexts)); // use this addon with a default contextual environment setups

addons/contexts/package.json

@@ -4,6 +4,7 @@
   "description": "Storybook Addon Contexts",
   "keywords": [
     "storybook",
+    "preact",
     "react",
     "vue"
   ],
@@ -13,6 +14,7 @@
   "files": [
     "dist/**/*",
     "register.js",
+    "preact.js",
     "react.js",
     "vue.js"
   ],
@@ -22,19 +24,21 @@
     "directory": "addons/contexts"
   },
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "node ../../scripts/prepare.js",
+    "dev:check-types": "tsc --noEmit"
   },
   "dependencies": {
     "@storybook/addons": "5.1.0-alpha.35",
     "@storybook/api": "5.1.0-alpha.35",
     "@storybook/components": "5.1.0-alpha.35",
-    "@storybook/core-events": "5.1.0-alpha.35",
-    "global": "^4.3.2"
+    "@storybook/core-events": "5.1.0-alpha.35"
   },
   "peerDependencies": {
+    "global": "*",
     "qs": "*"
   },
   "optionalDependencies": {
+    "preact": "*",
     "react": "*",
     "vue": "*"
   },

addons/contexts/preact.js

@@ -0,0 +1,4 @@
+import { withContexts } from './dist/preview/frameworks/preact';
+
+export { withContexts };
+export default withContexts;

addons/contexts/src/preview/frameworks/preact.ts

@@ -0,0 +1,14 @@
+import Preact from 'preact';
+import { createAddonDecorator, Render } from '../../index';
+import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
+
+/**
+ * This is the framework specific bindings for Preact.
+ * '@storybook/preact' expects the returning object from a decorator to be a 'Preact vNode'.
+ */
+export const renderPreact: Render<Preact.VNode> = (contextNodes, propsMap, getStoryVNode) => {
+  const { getRendererFrom } = ContextsPreviewAPI();
+  return getRendererFrom(Preact.h)(contextNodes, propsMap, getStoryVNode);
+};
+
+export const withContexts = createAddonDecorator(renderPreact);

addons/contexts/src/shared/@mock-types/_preact.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Preact v8.4.2 shipped with global polluted JSX typing, which breaks the React components typing under Manager
+ */
+declare module 'preact' {
+  declare type VNode = any;
+  declare const h: any = () => {};
+}

addons/contexts/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "preact": ["src/shared/@mock-types/_preact.d.ts"]
+    },
     "removeComments": true,
     "rootDir": "./src",
     "types": ["webpack-env", "jest"]

examples/preact-kitchen-sink/.storybook/addons.js

@@ -6,3 +6,4 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-contexts/register';

examples/preact-kitchen-sink/package.json

@@ -19,6 +19,7 @@
     "@storybook/addon-actions": "5.1.0-alpha.35",
     "@storybook/addon-backgrounds": "5.1.0-alpha.35",
     "@storybook/addon-centered": "5.1.0-alpha.35",
+    "@storybook/addon-contexts": "5.1.0-alpha.35",
     "@storybook/addon-knobs": "5.1.0-alpha.35",
     "@storybook/addon-links": "5.1.0-alpha.35",
     "@storybook/addon-notes": "5.1.0-alpha.35",

examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
+<div
+  style={
+    Object {
+      "background": "#173F5F",
+      "color": "white",
+      "height": "100vh",
+      "padding": "10px",
+    }
+  }
+>
+  <div>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </div>
+</div>
+`;

examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js

@@ -0,0 +1,100 @@
+/** @jsx h */
+import { h } from 'preact';
+import { storiesOf } from '@storybook/preact';
+import { withContexts } from '@storybook/addon-contexts/preact';
+
+// Example A: Simple CSS Theming
+const topLevelContexts = [
+  {
+    icon: 'sidebaralt',
+    title: 'CSS Themes',
+    components: ['div'],
+    params: [
+      {
+        name: 'Desert',
+        props: {
+          style: { color: 'brown', background: '#F4A261', height: '100vh', padding: '10px' },
+        },
+      },
+      {
+        name: 'Ocean',
+        props: {
+          style: { color: 'white', background: '#173F5F', height: '100vh', padding: '10px' },
+        },
+        default: true,
+      },
+    ],
+  },
+];
+
+const storyLevelContexts = [
+  {
+    title: 'CSS Themes',
+    params: [
+      {
+        name: 'Forest',
+        props: {
+          style: { color: 'teal', background: '#00b894', height: '100vh', padding: '10px' },
+        },
+      },
+    ],
+  },
+];
+
+const stories = storiesOf('Addons|Contexts', module).addDecorator(withContexts(topLevelContexts));
+
+stories.add(
+  'Simple CSS Theming',
+  () => <div>I'm a children of the injected 'div' (where provides a theming context).</div>,
+  {
+    contexts: storyLevelContexts,
+  }
+);
+
+// TODO: uncomment code block after the adaption of Preact X (need to be imported)
+// Example B: Language (Preact X contextAPI)
+// const NaiveIntlContext = createContext({
+//   locale: 'unknown',
+//   greeting: 'NULL',
+// });
+//
+// stories.add(
+//   'Languages',
+//   () => (
+//     <NaiveIntlContext.Consumer>
+//       {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
+//     </NaiveIntlContext.Consumer>
+//   ),
+//   {
+//     contexts: [
+//       {
+//         icon: 'globe',
+//         title: 'Languages',
+//         components: [NaiveIntlContext.Provider],
+//         params: [
+//           {
+//             name: 'English',
+//             props: {
+//               value: { locale: 'en', greeting: 'Hello' },
+//             },
+//           },
+//           {
+//             name: 'French',
+//             props: {
+//               value: { locale: 'fr', greeting: 'Bonjour' },
+//             },
+//           },
+//           {
+//             name: 'Chinese',
+//             props: {
+//               value: { locale: 'cn', greeting: '你好' },
+//             },
+//           },
+//         ],
+//         options: {
+//           cancelable: true,
+//         },
+//       },
+//     ],
+//   }
+// );

yarn.lock

@@ -21025,7 +21025,7 @@ preact-render-to-json@^3.6.6:
   resolved "https://registry.npmjs.org/preact-render-to-json/-/preact-render-to-json-3.6.6.tgz#f67f48581912ac53fc9f4873bc6d7ce342f71c20"
   integrity sha1-9n9IWBkSrFP8n0hzvG1840L3HCA=
 
-preact@^8.4.2:
+preact@*, preact@^8.4.2:
   version "8.4.2"
   resolved "https://registry.npmjs.org/preact/-/preact-8.4.2.tgz#1263b974a17d1ea80b66590e41ef786ced5d6a23"
   integrity sha512-TsINETWiisfB6RTk0wh3/mvxbGRvx+ljeBccZ4Z6MPFKgu/KFGyf2Bmw3Z/jlXhL5JlNKY6QAbA9PVyzIy9//A==