Refactor stories to enable show code feature

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]
                     }
                 }],
             },

packages/storybook/stories/buttons/add-button.stories.tsx

@@ -1,59 +1,54 @@
-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',
     component: AddButton,
 };
 
 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}
+    />
 );

packages/storybook/stories/buttons/buttons.stories.tsx

@@ -1,35 +1,30 @@
-import React from 'react';
-
 import { Button } from '@equisoft/design-elements-react';
-
-type ButtonType = 'primary' | 'secondary' | 'tertiary';
+import React from 'react';
 
 export default {
     title: 'Buttons',
     component: Button,
 };
 
 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}
+    />
 );

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'}
+    />
 );

packages/storybook/stories/card.stories.tsx

@@ -8,4 +8,4 @@ export default {
 
 export const normal = () => (
     <Card>Hello, World!</Card>
-  );
+);

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>
     </>
 );

packages/storybook/tsconfig.json

@@ -6,7 +6,6 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
-    "noEmitOnError": true,
     "sourceMap": true,
     "baseUrl": "./stories/",
     "paths": {