declare jsx module to remove warnings

package.json

@@ -65,13 +65,14 @@
     "@drawbotics/s3sync": "^0.1.1",
     "@emotion/core": "^10.0.21",
     "@hot-loader/react-dom": "^16.8.6",
-    "@mdx-js/loader": "^1.0.0-rc.4",
-    "@mdx-js/react": "^1.0.0-rc.5",
+    "@mdx-js/loader": "^1.6.21",
+    "@mdx-js/react": "^1.6.21",
     "@types/animejs": "^3.1.0",
     "@types/lodash": "^4.14.149",
     "@types/mapbox-gl": "^1.8.1",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
+    "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.2",
     "@types/uuid": "^7.0.0",
     "@typescript-eslint/eslint-plugin": "^2.22.0",

packages/styleguide/app/app.js → packages/styleguide/app/app.tsx

@@ -2,15 +2,16 @@ import '@drawbotics/vanilla-drylus/dist/drylus.css';
 
 import { DrylusProvider, Layout, Page, Position } from '@drawbotics/react-drylus';
 import { useScreenSize } from '@drawbotics/use-screen-size';
+// @ts-ignore
 import drylus from '@drawbotics/vanilla-drylus/dist/drylus.js';
 import { css } from 'emotion';
 import React from 'react';
 import { hot } from 'react-hot-loader';
 import { BrowserRouter } from 'react-router-dom';
 
-import MobileSidebar from './components/MobileSidebar';
-import Sidebar from './components/Sidebar';
-import Root from './routes/Root';
+import MobileSidebar from './components/MobileSidebar.jsx';
+import Sidebar from './components/Sidebar.jsx';
+import { Root } from './routes/Root';
 
 window._drylus = drylus;
 
@@ -24,7 +25,6 @@ const styles = {
 
 const App = () => {
   const { screenSize, ScreenSizes } = useScreenSize();
-  console.log('App running');
   return (
     <div className={styles.app}>
       <BrowserRouter basename="drylus">
@@ -44,7 +44,7 @@ const App = () => {
               <div
                 style={{
                   height: '100%',
-                  width: screenSize <= ScreenSizes.L ? '100vw' : null,
+                  width: screenSize <= ScreenSizes.L ? '100vw' : undefined,
                 }}>
                 <Root />
               </div>

packages/styleguide/app/routes/Root.jsx → packages/styleguide/app/routes/Root.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import CodingGuidelines from './CodingGuidelines';
-import ComponentKit from './ComponentKit';
-import DesignGuidelines from './DesignGuidelines';
-import Intro from './Intro';
+import CodingGuidelines from './CodingGuidelines.jsx';
+import ComponentKit from './ComponentKit.jsx';
+import DesignGuidelines from './DesignGuidelines.jsx';
+import Intro from './Intro.jsx';
 
-const Root = () => {
+export const Root = () => {
   return (
     <Switch>
       <Route path="/component-kit" component={ComponentKit} />
@@ -16,5 +16,3 @@ const Root = () => {
     </Switch>
   );
 };
-
-export default Root;

packages/styleguide/app/types/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    _drylus: any;
+  }
+}
+
+export {};

packages/styleguide/app/types/jsx.d.ts

@@ -0,0 +1 @@
+declare module '*.jsx';

packages/styleguide/app/types/mdx.d.ts

@@ -0,0 +1,37 @@
+declare module '@mdx-js/react' {
+  import * as React from 'react';
+  type ComponentType =
+    | 'a'
+    | 'blockquote'
+    | 'code'
+    | 'delete'
+    | 'em'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'hr'
+    | 'img'
+    | 'inlineCode'
+    | 'li'
+    | 'ol'
+    | 'p'
+    | 'pre'
+    | 'strong'
+    | 'sup'
+    | 'table'
+    | 'td'
+    | 'thematicBreak'
+    | 'tr'
+    | 'ul';
+  export type Components = {
+    [key in ComponentType]?: React.ComponentType<any>;
+  };
+  export interface MDXProviderProps {
+    children: React.ReactNode;
+    components: Components;
+  }
+  export class MDXProvider extends React.Component<MDXProviderProps> {}
+}

packages/styleguide/app/types/use-screen-size.d.ts

@@ -0,0 +1 @@
+declare module '@drawbotics/use-screen-size';