Add TypeScript types for JavaScript components (#413)

* Add TypeScript types for JavaScript components

* Include d.ts in published package

* Explicitly specify types

* Fix typings issues

- target is optional in lifecycle
- incorrect arg signature on tooltip#show

* Add pull request reference to CHANGELOG

CHANGELOG.md

@@ -44,6 +44,10 @@
   - `close.svg` (use `close` icon instead)
   - `hero.png`
 
+### New Features
+
+- Add TypeScript types for JavaScript components. ([#413](https://github.com/18F/identity-design-system/pull/413))
+
 ### Bug Fixes
 
 - Add missing JavaScript exports for `button`, `inPageNavigation`, `inputMask`, `languageSelector`, and `range`. ([#407](https://github.com/18F/identity-design-system/pull/407))

index.d.ts

@@ -0,0 +1,67 @@
+import {
+  accordion as baseAccordion,
+  banner as baseBanner,
+  characterCount as baseCharacterCount,
+  comboBox as baseComboBox,
+  datePicker as baseDatePicker,
+  dateRangePicker as baseDateRangePicker,
+  fileInput as baseFileInput,
+  footer as baseFooter,
+  inPageNavigation as baseInPageNavigation,
+  inputMask as baseInputMask,
+  languageSelector as baseLanguageSelector,
+  modal as baseModal,
+  navigation as baseHeader,
+  password as basePassword,
+  search as baseSearch,
+  skipnav as baseSkipnav,
+  timePicker as baseTimePicker,
+  table as baseTable,
+  tooltip as baseTooltip,
+  validator as baseValidation,
+} from '@uswds/uswds';
+
+type ComponentLifecycle = (target?: HTMLElement) => any;
+
+interface BaseComponent {
+  on: ComponentLifecycle;
+  off: ComponentLifecycle;
+}
+
+interface Button extends BaseComponent {}
+
+interface Range extends BaseComponent {
+  updateCallout(targetRange: HTMLInputElement): void;
+}
+
+type Tooltip = typeof baseTooltip &
+  BaseComponent & {
+    show(
+      tooltipBody: HTMLElement,
+      tooltipTrigger: Element,
+      position: 'top' | 'right' | 'left' | 'bottom',
+    ): void;
+  };
+
+export const accordion: typeof baseAccordion & BaseComponent;
+export const banner: typeof baseBanner & BaseComponent;
+export const button: Button;
+export const characterCount: typeof baseCharacterCount & BaseComponent;
+export const comboBox: typeof baseComboBox & BaseComponent;
+export const datePicker: typeof baseDatePicker & BaseComponent;
+export const dateRangePicker: typeof baseDateRangePicker & BaseComponent;
+export const fileInput: typeof baseFileInput & BaseComponent;
+export const footer: typeof baseFooter & BaseComponent;
+export const inPageNavigation: typeof baseInPageNavigation & BaseComponent;
+export const inputMask: typeof baseInputMask & BaseComponent;
+export const languageSelector: typeof baseLanguageSelector & BaseComponent;
+export const modal: typeof baseModal & BaseComponent;
+export const header: typeof baseHeader & BaseComponent;
+export const password: typeof basePassword & BaseComponent;
+export const range: Range;
+export const search: typeof baseSearch & BaseComponent;
+export const skipnav: typeof baseSkipnav & BaseComponent;
+export const timePicker: typeof baseTimePicker & BaseComponent;
+export const table: typeof baseTable & BaseComponent;
+export const tooltip: Tooltip;
+export const validation: typeof baseValidation & BaseComponent;

package.json

@@ -24,6 +24,7 @@
     "./dist/assets/js/main": "./dist/assets/js/main.js",
     "./dist/assets/js/main.js": "./dist/assets/js/main.js"
   },
+  "types": "./index.d.ts",
   "sideEffects": [
     "./dist/assets/js/main.js",
     "./build/*/auto.js"
@@ -53,6 +54,7 @@
     "prepublishOnly": "make lint && make clean && make build-assets build-package"
   },
   "files": [
+    "index.d.ts",
     "build",
     "dist/assets/**/*",
     "packages",
@@ -73,6 +75,7 @@
   },
   "homepage": "https://github.com/18F/identity-design-system#readme",
   "dependencies": {
+    "@types/uswds__uswds": "^3.3.3",
     "@uswds/uswds": "^3.7.1"
   },
   "devDependencies": {
@@ -82,7 +85,6 @@
     "@types/html_codesniffer": "^2.5.4",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.4",
-    "@types/uswds__uswds": "^3.3.3",
     "browserslist": "^4.22.2",
     "esbuild": "^0.19.9",
     "eslint": "^8.39.0",