[Docs] Add support for .tsx CodeSandbox demos (#5160)

* Add new guide section TSX type

To be used as an extra code/source type indicator

* Update GuideSection components to pass tab type as a prop

* [extra] Destructure tab type from EuiTab
- so that it's not passed through ...rest

- this was accidentally incorrectly affecting the `<button type="">` output
+ it started generating typescript errors

* Update CodeSandboxLink to set the file extension based on the new passed `type` prop

- I originally thought about doing a conditional check for either JS or TSX, but I think this is the most future-proof way of being able to pass in whatever file type we need

- NOTE: We can't use plain `.ts` over `.tsx`, it will error on jsx tags

* Update erroring Tabs example to use TSX
(other tab examples should still be using JS, since we haven't specified that they need to be in TS)

* [Extra] Convert GuideSectionTypes to tsx

- so I can import it in other .tsx files without ts-ignoring

+ Update GuideSection to use its map reference directly instead of a static string (so it updates in multiple places if we update it in 1 place)

* Fix code block syntax highlighting for tsx

- totally missed this the first time, derp
- switched our `.toLowerCase` happening here instead of in `link.js`, which makes a bit more sense in terms of where it's needed
- added a = fallback for the type prop (can't make it required due to type shenanigans in guide_section_tabs.tsx), a fallback to JS seems to work fine instead

* [PR discussion] Update TS

Should only be used for demo code that contains Typescript that will break in JS files

Author: Constance

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

@@ -21,7 +21,7 @@ const getVersion = (packageName) => {
  *
  * 1. A `content` prop is passed containing the src-doc example code we need to manipulate for CS.
  * 2. If no content exists (like the homepage link), we'll make a hello world file bundled with EUI and call it a day.
- * 3. If content exists, we build an `index.js` file with a <Demo> component based on the original content.
+ * 3. If content exists, we build an `index.js/tsx` (depending on the passed source type) file with a <Demo> component based on the original content.
  * 4. If content contains `DisplayToggles`, we also generate a `display_toggles.js` file alongside the `index.js` file to import.
  * 5. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
  * 6. We pass the files and dependencies as params to CS through a POST call.
@@ -44,6 +44,7 @@ export const CodeSandboxLinkComponent = ({
   children,
   className,
   content,
+  type = 'js',
   context,
 }) => {
   let cssFile;
@@ -155,7 +156,7 @@ ${exampleClose}
         },
       },
       /* 3 */
-      'index.js': {
+      [`index.${type}`]: {
         content: indexContent,
       },
     },

src-docs/src/components/guide_section/guide_section.tsx

@@ -16,6 +16,7 @@ import {
   GuideSectionExampleTabs,
   GuideSectionExampleTabsProps,
 } from './guide_section_parts/guide_section_tabs';
+import { GuideSectionTypes } from './guide_section_types';
 
 export interface GuideSection {
   id?: string;
@@ -40,6 +41,10 @@ export const GuideSectionCodeTypesMap = {
     name: 'demoJS',
     displayName: 'Demo JS',
   },
+  TSX: {
+    name: 'demoTSX',
+    displayName: 'Demo TS',
+  },
   SNIPPET: {
     name: 'snippet',
     displayName: 'Snippet',
@@ -98,7 +103,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
     if (source) {
       source.map((source) => {
         // Forever skipping the HTML tab
-        if (source.type === 'HTML') return;
+        if (source.type === GuideSectionTypes.HTML) return;
         tabs.push({
           // @ts-ignore Complicated
           ...GuideSectionCodeTypesMap[source.type],

src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx

@@ -5,13 +5,16 @@ import { EuiButtonEmpty } from '../../../../../src/components/button';
 import { CodeSandboxLink } from '../../codesandbox';
 // @ts-ignore Not TS
 import { renderJsSourceCode } from '../_utils';
+import { GuideSectionTypes } from '../guide_section_types';
 
 export type GuideSectionExampleCode = {
   code: any;
+  type?: string;
 };
 
 export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode> = ({
   code,
+  type = GuideSectionTypes.JS,
 }) => {
   const [codeToRender, setCodeToRender] = useState();
 
@@ -26,6 +29,7 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
     <CodeSandboxLink
       className="guideSectionExampleCode__link"
       content={code.default}
+      type={type.toLowerCase()}
     >
       <EuiButtonEmpty size="xs" iconType="logoCodesandbox">
         Try out this demo on Code Sandbox
@@ -35,7 +39,11 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
 
   return (
     <>
-      <EuiCodeBlock language="jsx" overflowHeight={400} isCopyable>
+      <EuiCodeBlock
+        language={type === GuideSectionTypes.JS ? 'jsx' : type.toLowerCase()}
+        overflowHeight={400}
+        isCopyable
+      >
         {codeToRender}
       </EuiCodeBlock>
       {codeSandboxLink}

src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx

@@ -59,7 +59,15 @@ export const GuideSectionExampleTabs: FunctionComponent<GuideSectionExampleTabsP
     return (
       <EuiTabs size="s" display="condensed">
         {tabs.map((tab, index) => {
-          const { displayName, code, name, props, snippets, ...rest } = tab;
+          const {
+            displayName,
+            code,
+            type,
+            name,
+            props,
+            snippets,
+            ...rest
+          } = tab;
 
           return (
             <EuiTab
@@ -96,7 +104,10 @@ export const GuideSectionExampleTabs: FunctionComponent<GuideSectionExampleTabsP
       return (
         <EuiErrorBoundary>
           <EuiHorizontalRule margin="none" />
-          <GuideSectionExampleCode code={selectedTab.code} />
+          <GuideSectionExampleCode
+            code={selectedTab.code}
+            type={selectedTab.type}
+          />
         </EuiErrorBoundary>
       );
       // PROPS TABLE

src-docs/src/components/guide_section/guide_section_types.js renamed to src-docs/src/components/guide_section/guide_section_types.tsx

@@ -1,4 +1,5 @@
 export const GuideSectionTypes = {
   JS: 'JS',
+  TSX: 'TSX',
   HTML: 'HTML',
 };

src-docs/src/views/tabs/tabs_example.js

@@ -182,7 +182,7 @@ export const TabsExample = {
       title: 'Controlled tabbed content',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: controlledSource,
         },
       ],