From 5cde11071967cd98c662210bb182d7f4b7034d47 Mon Sep 17 00:00:00 2001 From: Constance Date: Thu, 19 Aug 2021 15:16:17 -0700 Subject: [PATCH] Convert remaining `.js` files in `src/` to `.ts` (#5044) * Convert src/components/index.js to .ts - which involves adding an index.d.ts to packages for react datepicker * Convert src/index.js to .ts * Fix typescript errors Credit to Greg for the original fixes * Change index.ts to export * instead of a specific list (in order to include/export types) * PR feedback: Fix missing common export * Add CHANGELOG entry * Fix new tsc error - I think it was caused by the common.ts export? Not totally sure why it only just started happening - PR is slowly just becoming Greg's old PR over time ha * Create new script enforcing `npm pack` over `yarn pack` - Per Greg's eagle eyes, `yarn pack` was failing to bundle/include the `src/test/` folder somehow and causing test failures for plugins in Kibana trying to import `lib/test/` helpers - `npm pack` doesn't have this issue, so I opted to create a new command that enforces npm pack over yarn pack --- CHANGELOG.md | 1 + package.json | 1 + {src/components => packages}/index.d.ts | 2 - .../color_picker/color_stops/color_stops.tsx | 2 +- src/components/index.js | 333 ------------------ src/components/index.ts | 172 +++++++++ .../markdown_editor/markdown_actions.ts | 2 +- src/components/selectable/matching_options.ts | 8 +- src/index.d.ts | 11 - src/{index.js => index.ts} | 4 - src/webpack.config.js | 2 +- wiki/component-development.md | 2 +- 12 files changed, 183 insertions(+), 357 deletions(-) rename {src/components => packages}/index.d.ts (79%) delete mode 100644 src/components/index.js create mode 100644 src/components/index.ts delete mode 100644 src/index.d.ts rename src/{index.js => index.ts} (87%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 712dcf95ea0..0d8d623f3b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Updated `EuiFlyout` testenv mock to pass-through `onKeyDown` prop ([#5029](https://github.com/elastic/eui/pull/5029)) - Enabled `EuiCodeBlock` copy button in `EuiMarkdownFormat` ([#5032](https://github.com/elastic/eui/pull/5032)) - Changed `copy` icon to `copyClipboard` in `EuiCodeBlock` ([#5018](https://github.com/elastic/eui/pull/5018)) +- Finished type conversion of source components to Typescript ([#5044](https://github.com/elastic/eui/pull/5044)) **Bug fixes** diff --git a/package.json b/package.json index 636f2a2397c..fb98ce6b2b7 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "sync-docs": "node ./scripts/docs-sync.js", "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js", "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name", + "build-pack": "yarn build && npm pack", "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.js\"", "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings", "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass", diff --git a/src/components/index.d.ts b/packages/index.d.ts similarity index 79% rename from src/components/index.d.ts rename to packages/index.d.ts index fea8766aed1..7d48447926d 100644 --- a/src/components/index.d.ts +++ b/packages/index.d.ts @@ -7,8 +7,6 @@ */ declare module '@elastic/eui' { - // @ts-ignore path only exists at build time - export * from '@elastic/eui/src/components/common'; // eslint-disable-line import/no-unresolved // @ts-ignore path only exists at build time export * from '@elastic/eui/src/components/date_picker/react-datepicker'; // eslint-disable-line import/no-unresolved } diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx index d0b45371531..68847685ef8 100644 --- a/src/components/color_picker/color_stops/color_stops.tsx +++ b/src/components/color_picker/color_stops/color_stops.tsx @@ -31,7 +31,7 @@ import { removeStop, } from './utils'; -import { EuiColorPickerProps } from '../'; +import { EuiColorPickerProps } from '../color_picker'; import { getChromaColor } from '../utils'; import { EuiI18n } from '../../i18n'; import { EuiScreenReaderOnly } from '../../accessibility'; diff --git a/src/components/index.js b/src/components/index.js deleted file mode 100644 index 0d04c40b25b..00000000000 --- a/src/components/index.js +++ /dev/null @@ -1,333 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export { EuiAccordion } from './accordion'; - -export { EuiAspectRatio } from './aspect_ratio'; - -export { EuiAvatar } from './avatar'; - -export { EuiScreenReaderOnly, EuiSkipLink } from './accessibility'; - -export { - EuiBadge, - EuiBetaBadge, - EuiNotificationBadge, - EuiBadgeGroup, -} from './badge'; - -export { EuiBeacon } from './beacon'; - -export { EuiBottomBar } from './bottom_bar'; - -export { EuiBreadcrumbs } from './breadcrumbs'; - -export { - EuiButton, - EuiButtonEmpty, - EuiButtonIcon, - EuiButtonGroup, -} from './button'; - -export { EuiCallOut } from './call_out'; - -export { EuiCard, EuiCheckableCard } from './card'; - -export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code'; - -export { EuiCodeEditor } from './code_editor'; - -export { EuiCollapsibleNav, EuiCollapsibleNavGroup } from './collapsible_nav'; - -export { - EuiColorPalettePicker, - EuiColorPaletteDisplay, - EuiColorPicker, - EuiColorPickerSwatch, - EuiColorStops, - EuiHue, - EuiSaturation, -} from './color_picker'; - -export { EuiComboBox } from './combo_box'; - -export { EuiComment, EuiCommentList } from './comment_list'; - -export { EuiContext, EuiI18nConsumer } from './context'; - -export { - EuiContextMenu, - EuiContextMenuPanel, - EuiContextMenuItem, -} from './context_menu'; - -export { EuiControlBar } from './control_bar'; - -export { EuiCopy } from './copy'; - -export { - EuiDataGrid, - useDataGridColumnSelector, - useDataGridColumnSorting, - useDataGridStyleSelector, -} from './datagrid'; - -export { - EuiDatePicker, - EuiDatePickerRange, - EuiSuperDatePicker, - EuiSuperUpdateButton, - prettyDuration, - commonDurationRanges, -} from './date_picker'; - -export { EuiDelayHide } from './delay_hide'; -export { EuiDelayRender } from './delay_render'; - -export { - EuiDescriptionList, - EuiDescriptionListTitle, - EuiDescriptionListDescription, -} from './description_list'; - -export { - EuiDragDropContext, - EuiDraggable, - EuiDroppable, - euiDragDropCopy, - euiDragDropMove, - euiDragDropReorder, -} from './drag_and_drop'; - -export { EuiEmptyPrompt } from './empty_prompt'; - -export { EuiErrorBoundary } from './error_boundary'; - -export { EuiExpression } from './expression'; - -export { - EuiFilterButton, - EuiFilterGroup, - EuiFilterSelectItem, -} from './filter_group'; - -export { EuiFacetButton, EuiFacetGroup } from './facet'; - -export { EuiFlexGroup, EuiFlexGrid, EuiFlexItem } from './flex'; - -export { - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutFooter, - EuiFlyoutHeader, -} from './flyout'; - -export { EuiFocusTrap } from './focus_trap'; - -export { - EuiCheckbox, - EuiCheckboxGroup, - EuiDescribedFormGroup, - EuiDualRange, - EuiFieldNumber, - EuiFieldPassword, - EuiFieldSearch, - EuiFieldText, - EuiFilePicker, - EuiForm, - EuiFormControlLayout, - EuiFormControlLayoutDelimited, - EuiFormErrorText, - EuiFormFieldset, - EuiFormHelpText, - EuiFormLabel, - EuiFormLegend, - EuiFormRow, - EuiRadio, - EuiRadioGroup, - EuiRange, - EuiSelect, - EuiSuperSelect, - EuiSuperSelectControl, - EuiSwitch, - EuiTextArea, - EuiValidatableControl, -} from './form'; - -export { - EuiHeader, - EuiHeaderAlert, - EuiHeaderBreadcrumbs, - EuiHeaderLink, - EuiHeaderLinks, - EuiHeaderLogo, - EuiHeaderSection, - EuiHeaderSectionItem, - EuiHeaderSectionItemButton, -} from './header'; - -export { EuiHealth } from './health'; - -export { EuiHighlight } from './highlight'; - -export { EuiHorizontalRule } from './horizontal_rule'; - -export { ICON_TYPES, EuiIcon } from './icon'; - -export { EuiImage } from './image'; - -export { useInnerText, EuiInnerText, useRenderToText } from './inner_text'; - -export { EuiI18n, EuiI18nNumber, useEuiI18n } from './i18n'; - -export { - EuiLoadingKibana, - EuiLoadingElastic, - EuiLoadingChart, - EuiLoadingContent, - EuiLoadingSpinner, - EuiLoadingLogo, -} from './loading'; - -export { EuiKeyPadMenu, EuiKeyPadMenuItem } from './key_pad_menu'; - -export { EuiLink } from './link'; - -export { - EuiListGroup, - EuiListGroupItem, - EuiPinnableListGroup, -} from './list_group'; - -export { - EuiMarkdownEditor, - EuiMarkdownContext, - EuiMarkdownFormat, - getDefaultEuiMarkdownParsingPlugins, - getDefaultEuiMarkdownProcessingPlugins, - getDefaultEuiMarkdownUiPlugins, -} from './markdown_editor'; -export { EuiMark } from './mark'; - -export { - EUI_MODAL_CANCEL_BUTTON, - EUI_MODAL_CONFIRM_BUTTON, - EuiConfirmModal, - EuiModal, - EuiModalBody, - EuiModalFooter, - EuiModalHeader, - EuiModalHeaderTitle, -} from './modal'; - -export { EuiMutationObserver } from './observer/mutation_observer'; - -export { EuiNotificationEvent } from './notification'; - -export { EuiOutsideClickDetector } from './outside_click_detector'; - -export { EuiOverlayMask } from './overlay_mask'; - -export { - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiPageHeader, - EuiPageHeaderContent, - EuiPageHeaderSection, - EuiPageSideBar, - EuiPageTemplate, -} from './page'; - -export { EuiPagination, EuiPaginationButton } from './pagination'; - -export { EuiPanel, EuiSplitPanel } from './panel'; - -export { - EuiInputPopover, - EuiPopover, - EuiPopoverTitle, - EuiPopoverFooter, - EuiWrappingPopover, -} from './popover'; - -export { EuiPortal } from './portal'; - -export { EuiProgress } from './progress'; - -export { EuiTreeView } from './tree_view'; - -export { - EuiResizeObserver, - useResizeObserver, -} from './observer/resize_observer'; - -export { EuiSearchBar, Query, Ast } from './search_bar'; - -export { - EuiSelectable, - EuiSelectableList, - EuiSelectableListItem, - EuiSelectableMessage, - EuiSelectableSearch, - EuiSelectableTemplateSitewide, - euiSelectableTemplateSitewideRenderOptions, -} from './selectable'; - -export { EuiSideNav } from './side_nav'; - -export { EuiSpacer } from './spacer'; - -export { EuiStat } from './stat'; - -export { EuiStep, EuiSteps, EuiSubSteps, EuiStepsHorizontal } from './steps'; - -export { EuiSuggestInput, EuiSuggestItem, EuiSuggest } from './suggest'; - -export { - EuiTable, - EuiTableBody, - EuiTableFooter, - EuiTableFooterCell, - EuiTableHeader, - EuiTableHeaderButton, - EuiTableHeaderCell, - EuiTableHeaderCellCheckbox, - EuiTablePagination, - EuiTableRow, - EuiTableRowCell, - EuiTableRowCellCheckbox, - EuiTableHeaderMobile, - EuiTableSortMobile, - EuiTableSortMobileItem, -} from './table'; - -export { EuiToken } from './token'; - -export { EuiTour, EuiTourStep, useEuiTour } from './tour'; - -export { EuiBasicTable, EuiInMemoryTable } from './basic_table'; - -export { EuiTab, EuiTabs, EuiTabbedContent } from './tabs'; - -export { EuiText, EuiTextColor, EuiTextAlign } from './text'; - -export { useEuiTextDiff } from './text_diff'; - -export { EuiTitle } from './title'; - -export { EuiGlobalToastList, EuiGlobalToastListItem, EuiToast } from './toast'; - -export { EuiIconTip, EuiToolTip } from './tool_tip'; - -export { EuiHideFor, EuiShowFor } from './responsive'; - -export { EuiResizableContainer } from './resizable_container'; diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 00000000000..c74dbbbf706 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,172 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export * from './accordion'; + +export * from './aspect_ratio'; + +export * from './avatar'; + +export * from './accessibility'; + +export * from './badge'; + +export * from './beacon'; + +export * from './bottom_bar'; + +export * from './breadcrumbs'; + +export * from './button'; + +export * from './call_out'; + +export * from './card'; + +export * from './code'; + +export * from './code_editor'; + +export * from './collapsible_nav'; + +export * from './color_picker'; + +export * from './combo_box'; + +export * from './comment_list'; + +export * from './context'; + +export * from './context_menu'; + +export * from './control_bar'; + +export * from './copy'; + +export * from './datagrid'; + +export * from './date_picker'; + +export * from './delay_hide'; +export * from './delay_render'; + +export * from './description_list'; + +export * from './drag_and_drop'; + +export * from './empty_prompt'; + +export * from './error_boundary'; + +export * from './expression'; + +export * from './filter_group'; + +export * from './facet'; + +export * from './flex'; + +export * from './flyout'; + +export * from './focus_trap'; + +export * from './form'; + +export * from './header'; + +export * from './health'; + +export * from './highlight'; + +export * from './horizontal_rule'; + +export * from './icon'; + +export * from './image'; + +export * from './inner_text'; + +export * from './i18n'; + +export * from './loading'; + +export * from './key_pad_menu'; + +export * from './link'; + +export * from './list_group'; + +export * from './markdown_editor'; + +export * from './mark'; + +export * from './modal'; + +export * from './observer/mutation_observer'; + +export * from './notification'; + +export * from './outside_click_detector'; + +export * from './overlay_mask'; + +export * from './page'; + +export * from './pagination'; + +export * from './panel'; + +export * from './popover'; + +export * from './portal'; + +export * from './progress'; + +export * from './tree_view'; + +export * from './observer/resize_observer'; + +export * from './search_bar'; + +export * from './selectable'; + +export * from './side_nav'; + +export * from './spacer'; + +export * from './stat'; + +export * from './steps'; + +export * from './suggest'; + +export * from './table'; + +export * from './token'; + +export * from './tour'; + +export * from './basic_table'; + +export * from './tabs'; + +export * from './text'; + +export * from './text_diff'; + +export * from './title'; + +export * from './toast'; + +export * from './tool_tip'; + +export * from './responsive'; + +export * from './resizable_container'; + +export * from './common'; diff --git a/src/components/markdown_editor/markdown_actions.ts b/src/components/markdown_editor/markdown_actions.ts index fc3866bbbf6..034b96b45e4 100644 --- a/src/components/markdown_editor/markdown_actions.ts +++ b/src/components/markdown_editor/markdown_actions.ts @@ -144,7 +144,7 @@ class MarkdownActions { * @param {string} pluginName * @memberof MarkdownActions */ - do(pluginName: string) { + do(pluginName: string): true | EuiMarkdownEditorUiPlugin { const plugin = this.styles[pluginName]; if (isPluginWithImmediateFormatting(plugin)) { this.applyStyle(plugin.formatting); diff --git a/src/components/selectable/matching_options.ts b/src/components/selectable/matching_options.ts index 751d706f523..dc4e7b04d65 100644 --- a/src/components/selectable/matching_options.ts +++ b/src/components/selectable/matching_options.ts @@ -63,11 +63,13 @@ const collectMatchingOption = ( } }; +type SelectableOptions = Array>; + export const getMatchingOptions = ( /** * All available options to match against */ - options: Array>, + options: SelectableOptions, /** * String to match option.label || option.searchableLabel against */ @@ -80,10 +82,10 @@ export const getMatchingOptions = ( * To exclude selected options from the search list, * pass the array of selected options */ - selectedOptions?: Array> + selectedOptions?: SelectableOptions ) => { const normalizedSearchValue = searchValue.toLowerCase(); - const matchingOptions: Array> = []; + const matchingOptions: SelectableOptions = []; options.forEach((option) => { collectMatchingOption( diff --git a/src/index.d.ts b/src/index.d.ts deleted file mode 100644 index 38cc4a7402c..00000000000 --- a/src/index.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -/* eslint-disable @typescript-eslint/triple-slash-reference */ -/// -/// diff --git a/src/index.js b/src/index.ts similarity index 87% rename from src/index.js rename to src/index.ts index 7bbb0905cea..cceaba905f7 100644 --- a/src/index.js +++ b/src/index.ts @@ -6,11 +6,7 @@ * Side Public License, v 1. */ -import * as Packages from '../packages'; - export * from './components'; export * from './services'; export * from './utils'; export * from './themes'; - -export { Packages }; diff --git a/src/webpack.config.js b/src/webpack.config.js index 6731350df91..1471a4e4d8e 100644 --- a/src/webpack.config.js +++ b/src/webpack.config.js @@ -45,7 +45,7 @@ module.exports = { devtool: isProduction ? 'source-map' : 'cheap-module-source-map', entry: { - guide: './index.js', + guide: './index.ts', }, context: __dirname, diff --git a/wiki/component-development.md b/wiki/component-development.md index fc7d5e38970..5e8e37d25a5 100644 --- a/wiki/component-development.md +++ b/wiki/component-development.md @@ -60,7 +60,7 @@ Note that `yarn link` currently does not work with Kibana. You'll need to manual #### In EUI run: ```bash -yarn build && yarn pack +yarn build-pack ``` This will create a `.tgz` file with the changes in your EUI directory. At this point you can move it anywhere.