chore(carbon__icons-react): ship TypeScript definitions

.github/workflows/ci.yml

@@ -219,3 +219,25 @@ jobs:
         with:
           name: playwright-report
           path: .playwright
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+      - uses: actions/cache@v3
+        id: cache
+        with:
+          path: |
+            node_modules
+            */**/node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn build --ignore '@carbon/sketch'
+      - name: Typecheck TypeScript files
+        run: yarn typecheck

.gitignore

@@ -57,3 +57,6 @@ package-lock.json
 
 # Playwright
 .playwright
+
+# TypeScript
+tsconfig.tsbuildinfo

package.json

@@ -26,6 +26,7 @@
     "sync": "carbon-cli sync",
     "test": "cross-env BABEL_ENV=test jest",
     "test:e2e": "cross-env BABEL_ENV=test jest -c jest.e2e.config.js",
+    "typecheck": "tsc -b",
     "postinstall": "husky install"
   },
   "resolutions": {
@@ -73,7 +74,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.0",
-    "stylelint": "^14.3.0"
+    "stylelint": "^14.3.0",
+    "typescript": "^4.7.2"
   },
   "commitlint": {
     "extends": [

packages/icon-build-helpers/src/builders/react/next.js

@@ -195,6 +195,18 @@ async function builder(metadata, { output }) {
       exports: 'auto',
     });
   }
+
+  let declarationFile = `${templates.banner}
+
+import { Icon } from './types/Icon';
+
+`;
+
+  for (const m of modules) {
+    declarationFile += `export const ${m.name}: Icon;\n`;
+  }
+
+  await fs.writeFile(path.join(output, 'index.d.ts'), declarationFile);
 }
 
 /**

packages/icons-react/.gitignore

@@ -1,2 +1,2 @@
-# TODO: remove in v11
-/next
+# Generated declaration file
+index.d.ts

packages/icons-react/package.json

@@ -13,7 +13,9 @@
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
   "files": [
     "es",
-    "lib"
+    "lib",
+    "index.d.ts",
+    "types"
   ],
   "keywords": [
     "ibm",
@@ -29,9 +31,10 @@
   },
   "scripts": {
     "build": "yarn clean && node tasks/build.js",
-    "clean": "rimraf es lib",
+    "clean": "rimraf es lib index.d.ts",
     "postinstall": "carbon-telemetry collect --install"
   },
+  "types": "./index.d.ts",
   "peerDependencies": {
     "react": ">=16"
   },

packages/icons-react/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["index.d.ts", "types"]
+}

packages/icons-react/types/Icon.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright IBM Corp. 2019, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+
+type IconSize = 16 | 20 | 24 | 32 | '16' | '20' | '24' | '32' | number | string;
+
+// Inspired by the original types defined in DefinitelyTyped:
+// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/31fb0ded56cff23b7e6693bd673b00f41dc00bbe/types/carbon__icons-react/index.d.ts
+interface IconProps
+  extends Omit<
+    React.SVGProps<React.ReactSVGElement>,
+    'ref' | 'tabIndex' | 'aria-hidden'
+  > {
+  /**
+   * @default "currentColor"
+   */
+  fill: string;
+
+  /**
+   * Specify the size of the icon. This value can be one of the predetermined
+   * sizes for this icon (16, 20, 24, 32) or it can be a custom value that is
+   * used for the width and height of the element
+   *
+   * @default 16
+   */
+  size?: IconSize;
+
+  /**
+   * @default "http://www.w3.org/2000/svg"
+   */
+  xmlns?: string;
+}
+
+export type Icon = React.ForwardRefExoticComponent<
+  IconProps & React.RefAttributes<SVGSVGElement>
+>;

tsconfig.base.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015.iterable", "es2015.generator", "es5"],
+    "moduleResolution": "node",
+
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "composite": true,
+    "noEmitOnError": true,
+
+    "strictNullChecks": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictPropertyInitialization": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "alwaysStrict": true,
+    "preserveConstEnums": true,
+
+    "jsx": "preserve",
+
+    "types": []
+  }
+}

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./packages/icons-react"
+    }
+  ]
+}

yarn.lock

@@ -10796,6 +10796,7 @@ __metadata:
     react-dom: ^17.0.2
     rimraf: ^3.0.0
     stylelint: ^14.3.0
+    typescript: ^4.7.2
   languageName: unknown
   linkType: soft
 
@@ -30908,23 +30909,23 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.6.4":
-  version: 4.7.2
-  resolution: "typescript@npm:4.7.2"
+"typescript@npm:^4.6.4, typescript@npm:^4.7.2":
+  version: 4.8.2
+  resolution: "typescript@npm:4.8.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 5163585e6b56410f77d5483b698d9489bbee8902c99029eb70cf6d21525a186530ce19a00951af84eefd4a131cc51d0959f5118e25e70ab61f45ac4057dbd1ef
+  checksum: 7f5b81d0d558c9067f952c7af52ab7f19c2e70a916817929e4a5b256c93990bf3178eccb1ac8a850bc75df35f6781b6f4cb3370ce20d8b1ded92ed462348f628
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.6.4#~builtin<compat/typescript>":
-  version: 4.7.2
-  resolution: "typescript@patch:typescript@npm%3A4.7.2#~builtin<compat/typescript>::version=4.7.2&hash=7ad353"
+"typescript@patch:typescript@^4.6.4#~builtin<compat/typescript>, typescript@patch:typescript@^4.7.2#~builtin<compat/typescript>":
+  version: 4.8.2
+  resolution: "typescript@patch:typescript@npm%3A4.8.2#~builtin<compat/typescript>::version=4.8.2&hash=7ad353"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 7e2b9a9f4a70fb7616f1b0d986977f8e34a74f046202fa7f24fdee79589598277810fa216b3776c20c0683a9235872c73be34fdb93f67f98c1efaca40999422f
+  checksum: 6f49363af8af2fe480da1d5fa68712644438785208b06690a3cbe5e7365fd652c3a0f1e587bc8684d78fb69de3dde4de185c0bad7bb4f3664ddfc813ce8caad6
   languageName: node
   linkType: hard