From 288263f83a9285b347a862b328e67abce2136e9b Mon Sep 17 00:00:00 2001 From: Jay Cary Date: Wed, 14 Oct 2026 17:23:20 -0400 Subject: [PATCH 1/5] Export types and fix tooltip trigger remounting --- CHANGELOG.md | 2 + scripts/build-module-indexes.js | 1 + scripts/build-package.js | 16 +++- src/components/accordion/accordion.tsx | 4 +- src/components/accordion/index.js | 1 + src/components/button/button.tsx | 4 +- src/components/button/index.js | 1 + .../chevronous-text/chevronous-text.tsx | 4 +- src/components/chevronous-text/index.js | 1 + src/components/code-snippet/code-snippet.tsx | 4 +- src/components/code-snippet/index.js | 1 + src/components/context-menu/context-menu.tsx | 4 +- src/components/context-menu/index.js | 1 + .../control-alert/control-alert.tsx | 4 +- src/components/control-alert/index.js | 1 + .../control-checkbox-set.tsx | 4 +- src/components/control-checkbox-set/index.js | 1 + src/components/control-file/control-file.tsx | 4 +- src/components/control-file/index.js | 1 + .../control-label/control-label.tsx | 4 +- src/components/control-label/index.js | 1 + .../control-radio-set/control-radio-set.tsx | 4 +- src/components/control-radio-set/index.js | 1 + .../control-range/control-range.tsx | 4 +- src/components/control-range/index.js | 1 + .../control-select/control-select.tsx | 4 +- src/components/control-select/index.js | 1 + .../control-switch/control-switch.tsx | 4 +- src/components/control-switch/index.js | 1 + src/components/control-text/control-text.tsx | 4 +- src/components/control-text/index.js | 1 + .../control-textarea/control-textarea.tsx | 4 +- src/components/control-textarea/index.js | 1 + .../control-toggle-set/control-toggle-set.tsx | 4 +- src/components/control-toggle-set/index.js | 1 + .../control-wrapper/control-wrapper.tsx | 4 +- src/components/control-wrapper/index.js | 1 + src/components/copiable/copiable.tsx | 4 +- src/components/copiable/index.js | 1 + src/components/copy-button/copy-button.tsx | 4 +- src/components/copy-button/index.js | 1 + src/components/drawer/drawer.tsx | 4 +- src/components/drawer/index.js | 1 + src/components/form-submit/form-submit.tsx | 4 +- src/components/form-submit/index.js | 1 + src/components/form/form.tsx | 57 ++++++++----- src/components/form/index.js | 1 + src/components/icon-text/icon-text.tsx | 4 +- src/components/icon-text/index.js | 1 + src/components/icon/icon.tsx | 4 +- src/components/icon/index.js | 1 + src/components/loader-full/index.js | 1 + src/components/loader-full/loader-full.tsx | 6 +- src/components/loader-local/index.js | 1 + src/components/loader-local/loader-local.tsx | 6 +- .../minimum-duration-loader/index.js | 1 + .../minimum-duration-loader.tsx | 4 +- src/components/modal/index.js | 1 + src/components/modal/modal-actions.tsx | 4 +- src/components/modal/modal.tsx | 4 +- .../page-loading-indicator/index.js | 1 + src/components/popover/index.js | 1 + src/components/popover/popover.tsx | 4 +- src/components/select/index.js | 1 + src/components/select/select.tsx | 4 +- src/components/tabs/index.js | 1 + src/components/tabs/tab-item.tsx | 4 +- src/components/tabs/tabs.tsx | 6 +- src/components/toast/index.js | 1 + src/components/toast/toast.tsx | 4 +- src/components/tooltip/index.js | 1 + src/components/tooltip/tooltip.test.tsx | 49 ++++++++++++ src/components/tooltip/tooltip.tsx | 80 ++++++++++++------- tsconfig.build.json | 17 ++++ 74 files changed, 273 insertions(+), 121 deletions(-) create mode 100644 tsconfig.build.json diff --git a/CHANGELOG.md b/CHANGELOG.md index d5381df9..e3411d49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ ## Changelog ## HEAD +- [feature] Ship TypeScript declarations and export component Props types. +- [fix] Tooltip no longer remounts its trigger on every render. - [fix] Update warning text from `color-orange-deep` to `color-orange-dark` to match conventions in Studio. ## 2.24.3 diff --git a/scripts/build-module-indexes.js b/scripts/build-module-indexes.js index 05132a31..7bd2dee4 100755 --- a/scripts/build-module-indexes.js +++ b/scripts/build-module-indexes.js @@ -11,6 +11,7 @@ const srcRoot = path.resolve(__dirname, '../src/components'); function generateIndex(moduleName) { const content = `import main from './${moduleName}'; +export * from './${moduleName}'; export default main; `; const filename = path.resolve(srcRoot, moduleName, 'index.js'); diff --git a/scripts/build-package.js b/scripts/build-package.js index 1d4c4882..5c6c60e8 100755 --- a/scripts/build-package.js +++ b/scripts/build-package.js @@ -31,6 +31,15 @@ function compileComponents() { ); } +// Emit TypeScript declarations alongside the compiled files, mirroring +// babel's layout so each `/index.js` gets an `index.d.ts`. +function emitDeclarations() { + return execa.shell(`tsc -p "${rootDir}/tsconfig.build.json"`, { + cwd: rootDir, + stdio: 'inherit' + }); +} + function copyFiles() { const filesToCopy = ['LICENSE', 'CHANGELOG.md', 'README.md']; @@ -62,5 +71,10 @@ function createPackageJson() { del(outputDir) .then(() => makeDir(outputDir)) .then(() => - Promise.all([compileComponents(), copyFiles(), createPackageJson()]) + Promise.all([ + compileComponents(), + emitDeclarations(), + copyFiles(), + createPackageJson() + ]) ); diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index b2698393..3fe2e408 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -10,7 +10,7 @@ interface Item { disabled?: boolean; } -interface Props { +export interface AccordionProps { items: Array; onToggle: (id: string) => void; activeItem?: string; @@ -28,7 +28,7 @@ export default function Accordion({ themeItemBody, themeItemHeader = 'txt-s txt-bold txt-truncate link link--gray py6', themeItemHeaderDisabled = 'color-gray-light' -}: Props): ReactElement { +}: AccordionProps): ReactElement { const renderItems = (item: Item) => { const { id, header, body, disabled } = item; const active = id === activeItem; diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js index 097d0a3b..a6d5cf82 100644 --- a/src/components/accordion/index.js +++ b/src/components/accordion/index.js @@ -1,3 +1,4 @@ import main from './accordion'; +export * from './accordion'; export default main; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 14d249cc..f1b2429e 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -6,7 +6,7 @@ type Variant = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'appPrimar type Width = 'small' | 'medium' | 'large' | 'full'; type Size = 'small' | 'medium' | 'large'; -interface Props { +export interface ButtonProps { children: ReactNode; variant?: Variant; color?: string; @@ -100,7 +100,7 @@ export default function Button({ passthroughProps, href, children -}: Props): ReactElement { +}: ButtonProps): ReactElement { const isSmall: boolean = size === 'small'; const isMedium: boolean = size === 'medium'; diff --git a/src/components/button/index.js b/src/components/button/index.js index ec63ae79..8da6fd79 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -1,3 +1,4 @@ import main from './button'; +export * from './button'; export default main; diff --git a/src/components/chevronous-text/chevronous-text.tsx b/src/components/chevronous-text/chevronous-text.tsx index dfea2fc9..93dee359 100644 --- a/src/components/chevronous-text/chevronous-text.tsx +++ b/src/components/chevronous-text/chevronous-text.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'; import PropTypes from 'prop-types'; import Icon from '../icon'; -interface Props { +export interface ChevronousTextProps { text: string; iconBefore?: boolean; iconSize?: number | string; @@ -12,7 +12,7 @@ export default function ChevronousText({ text, iconBefore = false, iconSize = '1.5em' -}: Props): ReactElement { +}: ChevronousTextProps): ReactElement { const splitText = text.split(' '); const iconWord = iconBefore ? splitText.shift() : splitText.pop(); diff --git a/src/components/chevronous-text/index.js b/src/components/chevronous-text/index.js index 006f8322..10a21996 100644 --- a/src/components/chevronous-text/index.js +++ b/src/components/chevronous-text/index.js @@ -1,3 +1,4 @@ import main from './chevronous-text'; +export * from './chevronous-text'; export default main; diff --git a/src/components/code-snippet/code-snippet.tsx b/src/components/code-snippet/code-snippet.tsx index b8f2457f..5da9bc6c 100644 --- a/src/components/code-snippet/code-snippet.tsx +++ b/src/components/code-snippet/code-snippet.tsx @@ -75,7 +75,7 @@ const defaultTheme = ` // Theme cache, used to prevent the creation of multiple