From 9ce7d2bd4e14a32f8a7f569b4d42169bfa611529 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Aug 2021 13:42:48 -0700 Subject: [PATCH 1/8] Convert src/components/index.js to .ts - which involves adding an index.d.ts to packages for react datepicker --- {src/components => packages}/index.d.ts | 2 -- src/components/{index.js => index.ts} | 0 2 files changed, 2 deletions(-) rename {src/components => packages}/index.d.ts (79%) rename src/components/{index.js => index.ts} (100%) 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/index.js b/src/components/index.ts similarity index 100% rename from src/components/index.js rename to src/components/index.ts From 98542a6af48cf7bb58e1cba9b04364fdeaaadf06 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Aug 2021 13:48:20 -0700 Subject: [PATCH 2/8] Convert src/index.js to .ts --- src/index.d.ts | 11 ----------- src/{index.js => index.ts} | 4 ---- src/webpack.config.js | 2 +- 3 files changed, 1 insertion(+), 16 deletions(-) delete mode 100644 src/index.d.ts rename src/{index.js => index.ts} (87%) 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, From d8733a75569d3e839b7e87cd0b5fce1f5205facb Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Aug 2021 13:53:03 -0700 Subject: [PATCH 3/8] Fix typescript errors Credit to Greg for the original fixes --- src/components/color_picker/color_stops/color_stops.tsx | 2 +- src/components/markdown_editor/markdown_actions.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/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); From 373e92c315e8175ccaa1603199bd6b083548a78c Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 17 Aug 2021 14:21:43 -0700 Subject: [PATCH 4/8] Change index.ts to export * instead of a specific list (in order to include/export types) --- src/components/index.ts | 409 ++++++++++++---------------------------- 1 file changed, 123 insertions(+), 286 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index 0d04c40b25b..a99ad993bd8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,328 +6,165 @@ * Side Public License, v 1. */ -export { EuiAccordion } from './accordion'; +export * from './accordion'; -export { EuiAspectRatio } from './aspect_ratio'; +export * from './aspect_ratio'; -export { EuiAvatar } from './avatar'; +export * from './avatar'; -export { EuiScreenReaderOnly, EuiSkipLink } from './accessibility'; +export * from './accessibility'; -export { - EuiBadge, - EuiBetaBadge, - EuiNotificationBadge, - EuiBadgeGroup, -} from './badge'; +export * from './badge'; -export { EuiBeacon } from './beacon'; +export * from './beacon'; -export { EuiBottomBar } from './bottom_bar'; +export * from './bottom_bar'; -export { EuiBreadcrumbs } from './breadcrumbs'; +export * from './breadcrumbs'; -export { - EuiButton, - EuiButtonEmpty, - EuiButtonIcon, - EuiButtonGroup, -} from './button'; +export * from './button'; -export { EuiCallOut } from './call_out'; +export * from './call_out'; -export { EuiCard, EuiCheckableCard } from './card'; +export * from './card'; -export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code'; +export * from './code'; -export { EuiCodeEditor } from './code_editor'; +export * from './code_editor'; -export { EuiCollapsibleNav, EuiCollapsibleNavGroup } from './collapsible_nav'; +export * 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 * from './color_picker'; -export { EuiPanel, EuiSplitPanel } from './panel'; +export * from './combo_box'; -export { - EuiInputPopover, - EuiPopover, - EuiPopoverTitle, - EuiPopoverFooter, - EuiWrappingPopover, -} from './popover'; +export * from './comment_list'; -export { EuiPortal } from './portal'; +export * from './context'; -export { EuiProgress } from './progress'; +export * from './context_menu'; -export { EuiTreeView } from './tree_view'; +export * from './control_bar'; -export { - EuiResizeObserver, - useResizeObserver, -} from './observer/resize_observer'; +export * from './copy'; -export { EuiSearchBar, Query, Ast } from './search_bar'; +export * from './datagrid'; -export { - EuiSelectable, - EuiSelectableList, - EuiSelectableListItem, - EuiSelectableMessage, - EuiSelectableSearch, - EuiSelectableTemplateSitewide, - euiSelectableTemplateSitewideRenderOptions, -} from './selectable'; +export * from './date_picker'; -export { EuiSideNav } from './side_nav'; +export * from './delay_hide'; +export * from './delay_render'; -export { EuiSpacer } from './spacer'; +export * from './description_list'; -export { EuiStat } from './stat'; +export * from './drag_and_drop'; -export { EuiStep, EuiSteps, EuiSubSteps, EuiStepsHorizontal } from './steps'; +export * from './empty_prompt'; -export { EuiSuggestInput, EuiSuggestItem, EuiSuggest } from './suggest'; +export * from './error_boundary'; -export { - EuiTable, - EuiTableBody, - EuiTableFooter, - EuiTableFooterCell, - EuiTableHeader, - EuiTableHeaderButton, - EuiTableHeaderCell, - EuiTableHeaderCellCheckbox, - EuiTablePagination, - EuiTableRow, - EuiTableRowCell, - EuiTableRowCellCheckbox, - EuiTableHeaderMobile, - EuiTableSortMobile, - EuiTableSortMobileItem, -} from './table'; +export * from './expression'; -export { EuiToken } from './token'; +export * from './filter_group'; -export { EuiTour, EuiTourStep, useEuiTour } from './tour'; +export * from './facet'; -export { EuiBasicTable, EuiInMemoryTable } from './basic_table'; +export * from './flex'; -export { EuiTab, EuiTabs, EuiTabbedContent } from './tabs'; +export * from './flyout'; -export { EuiText, EuiTextColor, EuiTextAlign } from './text'; +export * from './focus_trap'; -export { useEuiTextDiff } from './text_diff'; +export * from './form'; -export { EuiTitle } from './title'; +export * from './header'; -export { EuiGlobalToastList, EuiGlobalToastListItem, EuiToast } from './toast'; +export * from './health'; -export { EuiIconTip, EuiToolTip } from './tool_tip'; +export * from './highlight'; -export { EuiHideFor, EuiShowFor } from './responsive'; +export * from './horizontal_rule'; -export { EuiResizableContainer } from './resizable_container'; +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'; From 05a36eefa7895d08169b64ab0ca3db85580a3565 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 18 Aug 2021 09:48:23 -0700 Subject: [PATCH 5/8] PR feedback: Fix missing common export --- src/components/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/index.ts b/src/components/index.ts index a99ad993bd8..c74dbbbf706 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -168,3 +168,5 @@ export * from './tool_tip'; export * from './responsive'; export * from './resizable_container'; + +export * from './common'; From 734a5cf0205242ad0014ed7da6b8c0b662e120a1 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 18 Aug 2021 09:52:32 -0700 Subject: [PATCH 6/8] Add CHANGELOG entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 369adbecb8a..cd8125fae9e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,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** From 1f872e42ba63edf82373320dac571a03e1e11f72 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 18 Aug 2021 10:42:22 -0700 Subject: [PATCH 7/8] 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 --- src/components/selectable/matching_options.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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( From 27ccfd3d06fd567c5f18622bd86e1f72d03299bb Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 19 Aug 2021 14:18:49 -0700 Subject: [PATCH 8/8] 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 --- package.json | 1 + wiki/component-development.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) 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/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.