docs: make internationalized components available in playroom (#2363)

package.json

@@ -39,7 +39,9 @@
     "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex",
     "type-check": "tsc --noEmit && tsc --project www --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
-    "build-types": "tsc --emitDeclarationOnly"
+    "build-types": "tsc --emitDeclarationOnly",
+    "playroom:start": "npm run playroom:start --workspace=www",
+    "playroom:build": "npm run playroom:build --workspace=www"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",

www/README.md

@@ -55,6 +55,27 @@ exports.THEMES = [
 
     and your theme will automatically get picked up during the build.
 
+## Running playground locally
+
+Playground is a separate application (provided by [playroom](https://github.com/seek-oss/playroom) package) that in production gets bundled together with docs site and is served by Gatsby by rendering this application in an iframe on the `/playground` route.
+
+Currently, there is no way to reproduce this behavior in development mode. To work with Playground locally in development mode with hot-reloading you have to start `playroom`'s dev server and work with it separately from the docs site. To do that, run:
+
+```sh
+npm run playroom:start
+```
+
+which will make `playroom` available at http://localhost:9000/.
+
+To reproduce the production environment, you may build `playroom`'s production bundle and serve it with Gatsby:
+
+```sh
+npm run playroom:build
+npm run serve
+```
+
+This will make docs site available at http://localhost:9000/ together with Playground page working as in production site.
+
 ## Feature Flags
 In some scenarios, it is helpful to put your changes to the Paragon documentation site behind a feature flag so that you have more control over how a particular feature or change is rolled out more broadly.
 

www/package.json

@@ -55,8 +55,11 @@
     "develop:with-theme": "npm run develop",
     "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "start": "npm run develop",
+    "serve": "gatsby serve",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-themes": "node build-themes.js"
+    "build-themes": "node build-themes.js",
+    "playroom:start": "playroom start",
+    "playroom:build": "playroom build"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",

www/playroom/FrameComponent.jsx

@@ -1,24 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
+import { IntlProvider } from 'react-intl';
 
 export default function FrameComponent({ theme, children }) {
   return (
-    <main style={{ padding: '16px' }}>
-      <Helmet>
-        <link
-          href="/static/openedx-theme.css"
-          rel={`stylesheet${theme === 'openedx' ? '' : ' alternate'}`}
-          type="text/css"
-        />
-        <link
-          href="/static/edxorg-theme.css"
-          rel={`stylesheet${theme === 'edX.org' ? '' : ' alternate'}`}
-          type="text/css"
-        />
-      </Helmet>
-      {children}
-    </main>
+    <IntlProvider locale="en">
+      <main style={{ padding: '16px' }}>
+        <Helmet>
+          <link
+            href="/static/openedx-theme.css"
+            rel={`stylesheet${theme === 'openedx' ? '' : ' alternate'}`}
+            type="text/css"
+          />
+          <link
+            href="/static/edxorg-theme.css"
+            rel={`stylesheet${theme === 'edX.org' ? '' : ' alternate'}`}
+            type="text/css"
+          />
+        </Helmet>
+        {children}
+      </main>
+    </IntlProvider>
   );
 }