add typescript export code ref to #129 (#138)

* add typescript export code ref to #129

* add .tsx

Author: PierreCrb

package.json

@@ -32,7 +32,7 @@
     "react-dnd-html5-backend": "^10.0.2",
     "react-dom": "^16.12.0",
     "react-hotkeys-hook": "^2.4.0",
-    "react-icons": "^3.9.0",
+    "react-icons": "^4.4.0",
     "react-redux": "^7.1.3",
     "react-scripts": "3.3.0",
     "react-split-pane": "^0.1.89",

src/components/Header.tsx

@@ -24,46 +24,91 @@ import {
 import { ExternalLinkIcon, SmallCloseIcon, CheckIcon } from '@chakra-ui/icons'
 import { DiGithubBadge } from 'react-icons/di'
 import { AiFillThunderbolt } from 'react-icons/ai'
+import { SiTypescript } from 'react-icons/si'
 import { buildParameters } from '~utils/codesandbox'
 import { generateCode } from '~utils/code'
 import useDispatch from '~hooks/useDispatch'
 import { useSelector } from 'react-redux'
 import { getComponents } from '~core/selectors/components'
 import { getShowLayout, getShowCode } from '~core/selectors/app'
 import HeaderMenu from '~components/headerMenu/HeaderMenu'
+import { FaReact } from 'react-icons/fa'
 
 const CodeSandboxButton = () => {
   const components = useSelector(getComponents)
   const [isLoading, setIsLoading] = useState(false)
 
+  const exportToCodeSandbox = async (isTypeScript: boolean) => {
+    setIsLoading(true)
+    const code = await generateCode(components)
+    setIsLoading(false)
+    const parameters = buildParameters(code, isTypeScript)
+
+    window.open(
+      `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`,
+      '_blank',
+    )
+  }
+
   return (
-    <Tooltip
-      zIndex={100}
-      hasArrow
-      bg="yellow.100"
-      aria-label="Builder mode help"
-      label="Export in CodeSandbox"
-    >
-      <Button
-        onClick={async () => {
-          setIsLoading(true)
-          const code = await generateCode(components)
-          setIsLoading(false)
-          const parameters = buildParameters(code)
+    <Popover>
+      {({ onClose }) => (
+        <>
+          <PopoverTrigger>
+            <Button
+              isLoading={isLoading}
+              rightIcon={<ExternalLinkIcon path="" />}
+              variant="ghost"
+              size="xs"
+            >
+              Export code
+            </Button>
+          </PopoverTrigger>
 
-          window.open(
-            `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`,
-            '_blank',
-          )
-        }}
-        isLoading={isLoading}
-        rightIcon={<ExternalLinkIcon path="" />}
-        variant="ghost"
-        size="xs"
-      >
-        Export code
-      </Button>
-    </Tooltip>
+          <LightMode>
+            <PopoverContent zIndex={100} bg="white">
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverHeader>Export format</PopoverHeader>
+              <PopoverBody fontSize="sm">
+                Export the code in CodeSandbox in which format ?
+              </PopoverBody>
+              <PopoverFooter display="flex" justifyContent="flex-end">
+                <Button
+                  size="sm"
+                  mr={2}
+                  variant="ghost"
+                  colorScheme="orange"
+                  rightIcon={<FaReact />}
+                  onClick={async () => {
+                    await exportToCodeSandbox(false)
+                    if (onClose) {
+                      onClose()
+                    }
+                  }}
+                >
+                  JSX
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  colorScheme="blue"
+                  rightIcon={<SiTypescript />}
+                  onClick={async () => {
+                    await exportToCodeSandbox(true)
+                    if (onClose) {
+                      onClose()
+                    }
+                  }}
+                >
+                  TSX
+                </Button>
+              </PopoverFooter>
+            </PopoverContent>
+          </LightMode>
+        </>
+      )}
+    </Popover>
   )
 }
 

src/utils/codesandbox.ts

@@ -1,6 +1,9 @@
 import { getParameters } from 'codesandbox/lib/api/define'
 
-export const buildParameters = (code: string): string => {
+export const buildParameters = (
+  code: string,
+  isTypeScript: boolean,
+): string => {
   return getParameters({
     files: {
       'public/index.html': {
@@ -26,7 +29,7 @@ export const buildParameters = (code: string): string => {
 </html>`,
         isBinary: false,
       },
-      'index.js': {
+      [isTypeScript ? 'index.tsx' : 'index.js']: {
         content: `import React from "react";
 import ReactDOM from "react-dom";
 
@@ -37,7 +40,7 @@ ReactDOM.render(<App />, rootElement);
 `,
         isBinary: false,
       },
-      'App.js': {
+      [isTypeScript ? 'App.tsx' : 'App.jsx']: {
         content: code,
         isBinary: false,
       },
@@ -47,7 +50,7 @@ ReactDOM.render(<App />, rootElement);
   "version": "1.0.0",
   "description": "",
   "keywords": [],
-  "main": "src/index.js",
+  "main": "src/${isTypeScript ? 'index.tsx' : 'index.js'}",
   "dependencies": {
     "@chakra-ui/react": "^1.5.0",
     "@chakra-ui/icons": "^1.0.9",

yarn.lock

@@ -12952,12 +12952,10 @@ react-hotkeys-hook@^2.4.0:
   dependencies:
     hotkeys-js "3.8.1"
 
-react-icons@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.9.0.tgz#89a00f20a0e02e6bfd899977eaf46eb4624239d5"
-  integrity sha512-gKbYKR+4QsD3PmIHLAM9TDDpnaTsr3XZeK1NTAb6WQQ+gxEdJ0xuCgLq0pxXdS7Utg2AIpcVhM1ut/jlDhcyNg==
-  dependencies:
-    camelcase "^5.0.0"
+react-icons@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
 
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"