Encapsulate styleguide styles

Summary: Prevent leaking Flipper styles and antd styles into the website by embedding the styleguide into an iframe.

Reviewed By: nikoant

Differential Revision: D34522771

fbshipit-source-id: a05bf1e7f54fe172fb012a0a02296b3a4e0100f1

website/.gitignore

@@ -8,6 +8,7 @@ build/
 website/yarn.lock
 website/node_modules
 flipper-themes
+static/css/style-guide.css
 
 website/i18n/*
 !website/i18n/en.json

website/package.json

@@ -1,14 +1,14 @@
 {
   "scripts": {
     "copy-schema": "fcli ensure static/schemas/plugin-package && fcli copy ../desktop/pkg/schemas/plugin-package-v2.json static/schemas/plugin-package/v2.json -o",
-    "start": "yarn copy-schema && yarn generate-plugin-docs && yarn build:flipper-theme && docusaurus start --port 3001",
-    "build": "yarn copy-schema && yarn generate-plugin-docs && yarn build:flipper-theme && docusaurus build",
+    "start": "yarn copy-schema && yarn generate-plugin-docs && yarn build:style-guide && docusaurus start --port 3001",
+    "build": "yarn copy-schema && yarn generate-plugin-docs && yarn build:style-guide && docusaurus build",
     "publish-gh-pages": "docusaurus deploy",
     "write-translations": "docusaurus write-translations",
     "version": "docusaurus version",
     "rename-version": "docusaurus rename-version",
     "generate-plugin-docs": "ts-node ./generate-plugin-docs.ts",
-    "build:flipper-theme": "fcli remove flipper-themes && fcli copy ../desktop/themes flipper-themes && lessc --js flipper-themes/light.less flipper-themes/flipper-theme.css"
+    "build:style-guide": "fcli remove flipper-themes && fcli copy ../desktop/themes flipper-themes && lessc --js flipper-themes/light.less static/css/style-guide.css"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.7.0",

website/src/components/IFrame.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {useState, useEffect} from 'react';
+import {createPortal} from 'react-dom';
+
+// https://stackoverflow.com/a/34744946
+export const IFrame = ({children, ...props}) => {
+  const [contentRef, setContentRef] = useState(null);
+  const mountNode = contentRef?.contentWindow?.document?.body;
+
+  return (
+    <iframe {...props} ref={setContentRef}>
+      {mountNode && createPortal(children, mountNode)}
+    </iframe>
+  );
+};

website/src/components/StyleGuide.js

@@ -7,7 +7,7 @@
  * @format
  */
 
-import React from 'react';
+import React, {useState, useLayoutEffect} from 'react';
 import {
   Typography,
   Button,
@@ -32,9 +32,7 @@ import {
 } from 'flipper-plugin';
 import {css} from '@emotion/css';
 import reactElementToJSXString from 'react-element-to-jsx-string';
-
-import '../../flipper-themes/flipper-theme.css';
-import 'antd/dist/antd.css';
+import {IFrame} from './IFrame';
 
 const {Title, Text, Link} = Typography;
 
@@ -551,9 +549,30 @@ const DesignComponentDemos = () => (
   </Layout.Container>
 );
 
-export default function SandyDesignSystem() {
+function SandyDesignSystem() {
+  const [root, setRoot] = useState(null);
+
+  useLayoutEffect(() => {
+    if (root) {
+      const iframe = window.parent.document.getElementById('styleguide');
+      iframe.style.height = `${root.scrollHeight}px`;
+
+      const observer = new MutationObserver(() => {
+        iframe.style.height = `${root.scrollHeight}px`;
+      });
+      observer.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        characterData: true,
+      });
+
+      return () => observer.disconnect();
+    }
+  }, [root]);
+
   return (
-    <Layout.Container className={reset} gap="large">
+    <Layout.Container className={reset} gap="large" ref={setRoot}>
       <Card title="Flipper Design System" bordered={false}>
         <p>
           Welcome to the Flipper Design System. The Flipper design system is
@@ -674,6 +693,16 @@ export default function SandyDesignSystem() {
   );
 }
 
+export default function DesignSystemFramed() {
+  return (
+    <IFrame className={iframe} id="styleguide">
+      <link rel="stylesheet" href="/css/style-guide.css" />
+      <style>{innerCss}</style>
+      <SandyDesignSystem />
+    </IFrame>
+  );
+}
+
 function ColorPreview({name}) {
   return (
     <List.Item>
@@ -707,3 +736,13 @@ const reset = css`
     background: transparent;
   }
 `;
+
+const iframe = css`
+  width: 100%;
+`;
+
+const innerCss = `
+  body {
+    overflow: hidden;
+  }
+`;