Fix build

.github/workflows/build.yml

@@ -15,20 +15,20 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
 
       - run: yarn audit
 
       - run: yarn lint
-      - run: yarn lint:copyright ${{ github.workspace }}/*/**.{js,ts,tsx}
+      - run: yarn workspace @itwin/itwinui-react lint:copyright ${{ github.workspace }}/*/**.{js,ts,tsx}
       - run: yarn build
-      - run: yarn build-storybook
+      - run: yarn workspace @itwin/itwinui-react build-storybook
 
   unit-test:
     name: Run unit tests
@@ -37,21 +37,21 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
 
-      - run: yarn test --coverage
+      - run: yarn workspace @itwin/itwinui-react test --coverage
 
       - name: Publish test results
         uses: EnricoMi/publish-unit-test-result-action@v1.16
         if: always()
         with:
-          files: 'coverage/junit.xml'
+          files: 'packages/iTwinUI-react/coverage/junit.xml'
           comment_mode: off
           check_name: 'Test results'
           fail_on: 'nothing'
@@ -63,14 +63,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           cache: yarn
 
       - run: yarn install --frozen-lockfile
 
       # `&` symbol is needed as it prevents Storybook from running endlessly
-      - run: yarn storybook &
-      - run: yarn creevey
+      - run: yarn workspace @itwin/itwinui-react storybook &
+      - run: yarn workspace @itwin/itwinui-react creevey

.github/workflows/publish-storybook.yml

@@ -13,10 +13,11 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
-        uses: actions/setup-node@v2.1.5
+      - name: Use Node 16.X
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
+          cache: yarn
 
       - run: yarn install --frozen-lockfile
       - run: yarn build-storybook

.github/workflows/release-please.yml

@@ -28,10 +28,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node 12.X
+      - name: Use Node 16.X
         uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: 16.x
           registry-url: https://registry.npmjs.org/
 
       - run: yarn install

package.json

@@ -14,7 +14,7 @@
     "test": "turbo run test"
   },
   "devDependencies": {
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.1",
     "turbo": "latest"
   },
   "engines": {

packages/iTwinUI-react/.eslintignore

@@ -1,6 +1,13 @@
-node_modules/**
-scripts/**
-lib/**
-custom.d.ts
-storybook-static/**
-tests/**
+**/*.json
+node_modules
+public
+styles
+.next
+coverage
+dist
+.turbo
+storybook-static
+scripts
+lib
+*.d.ts
+tests

packages/iTwinUI-react/.eslintrc.js

@@ -3,42 +3,45 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 module.exports = {
-  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  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
+    sourceType: 'module', // Allows for the use of imports
     ecmaFeatures: {
-      jsx: true // Allows for the parsing of JSX
-    }
+      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
-    }
+      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",
-    "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.
+    '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
+    'prettier/prettier': [1],
+    'react/prop-types': 'off',
+    'react/function-component-definition': [
+      1,
+      {
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
+      },
     ],
-    "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", ".."]
+    '@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/iTwinUI-react/.gitignore

@@ -27,7 +27,8 @@ debug.log*
 
 # Compiled Components
 lib/
-lib/*
+cjs
+esm
 
 # Compiled Styles
 src/**/*.css

packages/iTwinUI-react/package.json

@@ -6,6 +6,7 @@
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "typings": "cjs/index.d.ts",
+  "files": ["cjs", "esm"],
   "description": "A react implementation of our iTwinUI UX standards",
   "homepage": "https://github.com/iTwin/iTwinUI-react",
   "keywords": [
@@ -23,20 +24,21 @@
     "ux"
   ],
   "scripts": {
-    "build": "yarn clean && yarn mkdirp lib/ && yarn copy-files && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build": "yarn clean && tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
     "build:watch": "yarn clean && yarn mkdirp lib/ && yarn copy-files && concurrently \"tsc -p tsconfig.cjs.json --watch\" \"tsc -p tsconfig.esm.json --watch\"",
-    "clean": "yarn clean:coverage && yarn clean:lib",
+    "clean": "yarn clean:coverage && yarn clean:lib && rimraf esm && rimraf cjs",
     "clean:coverage": "rimraf coverage",
     "clean:lib": "rimraf lib",
     "test": "jest",
     "test:watch": "jest --watch",
     "createComponent": "node scripts/createComponent.js",
     "pretty": "prettier --config .prettierrc \"scripts/**/*\" src/{__tests__,core,style,utils}/**/*{tsx,ts,jsx,js,css,scss} --write",
-    "lint": "eslint */**/*.{js,ts,tsx} --max-warnings=0",
+    "lint": "eslint --ext .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 package.json lib && cpx \"{README,LICENSE,CHANGELOG}.md \" lib",
     "storybook": "start-storybook -p 6006",
+    "dev": "yarn storybook",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
@@ -73,14 +75,15 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-transition-group": "^2.9.2",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "cpx": "^1.5.0",
     "creevey": "^0.8.0-beta.0",
-    "eslint": "^7.32.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",
@@ -101,7 +104,7 @@
     "storybook-dark-mode": "^1.0.9",
     "tippy.js": "^6.3.1",
     "ts-jest": "^27.0.4",
-    "ts-loader": "^8.0.1",
+    "ts-loader": "^9.2.8",
     "ts-node": "^8.0.2",
     "typescript": "^4.4.3",
     "webpack": "5"

packages/iTwinUI-react/src/core/Breadcrumbs/Breadcrumbs.tsx

@@ -59,7 +59,9 @@ export const Breadcrumbs = React.forwardRef(
 
     useTheme();
 
-    const [overflowRef, visibleCount] = useOverflow(items);
+    const [overflowRef, visibleCount] = useOverflow(
+      React.Children.toArray(items),
+    );
     const refs = useMergedRefs(overflowRef, ref);
 
     const Separator = () => (

packages/iTwinUI-react/tsconfig.cjs.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "lib/cjs",
+    "outDir": "cjs",
     "module": "commonjs"
   }
 }

packages/iTwinUI-react/tsconfig.esm.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "lib/esm",
+    "outDir": "esm",
     "module": "esnext"
   }
 }

packages/iTwinUI-react/tsconfig.json

@@ -19,6 +19,7 @@
     "skipLibCheck": true
   },
   "exclude": [
-    "lib/**/*"
+    "cjd/**/*",
+    "esm/**/*",
   ]
 }