build: update build so that themes declarations are exported

This replaces rollup-plugin-dts with the more traditional @rollup/plugin-typescript, as well as move
some types around so themes can be exported as a standalone with its own TypeScript config.

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

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

@@ -45,7 +45,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": {
@@ -61,6 +60,7 @@
     "@babel/plugin-transform-runtime": "^7.18.9",
     "@babel/preset-env": "^7.18.9",
     "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-typescript": "^8.3.4",
     "@storybook/addon-docs": "^6.5.9",
     "@storybook/addon-storysource": "^6.5.9",
     "@storybook/react": "^6.5.9",
@@ -103,7 +103,6 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-replace": "^2.2.0",

rollup.config.js

@@ -1,44 +1,24 @@
 import esbuild from 'rollup-plugin-esbuild';
 import copy from 'rollup-plugin-copy';
-import dts from 'rollup-plugin-dts';
+import typescript from '@rollup/plugin-typescript';
 import replace from 'rollup-plugin-replace';
 import packageJson from './package.json';
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 
-const bundle = config => [
-  {
-    ...config,
-    external: id => !/^[./]/.test(id),
-    plugins: [
-      ...config.plugins,
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
-      }),
-      esbuild({ loaders: { '.js': 'jsx' } })
-    ]
-  },
-  {
-    ...config,
-    output: config.output.dir
-      ? config.output
-      : {
-          file: packageJson.types,
-          format: 'es'
-        },
-    external: id => !/^[./]/.test(id),
-    plugins: [
-      ...config.plugins,
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
-      }),
-      dts()
-    ]
-  }
-];
+const baseBundle = {
+  external: id => !/^[./]/.test(id),
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
+    }),
+    esbuild()
+  ]
+};
 
 export default [
-  ...bundle({
+  {
+    ...baseBundle,
     input: './src/index.ts',
     output: [
       {
@@ -52,23 +32,39 @@ export default [
         sourcemap: true
       }
     ],
-    plugins: []
-  }),
-  ...bundle({
+    plugins: [
+      ...baseBundle.plugins,
+      typescript({
+        tsconfig: './tsconfig.build.index.json',
+        declaration: true,
+        declarationDir: 'dist'
+      })
+    ]
+  },
+  {
+    ...baseBundle,
     input: './src/common/themes/index.ts',
     output: {
       dir: 'dist/themes',
       exports: 'default',
-      format: 'cjs'
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src/common/themes',
+      sourcemap: true
     },
-    preserveModules: true,
     plugins: [
+      ...baseBundle.plugins,
       copy({
         targets: [
           { src: './src/assets/fonts/dist/*', dest: './dist/fonts' },
           { src: './src/assets/images/*', dest: './dist/images' }
         ]
+      }),
+      typescript({
+        tsconfig: './tsconfig.build.themes.json',
+        declaration: true,
+        declarationDir: 'dist/themes'
       })
     ]
-  })
+  }
 ];

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