Merge pull request #161 from Drawbotics/feature/typescript-mdx

Feature/typescript mdx

.eslintrc.ts.js

@@ -4,7 +4,7 @@ module.exports = {
   extends: ['eslint:recommended', 'plugin:jest/recommended'],
   parserOptions: {
     sourceType: 'module',
-    project: 'packages/react-drylus/tsconfig.json',
+    project: ['packages/react-drylus/tsconfig.json', 'packages/styleguide/tsconfig.json'],
   },
   env: {
     node: true,

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",
@@ -126,6 +127,8 @@
     "rimraf": "^2.6.2",
     "style-loader": "^0.23.1",
     "ts-jest": "^24.3.0",
+    "ts-loader": "^8.0.11",
+    "tsconfig-paths-webpack-plugin": "^3.3.0",
     "typedoc": "^0.16.11",
     "typescript": "^3.8.3",
     "webfont": "^8.2.1",

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';

packages/styleguide/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "./dist"],
+}

packages/styleguide/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "allowJs": false,
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "ES2018",
+    "sourceMap": false,
+    "outDir": "./dist",
+    "incremental": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "strict": true,
+    "baseUrl": "./",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "resolveJsonModule": true,
+    "paths": {
+      "~/*": ["./app/*"]
+    }
+  },
+  "include": [
+    "./app/**/*.tsx",
+    "./app/**/*.ts"
+  ]
+}

packages/styleguide/webpack.config.js

@@ -1,3 +1,4 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const path = require('path');
 const webpack = require('webpack');
 const { checkEnv } = require('@drawbotics/check-env');
@@ -73,7 +74,7 @@ module.exports = {
   mode: process.env.NODE_ENV,
   devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
   stats: 'none',
-  entry: './app/index.js',
+  entry: './app/index.tsx',
   resolve: {
     modules: [
       path.resolve(__dirname, './app'),
@@ -83,7 +84,8 @@ module.exports = {
       '~': path.resolve(__dirname, './app'),
       'react-dom': '@hot-loader/react-dom',
     },
-    extensions: [ '.js', '.jsx', '.css', '.mdx' ],
+    extensions: [ '.js', '.jsx', '.css', '.mdx', '.ts', '.tsx' ],
+    plugins: [new TsconfigPathsPlugin()],
   },
   output: {
     path: path.resolve(__dirname, './dist'),
@@ -97,6 +99,28 @@ module.exports = {
   plugins: isProduction ? prodPlugins : devPlugins,
   module: {
     rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward',
+            },
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              onlyCompileBundledFiles: true,
+              compilerOptions: {
+                noUnusedLocals: isProduction,
+                noUnusedParameters: isProduction,
+              },
+            },
+          },
+        ],
+      },
       {
         test: /\.jsx?$/,
         use: [{
@@ -123,6 +147,16 @@ module.exports = {
               rootMode: 'upward',
             },
           },
+          // {
+          //   loader: 'ts-loader',
+          //   options: {
+          //     onlyCompileBundledFiles: true,
+          //     compilerOptions: {
+          //       noUnusedLocals: isProduction,
+          //       noUnusedParameters: isProduction,
+          //     },
+          //   },
+          // },
           {
             loader: '@mdx-js/loader',
             options: {