feat(snippets): add experimental snippets generator (#12)

.gitignore

@@ -2,3 +2,4 @@
 dist
 node_modules
 storybook-static
+snippets.json

.lintstagedrc

@@ -1,3 +1,3 @@
 {
-  "*.{js,tsx}": "eslint --fix"
+  "{*.js,*.tsx,bin/*}": "eslint --fix"
 }

README.md

@@ -85,4 +85,30 @@ myStory.story = {
 };
 ```
 
+## Generating Playroom snippets from stories
+
+> **Note:** This is an experimental feature.
+
+Playroom addon comes with a `sb-playroom` CLI tool that can auto-generate [Playroom snippets](https://github.com/seek-oss/playroom#snippets) from Storybook stories via the `gen-snippets` command:
+
+```console
+$ sb-playroom gen-snippets --help
+Usage: sb-playroom gen-snippets [options] [config-dir]
+
+generate Playroom snippets from stories (experimental)
+
+Options:
+  -o, --out-file <path>     output file (default: "snippets.json")
+  -c, --config-file <path>  Babel config file
+  -h, --help                display help for command
+```
+
+By default, `gen-snippets` will fetch the Storybook configuration from the `.storybook` directory and output the snippets to a `snippets.json` file. Different input and output paths can be passed as arguments.
+
+You can then reference the output file in [`playroom.config.js`](https://github.com/seek-oss/playroom#getting-started).
+
+### Babel configuration
+
+Because Playroom addon programmatically runs Storybook to collect story sources, Babel is used to compile stories on the fly. If the loaded Babel configuration does not work with your Storybook, a [Babel config file](https://babeljs.io/docs/en/config-files) can be defined with the `-c, --config-file` option.
+
 [1]: https://github.com/algolia/react-element-to-jsx-string#reactelementtojsxstringreactelement-options

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }],
+    "@babel/preset-react"
+  ]
+}

bin/sb-playroom

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+/* eslint-disable global-require, @typescript-eslint/no-var-requires */
+const program = require('commander');
+const { version } = require('../package.json');
+
+program
+  .command('gen-snippets [config-dir]')
+  .description('generate Playroom snippets from stories (experimental)')
+  .option('-o, --out-file <path>', 'output file', 'snippets.json')
+  .option('-c, --config-file <path>', 'Babel config file')
+  .action((configDir = '.storybook', { configFile, ...options }) => {
+    require('@babel/register')({ configFile });
+    require('../dist/generateSnippets').default(configDir, options);
+  });
+
+program
+  .version(version, '-v, --version')
+  .parse(process.argv);
+
+if (program.rawArgs.length < 3) {
+  program.help();
+}

example/package.json

@@ -3,8 +3,11 @@
   "version": "0.0.0-development",
   "scripts": {
     "build": "run-s build-storybook build-playroom",
+    "prebuild-playroom": "npm run gen-snippets",
     "build-playroom": "playroom build",
     "build-storybook": "build-storybook",
+    "gen-snippets": "sb-playroom gen-snippets -c ../babel.config.json",
+    "preplayroom": "npm run gen-snippets",
     "playroom": "playroom start",
     "start": "run-p storybook playroom",
     "storybook": "start-storybook -p 6006"

example/playroom.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   components: './components',
   outputPath: './storybook-static/playroom',
+  snippets: './snippets',
   exampleCode: '<Welcome />',
   openBrowser: false,
 };