Beta

.babelrc

@@ -1,24 +1,59 @@
 {
+  "sourceType": "unambiguous",
   "presets": [
     [
       "@babel/preset-env",
       {
-        "modules": false
+        "shippedProposals": true,
+        "loose": true
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-typescript"
   ],
   "plugins": [
-    "babel-plugin-styled-components",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "presets": ["@babel/preset-env"],
-      "plugins": [
-        ["babel-plugin-styled-components", { "ssr": false, "displayName": false }]
-      ]
-    }
-  }
+    "@babel/plugin-transform-shorthand-properties",
+    "@babel/plugin-transform-block-scoping",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-property-in-object",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "loose": true,
+        "useBuiltIns": true
+      }
+    ],
+    "@babel/plugin-transform-classes",
+    "@babel/plugin-transform-arrow-functions",
+    "@babel/plugin-transform-parameters",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-spread",
+    "@babel/plugin-transform-for-of",
+    "babel-plugin-macros",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
 }

.codesandbox/ci.json

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

.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,72 @@
 module.exports = {
-  extends: ['airbnb', 'plugin:prettier/recommended'],
-  parser: '@babel/eslint-parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'airbnb',
+    'plugin:prettier/recommended',
+    'plugin:react-hooks/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',
+    'no-nested-ternary': '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/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'
       }
+    },
+    {
+      files: ['*.@(ts|tsx)'],
+      rules: {
+        // This is handled by @typescript-eslint/no-unused-vars
+        'no-undef': 'off'
+      }
+    }
+  ],
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx']
+    },
+    'import/resolver': {
+      typescript: {}
     }
-  ]
+  }
 };

.github/workflows/ci.yml

@@ -4,6 +4,58 @@ on:
   pull_request:
 
 jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Cache packages
+        uses: actions/cache@v3
+        with:
+          key: node_modules-v4-${{ hashFiles('yarn.lock') }}
+          path: |-
+            node_modules
+            */node_modules
+          restore-keys: 'node_modules-v4-'
+
+      - name: Yarn install
+        run: yarn install --ignore-optional --frozen-lockfile
+
+      - name: Lint
+        run: yarn run lint
+
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Cache packages
+        uses: actions/cache@v3
+        with:
+          key: node_modules-v4-${{ hashFiles('yarn.lock') }}
+          path: |-
+            node_modules
+            */node_modules
+          restore-keys: 'node_modules-v4-'
+
+      - name: Yarn install
+        run: yarn install --ignore-optional --frozen-lockfile
+
+      - name: Type Check
+        run: yarn run typescript
+
   test:
     runs-on: ubuntu-latest
     steps:

.storybook/decorators/globalStyle.js → .storybook/decorators/withGlobalStyle.tsx

@@ -1,10 +1,10 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
-import styleReset from '../../src/common/styleReset';
-// TODO is there a way to keep import paths consistent with what end user will get?
 import ms_sans_serif from '../../src/assets/fonts/dist/ms_sans_serif.woff2';
 import ms_sans_serif_bold from '../../src/assets/fonts/dist/ms_sans_serif_bold.woff2';
+import styleReset from '../../src/common/styleReset';
 
 const GlobalStyle = createGlobalStyle`
   ${styleReset}
@@ -20,14 +20,21 @@ const GlobalStyle = createGlobalStyle`
     font-weight: bold;
     font-style: normal
   }
+  html, body, #root {
+   height: 100%;
+  }
+  #root > * {
+    height: 100%;
+    box-sizing: border-box;
+  }
   body {
     font-family: 'ms_sans_serif', 'sans-serif';
   }
 `;
 
-export default storyFn => (
+export const withGlobalStyle: DecoratorFn = story => (
   <>
     <GlobalStyle />
-    {storyFn()}
+    {story()}
   </>
 );

.storybook/main.ts

@@ -0,0 +1,52 @@
+import type { StorybookConfig } from '@storybook/react/types';
+import type { PropItem } from 'react-docgen-typescript';
+
+const path = require('path');
+
+const storybookConfig: StorybookConfig = {
+  stories: ['../@(docs|src)/**/*.stories.@(tsx|mdx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        sourceLoaderOptions: {
+          injectStoryParameters: false
+        }
+      }
+    },
+    '@storybook/addon-storysource',
+    './theme-picker/register.ts'
+  ],
+  core: {
+    builder: 'webpack5'
+  },
+  features: {
+    babelModeV7: true,
+    storyStoreV7: true,
+    modernInlineRender: true,
+    postcss: false
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop: PropItem) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
+    }
+  },
+  webpackFinal: config => {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        react95: path.resolve(__dirname, '../src/index')
+      }
+    };
+
+    return config;
+  }
+};
+
+module.exports = storybookConfig;

.storybook/manager.css

@@ -0,0 +1,7 @@
+/* Remove from the sidebar menu stories that contains "unstable" */
+a[data-item-id$='-unstable'].sidebar-item,
+a[data-item-id*='-unstable-'].sidebar-item,
+button[data-item-id$='-unstable'].sidebar-item,
+button[data-item-id$='-unstable-'].sidebar-item {
+  display: none !important;
+}

.storybook/manager.ts

@@ -0,0 +1,8 @@
+import './manager.css';
+
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme
+});