adding example for function components (atlassian#1167)

.eslintrc.js

@@ -9,7 +9,15 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   parser: 'babel-eslint',
-  plugins: ['prettier', 'flowtype', 'emotion', 'react', 'import', 'jest'],
+  plugins: [
+    'prettier',
+    'flowtype',
+    'emotion',
+    'react',
+    'react-hooks',
+    'import',
+    'jest',
+  ],
   env: {
     es6: true,
     browser: true,
@@ -92,5 +100,10 @@ module.exports = {
 
     // Allowing importing from dev deps (for stories and tests)
     'import/no-extraneous-dependencies': 'off',
+
+    // Enforce rules of hooks
+    'react-hooks/rules-of-hooks': 'error',
+    // Second argument to hook functions
+    'react-hooks/exhaustive-deps': 'warn',
   },
 };

docs/about/examples.md

@@ -19,8 +19,7 @@ We have created some basic examples on `codesandbox` for you to play with direct
 
 - [Simple vertical list](https://codesandbox.io/s/k260nyxq9v)
 - [Simple horizontal list](https://codesandbox.io/s/mmrp44okvj)
+- [Using with function components](https://codesandbox.io/s/zqwz5n5p9x)
 - [Simple DnD between two lists](https://codesandbox.io/s/ql08j35j3q)
 
 [← Back to documentation](/README.md#documentation-)
-
-[← Back to documentation](/README.md#documentation-)

docs/patterns/using-a-portal.md

@@ -30,4 +30,4 @@ We have created a [working example](https://react-beautiful-dnd.netlify.com/?sel
 
 If you are doing drag and drop reordering within a `<table>` we have created a portal section inside our [table guide](/docs/patterns/tables.md)
 
-[← Back to documentation](/README.md#documentation-).
+[← Back to documentation](/README.md#documentation-)

package.json

@@ -98,6 +98,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react-hooks": "^1.5.0",
     "flow-bin": "0.94.0",
     "fs-extra": "^7.0.1",
     "globby": "^9.1.0",

stories/35-function-component.stories.js

@@ -0,0 +1,9 @@
+// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import QuoteApp from './src/function-component/quote-app';
+
+storiesOf('Function component usage', module).add(
+  'using rbd with function components and hooks',
+  () => <QuoteApp />,
+);

stories/src/function-component/quote-app.jsx

@@ -0,0 +1,90 @@
+// @flow
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { DragDropContext, Droppable, Draggable } from '../../../src';
+import type {
+  DropResult,
+  DraggableProvided,
+  DroppableProvided,
+} from '../../../src';
+import type { Quote as QuoteType } from '../types';
+import { quotes as initial } from '../data';
+import reorder from '../reorder';
+import { grid } from '../constants';
+
+type QuoteProps = {|
+  quote: QuoteType,
+  index: number,
+|};
+
+const QuoteItem = styled.div`
+  width: 200px;
+  border: 1px solid grey;
+  margin-bottom: ${grid}px;
+  background-color: lightblue;
+  padding: ${grid}px;
+`;
+
+function Quote({ quote, index }: QuoteProps) {
+  return (
+    <Draggable draggableId={quote.id} index={index}>
+      {(provided: DraggableProvided) => (
+        <QuoteItem
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          {quote.content}
+        </QuoteItem>
+      )}
+    </Draggable>
+  );
+}
+
+type QuoteListProps = {|
+  quotes: QuoteType[],
+|};
+
+// Ensuring the whole list does not re-render when the droppable re-renders
+const QuoteList = React.memo(function QuoteList({ quotes }: QuoteListProps) {
+  return quotes.map((quote: QuoteType, index: number) => (
+    <Quote quote={quote} index={index} key={quote.id} />
+  ));
+});
+
+function QuoteApp() {
+  const [quotes, setQuotes] = useState(initial);
+
+  function onDragEnd(result: DropResult) {
+    if (!result.destination) {
+      return;
+    }
+
+    if (result.destination.index === result.source.index) {
+      return;
+    }
+
+    const newQuotes = reorder(
+      quotes,
+      result.source.index,
+      result.destination.index,
+    );
+
+    setQuotes(newQuotes);
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="list">
+        {(provided: DroppableProvided) => (
+          <div ref={provided.innerRef} {...provided.droppableProps}>
+            <QuoteList quotes={quotes} />
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}
+
+export default QuoteApp;

test/unit/docs/content.spec.js

@@ -9,22 +9,23 @@ it('should end all nested docs with a link back to the documentation root', asyn
   const files: string[] = await globby('docs/**/*.md');
   expect(files.length).toBeGreaterThan(0);
   const backLink: string =
-    '[← Back to documentation](/README.md#documentation-)\n';
+    '[← Back to documentation](/README.md#documentation-)';
 
   for (const file of files) {
     const contents: string = await fs.readFile(file, 'utf8');
-    const isValid: boolean = contents.endsWith(backLink);
 
-    if (isValid) {
-      expect(isValid).toBe(true);
-      return;
+    // Printing a nice message to allow for quick fixing
+    const endsWithBacklink: boolean = contents.trim().endsWith(backLink);
+
+    if (!endsWithBacklink) {
+      expect(`
+        File: "${file}"
+        Did not end with back link
+      `).toBe(true);
     }
 
-    // Printing a nice message to allow for quick fixing
-    expect(`
-      File: "${file}"
-      Did not end with back link
-    `).toBe(true);
+    // need at least one assertion
+    expect(true).toBe(true);
   }
 });
 

yarn.lock

@@ -4720,6 +4720,11 @@ eslint-plugin-prettier@^3.0.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.5.0.tgz#cdd958cfff55bd5fa4f84db90d1490fb5ca4ae2b"
+  integrity sha512-iwDuWR2ReRgvJsNm8fXPtTKdg78IVQF8I4+am3ntztPf/+nPnWZfArFu6aXpaC75/iCYRrkqI8nPCYkxJstmpA==
+
 eslint-plugin-react@^7.12.4:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"