Add @storybook/react (#27)

* Add @storybook/react

Author: itsmichaeldiego

.env.development

@@ -3,9 +3,18 @@ module.exports = {
   "extends": "airbnb",
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: [
+          "src/stories/**",
+        ]
+      }
+    ]
   },
   "env": {
     "es6": true,
+    "jest": true,
     "browser": true,
   }
 };

.env.production

@@ -1,13 +1,16 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage
 
 # production
 /build
+/storybook-static
 
 # misc
 .DS_Store
@@ -19,5 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+build-storybook.log*
 
-.env
+.env.*

.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};

.gitignore

@@ -10,12 +10,12 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Examples
 
-- [Main](https://google-map-react.github.io/google-map-react-examples/default) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Main.js))
-- [Heatmap](https://google-map-react.github.io/google-map-react-examples/heatmap) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Heatmap.js))
-- [Searchbox](https://google-map-react.github.io/google-map-react-examples/searchbox) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Searchbox.js))
-- [Autocomplete](https://google-map-react.github.io/google-map-react-examples/autocomplete) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Searchbox.js))
-- [Marker and Info Window using React Component](https://google-map-react.github.io/google-map-react-examples/marker-info-window) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/MarkerInfoWindow.js))
-- [Marker and Info Window using Google Maps API Object](https://google-map-react.github.io/google-map-react-examples/marker-info-window-gmaps-obj) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/MarkerInfoWindowGmapsObj.js))
+- [Main](https://google-map-react.github.io/google-map-react-examples/?path=/story/main-examples--base) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Main.js))
+- [Heatmap](https://google-map-react.github.io/google-map-react-examples/?path=/story/heatmap-examples--base) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Heatmap.js))
+- [Searchbox](https://google-map-react.github.io/google-map-react-examples/?path=/story/searchbox-examples--base) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Searchbox.js))
+- [Autocomplete](https://google-map-react.github.io/google-map-react-examples/?path=/story/autocomplete-examples--base) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/Searchbox.js))
+- [Marker and Info Window using React Component](https://google-map-react.github.io/google-map-react-examples/?path=/story/markerinfo-examples--custom-component) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/MarkerInfoWindow.js))
+- [Marker and Info Window using Google Maps API Object](https://google-map-react.github.io/google-map-react-examples/?path=/story/markerinfo-examples--default-marker) ([source](https://github.com/google-map-react/google-map-react-examples/blob/master/src/examples/MarkerInfoWindowGmapsObj.js))
 
 ## Getting started
 

.storybook/main.js

@@ -4,31 +4,53 @@
   "private": true,
   "homepage": "https://itsmichaeldiego.github.io/google-map-react-examples/",
   "dependencies": {
-    "google-map-react": "^1.0.0",
+    "@testing-library/jest-dom": "^5.11.0",
+    "@testing-library/react": "^10.4.5",
+    "@testing-library/user-event": "^12.0.11",
+    "google-map-react": "^1.1.7",
     "lodash.isempty": "^4.4.0",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "1.1.1",
-    "styled-components": "^3.2.1"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "lint": "eslint src",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "predeploy": "npm run build-storybook",
+    "deploy": "gh-pages -d storybook-static",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public",
+    "chromatic": "npx chromatic --project-token=2mchcgpjqg2"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.3",
+    "@storybook/react": "^5.3.19",
     "babel-eslint": "^10.0.1",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb": "^16.1.0",
+    "chromatic": "^5.0.0",
+    "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "gh-pages": "^1.2.0"
+    "gh-pages": "^3.1.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

README.md

@@ -1,15 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -22,9 +27,7 @@
     <title>React App</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.