add basic prop documentation

docs/components/typeDefs.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchControlOptions } from '../../dist/SearchControl';
+
+export const SearchControl: React.SFC<SearchControlOptions> = () => <div />;

docs/leaflet-control.mdx

@@ -0,0 +1,35 @@
+---
+name: Leaflet Control
+route: /leaflet-control
+---
+
+import { Props } from 'docz';
+
+import Playground from './components/Playground';
+import Map from './components/Map';
+import { SearchControl } from './components/typeDefs';
+
+# Leaflet Control
+
+Or add the `SearchControl` to the leaflet map instance, to render a search control on your map;
+
+See [Leaflet Control](/leaflet-control) for more info about the the options this control provides.
+
+<Playground>
+    <Map provider="OpenStreetMap" />
+</Playground>
+
+
+```js
+import { SearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
+
+const searchControl = new SearchControl({
+  provider: new OpenStreetMapProvider(),
+});
+
+map.addControl(searchControl);
+```
+
+## Properties
+
+<Props of={SearchControl} />

docs/usage.mdx

@@ -29,6 +29,8 @@ const results = await provider.search({ query: input.value });
 ## Using the leaflet control
 Or add the `GeoSearchControl` to the leaflet map instance, to render a search control on your map;
 
+See [Leaflet Control](/leaflet-control) for more info about the the options this control provides.
+
 <Playground>
     <Map provider="OpenStreetMap" />
 </Playground>

doczrc.js

@@ -12,6 +12,17 @@ export default {
   menu: [
     { name: 'Introduction' },
     { name: 'Usage' },
-    { name: 'Providers', menu: ['Bing', 'Esri', 'Google', 'LocationIQ', 'OpenCage', 'OpenStreetMap'] },
+    { name: 'Leaflet Control' },
+    {
+      name: 'Providers',
+      menu: [
+        'Bing',
+        'Esri',
+        'Google',
+        'LocationIQ',
+        'OpenCage',
+        'OpenStreetMap',
+      ],
+    },
   ],
 };

src/SearchControl.ts

@@ -12,8 +12,9 @@ import {
   ESCAPE_KEY,
 } from './constants';
 import AbstractProvider, { SearchResult } from './providers/provider';
+import { Provider } from './providers';
 
-const defaultOptions: Omit<SearchControlOptions, 'provider'> = {
+const defaultOptions: Omit<SearchControlProps, 'provider'> = {
   position: 'topleft',
   style: 'button',
   showMarker: true,
@@ -65,9 +66,15 @@ const mapHandlers: MapHandler[] = [
 const UNINITIALIZED_ERR =
   'Leaflet must be loaded before instantiating the GeoSearch control';
 
-interface SearchControlOptions {
-  provider: AbstractProvider;
+interface SearchControlProps {
+  /** the provider to use for searching */
+  provider: Provider;
+  /** the leaflet position to render the element in */
   position: ControlPosition;
+  /**
+   * the stye of the search element
+   * @default bar
+   **/
   style: 'button' | 'bar';
 
   marker: MarkerOptions;
@@ -102,8 +109,8 @@ interface SearchControlOptions {
   keepResult: boolean;
 }
 
-export type SearchControlInputOptions = Partial<SearchControlOptions> & {
-  provider: AbstractProvider;
+export type SearchControlOptions = Partial<SearchControlProps> & {
+  provider: Provider;
 };
 
 interface Selection {
@@ -112,20 +119,20 @@ interface Selection {
 }
 
 interface SearchControl {
-  options: Omit<SearchControlOptions, 'provider'> & {
-    provider?: SearchControlOptions['provider'];
+  options: Omit<SearchControlProps, 'provider'> & {
+    provider?: SearchControlProps['provider'];
   };
   markers: FeatureGroup;
   handlersDisabled: boolean;
   searchElement: SearchElement;
   resultList: ResultList;
-  classNames: SearchControlOptions['classNames'];
+  classNames: SearchControlProps['classNames'];
   container: HTMLDivElement;
   input: HTMLInputElement;
   map: Map;
 
   // [key: string]: any;
-  initialize(options: SearchControlOptions): void;
+  initialize(options: SearchControlProps): void;
   onSubmit(result: Selection): void;
   onClick(event: Event): void;
   clearResults(event?: KeyboardEvent | null, force?: boolean): void;
@@ -148,7 +155,7 @@ const Control: SearchControl = {
   handlersDisabled: false,
   classNames: defaultOptions.classNames,
 
-  initialize(options: SearchControlInputOptions) {
+  initialize(options: SearchControlOptions) {
     if (!L) {
       throw new Error(UNINITIALIZED_ERR);
     }

src/gatsby-theme-docz/components/custom.module.css

@@ -0,0 +1,14 @@
+.props > div > div > div > * {
+  font-family: Inconsolata;
+  font-size: 85%;
+}
+
+.props > div > div > div > div:first-child {
+  min-width: 175px;
+  color: var(--theme-ui-colors-props-text,#2D3747);
+}
+
+.props > div > div > div > div:nth-child(2) {
+  opacity: .8;
+}
+

src/gatsby-theme-docz/components/index.js

@@ -0,0 +1,53 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import * as headings from 'gatsby-theme-docz/src/components/Headings';
+import { Link } from 'docz';
+import { Code } from 'gatsby-theme-docz/src/components/Code';
+import { Layout } from 'gatsby-theme-docz/src/components/Layout';
+import { Playground } from 'gatsby-theme-docz/src/components/Playground';
+import { Pre } from 'gatsby-theme-docz/src/components/Pre';
+import { Props as BaseProps } from 'gatsby-theme-docz/src/components/Props';
+import styles from './custom.module.css';
+
+// use client side router for local links
+const a = (props) =>
+  props.href.startsWith('http://') || props.href.startsWith('https://') ? (
+    <a {...props} target="_blank" rel="noreferrer nofollow">
+      {props.children}
+    </a>
+  ) : (
+    <Link to={props.href}>{props.children}</Link>
+  );
+
+// reformat props table
+// this could be even better, but we need to override some defaults components
+// see for inspiration, see  https://github.com/storybookjs/storybook/issues/9395
+const Props = ({ props, ...rest }) => {
+  Object.keys(props).forEach((key) => {
+    const type = props[key].type;
+    type.name = type.name
+      .replace(/\| undefined$/, '')
+      .replace(/"/g, "'")
+      .replace();
+
+    if (type.name[0] === '(' && type.name[type.name.length - 1] === ')') {
+      type.name = type.name.substr(1, type.name.length - 2);
+    }
+  });
+
+  return (
+    <div className={styles.props}>
+      <BaseProps {...rest} props={props} />
+    </div>
+  );
+};
+
+export default {
+  ...headings,
+  code: Code,
+  a,
+  playground: Playground,
+  pre: Pre,
+  layout: Layout,
+  props: Props,
+};