feat: allow custom code to be used instead of story source (#10)

rbardini · Apr 19, 2020 · c4cd667 · c4cd667
1 parent ec6df5c
commit c4cd667
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -40,11 +40,12 @@ See [`example`](example) for a minimal working setup.
 
 The addon can be configured globally and per story with the `playroom` parameter. The following options are available:
 
-| Option                           | Description                              | Default                 |
-|:---------------------------------|:-----------------------------------------|:------------------------|
-| `url`                            | the Playroom URL                         | `http://localhost:9000` |
-| `disabled`                       | whether to disable the addon             | `false`                 |
-| `reactElementToJSXStringOptions` | [react-element-to-jsx-string options][1] | `{ sortProps: false }`  |
+| Option                           | Type      | Description                              | Default                 |
+|:---------------------------------|:----------|:-----------------------------------------|:------------------------|
+| `url`                            | `string`  | the Playroom URL                         | `http://localhost:9000` |
+| `code`                           | `string`  | code to be used instead of story source  |                         |
+| `disabled`                       | `boolean` | whether to disable the addon             | `false`                 |
+| `reactElementToJSXStringOptions` | `object`  | [react-element-to-jsx-string options][1] | `{ sortProps: false }`  |
 
 ### Global configuration
 

diff --git a/example/stories/0-Welcome.stories.js b/example/stories/0-Welcome.stories.js
@@ -11,4 +11,10 @@ export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
 ToStorybook.story = {
   name: 'to Storybook',
+  parameters: {
+    playroom: {
+      // Links addon doesn't work in Playroom, so display an alert instead
+      code: "<Welcome showApp={() => alert('Button')} />",
+    },
+  },
 };
diff --git a/src/index.tsx b/src/index.tsx
@@ -20,13 +20,14 @@ const Story: FC<Props> = ({
   settings: {
     parameters: {
       url = 'http://localhost:9000',
+      code,
       disabled = false,
       reactElementToJSXStringOptions = { sortProps: false },
     } = {},
   },
 }) => {
   const story = getStory(context);
-  const jsxString = reactElementToJSXString(story, reactElementToJSXStringOptions);
+  const jsxString = code || reactElementToJSXString(story, reactElementToJSXStringOptions);
   const channel = addons.getChannel();
   const codeUrl = url && `${url}#?code=${base64Url.encode(jsxString)}`;