AFP-234 Remove support for using JSX without React

* AFP-234: Enforce React to be imported for all components

* AFP-234: Import React in generated code

* AFP-234: Add React imports to remaining files and test fixtures

* Add changeset

* AFP-234: Remove @emotion/core usages from components as it breaks things

* AFP-234: Add comment explaining disabled rule

* Enable eslint rule again

Author: dpisani-atl

.changeset/4efba9dc/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "minor" }],
+  "dependents": []
+}

.changeset/4efba9dc/changes.md

@@ -0,0 +1 @@
+- Remove support for using JSX without importing React in the website.

.eslintrc

@@ -1,31 +1,41 @@
 {
-    "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": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
     ],
-    "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"
+    "import/extensions": [
+      "error",
+      "never",
+      { "css": "ignorePackages", "json": "always" }
+    ],
+    "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"
+      }
     }
+  }
 }

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

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>;
 

packages/website/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  presets: ['next/babel', '@babel/typescript'],
+  presets: ['@babel/env', '@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',
   ],
 };

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}'
 

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);
+  });
+});

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';

packages/website/components/mdx/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import Heading from './Heading';
 import Link from '../switch-link';
 

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';

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,10 @@ 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,
             paddingTop: `${gridSize * 2.5}px`,

packages/website/components/navigation/docs-nav-content.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   BackItem,
   MenuSection,

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';
 

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';

packages/website/components/navigation/package-nav-content.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {
   MenuSection,
   BackItem,

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,

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';
@@ -88,7 +89,6 @@ const PackageMetaData = ({ id, version, maintainers, repository }) => (
           <p style={{ margin: '0' }}>{maintainers.join(', ')}</p>
         </MetaDataEntry>
       )}
-
       <RepositoryLink repository={repository} />
     </MetaDataWrapper>
   </div>