fix storybook

.storybook/config.js

@@ -3,10 +3,21 @@ import { configure, addDecorator } from '@storybook/react';
 
 import { ThemeProvider } from '../src/config/theme';
 
-import '../src/config/global.css';
 import './storybook.css';
 
 addDecorator(story => <ThemeProvider>{story()}</ThemeProvider>);
 
-// automatically import all files ending in *.stories.js
-configure(require.context('../src', true, /\.stories\.js$/), module);
+// Gatsby's Link overrides:
+// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
+global.___loader = {
+  enqueue: () => {},
+  hovering: () => {},
+};
+// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
+global.__PATH_PREFIX__ = '';
+// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
+window.___navigate = pathname => {
+  action('NavigateTo:')(pathname);
+};
+
+configure(require.context('../src', true, /\.stories\.tsx$/), module);

.storybook/webpack.config.js

@@ -0,0 +1,21 @@
+module.exports = ({ config }) => {
+  config.resolve.mainFields = ['browser', 'module', 'main'];
+
+  config.module.rules.push({
+    test: /\.(ts|tsx|js)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+      plugins: [
+        require.resolve('@babel/plugin-proposal-class-properties'),
+        // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
+        require.resolve('babel-plugin-remove-graphql-queries'),
+      ],
+    },
+    exclude: [/node_modules/],
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx');
+
+  return config;
+};

package.json

@@ -46,13 +46,22 @@
     "styled-components": "^4.4.0",
     "styled-icons": "^8.4.2",
     "styled-media-query": "^2.1.2",
-    "typescript": "3.7.1-rc"
+    "typescript": "3.7.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@storybook/addon-actions": "^5.2.6",
+    "@storybook/addon-links": "^5.2.6",
+    "@storybook/addon-viewport": "^5.2.6",
+    "@storybook/react": "^5.2.6",
     "@types/ramda": "^0.26.33",
     "@types/react-helmet": "^5.0.14",
     "@types/styled-components": "^4.1.20",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-remove-graphql-queries": "^2.7.14",
     "babel-preset-gatsby": "^0.2.17",
     "gatsby-remark-copy-linked-files": "^2.1.21",
     "gatsby-remark-images": "^3.1.23",
@@ -61,6 +70,7 @@
     "gatsby-remark-smartypants": "^2.1.9",
     "gatsby-transformer-remark": "^2.6.24",
     "prettier": "^1.18.2",
-    "prismjs": "^1.17.1"
+    "prismjs": "^1.17.1",
+    "react-docgen-typescript-loader": "^3.3.0"
   }
 }

src/components/HasTranslationBox/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'gatsby';
+import Link from 'gatsby-link';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 

src/components/MenuBar/MenuBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'gatsby';
+import Link from 'gatsby-link';
 import styled, { css } from 'styled-components';
 import mediaQuery from 'styled-media-query';
 import i18next from 'i18next';

src/components/PostCard/PostCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'gatsby';
+import Link from 'gatsby-link';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 

src/config/theme.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import { createContext, useState } from 'react';
-import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import {
+  ThemeProvider as StyledThemeProvider,
+  DefaultTheme,
+} from 'styled-components';
+
+type ThemeProps = {
+  children: React.ReactNode;
+};
 
 export const ThemeContext = createContext({});
 
-export const ThemeProvider = ({ children }) => {
+export const ThemeProvider = ({ children }: ThemeProps) => {
   const [isLightTheme, setIsLightTheme] = useState(true);
   const themesAvaiable = {
     dark: 'dark',
@@ -20,13 +27,14 @@ export const ThemeProvider = ({ children }) => {
     if (document) {
       const $html = document.querySelector('html');
 
+      // @ts-ignore
       $html.setAttribute('data-theme', nextTheme);
 
       setIsLightTheme(!isLightTheme);
     }
   };
 
-  const theme: Theme = {
+  const theme: DefaultTheme = {
     /* TODO: Return the whole font includding fallbacksk */
     font: {
       contentSans: 'medium-content-sans-serif-font',
@@ -46,7 +54,7 @@ export const ThemeProvider = ({ children }) => {
   };
 
   return (
-    <StyledThemeProvider theme={theme} lol>
+    <StyledThemeProvider theme={theme}>
       <ThemeContext.Provider
         value={{
           toggleTheme,

tsconfig.json

@@ -1,58 +1,19 @@
 {
   "compilerOptions": {
-    /* Basic Options */
-    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    // "lib": [],                             /* Specify library files to be included in the compilation. */
-    "allowJs": true, /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    // "outDir": "./",                        /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "composite": true,                     /* Enable project compilation */
-    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-    /* Strict Type-Checking Options */
-    "strict": true, /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-    /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
-    /* Source Map Options */
-    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-  }
+    "allowUnreachableCode": true,
+    "target": "es5",
+    "module": "commonjs",
+    "allowJs": true,
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+  },
+  "files": [
+    "src/**/*"
+  ],
+  "exclude": [
+    ".cache/**/*",
+    "node_modules/**/*",
+    "public/**/*"
+  ]
 }