chore: Convert to monorepo

.vscode/settings.json

@@ -3,6 +3,7 @@
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
   "files.insertFinalNewline": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[markdown]": {
     "editor.defaultFormatter": "vscode.markdown-language-features"
   },

apps/playground/package.json

@@ -16,9 +16,11 @@
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@vitejs/plugin-react": "^1.0.7",
+    "configs": "*",
     "linaria": "^2.3.1",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",
     "vite-plugin-linaria": "^1.0.0"
-  }
+  },
+  "prettier": "configs/prettier-config"
 }

apps/playground/src/App.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Button } from '@itwin/itwinui-react';
 
 const App = () => {

apps/playground/src/main.tsx

@@ -11,7 +11,9 @@ const Shell = () => {
 
   return (
     <Main>
-      <ThemeButton onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}>
+      <ThemeButton
+        onClick={() => setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))}
+      >
         <svg aria-hidden viewBox='0 0 15 15'>
           <path
             fill='currentColor'
@@ -60,5 +62,5 @@ ReactDOM.render(
   <React.StrictMode>
     <Shell />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

apps/playground/tsconfig.json

@@ -1,16 +1,14 @@
 {
+  "extends": "configs/tsconfig.base.json",
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

apps/playground/vite.config.ts

@@ -1,12 +1,12 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import linaria from 'vite-plugin-linaria'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import linaria from 'vite-plugin-linaria';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), linaria()],
   server: {
     port: 4000,
-    open: true
-  }
-})
+    open: true,
+  },
+});

package.json

@@ -11,7 +11,8 @@
     "dev": "turbo run dev",
     "lint": "turbo run lint",
     "format": "turbo run format",
-    "test": "turbo run test"
+    "test": "turbo run test",
+    "lint-staged": "turbo run lint-staged"
   },
   "devDependencies": {
     "turbo": "latest",

packages/configs/eslint-preset.js

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+module.exports = {
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    'prettier',
+  ],
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    'react/prop-types': 'off',
+    'react/function-component-definition': [
+      1,
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
+    ],
+    '@typescript-eslint/no-empty-function': [
+      'error',
+      { allow: ['arrowFunctions'] },
+    ],
+    'react/display-name': 'off',
+    'react/self-closing-comp': [1],
+    curly: 'error',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'no-restricted-imports': ['error', '..'],
+  },
+};

packages/configs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "configs",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.js",
+  "license": "MIT",
+  "files": [
+    "eslint-preset.js",
+    "prettier-config.js",
+    "tsconfig.base.json"
+  ],
+  "dependencies": {
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-react": "^7.29.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.7",
+    "prettier": "2.2.1"
+  },
+  "prettier": "./prettier-config"
+}

packages/configs/prettier-config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  endOfLine: 'lf',
+};

packages/configs/tsconfig.base.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "declaration": true,
+    "esModuleInterop": true,
+    "sourceMap": false,
+    "allowJs": false,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "traceResolution": false,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "importHelpers": false,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  }
+}

packages/iTwinUI-react/.eslintignore

@@ -1,4 +1,3 @@
-**/*.json
 node_modules
 public
 styles
@@ -8,6 +7,7 @@ dist
 .turbo
 storybook-static
 scripts
-lib
+cjs
+esm
 *.d.ts
-tests
+tests

packages/iTwinUI-react/.eslintrc.js

@@ -2,46 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-module.exports = {
-  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-  parserOptions: {
-    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module', // Allows for the use of imports
-    ecmaFeatures: {
-      jsx: true, // Allows for the parsing of JSX
-    },
-  },
-  settings: {
-    react: {
-      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
-    },
-  },
-  extends: [
-    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
-    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
-    'plugin:react-hooks/recommended',
-    'plugin:storybook/recommended',
-    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
-  rules: {
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-    'prettier/prettier': [1],
-    'react/prop-types': 'off',
-    'react/function-component-definition': [
-      1,
-      {
-        namedComponents: 'arrow-function',
-        unnamedComponents: 'arrow-function',
-      },
-    ],
-    '@typescript-eslint/no-empty-function': [
-      'error',
-      { allow: ['arrowFunctions'] },
-    ],
-    'react/display-name': 'off',
-    'react/self-closing-comp': [1],
-    curly: 'error',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    'no-restricted-imports': ['error', '..'],
-  },
-};
+module.exports = require('configs/eslint-preset');

packages/iTwinUI-react/package.json

@@ -6,7 +6,10 @@
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "typings": "cjs/index.d.ts",
-  "files": ["cjs", "esm"],
+  "files": [
+    "cjs",
+    "esm"
+  ],
   "description": "A react implementation of our iTwinUI UX standards",
   "homepage": "https://github.com/iTwin/iTwinUI-react",
   "keywords": [
@@ -32,7 +35,7 @@
     "test:watch": "jest --watch",
     "createComponent": "node scripts/createComponent.js",
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
-    "lint": "eslint --ext .js,.ts,.tsx --max-warnings=0",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && yarn lint:copyright --fix */**/*.{js,ts,tsx}",
     "lint:copyright": "node scripts/copyrightLinter.js",
     "copy-files": "cpx ../../README.md .",
@@ -78,15 +81,9 @@
     "@typescript-eslint/parser": "^5.17.0",
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
+    "configs": "*",
     "cpx": "^1.5.0",
     "creevey": "^0.8.0-beta.0",
-    "eslint": "^8.12.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-storybook": "^0.5.7",
     "fast-glob": "^3.2.5",
     "husky": "^4.0.0",
     "inquirer": "^6.2.2",
@@ -96,7 +93,6 @@
     "lint-staged": "^12.1.2",
     "markdown-to-jsx": "6.11.4",
     "mkdirp": "^1.0.4",
-    "prettier": "2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^2.6.2",
@@ -140,6 +136,7 @@
       "yarn lint:copyright --fix"
     ]
   },
+  "prettier": "configs/prettier-config",
   "sideEffects": [
     "**/*.scss",
     "**/*.css"

packages/iTwinUI-react/tsconfig.json

@@ -1,22 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["es6", "dom"],
-    "declaration": true,
-    "esModuleInterop": true,
-    "sourceMap": false,
-    "allowJs": false,
-    "jsx": "react",
-    "moduleResolution": "node",
-    "traceResolution": false,
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "importHelpers": false,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true
-  },
-  "exclude": ["cjs/**/*", "esm/**/*"]
+  "extends": "configs/tsconfig.base.json",
+  "exclude": ["node_modules", "cjs/**/*", "esm/**/*"]
 }

yarn.lock

@@ -6626,19 +6626,12 @@ eslint-plugin-node@^11.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
-eslint-plugin-prettier@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
-  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-
 eslint-plugin-react-hooks@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
   integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
 
-eslint-plugin-react@^7.25.1:
+eslint-plugin-react@^7.29.0:
   version "7.29.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
   integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
@@ -7012,11 +7005,6 @@ fast-deep-equal@^3.0.0, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
 fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -11134,13 +11122,6 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
 prettier@2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"