[CSS-in-JS] Add provider to generated codesandbox examples (#5253)

* add provider to generated codesandbox examples

* indentation

* euithemeprovider -> euiprovider

* legacy theme

src-docs/src/components/codesandbox/link.js

@@ -65,6 +65,33 @@ export const CodeSandboxLinkComponent = ({
       break;
   }
 
+  const isLegacyTheme = context.theme.includes(LEGACY_NAME_KEY);
+
+  const providerPropsObject = {};
+  // Only add configuration if it isn't the default
+  if (context.theme.includes('dark')) {
+    providerPropsObject.colorMode = 'dark';
+  }
+  // Can't spread an object inside of a string literal
+  const providerProps = Object.keys(providerPropsObject)
+    .map((prop) => {
+      const value = providerPropsObject[prop];
+      return value !== null ? `${prop}="${value}"` : `${prop}={${value}}`;
+    })
+    .join(' ');
+
+  // Renders the new Demo component generically into the code sandbox page
+  const exampleClose = `ReactDOM.render(
+  ${
+    isLegacyTheme
+      ? '<Demo />'
+      : `<EuiProvider ${providerProps}>
+    <Demo />
+  </EuiProvider>`
+  },
+  document.getElementById('root')
+);`;
+
   let indexContent;
 
   if (!content) {
@@ -74,28 +101,48 @@ import '${cssFile}';
 import React from 'react';
 
 import {
-  EuiButton,
+  ${
+    isLegacyTheme
+      ? 'EuiButton,'
+      : `EuiButton,
+  EuiProvider,`
+  }
 } from '@elastic/eui';
 
 const Demo = () => (<EuiButton>Hello world!</EuiButton>);
 
-ReactDOM.render(
-  <Demo />,
-  document.getElementById('root')
-);
+${exampleClose}
 `;
   } else {
     /** This cleans the Demo JS example for Code Sanbox.
     - Replaces relative imports with pure @elastic/eui ones
+    - Adds provider import, if necessary
     - Changes the JS example from a default export to a component const named Demo
     **/
-    const exampleCleaned = cleanEuiImports(content)
+    let exampleCleaned = cleanEuiImports(content)
       .replace('export default', 'const Demo =')
       .replace(
         /(from )'(..\/)+display_toggles(\/?';)/,
         "from './display_toggles';"
       );
 
+    if (!isLegacyTheme && !exampleCleaned.includes('EuiProvider')) {
+      if (exampleCleaned.includes(" } from '@elastic/eui';")) {
+        // Single line import statement
+        exampleCleaned = exampleCleaned.replace(
+          " } from '@elastic/eui';",
+          ", EuiProvider } from '@elastic/eui';"
+        );
+      } else {
+        // Multi line import statement
+        exampleCleaned = exampleCleaned.replace(
+          "} from '@elastic/eui';",
+          `  EuiProvider,
+} from '@elastic/eui';`
+        );
+      }
+    }
+
     // If the code example still has local doc imports after the above cleaning it's
     // too complicated for code sandbox so we don't provide a link
     const hasLocalImports = /(from )'((.|..)\/).*?';/.test(exampleCleaned);
@@ -104,11 +151,6 @@ ReactDOM.render(
       return null;
     }
 
-    // Renders the new Demo component generically into the code sandbox page
-    const exampleClose = `ReactDOM.render(
-    <Demo />,
-    document.getElementById('root')
-  );`;
     // The Code Sanbbox demo needs to import CSS at the top of the document. CS has trouble
     // with our dynamic imports so we need to warn the user for now
     const exampleStart = `import ReactDOM from 'react-dom';
@@ -118,7 +160,7 @@ import '${cssFile}';`;
     const cleanedContent = `${exampleStart}
 ${exampleCleaned}
 ${exampleClose}
-      `;
+`;
     indexContent = cleanedContent.replace(
       /(from )'.+display_toggles';/,
       "from './display_toggles';"