[EuiEmptyPrompt] Add more guidelines

package.json

@@ -75,6 +75,7 @@
     "prop-types": "^15.6.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dropzone": "^11.5.3",
+    "react-element-to-jsx-string": "^14.3.4",
     "react-focus-on": "^3.5.4",
     "react-input-autosize": "^3.0.0",
     "react-is": "^17.0.2",

scripts/babel/proptypes-from-ts-props/index.js

@@ -1035,6 +1035,8 @@ function getPropTypesForNode(node, optional, state) {
   return propType;
 }
 
+const typescriptExtensions = new Set(['', '.ts', '.tsx']);
+
 // typeDefinitionExtractors is a mapping of [ast_node_type: func] which is used to find type definitions
 // these definitions come from four sources:
 //   - import statements
@@ -1054,9 +1056,11 @@ const typeDefinitionExtractors = {
     const { fs, sourceFilename, parse, state } = extractionOptions;
     const importPath = node.source.value;
     const isPathRelative = /^\.{1,2}\//.test(importPath);
+    const pathExtension = path.extname(importPath);
+    const isImportTypecript = typescriptExtensions.has(pathExtension);
 
     // only process relative imports for typescript definitions (avoid node_modules)
-    if (isPathRelative) {
+    if (isPathRelative && isImportTypecript) {
       // find the variable names being imported
       const importedTypeNames = node.specifiers.map(specifier => {
         switch (specifier.type) {

scripts/babel/proptypes-from-ts-props/index.test.ts

@@ -2514,6 +2514,35 @@ let something: any;
 
         expect(result.code).toBe('let something;');
       });
+
+      it('skips non-typescript imports', () => {
+        const result = transform(
+          `
+import something from './somewhere.txt';
+`,
+          {
+            ...babelOptions,
+            plugins: [
+              [
+                './scripts/babel/proptypes-from-ts-props',
+                {
+                  fs: {
+                    existsSync: () => true,
+                    statSync: () => ({ isDirectory: () => false }),
+                    readFileSync: () => {
+                      return Buffer.from(`
+                        this is not valid javascript
+                      `);
+                    },
+                  },
+                },
+              ],
+            ],
+          }
+        );
+
+        expect(result.code).toBe("export {};"); // code is empty as some plugin
+      });
     });
   });
 });

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

@@ -48,6 +48,10 @@ export const GuideSectionCodeTypesMap = {
     name: 'demoTSX',
     displayName: 'Demo TS',
   },
+  STRING_JS: {
+    name: 'demoJS',
+    displayName: 'Demo JS',
+  },
   SNIPPET: {
     name: 'snippet',
     displayName: 'Snippet',

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

@@ -50,7 +50,11 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
   return (
     <>
       <EuiCodeBlock
-        language={type === GuideSectionTypes.JS ? 'jsx' : type.toLowerCase()}
+        language={
+          type === GuideSectionTypes.JS || type === GuideSectionTypes.STRING_JS
+            ? 'jsx'
+            : type.toLowerCase()
+        }
         overflowHeight={400}
         isCopyable
       >

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

@@ -3,4 +3,5 @@ export const GuideSectionTypes = {
   TSX: 'TSX',
   SNIPPET: 'SNIPPET',
   SASS: 'SASS',
+  STRING_JS: 'STRING_JS',
 };