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

src/Bar/Bar.stories.tsx

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

src/Button/Button.spec.tsx

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

src/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
   Button,
   Cutout,

src/Checkbox/Checkbox.spec.tsx

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

src/ColorInput/ColorInput.spec.tsx

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

src/ColorInput/ColorInput.stories.tsx

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

src/Counter/Counter.spec.tsx

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

src/Counter/Counter.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Button, Counter, Panel } from 'react95';
 import styled from 'styled-components';
 

src/Cutout/Cutout.spec.tsx

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

src/Cutout/Cutout.stories.tsx

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

src/DatePicker/DatePicker.stories.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable camelcase, react/jsx-pascal-case */
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
 import { DatePicker__UNSTABLE } from 'react95';
 import styled from 'styled-components';
 

src/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Button } from '../Button/Button';

src/Desktop/Desktop.spec.tsx

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

src/Desktop/Desktop.stories.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
-
-import { Desktop } from 'react95';
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Desktop } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;

src/Divider/Divider.spec.tsx

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

src/Divider/Divider.stories.tsx

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

src/Fieldset/Fieldset.spec.tsx

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

src/Fieldset/Fieldset.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95';
 import styled from 'styled-components';
 

src/Hourglass/Hourglass.stories.tsx

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
-
-import { Hourglass } from 'react95';
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { Hourglass } from 'react95';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   padding: 5rem;

src/Hourglass/Hourglass.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { getSize } from '../common/utils';
 import base64hourglass from './base64hourglass';

src/List/List.spec.tsx

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

src/List/List.stories.tsx

@@ -1,7 +1,8 @@
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
 import styled from 'styled-components';
 
-import { List, ListItem, Bar, Divider } from 'react95';
+import { Bar, Divider, List, ListItem } from 'react95';
 
 const Wrapper = styled.div`
   padding: 5rem;

src/ListItem/ListItem.spec.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { renderWithTheme, theme } from '../../test/utils';
 import { blockSizes } from '../common/system';
 import { ListItem } from './ListItem';

src/LoadingIndicator/LoadingIndicator.spec.tsx

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

src/LoadingIndicator/LoadingIndicator.stories.tsx

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

src/NumberField/NumberField.spec.tsx

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

src/NumberField/NumberField.stories.tsx

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

src/Panel/Panel.spec.tsx

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

src/Panel/Panel.stories.tsx

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

src/Progress/Progress.spec.tsx

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

src/Progress/Progress.stories.tsx

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

src/Radio/Radio.spec.tsx

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

src/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
 import { Cutout, Fieldset, Select, Window, WindowContent } from 'react95';
 import styled from 'styled-components';
 import { SelectChangeEvent, SelectOption } from './Select.types';

src/Slider/Slider.spec.tsx

@@ -1,6 +1,6 @@
 // Pretty much straight out copied from https://github.com/mui-org/material-ui 😂
-
 import { fireEvent } from '@testing-library/react';
+import React from 'react';
 
 import { renderWithTheme, Touch } from '../../test/utils';
 import { Slider } from './Slider';

src/Slider/Slider.stories.tsx

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

src/Slider/Slider.tsx

@@ -187,10 +187,10 @@ const sharedGrooveStyles = () => css<StyledSliderProps>`
           width: 100%;
         `}
 `;
-const StyledGroove = styled(StyledCutout)`
+const StyledGroove = styled(StyledCutout)<StyledSliderProps>`
   ${sharedGrooveStyles()}
 `;
-const StyledFlatGroove = styled(StyledCutout)`
+const StyledFlatGroove = styled(StyledCutout)<StyledSliderProps>`
   ${sharedGrooveStyles()}
 
   border-left-color: ${({ theme }) => theme.flatLight};

src/Tab/Tab.spec.tsx

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

src/TabBody/TabBody.spec.tsx

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

src/Table/Table.spec.tsx

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

src/Table/Table.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
+import React from 'react';
 import {
   Table,
   TableBody,

src/Tabs/Tabs.spec.tsx

@@ -1,7 +1,8 @@
 import { fireEvent } from '@testing-library/react';
+import React from 'react';
 
-import { renderWithTheme } from '../../test/utils';
 import { Tab } from '..';
+import { renderWithTheme } from '../../test/utils';
 import { Tabs } from './Tabs';
 
 describe('<Tabs />', () => {

src/Tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
   Anchor,
   Checkbox,

src/TextField/TextField.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta } from '@storybook/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Button, Cutout, TextField } from 'react95';
 import styled from 'styled-components';
 

src/Toolbar/Toolbar.spec.tsx

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

src/Tooltip/Tooltip.spec.tsx

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