chore: install and configure TypeScript

This commit:
- Adds .editorconfig file
- Installs TypeScript and necessary dependencies
- Configures TypeScript tsconfig.json
- Configures Rollup to use esbuild and export .d.ts
- Converts entry files to TypeScript
- Configures Storybook to generate docs based on types
- Configures TypeScript on ESLint
- Configures Jest and ts-jest for TypeScript
- Fixes no-use-before-define problems on stories
- Ignores @typescript-eslint/no-unused-vars on mapFromWindowsTheme
- Fixes test failure on CSS check

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = yes
+insert_final_newline = yes

.eslintrc.js

@@ -1,30 +1,64 @@
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended'],
-  parser: '@babel/eslint-parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'airbnb',
+    'plugin:prettier/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
   plugins: ['react', 'prettier'],
   env: {
     browser: true,
     es6: true,
     jest: true
   },
   rules: {
-    'import/no-unresolved': ['error', { ignore: ['react95'] }],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_\\d*$'
+      }
+    ],
+    'import/extensions': ['error', { js: 'never', ts: 'never', tsx: 'never' }],
+    'import/no-unresolved': [
+      'error',
+      // TODO: Remove ../../test/utils when TypeScript migration is complete
+      { ignore: ['react95', '../../test/utils'] }
+    ],
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'import/prefer-default-export': 'off',
     'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
     'jsx-a11y/label-has-for': 'off',
     'prettier/prettier': 'error',
     'react/forbid-prop-types': 'off',
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-filename-extension': [
+      'warn',
+      { extensions: ['.js', '.jsx', '.tsx'] }
+    ],
     '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']
   },
   overrides: [
     {
-      files: ['*.spec.@(js|jsx)', '*.stories.@(js|jsx)'],
+      files: ['*.spec.@(js|jsx|ts|tsx)', '*.stories.@(js|jsx|ts|tsx)'],
       rules: {
         'no-console': 'off'
       }
     }
-  ]
+  ],
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx']
+    },
+    'import/resolver': {
+      typescript: {}
+    }
+  }
 };

.storybook/main.js

@@ -1,5 +1,6 @@
+/** @type import('@storybook/react/types').StorybookConfig */
 module.exports = {
-  stories: ['../src/**/*.stories.@(js|mdx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|tsx|mdx)'],
   addons: [
     {
       name: '@storybook/addon-docs',
@@ -14,5 +15,15 @@ module.exports = {
   ],
   features: {
     postcss: false
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: prop =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
   }
 };

jest.config.js

@@ -1,4 +1,13 @@
 module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/test/setup-test'],
+  globals: {
+    extensionsToTreatAsEsm: ['.js'],
+    'ts-jest': {
+      diagnostics: false,
+      isolatedModules: true,
+      useESM: true
+    }
+  },
+  preset: 'ts-jest/presets/js-with-ts-esm',
+  setupFilesAfterEnv: ['<rootDir>/test/setup-test.ts'],
   testEnvironment: 'jsdom'
 };

package.json

@@ -23,8 +23,9 @@
   "license": "MIT",
   "repository": "[email protected]:arturbien/React95.git",
   "homepage": "https://react95.io",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "/dist"
   ],
@@ -41,7 +42,7 @@
     "test:ci": "jest ./src --maxWorkers=2",
     "test:watch": "jest ./src --watch",
     "test:coverage": "jest ./src --coverage",
-    "lint": "eslint src --ext .js",
+    "lint": "eslint --ext .js,.ts,.tsx src",
     "lint:fix": "yarn run lint --fix",
     "semantic-release": "semantic-release",
     "install:codesandbox": "yarn --ignore-engines",
@@ -66,14 +67,21 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@types/jest": "^28.1.6",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "babel-loader": "^8.2.5",
     "babel-plugin-styled-components": "^2.0.7",
     "commitizen": "^4.2.5",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
+    "esbuild": "^0.14.49",
     "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.3.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -87,17 +95,22 @@
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.77.0",
     "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",
     "semantic-release": "^19.0.3",
     "storybook-addon-styled-component-theme": "^2.0.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "ts-jest": "^28.0.7",
+    "typescript": "^4.7.4"
   },
   "dependencies": {},
   "husky": {
@@ -117,4 +130,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

rollup.config.js

@@ -1,15 +1,45 @@
-import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
-import replace from 'rollup-plugin-replace';
+import esbuild from 'rollup-plugin-esbuild';
 import copy from 'rollup-plugin-copy';
+import dts from 'rollup-plugin-dts';
+import replace from 'rollup-plugin-replace';
 import packageJson from './package.json';
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 
-export default [
+const bundle = config => [
+  {
+    ...config,
+    external: id => !/^[./]/.test(id),
+    plugins: [
+      ...config.plugins,
+      replace({
+        'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
+      }),
+      esbuild({ loaders: { '.js': 'jsx' } })
+    ]
+  },
   {
-    input: './src/index.js',
+    ...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()
+    ]
+  }
+];
+
+export default [
+  ...bundle({
+    input: './src/index.ts',
     output: [
       {
         file: packageJson.main,
@@ -18,25 +48,14 @@ export default [
       },
       {
         file: packageJson.module,
-        format: 'esm',
+        format: 'es',
         sourcemap: true
       }
     ],
-    plugins: [
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
-      }),
-      babel({
-        exclude: 'node_modules/**',
-        runtimeHelpers: true
-      }),
-      resolve(),
-      commonjs()
-    ],
-    external: id => /^react|react-dom|styled-components/.test(id)
-  },
-  {
-    input: './src/common/themes/index.js',
+    plugins: []
+  }),
+  ...bundle({
+    input: './src/common/themes/index.ts',
     output: {
       dir: 'dist/themes',
       exports: 'default',
@@ -49,17 +68,7 @@ export default [
           { src: './src/assets/fonts/dist/*', dest: './dist/fonts' },
           { src: './src/assets/images/*', dest: './dist/images' }
         ]
-      }),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
-      }),
-      babel({
-        exclude: 'node_modules/**',
-        runtimeHelpers: true
-      }),
-      resolve(),
-      commonjs()
-    ],
-    external: id => /^react|react-dom|styled-components/.test(id)
-  }
+      })
+    ]
+  })
 ];

src/AppBar/AppBar.stories.js

@@ -11,15 +11,16 @@ import {
 } from 'react95';
 import logoIMG from '../assets/images/logo.png';
 
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
+
 export default {
   title: 'AppBar',
   component: AppBar,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
-const Wrapper = styled.div`
-  padding: 5rem;
-  background: ${({ theme }) => theme.desktopBackground};
-`;
 
 export function Default() {
   const [open, setOpen] = React.useState(false);

src/Bar/Bar.stories.js

@@ -3,15 +3,16 @@ import styled from 'styled-components';
 
 import { Bar, AppBar, Toolbar, Button } from 'react95';
 
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
+
 export default {
   title: 'Bar',
   component: Bar,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
-const Wrapper = styled.div`
-  padding: 5rem;
-  background: ${({ theme }) => theme.desktopBackground};
-`;
 
 export function Default() {
   return (

src/Desktop/Desktop.stories.js

@@ -3,15 +3,16 @@ import styled from 'styled-components';
 
 import { Desktop } from 'react95';
 
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
+
 export default {
   title: 'Desktop',
   component: Desktop,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
-const Wrapper = styled.div`
-  padding: 5rem;
-  background: ${({ theme }) => theme.desktopBackground};
-`;
 
 export function Default() {
   return <Desktop backgroundStyles={{ background: 'blue' }} />;

src/Divider/Divider.stories.js

@@ -3,15 +3,16 @@ import styled from 'styled-components';
 
 import { Divider, List, ListItem } from 'react95';
 
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.desktopBackground};
+`;
+
 export default {
   title: 'Divider',
   component: Divider,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 };
-const Wrapper = styled.div`
-  padding: 5rem;
-  background: ${({ theme }) => theme.desktopBackground};
-`;
 
 export function Default() {
   return (