chore: restore React 16 support

This restores importing React and the ESLint rule react/react-in-jsx-scope to preserve React 16 compatibility.

This also moves some types around so themes can be exported as a standalone with its own TypeScript config.

Author: WesSouza

.codesandbox/ci.json

@@ -1,5 +1,7 @@
 {
-  "installCommand": "install:codesandbox",
   "buildCommand": "build:prod",
-  "sandboxes": ["react95-template-xkfj0"]
+  "node": "16",
+  "sandboxes": [
+    "react95-template-xkfj0"
+  ]
 }

.eslintrc.js

@@ -43,7 +43,6 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'react/no-array-index-key': 'off',
     'react/prop-types': 'off',
-    'react/react-in-jsx-scope': 'off',
     'react/require-default-props': 'off',
     'react/static-property-placement': ['error', 'static public field']
   },

package.json

@@ -46,7 +46,6 @@
     "lint": "eslint --ext .js,.ts,.tsx src",
     "lint:fix": "yarn run lint --fix",
     "semantic-release": "semantic-release",
-    "install:codesandbox": "yarn --ignore-engines",
     "cz": "git-cz"
   },
   "peerDependencies": {

src/Anchor/Anchor.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { render } from '@testing-library/react';
 
 import { Anchor } from './Anchor';

src/Anchor/Anchor.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { Anchor } from './Anchor';

src/AppBar/AppBar.spec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import React from 'react';
 
 import { AppBar } from './AppBar';
 

src/AppBar/AppBar.stories.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import styled from 'styled-components';
+import { ComponentMeta } from '@storybook/react';
+import React, { useState } from 'react';
 import {
   AppBar,
-  Toolbar,
-  TextField,
   Button,
+  Divider,
   List,
   ListItem,
-  Divider
+  TextField,
+  Toolbar
 } from 'react95';
-import { ComponentMeta } from '@storybook/react';
+import styled from 'styled-components';
 import logoIMG from '../assets/images/logo.png';
 
 const Wrapper = styled.div`
@@ -24,7 +24,7 @@ export default {
 } as ComponentMeta<typeof AppBar>;
 
 export function Default() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   return (
     <AppBar>

src/Avatar/Avatar.spec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import React from 'react';
 
 import { renderWithTheme, theme } from '../../test/utils';
 

src/Avatar/Avatar.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
 import { Avatar } from 'react95';
 import styled from 'styled-components';
 

src/Bar/Bar.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { renderWithTheme } from '../../test/utils';
 
 import { Bar } from './Bar';