[Docs only] Various fixes/cleanups with demo code imports

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

@@ -231,7 +231,7 @@ ReactDOM.render(
     >
       {/* 7 */}
       <input type="hidden" name="parameters" value={params} />
-      <input type="hidden" name="query" value="file=/demo.js" />
+      <input type="hidden" name="query" value={`file=/demo.${type}`} />
       {childWithSubmit}
     </form>
   );

src-docs/src/components/guide_section/_utils.js

@@ -10,17 +10,36 @@ import { cleanEuiImports } from '../../services';
 export const renderJsSourceCode = (code) => {
   let renderedCode = cleanEuiImports(code.default);
 
-  /* ----- Combine and clean EUI imports ----- */
-  let elasticImports = [''];
+  /**
+   * Extract React import (to ensure it's always at the top)
+   */
+  let reactImport = '';
+
+  renderedCode = renderedCode.replace(
+    // import          - import + space
+    // (React)?        - optional import `React` prefix - some files (like hooks) do not need it
+    // (, )?           - optional comma after React - some files, like tests, only need the main React import
+    // ({([^}]+?)})?   - optionally capture anything that isn't a closing brace between the import braces
+    //  from 'react';  - ` from 'react';` exactly
+    /import (React)?(, )?({([^}]+?)})? from 'react';/,
+    (match) => {
+      reactImport = match;
+      return '';
+    }
+  );
+
+  /**
+   * Combine and clean EUI imports
+   */
+  const elasticImports = [];
 
   // Find all imports that come from '@elastic/eui'
   renderedCode = renderedCode.replace(
-    // [\r\n]                       - start of a line
-    // import\s+\{                  - import / whitespace / opening brace
-    // ([^}]+)                      - group together anything that isn't a closing brace
-    // \}\s+from\s+'@elastic\/eui'; - closing brace / whitespace / from / whitespace / '@elastic/eui';
-    // [\r\n]                       - match end of line, so the extra new line is removed via the replace operation
-    /[\r\n]import\s+\{([^}]+)\}\s+from\s+'@elastic\/eui';/g,
+    // import {                - import / whitespace / opening brace
+    // ([^}]+)                 - group together anything that isn't a closing brace
+    // } from '@elastic\/eui'; - closing brace / whitespace / from / whitespace / '@elastic/eui';
+    // [\r\n]                  - match end of line, so the extra new line is removed via the replace operation
+    /import {([^}]+)} from '@elastic\/eui';[\r\n]/g,
     (match, imports) => {
       // remove any additional characters from imports
       const namedImports = imports.match(/[a-zA-Z0-9]+/g);
@@ -29,35 +48,49 @@ export const renderJsSourceCode = (code) => {
     }
   );
 
-  // Remove empty spaces in the array
-  elasticImports = elasticImports.filter((ele) => ele);
-
   let formattedEuiImports = '';
 
-  // determine if imports should be wrapped to new lines based on the import statement length
-  const combinedImports = elasticImports.join(', ');
-  const singleLineImports = `import { ${combinedImports} } from '@elastic/eui';`;
+  if (elasticImports.length) {
+    // Determine if imports should be wrapped to new lines based on the import statement length
+    const combinedImports = elasticImports.join(', ');
+    const singleLineImports = `import { ${combinedImports} } from '@elastic/eui';`;
 
-  if (singleLineImports.length <= 81) {
-    formattedEuiImports = singleLineImports;
-  } else {
-    const lineSeparatedImports = elasticImports.join(',\n  ');
-    formattedEuiImports = `import {\n  ${lineSeparatedImports},\n} from '@elastic/eui';`;
+    if (singleLineImports.length <= 81) {
+      formattedEuiImports = singleLineImports;
+    } else {
+      const lineSeparatedImports = elasticImports.join(',\n  ');
+      formattedEuiImports = `import {\n  ${lineSeparatedImports},\n} from '@elastic/eui';`;
+    }
   }
 
-  // Find any non-EUI imports and join them with new lines between each import for uniformity
-  const nonEuiImports = [];
+  /**
+   * Extract remaining non-React/EUI imports
+   */
+  const remainingImports = [];
 
   renderedCode = renderedCode.replace(
-    /import\s+([^]+?)\s+from\s+(\'[A-Za-z0-9 _./-]*\'\;)/g,
+    // (\/\/.+\n)?                   - optional preceding comments that must be above specific imports, e.g. // @ts-ignore
+    // import                        - import + whitespace
+    // ([^]+?)                       - capture any characters (including newlines)
+    //  from ('[A-Za-z0-9 -_.@/]*';) - ` from 'someLibrary';` - alphanumeric and certain special characters only
+    /(\/\/.+\n)?import ([^]+?) from ('[A-Za-z0-9 -_.@/]*';)/g,
     (match) => {
-      nonEuiImports.push(match);
+      remainingImports.push(match);
       return '';
     }
   );
 
-  const formattedNonEuiImports = nonEuiImports.join('\n');
+  /**
+   * Putting it all together
+   */
+  // Render each import with just 1 newline between them for uniformity
+  const renderedImports = [
+    reactImport,
+    formattedEuiImports,
+    ...remainingImports,
+  ]
+    .filter((stripEmptyImports) => stripEmptyImports)
+    .join('\n');
 
-  const fullyFormattedCode = `${formattedEuiImports}\n${formattedNonEuiImports}\n\n${renderedCode.trim()}`;
-  return fullyFormattedCode;
+  return `${renderedImports}\n\n${renderedCode.trim()}`;
 };