fix docz production build

docs/assets/css/style.css

@@ -1,18 +0,0 @@
-html, body {
-  font-family: 'Open Sans', sans-serif;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-
-:global(.leaflet-control-geosearch.bar) {
-  position: absolute !important;
-  left: 50px;
-  right: 515px;
-}

docs/components/Leaflet.module.css

@@ -1,9 +1,4 @@
-.root {
+.map {
   width: 100%;
   height: 300px;
 }
-
-.map {
-  width: 100%;
-  height: 100%;
-}

docs/components/Leaflet.tsx

@@ -1,11 +1,12 @@
 import React, { ReactElement, useRef, useEffect } from 'react';
 import 'leaflet/dist/leaflet.css';
 import { Map, TileLayer } from 'react-leaflet';
-import styles from './Leaflet.module.css';
+
 import '../../assets/css/leaflet.css';
 import useConfigureLeaflet from '../hooks/useConfigureLeaflet';
 import * as providers from '../../src/providers';
 import GeoSearchControl from '../../src/leafletControl';
+import styles from './Leaflet.module.css';
 
 import { MapProps } from './Map';
 
@@ -55,9 +56,11 @@ function Leaflet(props: MapProps): ReactElement {
     };
   }, [ref.current, control.current, provider]);
 
+  // I'm not sure what's causing it, but the className from the outer
+  // div is being removed. Hence the useless wrapper
   return (
-    <div className={styles.root}>
+    <div>
-      <Map ref={ref} viewport={viewport} className={styles.map}>
+      <Map ref={ref} viewport={viewport} id="map" className={styles.map}>
         <TileLayer url="//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       </Map>
     </div>

docs/components/Map.tsx

@@ -1,20 +1,17 @@
-import React, { ReactElement, lazy, Suspense } from 'react';
+import React, { ReactElement } from 'react';
-import 'leaflet/dist/leaflet.css';
+import Leaflet from './Leaflet';
-
-const Leaflet = lazy(() => import('./Leaflet'));
-const Loader = () => <div>loading...</div>;
 
 export interface MapProps {
-  provider: 'OpenStreetMap' | 'Google' | 'Bing';
+  provider?: 'OpenStreetMap' | 'Google' | 'Bing';
   providerOptions: any;
 }
 
 function Map(props: MapProps): ReactElement {
-  return (
+  if (typeof window === 'undefined') {
-    <Suspense fallback={<Loader />}>
+    return <div>loading...</div>;
-      <Leaflet provider={props.provider} />
+  }
-    </Suspense>
+
-  );
+  return <Leaflet provider={props.provider} />;
 }
 
 export default Map;

docs/hooks/useConfigureLeaflet.ts

@@ -1,6 +1,4 @@
 import L from 'leaflet';
-
-import isDomAvailable from '../lib/isDomAvailable';
 import { Viewport } from 'react-leaflet';
 
 const viewport: Viewport = {
@@ -13,7 +11,7 @@ export interface LeafletConfig {
 }
 
 const useConfigureLeaflet = (): LeafletConfig => {
-  if (!isDomAvailable()) return;
+  if (!window) return;
 
   // To get around an issue with the default icon not being set up right between using React
   // and importing the leaflet library, we need to reset the image imports

docs/introduction.mdx

@@ -22,7 +22,7 @@ Although this project is named `leaflet-geosearch`, this library is also usable
 ## Installation
 
 ```bash
-npm install --save leaflet-geosearch
+npm install leaflet-geosearch
 ```
 
 ## Providers

doczrc.js

@@ -6,7 +6,7 @@ export default {
   },
   src: 'docs',
   dest: '.docz/dist',
-  public: 'assets',
+  public: 'docs/assets',
   ignore: ['CODE_OF_CONDUCT.md', 'CONTRIBUTING.md', 'LICENSE.md'],
   menu: [
     { name: 'Introduction' },

gatsby-browser.js

@@ -1 +1 @@
-import './static/assets/css/docs.css';
+import './static/docs/assets/css/global.css';

gatsby-config.js

@@ -1,3 +1,14 @@
 require('dotenv').config({
   path: '.env',
 });
+
+module.exports = {
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-react-leaflet',
+      options: {
+        linkStyles: true,
+      },
+    },
+  ],
+};

gatsby-node.js

@@ -1,16 +0,0 @@
-exports.onCreateWebpackConfig = ({ stage, rules, loaders, actions }) => {
-  switch (stage) {
-    case 'build-html':
-      actions.setWebpackConfig({
-        module: {
-          rules: [
-            {
-              test: /react-leaflet|leaflet/,
-              use: [loaders.null()],
-            },
-          ],
-        },
-      });
-      break;
-  }
-};

jest.config.js

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const tsConfig = require('./tsconfig.json');
+
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
@@ -12,4 +15,13 @@ module.exports = {
   },
   automock: false,
   setupFiles: ['./jest.setup.js'],
+  globals: {
+    'ts-jest': {
+      tsConfig: {
+        ...tsConfig.compilerOptions,
+        noEmit: false,
+        outDir: '.tsCache',
+      },
+    },
+  },
 };

package.json

@@ -24,9 +24,6 @@
   "directories": {
     "example": "example"
   },
-  "resolutions": {
-    "docz/**/webpack": "4.28.4"
-  },
   "keywords": [
     "geolocation",
     "geocoding",

tsconfig.json

@@ -1,17 +1,18 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "module": "commonjs",
+    "target":"es2015",
-    "noImplicitAny": true,
+    "module": "CommonJS",
-    "removeComments": true,
+    "moduleResolution": "node",
-    "preserveConstEnums": true,
+    "resolveJsonModule": true,
-    "outFile": "./dist/tsc.js",
-    "sourceMap": true,
-    "allowJs": true,
     "esModuleInterop": true,
-    "noUnusedLocals": true,
+    "noEmit": true,
-    "jsx": "preserve",
+    "jsx": "react",
-    "target": "ES5",
+    "inlineSourceMap": true,
-    "outDir": ".tsout"
+    "allowJs": true,
+    "pretty": true,
+    "strict": true,
+    "skipLibCheck": false
   },
   "include": [
     "src/**/*",