From f70a0ba0e6af079cc92c059f4544e08459dc1d6a Mon Sep 17 00:00:00 2001
From: Maxime Gendron <maxime.gendron07@gmail.com>
Date: Wed, 15 Apr 2020 10:59:21 -0400
Subject: [PATCH] Refactor stories to enable show code feature

---
 .../storybook/.storybook/webpack.config.js    | 13 +++----
 .../stories/buttons/add-button.stories.tsx    | 39 ++++++++-----------
 .../stories/buttons/buttons.stories.tsx       | 39 ++++++++-----------
 .../stories/buttons/icon-button.stories.tsx   | 14 +++----
 packages/storybook/stories/card.stories.tsx   |  2 +-
 .../stories/theme-wrapper.stories.tsx         | 14 +++----
 packages/storybook/tsconfig.json              |  1 -
 7 files changed, 52 insertions(+), 70 deletions(-)

diff --git a/packages/storybook/.storybook/webpack.config.js b/packages/storybook/.storybook/webpack.config.js
index 6ba13d8cb..a7c8fad07 100644
--- a/packages/storybook/.storybook/webpack.config.js
+++ b/packages/storybook/.storybook/webpack.config.js
@@ -24,20 +24,17 @@ module.exports = {
             },
             {
                 test: /\.stories.tsx?$/,
-                use: [
-                    {
-                      loader: require.resolve('@storybook/source-loader'),
-                    }
-                  ],
-                  enforce: 'pre',
-                  include: path.resolve(__dirname, '../stories')
+                use: [{ loader: '@storybook/source-loader' }],
+                enforce: 'pre',
+                include: path.resolve(__dirname, '../stories')
             },
             {
                 test: /\.tsx?$/,
                 use: [{
                     loader: 'ts-loader',
                     options: {
-                        transpileOnly: true,
+                        transpileOnly: false,
+                        ignoreDiagnostics: [7005]
                     }
                 }],
             },
diff --git a/packages/storybook/stories/buttons/add-button.stories.tsx b/packages/storybook/stories/buttons/add-button.stories.tsx
index dad705e72..87d40d498 100644
--- a/packages/storybook/stories/buttons/add-button.stories.tsx
+++ b/packages/storybook/stories/buttons/add-button.stories.tsx
@@ -1,8 +1,5 @@
-import React from 'react';
-
 import { AddButton } from '@equisoft/design-elements-react';
-
-type ButtonType = 'primary' | 'secondary' | 'tertiary';
+import React from 'react';
 
 export default {
     title: 'Buttons/Add',
@@ -10,50 +7,48 @@ export default {
 };
 
 export const addButtons = () => (
-    <div>
+    <>
         <AddButton
             label="Primary"
-            buttonType={'primary' as ButtonType}
+            buttonType="primary"
             disabled={false}
         />
         <AddButton
             label="Secondary"
-            buttonType={'secondary' as ButtonType}
+            buttonType="secondary"
             disabled={false}
         />
         <AddButton
             label="Tertiary"
-            buttonType={'tertiary' as ButtonType}
+            buttonType="tertiary"
             disabled={false}
         />
-    </div>
+    </>
 );
 export const disabled = () => (
-    <div>
+    <>
         <AddButton
             label="Primary"
-            buttonType={'primary' as ButtonType}
+            buttonType="primary"
             disabled={true}
         />
         <AddButton
             label="Secondary"
-            buttonType={'secondary' as ButtonType}
+            buttonType="secondary"
             disabled={true}
         />
         <AddButton
             label="Tertiary"
-            buttonType={'tertiary' as ButtonType}
+            buttonType="tertiary"
             disabled={true}
         />
-    </div>
+    </>
 );
 export const eventCallback = () => (
-    <div>
-        <AddButton
-            label="See Console For Callback"
-            buttonType={'primary' as ButtonType}
-            onClick={() => { console.log('The button has been clicked!'); }}
-            disabled={false}
-        />
-    </div>
+    <AddButton
+        label="See Console For Callback"
+        buttonType="primary"
+        onClick={() => { console.log('The button has been clicked!'); }}
+        disabled={false}
+    />
 );
diff --git a/packages/storybook/stories/buttons/buttons.stories.tsx b/packages/storybook/stories/buttons/buttons.stories.tsx
index 2b1913e20..7f4254740 100644
--- a/packages/storybook/stories/buttons/buttons.stories.tsx
+++ b/packages/storybook/stories/buttons/buttons.stories.tsx
@@ -1,8 +1,5 @@
-import React from 'react';
-
 import { Button } from '@equisoft/design-elements-react';
-
-type ButtonType = 'primary' | 'secondary' | 'tertiary';
+import React from 'react';
 
 export default {
     title: 'Buttons',
@@ -10,26 +7,24 @@ export default {
 };
 
 export const buttons = () => (
-    <div>
-        <Button label="Primary" buttonType={'primary' as ButtonType} disabled={false} />
-        <Button label="Secondary" buttonType={'secondary' as ButtonType} disabled={false} />
-        <Button label="Tertiary" buttonType={'tertiary' as ButtonType} disabled={false} />
-    </div>
+    <>
+        <Button label="Primary" buttonType="primary" disabled={false} />
+        <Button label="Secondary" buttonType="secondary" disabled={false} />
+        <Button label="Tertiary" buttonType="tertiary" disabled={false} />
+    </>
 );
 export const disabled = () => (
-    <div>
-        <Button label="Primary" buttonType={'primary' as ButtonType} disabled={true} />
-        <Button label="Secondary" buttonType={'secondary' as ButtonType} disabled={true} />
-        <Button label="Tertiary" buttonType={'tertiary' as ButtonType} disabled={true} />
-    </div>
+    <>
+        <Button label="Primary" buttonType="primary" disabled={true} />
+        <Button label="Secondary" buttonType="secondary" disabled={true} />
+        <Button label="Tertiary" buttonType="tertiary" disabled={true} />
+    </>
 );
 export const eventCallback = () => (
-    <div>
-        <Button
-            label="See Console For Callback"
-            onClick={() => { console.log('The button has been clicked!'); }}
-            buttonType={'primary' as ButtonType}
-            disabled={false}
-        />
-    </div>
+    <Button
+        label="See Console For Callback"
+        onClick={() => { console.log('The button has been clicked!'); }}
+        buttonType="primary"
+        disabled={false}
+    />
 );
diff --git a/packages/storybook/stories/buttons/icon-button.stories.tsx b/packages/storybook/stories/buttons/icon-button.stories.tsx
index 5addb41ed..53d763d78 100644
--- a/packages/storybook/stories/buttons/icon-button.stories.tsx
+++ b/packages/storybook/stories/buttons/icon-button.stories.tsx
@@ -21,12 +21,10 @@ export const disabled = () => (
     </>
 );
 export const eventCallback = () => (
-    <>
-        <IconButton
-            label="home"
-            iconName="home"
-            onClick={() => { console.log('The button has been clicked!'); }}
-            buttonType={'primary'}
-        />
-    </>
+    <IconButton
+        label="home"
+        iconName="home"
+        onClick={() => { console.log('The button has been clicked!'); }}
+        buttonType={'primary'}
+    />
 );
diff --git a/packages/storybook/stories/card.stories.tsx b/packages/storybook/stories/card.stories.tsx
index 4d6a535fb..a4a8cc8e4 100644
--- a/packages/storybook/stories/card.stories.tsx
+++ b/packages/storybook/stories/card.stories.tsx
@@ -8,4 +8,4 @@ export default {
 
 export const normal = () => (
     <Card>Hello, World!</Card>
-  );
+);
diff --git a/packages/storybook/stories/theme-wrapper.stories.tsx b/packages/storybook/stories/theme-wrapper.stories.tsx
index 6508524dd..781f55493 100644
--- a/packages/storybook/stories/theme-wrapper.stories.tsx
+++ b/packages/storybook/stories/theme-wrapper.stories.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 
 import { Button, testTheme, ThemeWrapper } from '@equisoft/design-elements-react';
 
-type ButtonType = 'primary' | 'secondary' | 'tertiary';
-
 export default {
     title: 'Theme Wrapper',
     component: ThemeWrapper,
@@ -14,16 +12,16 @@ export const normal = () => (
         <ThemeWrapper theme={testTheme}>
             <div>
                 <h3 style={{ marginTop: '0' }} >With wrapper (test theme)</h3>
-                <Button label="Primary" buttonType={'primary' as ButtonType} disabled={false} />
-                <Button label="Secondary" buttonType={'secondary' as ButtonType} disabled={false} />
-                <Button label="Tertiary" buttonType={'tertiary' as ButtonType} disabled={false} />
+                <Button label="Primary" buttonType="primary" disabled={false} />
+                <Button label="Secondary" buttonType="secondary" disabled={false} />
+                <Button label="Tertiary" buttonType="tertiary" disabled={false} />
             </div>
         </ThemeWrapper>
         <div>
             <h3>Without wrapper (default Equisoft theme)</h3>
-            <Button label="Primary" buttonType={'primary' as ButtonType} disabled={false} />
-            <Button label="Secondary" buttonType={'secondary' as ButtonType} disabled={false} />
-            <Button label="Tertiary" buttonType={'tertiary' as ButtonType} disabled={false} />
+            <Button label="Primary" buttonType="primary" disabled={false} />
+            <Button label="Secondary" buttonType="secondary" disabled={false} />
+            <Button label="Tertiary" buttonType="tertiary" disabled={false} />
         </div>
     </>
 );
diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
index ff65d73e8..4106a94a8 100644
--- a/packages/storybook/tsconfig.json
+++ b/packages/storybook/tsconfig.json
@@ -6,7 +6,6 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
-    "noEmitOnError": true,
     "sourceMap": true,
     "baseUrl": "./stories/",
     "paths": {