From 58d21392019ea8e14835d0fda27a8d881c76017f Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 10:39:39 +1100
Subject: [PATCH 1/7] AFP-234: Enforce React to be imported for all components

---
 .eslintrc                                     | 55 ++++++++++---------
 packages/website/babel.config.js              |  3 +-
 packages/website/components/link-button.js    |  1 +
 packages/website/components/mdx/index.js      |  1 +
 .../website/components/navigation-wrapper.js  |  2 +-
 .../navigation/all-packages-nav-content.js    |  2 +
 .../components/navigation/docs-nav-content.js |  2 +
 .../components/navigation/link-component.js   |  2 +-
 .../components/navigation/link-with-router.js |  1 +
 .../components/navigation/nav-header.js       |  1 +
 .../navigation/package-nav-content.js         |  2 +
 .../components/navigation/search-drawer.js    |  2 +-
 12 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 7fee289b..88f2f158 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,31 +1,34 @@
 {
-    "parser": "babel-eslint",
-    "extends": [
-        "airbnb",
-        "prettier",
-        "prettier/flowtype",
-        "prettier/react",
-        "plugin:jest/recommended"
+  "parser": "babel-eslint",
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/flowtype",
+    "prettier/react",
+    "plugin:jest/recommended"
+  ],
+  "plugins": ["emotion"],
+  "rules": {
+    "emotion/jsx-import": "error",
+    "react/jsx-filename-extension": "off",
+    "react/require-default-props": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "import/extensions": [
+      "error",
+      "never",
+      { "css": "ignorePackages", "json": "always" }
     ],
-    "plugins": ["emotion"],
-    "rules": {
-        "emotion/jsx-import": "error",
-        "react/jsx-filename-extension": "off",
-        "react/react-in-jsx-scope": "off",
-        "react/require-default-props": "off",
-        "jsx-a11y/anchor-is-valid": "off",
-        "import/extensions": ["error", "never", { "css": "ignorePackages", "json": "always" }],
-        "react/sort-comp": "off"
+    "react/sort-comp": "off"
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
     },
-    "settings": {
-        "import/parsers": {
-            "@typescript-eslint/parser": [".ts", ".tsx"]
-        },
-        "import/resolver": {
-            // use <root>/path/to/folder/tsconfig.json
-            "typescript": {
-                "directory": "./packages/react-changelogs/tsconfig.json"
-            }
-        }
+    "import/resolver": {
+      // use <root>/path/to/folder/tsconfig.json
+      "typescript": {
+        "directory": "./packages/react-changelogs/tsconfig.json"
+      }
     }
+  }
 }
diff --git a/packages/website/babel.config.js b/packages/website/babel.config.js
index 73ca8610..f31d262e 100644
--- a/packages/website/babel.config.js
+++ b/packages/website/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['next/babel', '@babel/typescript'],
+  presets: ['@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
     'emotion',
     [
@@ -13,5 +13,6 @@ module.exports = {
     'transform-flow-strip-types',
     '@babel/proposal-class-properties',
     '@babel/proposal-object-rest-spread',
+    '@babel/transform-runtime',
   ],
 };
diff --git a/packages/website/components/link-button.js b/packages/website/components/link-button.js
index 5ffb895e..85ab5f8f 100644
--- a/packages/website/components/link-button.js
+++ b/packages/website/components/link-button.js
@@ -6,6 +6,7 @@ Passes all props other than component directly into `@atlaskit/button`.
 See the [@atlaskit/button](https://atlaskit.atlassian.com/packages/core/button) docs for
 the options available to you.
 */
+import React from 'react';
 
 import Button from '@atlaskit/button';
 import Link from 'next/link';
diff --git a/packages/website/components/mdx/index.js b/packages/website/components/mdx/index.js
index b37924b7..e97b9850 100644
--- a/packages/website/components/mdx/index.js
+++ b/packages/website/components/mdx/index.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Heading from './Heading';
 import Link from '../switch-link';
 
diff --git a/packages/website/components/navigation-wrapper.js b/packages/website/components/navigation-wrapper.js
index 5799af64..4de3a838 100644
--- a/packages/website/components/navigation-wrapper.js
+++ b/packages/website/components/navigation-wrapper.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DocumentsIcon from '@atlaskit/icon/glyph/documents';
 import SearchIcon from '@atlaskit/icon/glyph/search';
diff --git a/packages/website/components/navigation/all-packages-nav-content.js b/packages/website/components/navigation/all-packages-nav-content.js
index b915b46c..614020e2 100644
--- a/packages/website/components/navigation/all-packages-nav-content.js
+++ b/packages/website/components/navigation/all-packages-nav-content.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   ContainerHeader,
   HeaderSection,
diff --git a/packages/website/components/navigation/docs-nav-content.js b/packages/website/components/navigation/docs-nav-content.js
index 397d43e5..21fdd3eb 100644
--- a/packages/website/components/navigation/docs-nav-content.js
+++ b/packages/website/components/navigation/docs-nav-content.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   BackItem,
   MenuSection,
diff --git a/packages/website/components/navigation/link-component.js b/packages/website/components/navigation/link-component.js
index 642965b9..8339ef21 100644
--- a/packages/website/components/navigation/link-component.js
+++ b/packages/website/components/navigation/link-component.js
@@ -1,6 +1,6 @@
 // Component that can be used as the component prop in nav items
 
-import { Component } from 'react';
+import React, { Component } from 'react';
 import Link from 'next/link';
 import * as PropTypes from 'prop-types';
 
diff --git a/packages/website/components/navigation/link-with-router.js b/packages/website/components/navigation/link-with-router.js
index 6f2521c4..7d7570a7 100644
--- a/packages/website/components/navigation/link-with-router.js
+++ b/packages/website/components/navigation/link-with-router.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import { withRouter } from 'next/router';
 import { Item } from '@atlaskit/navigation-next';
diff --git a/packages/website/components/navigation/nav-header.js b/packages/website/components/navigation/nav-header.js
index 986635a5..3ddca55c 100644
--- a/packages/website/components/navigation/nav-header.js
+++ b/packages/website/components/navigation/nav-header.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   ContainerHeader,
   HeaderSection,
diff --git a/packages/website/components/navigation/package-nav-content.js b/packages/website/components/navigation/package-nav-content.js
index 54cecdea..b685e50a 100644
--- a/packages/website/components/navigation/package-nav-content.js
+++ b/packages/website/components/navigation/package-nav-content.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   MenuSection,
   BackItem,
diff --git a/packages/website/components/navigation/search-drawer.js b/packages/website/components/navigation/search-drawer.js
index ae4c4ee7..d5c20b47 100644
--- a/packages/website/components/navigation/search-drawer.js
+++ b/packages/website/components/navigation/search-drawer.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
   QuickSearch,

From 028d7baf36109329037f6190ed1e79739bb715f8 Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 12:08:33 +1100
Subject: [PATCH 2/7] AFP-234: Import React in generated code

---
 packages/website/babel.config.js              |   2 +-
 .../bin/page-generator/templates/index.js     |   5 +
 .../bin/page-generator/templates/test.js      | 107 ++++++++++++++++++
 3 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 packages/website/bin/page-generator/templates/test.js

diff --git a/packages/website/babel.config.js b/packages/website/babel.config.js
index f31d262e..20cb8805 100644
--- a/packages/website/babel.config.js
+++ b/packages/website/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['@babel/preset-react', '@babel/preset-typescript'],
+  presets: ['@babel/env', '@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
     'emotion',
     [
diff --git a/packages/website/bin/page-generator/templates/index.js b/packages/website/bin/page-generator/templates/index.js
index edd4084a..93c5a863 100644
--- a/packages/website/bin/page-generator/templates/index.js
+++ b/packages/website/bin/page-generator/templates/index.js
@@ -17,6 +17,7 @@ const basicPageTemplate = (
 ) => {
   if (!componentPath) {
     return outdent`
+      import React from 'react';
       import Wrapper from '${wrapperPath}';
       import PageTitle from '${pageTitlePath}'
 
@@ -30,6 +31,7 @@ const basicPageTemplate = (
   }
 
   return outdent`
+    import React from 'react';
     import Component from '${componentPath}';
     import Wrapper from '${wrapperPath}';
     import PageTitle from '${pageTitlePath}'
@@ -51,6 +53,7 @@ const exampleTemplate = (
   data = {},
   title = '',
 ) => outdent`
+    import React from 'react';
     import Component from '${componentPath}';
     import fileContents from '!!raw-loader!${componentPath}';
 
@@ -68,6 +71,7 @@ const exampleTemplate = (
 `;
 
 const rawTemplate = componentPath => outdent`
+import React from 'react';
 import Component from '${componentPath}'
 
 export default () => <Component />
@@ -79,6 +83,7 @@ const basicNonComponentTemplate = (
   type,
   title = '',
 ) => outdent`
+    import React from 'react';
     import Wrapper from '${wrapperPath}';
     import PageTitle from '${pageTitlePath}'
 
diff --git a/packages/website/bin/page-generator/templates/test.js b/packages/website/bin/page-generator/templates/test.js
new file mode 100644
index 00000000..6946a2db
--- /dev/null
+++ b/packages/website/bin/page-generator/templates/test.js
@@ -0,0 +1,107 @@
+import { createTempDir } from 'jest-fixtures';
+import path from 'path';
+import fse from 'fs-extra';
+
+import * as generators from './index';
+
+const assertImportsReact = source => {
+  expect(source).toMatch(/^import React from 'react';$/m);
+};
+
+describe('Page generators', () => {
+  let cwd;
+  let pagesPath;
+  let wrappersPath;
+
+  const getOutput = filename => {
+    const outputPath = path.join(pagesPath, filename);
+    return fse.readFileSync(outputPath, { encoding: 'utf-8' });
+  };
+
+  beforeEach(async () => {
+    cwd = await createTempDir();
+    pagesPath = path.join(cwd, 'pages');
+    wrappersPath = path.join(cwd, 'wrappers');
+  });
+
+  it('creates js for a package home page', () => {
+    generators.generateHomePage(
+      'output.js',
+      path.join(cwd, 'README.md'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for a package doc page', () => {
+    generators.generatePackageDocPage(
+      'output.js',
+      path.join(cwd, 'README.md'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for a package example pages', () => {
+    generators.generateExamplePage(
+      'output.js',
+      'output-raw.js',
+      path.join(cwd, 'example.js'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    const outputRaw = getOutput('output-raw.js');
+
+    assertImportsReact(output);
+
+    assertImportsReact(outputRaw);
+  });
+
+  it('creates js for a docs home page', () => {
+    generators.generateDocsHomePage(
+      'output.js',
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for an examples home page', () => {
+    generators.generateExamplesHomePage(
+      'output.js',
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+
+  it('creates js for project doc page', () => {
+    generators.generateProjectDocPage(
+      'output.js',
+      path.join(cwd, 'README.md'),
+      {},
+      { wrappersPath, pagesPath },
+    );
+
+    const output = getOutput('output.js');
+
+    assertImportsReact(output);
+  });
+});

From 90a5c476b332b3b554167097c6466e4aeac39e5c Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 12:16:44 +1100
Subject: [PATCH 3/7] AFP-234: Add React imports to remaining files and test
 fixtures

---
 .../packages/mock-package1/examples/example1.js                 | 2 ++
 .../packages/mock-package1/examples/example2.js                 | 2 ++
 .../packages/mock-package1/examples/example3.js                 | 2 ++
 .../simple-mock-packages/packages/mock-package1/src/index.js    | 2 ++
 .../packages/mock-package2/examples/example1.js                 | 2 ++
 .../packages/mock-package2/examples/example2.js                 | 2 ++
 .../packages/mock-package2/examples/example3.js                 | 2 ++
 .../simple-mock-packages/packages/mock-package2/src/index.js    | 2 ++
 .../packages/mock-package3/examples/example1.js                 | 2 ++
 .../packages/mock-package3/examples/example2.js                 | 2 ++
 .../packages/mock-package3/examples/example3.js                 | 2 ++
 .../simple-mock-packages/packages/mock-package3/src/index.js    | 2 ++
 .../website/components/navigation/all-packages-nav-content.js   | 2 --
 packages/website/components/navigation/nav-header.js            | 1 -
 packages/website/components/package-metadata.js                 | 1 +
 packages/website/components/package-metadata.test.js            | 1 +
 packages/website/components/page-templates/item-list.js         | 1 +
 packages/website/components/page-templates/package-docs.js      | 1 +
 packages/website/components/page-templates/package-home.js      | 1 +
 packages/website/components/page-templates/package-home.test.js | 1 +
 packages/website/components/page-templates/project-docs.js      | 1 +
 packages/website/components/page-title.js                       | 1 +
 packages/website/components/switch-link.js                      | 1 +
 .../simple-project/packages/mock-package1/examples/example1.js  | 1 +
 .../simple-project/packages/mock-package1/examples/example2.js  | 2 ++
 .../simple-project/packages/mock-package1/examples/example3.js  | 2 ++
 .../simple-project/packages/mock-package1/src/index.js          | 1 +
 .../simple-project/packages/mock-package2/examples/example1.js  | 2 ++
 .../simple-project/packages/mock-package2/examples/example2.js  | 2 ++
 .../simple-project/packages/mock-package2/examples/example3.js  | 2 ++
 .../simple-project/packages/mock-package2/src/index.js          | 2 ++
 .../simple-project/packages/mock-package3/examples/example1.js  | 2 ++
 .../simple-project/packages/mock-package3/examples/example2.js  | 2 ++
 .../simple-project/packages/mock-package3/examples/example3.js  | 2 ++
 .../simple-project/packages/mock-package3/src/index.js          | 2 ++
 packages/website/pages/_document.js                             | 1 +
 packages/website/pages/docs.js                                  | 2 +-
 packages/website/pages/healthcheck.js                           | 2 ++
 packages/website/pages/helper.js                                | 1 +
 packages/website/pages/packages.js                              | 1 +
 40 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js
index 65120698..fb7b2b35 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 page';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js
index 6c2061e1..c5b05053 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 page';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js
index 6a8184cb..18a3210b 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 page';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js
index d280fb8f..8c2d6d0d 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package1/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 1';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js
index c174d315..6fbcb23b 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package 2';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js
index a1b5bcd1..da0e7062 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package 2';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js
index 9618444d..b61292a8 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package 2';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js
index 1fcafeb7..e7e53039 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package2/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 2';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js
index a2f10d45..3a4eae7d 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package3';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js
index 25def259..edd1689a 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package3';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js
index 3d3034f6..5e517cc1 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package3';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js
index d280fb8f..8c2d6d0d 100644
--- a/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js
+++ b/packages/website/__fixtures__/simple-mock-packages/packages/mock-package3/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 1';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/components/navigation/all-packages-nav-content.js b/packages/website/components/navigation/all-packages-nav-content.js
index 614020e2..b915b46c 100644
--- a/packages/website/components/navigation/all-packages-nav-content.js
+++ b/packages/website/components/navigation/all-packages-nav-content.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   ContainerHeader,
   HeaderSection,
diff --git a/packages/website/components/navigation/nav-header.js b/packages/website/components/navigation/nav-header.js
index 3ddca55c..986635a5 100644
--- a/packages/website/components/navigation/nav-header.js
+++ b/packages/website/components/navigation/nav-header.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   ContainerHeader,
   HeaderSection,
diff --git a/packages/website/components/package-metadata.js b/packages/website/components/package-metadata.js
index 44a9ed26..4dd10454 100644
--- a/packages/website/components/package-metadata.js
+++ b/packages/website/components/package-metadata.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import GitUrlParse from 'git-url-parse';
diff --git a/packages/website/components/package-metadata.test.js b/packages/website/components/package-metadata.test.js
index 0e94abd1..3e7c225f 100644
--- a/packages/website/components/package-metadata.test.js
+++ b/packages/website/components/package-metadata.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { mount } from 'enzyme';
 import PackageMetaData, { MetaDataEntry } from './package-metadata';
 
diff --git a/packages/website/components/page-templates/item-list.js b/packages/website/components/page-templates/item-list.js
index 2bed4d09..7b5d7bb2 100644
--- a/packages/website/components/page-templates/item-list.js
+++ b/packages/website/components/page-templates/item-list.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import Table from '@atlaskit/dynamic-table';
 import styled from '@emotion/styled';
diff --git a/packages/website/components/page-templates/package-docs.js b/packages/website/components/page-templates/package-docs.js
index c366cd97..58661852 100644
--- a/packages/website/components/page-templates/package-docs.js
+++ b/packages/website/components/page-templates/package-docs.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 
 import PackageNavContent from '../navigation/package-nav-content';
diff --git a/packages/website/components/page-templates/package-home.js b/packages/website/components/page-templates/package-home.js
index a40f34d7..c7ffefc6 100644
--- a/packages/website/components/page-templates/package-home.js
+++ b/packages/website/components/page-templates/package-home.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { colors } from '@atlaskit/theme';
diff --git a/packages/website/components/page-templates/package-home.test.js b/packages/website/components/page-templates/package-home.test.js
index 8ce9a29a..133ab261 100644
--- a/packages/website/components/page-templates/package-home.test.js
+++ b/packages/website/components/page-templates/package-home.test.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { shallow, mount } from 'enzyme';
 import titleCase from 'title-case';
 import PackageHomeWrapper, { Description } from './package-home';
diff --git a/packages/website/components/page-templates/project-docs.js b/packages/website/components/page-templates/project-docs.js
index 13397762..8be62843 100644
--- a/packages/website/components/page-templates/project-docs.js
+++ b/packages/website/components/page-templates/project-docs.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import * as PropTypes from 'prop-types';
 
 import DocsNavContent from '../navigation/docs-nav-content';
diff --git a/packages/website/components/page-title.js b/packages/website/components/page-title.js
index 2f6a76a0..c04c9a18 100644
--- a/packages/website/components/page-title.js
+++ b/packages/website/components/page-title.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
 
diff --git a/packages/website/components/switch-link.js b/packages/website/components/switch-link.js
index 308da658..14db2c73 100644
--- a/packages/website/components/switch-link.js
+++ b/packages/website/components/switch-link.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import * as PropTypes from 'prop-types';
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js
index ed98def8..5060e187 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example1.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import DynamicTable from '@atlaskit/dynamic-table';
 import { caption, head, rows } from './content/sample-data';
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js
index 6c2061e1..c5b05053 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 page';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js
index 6a8184cb..18a3210b 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 page';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js b/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js
index 9e87ecd1..e3d4156a 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package1/src/index.js
@@ -1,4 +1,5 @@
 // @flow
+import React from 'react';
 
 type FriendsInfo = {
   /* Name of the person who is asking for a new friend */
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js
index c174d315..6fbcb23b 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package 2';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js
index a1b5bcd1..da0e7062 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package 2';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js
index 9618444d..b61292a8 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package 2';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js b/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js
index 1fcafeb7..e7e53039 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package2/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 2';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js
index a2f10d45..3a4eae7d 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example1.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 1 package3';
 const Example1 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js
index 25def259..edd1689a 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example2.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 2 package3';
 const Example2 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js
index 3d3034f6..5e517cc1 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/examples/example3.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Example 3 package3';
 const Example3 = () => <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js b/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js
index d280fb8f..8c2d6d0d 100644
--- a/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js
+++ b/packages/website/dummy-data/simple-project/packages/mock-package3/src/index.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 const name = 'Test Package 1';
 const Element = <h1>Hello, {name}</h1>;
 
diff --git a/packages/website/pages/_document.js b/packages/website/pages/_document.js
index 5c4c3c61..4873ec4d 100644
--- a/packages/website/pages/_document.js
+++ b/packages/website/pages/_document.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Document, { Head, Main, NextScript } from 'next/document';
 import { extractCritical } from 'emotion-server';
 import { ServerStyleSheet } from 'styled-components';
diff --git a/packages/website/pages/docs.js b/packages/website/pages/docs.js
index d8bbe27c..524c329c 100644
--- a/packages/website/pages/docs.js
+++ b/packages/website/pages/docs.js
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import TableTree, {
   Headers,
   Header,
diff --git a/packages/website/pages/healthcheck.js b/packages/website/pages/healthcheck.js
index 4c770f3d..4a692551 100644
--- a/packages/website/pages/healthcheck.js
+++ b/packages/website/pages/healthcheck.js
@@ -1 +1,3 @@
+import React from 'react';
+
 export default () => <div>OK</div>;
diff --git a/packages/website/pages/helper.js b/packages/website/pages/helper.js
index 3f96c19c..9764d705 100644
--- a/packages/website/pages/helper.js
+++ b/packages/website/pages/helper.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 import links from '../pages-list';
 
diff --git a/packages/website/pages/packages.js b/packages/website/pages/packages.js
index 6c96aa78..81f154dc 100644
--- a/packages/website/pages/packages.js
+++ b/packages/website/pages/packages.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Table from '@atlaskit/dynamic-table';
 
 import styled from 'styled-components';

From 6594454662cea8401a5dda445385465bff8638c9 Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 12:47:30 +1100
Subject: [PATCH 4/7] Add changeset

---
 .changeset/4efba9dc/changes.json | 4 ++++
 .changeset/4efba9dc/changes.md   | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 .changeset/4efba9dc/changes.json
 create mode 100644 .changeset/4efba9dc/changes.md

diff --git a/.changeset/4efba9dc/changes.json b/.changeset/4efba9dc/changes.json
new file mode 100644
index 00000000..5b461d1a
--- /dev/null
+++ b/.changeset/4efba9dc/changes.json
@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "minor" }],
+  "dependents": []
+}
diff --git a/.changeset/4efba9dc/changes.md b/.changeset/4efba9dc/changes.md
new file mode 100644
index 00000000..6f980e61
--- /dev/null
+++ b/.changeset/4efba9dc/changes.md
@@ -0,0 +1 @@
+- Remove support for using JSX without importing React in the website.
\ No newline at end of file

From 126ae70f3c717800123bff88794bc5c32d2940fc Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 14:38:45 +1100
Subject: [PATCH 5/7] AFP-234: Remove @emotion/core usages from components as
 it breaks things

---
 .../components/navigation/all-packages-nav-content.js        | 5 ++---
 packages/website/components/package-metadata.js              | 1 -
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/website/components/navigation/all-packages-nav-content.js b/packages/website/components/navigation/all-packages-nav-content.js
index b915b46c..a05d05e7 100644
--- a/packages/website/components/navigation/all-packages-nav-content.js
+++ b/packages/website/components/navigation/all-packages-nav-content.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   ContainerHeader,
   HeaderSection,
@@ -9,9 +10,6 @@ import {
 } from '@atlaskit/navigation-next';
 import { gridSize as gridSizeFn } from '@atlaskit/theme';
 
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-
 import * as PropTypes from 'prop-types';
 import titleCase from 'title-case';
 import LinkWithRouter from './link-with-router';
@@ -24,6 +22,7 @@ const AllPackagesNavContent = ({ data }) => (
     <HeaderSection>
       {({ css }) => (
         <div
+          // eslint-disable-next-line emotion/jsx-import
           css={{
             ...css,
             paddingTop: `${gridSize * 2.5}px`,
diff --git a/packages/website/components/package-metadata.js b/packages/website/components/package-metadata.js
index 4dd10454..8d9acc0e 100644
--- a/packages/website/components/package-metadata.js
+++ b/packages/website/components/package-metadata.js
@@ -89,7 +89,6 @@ const PackageMetaData = ({ id, version, maintainers, repository }) => (
           <p style={{ margin: '0' }}>{maintainers.join(', ')}</p>
         </MetaDataEntry>
       )}
-
       <RepositoryLink repository={repository} />
     </MetaDataWrapper>
   </div>

From 45fe1c1b29a7aa8fc91eb4011c569cbeabc289eb Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 15:38:42 +1100
Subject: [PATCH 6/7] AFP-234: Add comment explaining disabled rule

---
 .../website/components/navigation/all-packages-nav-content.js  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/website/components/navigation/all-packages-nav-content.js b/packages/website/components/navigation/all-packages-nav-content.js
index a05d05e7..fe4d7659 100644
--- a/packages/website/components/navigation/all-packages-nav-content.js
+++ b/packages/website/components/navigation/all-packages-nav-content.js
@@ -22,6 +22,9 @@ const AllPackagesNavContent = ({ data }) => (
     <HeaderSection>
       {({ css }) => (
         <div
+          // This works because navigation-next is importing
+          // an old version of emotion. It also prevents us from
+          // using the jsx import from @emotion/core
           // eslint-disable-next-line emotion/jsx-import
           css={{
             ...css,

From e3304a857a946427548029941019266e91a8d66a Mon Sep 17 00:00:00 2001
From: Dean Pisani <dpisani@atlassian.com>
Date: Tue, 26 Mar 2019 15:42:43 +1100
Subject: [PATCH 7/7] Enable eslint rule again

---
 .eslintrc | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index 88f2f158..26d32769 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,7 +12,14 @@
     "emotion/jsx-import": "error",
     "react/jsx-filename-extension": "off",
     "react/require-default-props": "off",
-    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
+    ],
     "import/extensions": [
       "error",
       "never",