Use DragDropContextProvider in Tutorial (#1272)

* docs: use the dragdropcontextprovider in the tutorial example

* docs: turn on auto-formatting of markdown files, run auto-formatting on existing documentation

* docs: add a prettier override for markdown to not use tabs

Author: darthtrevino

.vscode/settings.json

@@ -4,6 +4,9 @@
 		"**/bower_components": true
 	},
 	"editor.tabSize": 2,
+	"[markdown]": {
+		"editor.formatOnSave": true
+	},
 	"[typescript]": {
 		"editor.formatOnSave": true
 	},

package.json

@@ -116,7 +116,15 @@
 		"semi": false,
 		"singleQuote": true,
 		"trailingComma": "all",
-		"useTabs": true
+		"useTabs": true,
+		"overrides": [
+			{
+				"files": "*.md",
+				"options": {
+					"useTabs": false
+				}
+			}
+		]
 	},
 	"workspaces": {
 		"packages": [

packages/dnd-core/README.md

@@ -13,17 +13,17 @@ It powers [React DnD](https://github.com/react-dnd/react-dnd) internally.
 
 To give you a better idea:
 
-* There is no DOM here
-* We let you define drop target and drag source logic
-* We let you supply custom underlying implementations (console, DOM via jQuery, React, React Native, _whatever_)
-* We manage drag source and drop target interaction
+- There is no DOM here
+- We let you define drop target and drag source logic
+- We let you supply custom underlying implementations (console, DOM via jQuery, React, React Native, _whatever_)
+- We manage drag source and drop target interaction
 
 This was written to support some rather complicated scenarios that were too hard to implement in [React DnD](https://github.com/react-dnd/react-dnd) due to its current architecture:
 
-* [Mocking drag and drop interaction in tests](https://github.com/react-dnd/react-dnd/issues/55)
-* [Full support for arbitrary nesting and handling drag sources and drop targets](https://github.com/react-dnd/react-dnd/issues/87)
-* [Dragging multiple items at once](https://github.com/react-dnd/react-dnd/issues/14)
-* [Even when source is removed, letting another drag source “represent it” (e.g. card disappeared from one Kanban list, reappeared in another one)](https://github.com/react-dnd/react-dnd/pull/64#issuecomment-76118757)
+- [Mocking drag and drop interaction in tests](https://github.com/react-dnd/react-dnd/issues/55)
+- [Full support for arbitrary nesting and handling drag sources and drop targets](https://github.com/react-dnd/react-dnd/issues/87)
+- [Dragging multiple items at once](https://github.com/react-dnd/react-dnd/issues/14)
+- [Even when source is removed, letting another drag source “represent it” (e.g. card disappeared from one Kanban list, reappeared in another one)](https://github.com/react-dnd/react-dnd/pull/64#issuecomment-76118757)
 
 As it turns out, these problems are much easier to solve when DOM is thrown out of the window.
 

packages/documentation/README.md

@@ -7,7 +7,7 @@
   Gatsby's default starter
 </h1>
 
-Kick off your project with this default boilerplate. This barebones starter ships with the main Gatsby configuration files you might need. 
+Kick off your project with this default boilerplate. This barebones starter ships with the main Gatsby configuration files you might need.
 
 _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
 
@@ -34,11 +34,11 @@ _Have another more specific idea? You may want to check out our vibrant collecti
 1.  **Open the source code and start editing!**
 
     Your site is now running at `http://localhost:8000`!
-    
-    *Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).*
-    
+
+    \_Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).\_
+
     Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
-    
+
 ## 🧐 What's inside?
 
 A quick look at the top-level files and directories you'll see in a Gatsby project.
@@ -58,39 +58,39 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
     ├── README.md
     └── yarn.lock
 
-  1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.  
-  
-  2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
-  
-  3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
-  
-  4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
-  
-  5.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
-  
-  6.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
-  
-  7.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
-  
-  8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
-  
-  9.  **`LICENSE`**: Gatsby is licensed under the MIT license.
-  
-  10.  **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
-  
-  11.  **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
-  
-  12.  **`README.md`**: A text file containing useful reference information about your project.
-  
-  13.  **`yarn.lock`**: [Yarn](https://yarnpkg.com/) is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm.  This file serves essentially the same purpose as `package-lock.json`, just for a different package management system.
+1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
+
+2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
+
+3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
+
+4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
+
+5.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
+
+6.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
+
+7.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
+
+8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
+
+9.  **`LICENSE`**: Gatsby is licensed under the MIT license.
+
+10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
+
+11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
+
+12. **`README.md`**: A text file containing useful reference information about your project.
+
+13. **`yarn.lock`**: [Yarn](https://yarnpkg.com/) is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as `package-lock.json`, just for a different package management system.
 
 ## 🎓 Learning Gatsby
 
 Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
 
--   **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
+- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
 
--   **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
+- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
 
 ## 💫 Deploy
 

packages/documentation/markdown/docs/00 Quick Start/FAQ.md

@@ -1,11 +1,11 @@
 ---
-path: "/docs/faq"
-title: "FAQ"
+path: '/docs/faq'
+title: 'FAQ'
 ---
-*New to React DnD? [Read the overview](/docs/overview) before jumping into the docs.*
 
-FAQ
-===================
+_New to React DnD? [Read the overview](/docs/overview) before jumping into the docs._
+
+# FAQ
 
 ## Usage
 
@@ -45,55 +45,50 @@ Because [`DragSource`](/docs/api/drag-source) and [`DropTarget`](/docs/api/drop-
 
 When using [function components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions), the `component` parameter will always be `null` in the `beginDrag`/`endDrag`/`drop`/`hover` methods. This is because it is not possible to attach a ref to a stateless function component as explained in [the React docs](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).
 
-
 ```js
-import { DragSource } from 'react-dnd';
-import flow from 'lodash/flow';
+import { DragSource } from 'react-dnd'
+import flow from 'lodash/flow'
 
 class YourComponent {
   /* ... */
 }
 
 export default flow(
-  DragSource(/* ... */)
-  DropTarget(/* ... */)
-)(YourComponent);
+  DragSource(/* ... */),
+  DropTarget(/* ... */),
+)(YourComponent)
 ```
 
 ### How do I register a drop target for the native files?
 
 If you are using the [HTML5 backend](/docs//backends/html5), you can register a drop target for one of the `NativeTypes` it exports:
 
 ```js
-import React from 'react';
-import { NativeTypes } from 'react-dnd-html5-backend';
-import { DropTarget } from 'react-dnd';
+import React from 'react'
+import { NativeTypes } from 'react-dnd-html5-backend'
+import { DropTarget } from 'react-dnd'
 
 const fileTarget = {
   drop(props, monitor) {
-    console.log(monitor.getItem().files);
-  }
-};
+    console.log(monitor.getItem().files)
+  },
+}
 
 function FileDropZone({ connectDropTarget, isOver, canDrop }) {
   return connectDropTarget(
     <div>
       {!isOver && !canDrop && 'Drag files from the hard drive'}
       {!isOver && canDrop && 'Drag the files here'}
       {isOver && 'Drop the files'}
-    </div>
-  );
+    </div>,
+  )
 }
 
-export default DropTarget(
-    NativeTypes.FILE, 
-    fileTarget, 
-    (connect, monitor) => ({
-      connectDropTarget: connect.dropTarget(),
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
-)(FileDropZone);
+export default DropTarget(NativeTypes.FILE, fileTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+}))(FileDropZone)
 ```
 
 ### How do I write a custom backend?
@@ -119,7 +114,7 @@ class Page {
   }
 }
 
-export default DragDropContext(HTML5Backend)(Page);
+export default DragDropContext(HTML5Backend)(Page)
 ```
 
 It might surprise you that your route handler's `willTransitionTo` (or a similar method) won't get triggered in this case! React DnD doesn't proxy your components' static methods and properties. This is too fragile and full of edge cases, so you must do it yourself. It's not hard! Just put your statics onto the components returned by React DnD instead:
@@ -131,12 +126,12 @@ class Page {
   }
 }
 
-Page = DragDropContext(HTML5Backend)(Page);
-Page.willTransitionTo = function (transition, params) {
+Page = DragDropContext(HTML5Backend)(Page)
+Page.willTransitionTo = function(transition, params) {
   /* ... */
 }
 
-export default Page;
+export default Page
 ```
 
 ## Meta
@@ -163,8 +158,8 @@ It is loosely based on the pre-React code written at Stampsy by [Andrew Kuznetso
 
 React DnD would not have reached the 1.0 release without the generous donations from:
 
-* [Macropod](https://macropod.com/), a company developing team productivity software;
-* [Webflow](https://webflow.com/), a company creating a professional responsive website builder.
+- [Macropod](https://macropod.com/), a company developing team productivity software;
+- [Webflow](https://webflow.com/), a company creating a professional responsive website builder.
 
 [Gadzhi Kharkharov](http://kkga.me/) styled the website, and the [fixed-data-table](https://github.com/facebook/fixed-data-table) project provided the website template.