Add playroom

jxom · Jul 29, 2020 · 58ef67f · 58ef67f
1 parent 81ff2f3
commit 58ef67f
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 66 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -6,19 +6,19 @@ module.exports = {
         modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
         loose: true,
         targets: {
-          browsers: 'defaults'
-        }
-      }
+          browsers: 'defaults',
+        },
+      },
     ],
     '@babel/preset-react',
-    '@babel/preset-typescript'
+    '@babel/preset-typescript',
   ],
   plugins: [
     'emotion',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-nullish-coalescing-operator'
-  ].filter(Boolean)
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ].filter(Boolean),
 };
diff --git a/packages/website/babel.config.js b/packages/website/babel.config.js
@@ -1,29 +1,32 @@
 const prod = process.env.NODE_ENV === 'production';
+const isPlayroom = Boolean(process.env.PLAYROOM);
 
-module.exports = {
-  presets: [
-    [
-      'babel-preset-gatsby',
-      {
-        targets: {
-          browsers: ['>0.25%', 'not dead'],
-        },
-      },
-    ],
-  ],
-  plugins: [
-    'emotion',
-    'babel-plugin-extract-react-types',
-    !prod && [
-      'babel-plugin-module-resolver',
-      {
-        alias: {
-          bumbag: '../bumbag/src',
-          'bumbag-addon-highlighted-code': '../bumbag-addon-highlighted-code/src',
-          'bumbag-addon-markdown': '../bumbag-addon-markdown/src',
-          'bumbag-theme-medipass': '../bumbag-theme-medipass/src',
-        },
-      },
-    ],
-  ].filter(Boolean),
-};
+module.exports = !isPlayroom
+  ? {
+      presets: [
+        [
+          'babel-preset-gatsby',
+          {
+            targets: {
+              browsers: ['>0.25%', 'not dead'],
+            },
+          },
+        ],
+      ],
+      plugins: [
+        'emotion',
+        'babel-plugin-extract-react-types',
+        !prod && [
+          'babel-plugin-module-resolver',
+          {
+            alias: {
+              bumbag: '../bumbag/src',
+              'bumbag-addon-highlighted-code': '../bumbag-addon-highlighted-code/src',
+              'bumbag-addon-markdown': '../bumbag-addon-markdown/src',
+              'bumbag-theme-medipass': '../bumbag-theme-medipass/src',
+            },
+          },
+        ],
+      ].filter(Boolean),
+    }
+  : {};
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -51,7 +51,7 @@
     "fs-extra": "8.1.0",
     "lodash": "4.17.19",
     "md-node-inject": "1.0.0",
-    "playroom": "0.18.1",
+    "playroom": "0.21.2",
     "pretty-proptypes": "0.6.6",
     "rimraf": "2.6.3",
     "ts-morph": "3.1.3",
@@ -62,7 +62,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "gatsby build",
+    "build": "gatsby build && yarn playroom:build",
     "develop": "gatsby develop",
     "inject-types": "node scripts/inject-types.js",
     "lint": "eslint src/ --ext js,ts,tsx",
@@ -71,8 +71,8 @@
     "build:fab": "yarn fab:compile",
     "fab:compile": "fab-static public/",
     "fab:serve": "fab-serve ./fab.zip",
-    "playroom:start": "playroom start",
-    "playroom:build": "playroom build",
+    "playroom:start": "PLAYROOM=true playroom start",
+    "playroom:build": "PLAYROOM=true playroom build",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
   },
   "repository": {

diff --git a/packages/website/playroom.config.js b/packages/website/playroom.config.js
@@ -1,7 +1,5 @@
 const path = require('path');
 
-console.log(__dirname, path.cwd);
-
 module.exports = {
   components: '../bumbag/src/index.ts',
   outputPath: './public/playroom',
@@ -15,32 +13,33 @@ module.exports = {
           use: {
             loader: 'babel-loader',
             options: {
-              cwd: path.join(__dirname, '../..')
-            }
-          }
-        }
-      ]
+              cwd: path.join(__dirname, '../..'),
+              configFile: path.resolve(__dirname, '../../node_modules/playroom/.babelrc'),
+            },
+          },
+        },
+      ],
     },
     resolve: {
       alias: {
-        bumbag: path.resolve(__dirname, '../bumbag/src')
+        bumbag: path.resolve(__dirname, '../bumbag/src'),
+        'bumbag-addon-markdown': path.resolve(__dirname, '../bumbag-addon-markdown/src'),
+        'bumbag-addon-highlighted-code': path.resolve(__dirname, '../bumbag-addon-highlighted-code/src'),
+        'bumbag-theme-medipass': path.resolve(__dirname, '../bumbag-theme-medipass/src'),
       },
-      extensions: ['.mjs', '.js', '.json', '.ts', '.tsx']
-    }
+      extensions: ['.mjs', '.js', '.json', '.ts', '.tsx'],
+      modules: [path.resolve(__dirname, '../../node_modules'), 'node_modules'],
+    },
   }),
   exampleCode: `
-    <Container breakpoint="mobile" padding="major-2">
-      <FieldStack>
-        <Heading fontSize="500">Log in</Heading>
-        <InputField label="Username" size="medium" />
-        <InputField label="Password" size="medium" type="password" />
-        <Button palette="primary" size="large" width="100%">
-          Log in
-        </Button>
-        <Button palette="primary" size="large" variant="ghost" width="100%">
-          Sign up
-        </Button>
-      </FieldStack>
-    </Container>
-  `
+    <PageContent>
+      <Heading fontSize={{ default: "500", mobile: "300" }}>
+        Welcome to the Bumbag playroom!
+      </Heading>
+      <Drawer.State>
+        <Drawer.Disclosure use={Button}>Click me!</Drawer.Disclosure>
+        <Drawer>Hey hey!</Drawer>
+      </Drawer.State>
+    </PageContent>
+  `,
 };
diff --git a/yarn.lock b/yarn.lock
@@ -3438,6 +3438,11 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.6.tgz#ed8fc802c45b8e8f54419c2d054e55c9ea344356"
   integrity sha512-GRTZLeLJ8ia00ZH8mxMO8t0aC9M1N9bN461Z2eaRurJo6Fpa+utgCwLzI4jQHcrdzuzp5WPN9jRwpsCQ1VhJ5w==
 
+"@types/history@^4.7.6":
+  version "4.7.7"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896"
+  integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@@ -11052,6 +11057,18 @@ highlight.js@^8.1.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-8.9.1.tgz#b8a9c5493212a9392f0222b649c9611497ebfb88"
   integrity sha1-uKnFSTISqTkvAiK2SclhFJfr+4g=
 
+history@^4.10.1:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -13652,7 +13669,7 @@ longest@^1.0.0:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -15915,10 +15932,10 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-playroom@0.18.1:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/playroom/-/playroom-0.18.1.tgz#93795a0b7c34f815b40eb1afb6a5720ed27cfb13"
-  integrity sha512-kY/u8okcyTCtDtShmxh2k1CXlBCtjOXbJP3Zc1x4dVz+5NmS+IFUC4pv04lXLzI0bEumUIM6gj4kINMQZ4EhlA==
+playroom@0.21.2:
+  version "0.21.2"
+  resolved "https://registry.yarnpkg.com/playroom/-/playroom-0.21.2.tgz#e898630599c8fcbce8a3084a053d7d22662e74a1"
+  integrity sha512-i93r8AVQovR2jJMNC/3hPW6n235btU6eB/EgoJWdSWKggIu7Zw/ZxGsvpmhFIDcE/GZTyKRM04yG03Ki1fViFw==
   dependencies:
     "@babel/cli" "^7.8.3"
     "@babel/core" "^7.8.3"
@@ -15933,6 +15950,7 @@ [email protected]:
     "@types/classnames" "^2.2.9"
     "@types/codemirror" "^0.0.84"
     "@types/dedent" "^0.7.0"
+    "@types/history" "^4.7.6"
     "@types/lodash" "^4.14.149"
     "@types/lz-string" "^1.3.33"
     "@types/prettier" "^2.0.0"
@@ -15953,6 +15971,7 @@ [email protected]:
     find-up "^4.1.0"
     friendly-errors-webpack-plugin "^1.7.0"
     fuzzy "^0.1.3"
+    history "^4.10.1"
     html-webpack-plugin "^4.0.0-beta.5"
     intersection-observer "^0.7.0"
     less "^3.10.3"
@@ -17779,6 +17798,11 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -19703,6 +19727,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 [email protected], tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -20682,6 +20716,11 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"