From 4ba6eaf1f751469850741736b388615614a72e2a Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Wed, 10 Jul 2019 17:13:13 -0300
Subject: [PATCH] fix: some typescript adjustments

---
 .../machine/services/create-resources.ts      |  7 ++++++-
 core/docz-core/templates/gatsby-config.tpl.js | 20 +++++++++----------
 .../lib/onCreateWebpackConfig.js              |  8 ++++++++
 examples/typescript/src/components/Alert.tsx  |  4 ++--
 examples/typescript/src/components/Button.tsx |  2 +-
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/core/docz-core/src/bundler/machine/services/create-resources.ts b/core/docz-core/src/bundler/machine/services/create-resources.ts
index 6fa076e0b..276d3918e 100644
--- a/core/docz-core/src/bundler/machine/services/create-resources.ts
+++ b/core/docz-core/src/bundler/machine/services/create-resources.ts
@@ -110,10 +110,15 @@ export const writeNotFound = async () => {
 const writeGatsbyConfig = async ({ args, isDoczRepo }: ServerMachineCtx) => {
   const outputPath = path.join(paths.docz, 'gatsby-config.js')
   const config = omit(['plugins'], args)
-  const newConfig = JSON.stringify({ ...config, root: paths.docz })
+  const newConfig = {
+    ...config,
+    root: paths.docz,
+  }
+
   await outputFileFromTemplate('gatsby-config.tpl.js', outputPath, {
     isDoczRepo,
     config: newConfig,
+    opts: JSON.stringify(newConfig),
   })
 }
 
diff --git a/core/docz-core/templates/gatsby-config.tpl.js b/core/docz-core/templates/gatsby-config.tpl.js
index d0cb7d57f..2fca71686 100644
--- a/core/docz-core/templates/gatsby-config.tpl.js
+++ b/core/docz-core/templates/gatsby-config.tpl.js
@@ -15,9 +15,16 @@ const config = {
   plugins: [
     {
       resolve: 'gatsby-theme-docz',
-      options: <%- config %>
-    },
-    <% if (isDoczRepo) {%>{
+      options: <%- opts %>
+    },<% if (config.typescript) {%>
+    {
+      resolve: 'gatsby-plugin-typescript',
+      options: {
+        isTSX: true,
+        allExtensions: true
+      }
+    },<%}%><% if (isDoczRepo) {%>
+    {
       resolve: 'gatsby-plugin-eslint',
       options: {
         test: /\.js$|\.jsx$/,
@@ -35,13 +42,6 @@ const config = {
         modules: ['docz', 'gatsby-theme-docz'],
       },
     },<%}%>
-    <% if (config.typescript) {%>{
-      resolve: 'gatsby-plugin-typescript',
-      options: {
-        isTSX: true,
-        allExtensions: true
-      }
-    }<%}%>
   ],
 }
 
diff --git a/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js b/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js
index 8b35fd1b7..c35005b2e 100644
--- a/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js
+++ b/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js
@@ -12,6 +12,14 @@ module.exports = async (params, opts) => {
   const run = Plugin.runPluginsMethod(args.plugins)
   const config = getConfig()
 
+  if (args.typescript) {
+    actions.setWebpackConfig({
+      resolve: {
+        extensions: config.resolve.extensions.concat(['.ts', '.tsx']),
+      },
+    })
+  }
+
   if (hasParentNodeModules && stage === 'develop') {
     actions.setWebpackConfig({
       resolve: {
diff --git a/examples/typescript/src/components/Alert.tsx b/examples/typescript/src/components/Alert.tsx
index f7020febf..9b70d94d9 100644
--- a/examples/typescript/src/components/Alert.tsx
+++ b/examples/typescript/src/components/Alert.tsx
@@ -19,12 +19,12 @@ export interface AlertProps {
   kind: 'info' | 'positive' | 'negative' | 'warning'
 }
 
-const AlertStyled = styled('div')`
+const AlertStyled = styled('div')<AlertProps>`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
   color: white;
-  background: ${({ kind = 'info' }: AlertProps) => kinds[kind]};
+  background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
 export const Alert: SFC<AlertProps> = ({ kind, ...props }) => (
diff --git a/examples/typescript/src/components/Button.tsx b/examples/typescript/src/components/Button.tsx
index 799a57094..96e689bb5 100644
--- a/examples/typescript/src/components/Button.tsx
+++ b/examples/typescript/src/components/Button.tsx
@@ -58,7 +58,7 @@ const getScale = ({ scale = 'normal' }: ButtonProps) => scales[scale]
 const getKind = ({ kind = 'primary', outline = false }: ButtonProps) =>
   kinds(outline)[kind]
 
-const ButtonStyled = styled('button')`
+const ButtonStyled = styled('button')<ButtonProps>`
   ${getKind};
   ${getScale};
   cursor: pointer;