Develop with storybook

.gitignore

@@ -61,3 +61,6 @@ googleMapKey.js
 
 .rts2_cache*
 .dccache
+
+# Hide secret Google Maps API Config
+.storybook/maps.config.ts

.storybook/example.maps.config.ts

@@ -0,0 +1,18 @@
+import { WrapperProps } from '@googlemaps/react-wrapper'
+
+/**
+ * Secret Google Mpas API Config
+ * 
+ * Create `maps.congig.ts` in `.storybook` folder
+ * with the following content and replace `YOUR_API_KEY`
+ * with your API Key provided by Google.
+ * 
+ * `maps.config.ts` is ignored by git and will not be
+ * committed to repository and/or published.
+ */
+ export const googleMapsApiConfig: WrapperProps = {
+ // uncomment next line and replace `YOUR_API_KEY` with your API Key provided by Google.
+ // apiKey: 'YOUR_API_KEY',
+ libraries: ['drawing', 'visualization', 'places'],
+ }
+

.storybook/googlemapsReactWrapperDecorator.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+import { Wrapper, Status } from '@googlemaps/react-wrapper'
+import { googleMapsApiConfig } from './maps.config'
+
+/** Storybook decorator for loading google maps API
+ *
+ * This decorator is based on `@googlemaps/react-wrapper`
+ *
+ * @see https://cloud.google.com/blog/products/maps-platform/loading-google-maps-platform-javascript-modern-web-applications
+ * @see https://www.npmjs.com/package/@googlemaps/react-wrapper
+ */
+const googlemapsReactWrapperDecorator = (Story) => {
+ const render = (status: Status): ReactElement => {
+ if (status === Status.LOADING) return <h3>Loading ...</h3>;
+ return null;
+ };
+
+
+ return (
+ <Wrapper {...googleMapsApiConfig} render={render}>
+ <Story />
+ </Wrapper>
+ )
+}
+
+export default googlemapsReactWrapperDecorator

.storybook/main.js

@@ -0,0 +1,18 @@
+module.exports = {
+ "stories": [
+ "../packages/react-google-maps-api/**/*.stories.mdx",
+ "../packages/react-google-maps-api/**/*.stories.@(js|jsx|ts|tsx)",
+ "../packages/react-google-maps-api-gatsby-example/**/*.stories.mdx",
+ "../packages/react-google-maps-api-gatsby-example/**/*.stories.@(js|jsx|ts|tsx)",
+ ],
+ "addons": [
+ "@storybook/addon-links",
+ "@storybook/addon-essentials"
+ ],
+ webpackFinal: (config) => {
+ config.resolve.alias['@react-google-maps/api'] = require.resolve('../packages/react-google-maps-api/src/index.ts');
+ config.resolve.alias['@react-google-maps/infobox'] = require.resolve('../packages/react-google-maps-api-infobox/src/index.ts');
+ config.resolve.alias['@react-google-maps/marker-clusterer'] = require.resolve('../packages/react-google-maps-api-marker-clusterer/src/index.ts');
+ return config;
+ },
+}

.storybook/preview.js

@@ -0,0 +1,14 @@
+
+import googlemapsReactWrapperDecorator from './googlemapsReactWrapperDecorator'
+
+export const decorators = [googlemapsReactWrapperDecorator]
+
+export const parameters = {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+}

README.md

@@ -20,3 +20,31 @@ or [https://react-google-maps-api-docs.netlify.app](https://react-google-maps-ap
 ## For Maintainers
 
 Join our [Slack channel](https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ)
+
+## For Developers and Contributors
+
+### Requirements
+
+- basic git, JavaScript, React knowlwedge
+- Google Maps API Key from [Google CLoud Conosle](https://console.cloud.google.com)
+- git
+- node
+- yarn
+
+
+### To develop localy
+
+Fork original repo at https://github.com/JustFly1984/react-google-maps-api. Clone your fork to local directory of your choice, install dependencies, set up your API Key, and start storybook server. Following commands should do the job:
+
+- `git clone https://github.com/YOUR_USER_NAME/react-google-maps-api.git` - clone your fork
+`
+- `cd react-google-maps-api` - move to newly created folder
+- `cp .storybook/example.maps.config.ts .storybook/maps.config.ts` - create file with API Key
+- `yarn install` - install dependencies
+- `yarn storybook` - run storybook server
+
+Eny changes you make to src folders of contained packages, should reflect in sotybook server.
+
+### To contribute
+
+Create a feature/fix branch on your own fork and make pull request towards develop branch of the original repo.

package.json

@@ -32,7 +32,9 @@
  "prebuild:gatsby": "yarn build:clusterer && yarn build:infobox && yarn build:api",
  "start:gatsby": "cd packages/react-google-maps-api-gatsby-example && yarn start && cd ../..",
  "prestart:gatsby": "yarn build:clusterer && yarn build:infobox && yarn build:api",
- "clean": "rimraf ./yarn.lock ./package-lock.json ./node_modules/ && yarn"
+ "clean": "rimraf ./yarn.lock ./package-lock.json ./node_modules/ && yarn",
+ "storybook": "start-storybook -p 6006",
+ "build-storybook": "build-storybook"
  },
  "lint-staged": {
  "*.{ts|tsx}": [
@@ -42,12 +44,23 @@
  ]
  },
  "devDependencies": {
+ "@babel/core": "^7.15.8",
+ "@googlemaps/react-wrapper": "^1.1.8",
+ "@storybook/addon-actions": "^6.3.10",
+ "@storybook/addon-essentials": "^6.3.10",
+ "@storybook/addon-links": "^6.3.10",
+ "@storybook/react": "^6.3.10",
+ "babel-loader": "^8.2.2",
  "husky": "4.3.8",
- "lint-staged": "10.5.3"
+ "lint-staged": "10.5.3",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "typescript": "^4.4.3"
  },
  "husky": {
  "hooks": {
  "pre-commit": "lint-staged"
  }
- }
+ },
+ "dependencies": {}
 }

packages/react-google-maps-api-gatsby-example/src/examples/example-bicycling.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { BicyclingLayer as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleBicycling from './example-bicycling'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Bicycling Layer',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleBicycling> = (args) => (
+ <ExampleBicycling {...args} />
+)
+
+export const BicyclingLayer = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-data.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { Data as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleData from './example-data'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Data',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleData> = (args) => (
+ <ExampleData {...args} />
+)
+
+export const Data = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-directions.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import ExampleDirections from './example-directions'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Directions',
+ component: ExampleDirections,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleDirections>
+
+const Template: ComponentStory<typeof ExampleDirections> = (args) => (
+ <ExampleDirections {...args} />
+)
+
+export const Directions = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-drawing.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { DrawingManager as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleDrawing from './example-drawing'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Drawing Manager',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleDrawing> = (args) => (
+ <ExampleDrawing {...args} />
+)
+
+export const DrawingManager = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-ground.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { GroundOverlay as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleGround from './example-ground'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Ground Overlay',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleGround> = (args) => (
+ <ExampleGround {...args} />
+)
+
+export const GroundOverlay = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-heatmap.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { HeatmapLayer as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleHeatmap from './example-heatmap'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Heatmap Layer',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleHeatmap> = (args) => (
+ <ExampleHeatmap {...args} />
+)
+
+export const HeatmapLayer = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-overlay-view.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { OverlayView as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleOverlayView from './example-overlay-view'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Overlay View',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleOverlayView> = (args) => (
+ <ExampleOverlayView {...args} />
+)
+
+export const OverlayView = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-search-box.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { StandaloneSearchBox as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleSearchBox from './example-search-box'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Standalone Search Box',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleSearchBox> = (args) => (
+ <ExampleSearchBox {...args} />
+)
+
+export const StandaloneSearchBox = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-shapes.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+// import { TransitLayer as ExampleShapes} from '@react-google-maps/api'
+
+import ExampleShapes from './example-shapes'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Shapes',
+ component: ExampleShapes,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleShapes>
+
+const Template: ComponentStory<typeof ExampleShapes> = (args) => (
+ <ExampleShapes {...args} />
+)
+
+export const Shapes = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-traffic.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { TrafficLayer as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleTraffic from './example-traffic'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Traffic Layer',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleTraffic> = (args) => (
+ <ExampleTraffic {...args} />
+)
+
+export const TrafficLayer = Template.bind({})

packages/react-google-maps-api-gatsby-example/src/examples/example-transit.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { TransitLayer as ExampleComponent} from '@react-google-maps/api'
+
+import ExampleTransit from './example-transit'
+import { shapeExampleStyles } from '../components/styles'
+
+
+export default {
+ title: 'Example/Transit Layer',
+ component: ExampleComponent,
+ args: {styles: shapeExampleStyles},
+} as ComponentMeta<typeof ExampleComponent>
+
+const Template: ComponentStory<typeof ExampleTransit> = (args) => (
+ <ExampleTransit {...args} />
+)
+
+export const TransitLayer = Template.bind({})