From 6a6e825e6a4c5f56910ef0fbe01377d9d4d54099 Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Fri, 23 Aug 2019 13:57:32 -0400 Subject: [PATCH 1/6] Reformat subcomponents to export named values Tidy up a few bits of spacing along the way so consistently have a single line between export declarations --- .../ActionList/components/Item/Item.tsx | 6 +-- .../ActionList/components/Item/index.ts | 5 +-- .../components/Item/tests/Item.test.tsx | 2 +- .../ActionList/components/Section/Section.tsx | 8 ++-- .../ActionList/components/Section/index.ts | 5 +-- .../components/Section/tests/Section.test.tsx | 4 +- src/components/ActionList/components/index.ts | 4 +- .../components/MenuAction/MenuAction.tsx | 6 +-- .../ActionMenu/components/MenuAction/index.ts | 2 +- .../MenuAction/tests/MenuAction.test.tsx | 4 +- .../components/MenuGroup/MenuGroup.tsx | 6 +-- .../ActionMenu/components/MenuGroup/index.ts | 2 +- .../MenuGroup/tests/MenuGroup.test.tsx | 8 ++-- .../RollupActions/RollupActions.tsx | 6 +-- .../components/RollupActions/index.ts | 2 +- .../tests/RollupActions.test.tsx | 10 ++--- src/components/ActionMenu/components/index.ts | 9 ++--- .../components/ComboBox/ComboBox.tsx | 8 ++-- .../Autocomplete/components/ComboBox/index.ts | 5 +-- .../ComboBox/tests/ComboBox.test.tsx | 4 +- .../components/TextField/TextField.tsx | 2 +- .../components/TextField/index.ts | 4 +- .../Autocomplete/components/index.ts | 4 +- src/components/Avatar/images/index.ts | 8 ++++ .../ButtonGroup/components/Item/Item.tsx | 4 +- .../ButtonGroup/components/Item/index.ts | 5 +-- .../components/Item/tests/Item.test.tsx | 2 +- .../ButtonGroup/components/index.ts | 2 +- .../Card/components/Header/Header.tsx | 4 +- .../Card/components/Header/index.ts | 5 +-- .../components/Header/tests/Header.test.tsx | 2 +- .../Card/components/Section/Section.tsx | 6 +-- .../Card/components/Section/index.ts | 5 +-- .../components/Section/tests/Section.test.tsx | 2 +- .../Card/components/Subsection/Subsection.tsx | 4 +- .../Card/components/Subsection/index.ts | 5 +-- .../Subsection/tests/Subsection.test.tsx | 2 +- src/components/Card/components/index.ts | 6 +-- .../components/AlphaPicker/AlphaPicker.tsx | 6 +-- .../components/AlphaPicker/index.ts | 5 +-- .../AlphaPicker/tests/AlphaPicker.test.tsx | 4 +- .../components/HuePicker/HuePicker.tsx | 6 +-- .../ColorPicker/components/HuePicker/index.ts | 5 +-- .../HuePicker/tests/HuePicker.test.tsx | 4 +- .../components/Slidable/Slidable.tsx | 4 +- .../ColorPicker/components/Slidable/index.ts | 5 +-- .../ColorPicker/components/index.ts | 10 ++--- .../Connected/components/Item/Item.tsx | 4 +- .../Connected/components/Item/index.ts | 5 +-- src/components/Connected/components/index.ts | 2 +- .../DataTable/components/Cell/Cell.tsx | 6 +-- .../DataTable/components/Cell/index.ts | 5 +-- .../components/Cell/tests/Cell.test.tsx | 2 +- .../components/Navigation/Navigation.tsx | 6 +-- .../DataTable/components/Navigation/index.ts | 5 +-- .../Navigation/tests/Navigation.test.tsx | 2 +- src/components/DataTable/components/index.ts | 4 +- .../DatePicker/components/Day/Day.tsx | 6 +-- .../DatePicker/components/Day/index.ts | 5 +-- .../DatePicker/components/Month/Month.tsx | 10 ++--- .../DatePicker/components/Month/index.ts | 5 +-- .../components/Month/tests/Month.test.tsx | 6 +-- .../DatePicker/components/Weekday/Weekday.tsx | 4 +- .../DatePicker/components/Weekday/index.ts | 5 +-- .../components/Weekday/tests/Weekday.test.tsx | 2 +- src/components/DatePicker/components/index.ts | 6 +-- .../components/FileUpload/FileUpload.tsx | 4 +- .../DropZone/components/FileUpload/index.ts | 5 +-- .../FileUpload/tests/FileUpload.test.tsx | 2 +- src/components/DropZone/components/index.ts | 2 +- src/components/DropZone/images/index.ts | 1 + .../ConnectedFilterControl.tsx | 7 ++-- .../components/Item/Item.tsx | 4 +- .../components/Item/index.ts | 4 +- .../components/Item/tests/Item.test.tsx | 2 +- .../components/index.ts | 2 +- .../ConnectedFilterControl/index.ts | 7 +--- .../tests/ConnectedFilterControl.test.tsx | 3 +- src/components/Filters/components/index.ts | 2 +- src/components/Form/Form.tsx | 2 + .../FormLayout/components/Group/Group.tsx | 6 +-- .../FormLayout/components/Group/index.ts | 5 +-- .../components/Group/tests/Group.test.tsx | 2 +- .../FormLayout/components/Item/Item.tsx | 4 +- .../FormLayout/components/Item/index.ts | 5 +-- .../components/Item/tests/Item.test.tsx | 2 +- src/components/FormLayout/components/index.ts | 4 +- src/components/Frame/Frame.tsx | 3 ++ .../components/CSSAnimation/CSSAnimation.tsx | 6 +-- .../Frame/components/CSSAnimation/index.ts | 2 +- .../ContextualSaveBar/ContextualSaveBar.tsx | 6 +-- .../DiscardConfirmationModal.tsx | 6 +-- .../DiscardConfirmationModal/index.ts | 8 ++-- .../tests/DiscardConfirmationModal.test.tsx | 2 +- .../ContextualSaveBar/components/index.ts | 4 +- .../components/ContextualSaveBar/index.ts | 4 +- .../Frame/components/Loading/Loading.tsx | 4 +- .../Frame/components/Loading/index.ts | 8 +--- .../components/Loading/tests/Loading.test.tsx | 2 +- .../Frame/components/Toast/Toast.tsx | 7 +++- .../Frame/components/Toast/index.ts | 3 +- .../components/Toast/tests/Toast.test.tsx | 5 +-- .../components/ToastManager/ToastManager.tsx | 15 +++++--- .../Frame/components/ToastManager/index.ts | 5 +-- .../ToastManager/tests/ToastManager.test.tsx | 4 +- src/components/Frame/components/index.ts | 17 +++++---- .../AnnotatedSection/AnnotatedSection.tsx | 4 +- .../components/AnnotatedSection/index.ts | 5 +-- .../Layout/components/Section/Section.tsx | 6 +-- .../Layout/components/Section/index.ts | 5 +-- src/components/Layout/components/index.ts | 7 +--- src/components/List/components/Item/Item.tsx | 4 +- src/components/List/components/Item/index.ts | 5 +-- .../List/components/Item/tests/Item.test.tsx | 2 +- src/components/List/components/index.ts | 2 +- .../components/CloseButton/CloseButton.tsx | 4 +- .../Modal/components/CloseButton/index.ts | 5 +-- .../Modal/components/Dialog/Dialog.tsx | 8 ++-- .../Modal/components/Dialog/index.ts | 5 +-- .../components/Dialog/tests/Dialog.test.tsx | 2 +- .../Modal/components/Footer/Footer.tsx | 6 +-- .../Modal/components/Footer/index.ts | 5 +-- .../Modal/components/Header/Header.tsx | 6 +-- .../Modal/components/Header/index.ts | 5 +-- .../Modal/components/Section/Section.tsx | 6 +-- .../Modal/components/Section/index.ts | 5 +-- src/components/Modal/components/index.ts | 10 ++--- .../Navigation/components/Item/Item.tsx | 10 ++--- .../Item/components/Secondary/Secondary.tsx | 4 +- .../Item/components/Secondary/index.ts | 4 +- .../Secondary/tests/Secondary.test.tsx | 2 +- .../components/Item/components/index.ts | 2 +- .../Navigation/components/Item/index.ts | 10 +++-- .../components/Item/tests/Item.test.tsx | 2 +- .../Navigation/components/Message/Message.tsx | 6 +-- .../Navigation/components/Message/index.ts | 5 +-- .../components/Message/tests/Message.test.tsx | 2 +- .../Navigation/components/Section/Section.tsx | 6 +-- .../Navigation/components/Section/index.ts | 5 +-- .../components/Section/tests/Section.test.tsx | 4 +- src/components/Navigation/components/index.ts | 13 +++++-- src/components/Navigation/index.ts | 7 ++-- .../components/Checkbox/Checkbox.tsx | 6 +-- .../OptionList/components/Checkbox/index.ts | 5 +-- .../Checkbox/tests/Checkbox.test.tsx | 4 +- .../OptionList/components/Option/Option.tsx | 6 +-- .../OptionList/components/Option/index.ts | 5 +-- .../components/Option/tests/Option.test.tsx | 6 +-- src/components/OptionList/components/index.ts | 5 ++- .../Page/components/Header/Header.tsx | 4 +- .../Header/components/Title/Title.tsx | 9 +---- .../Header/components/Title/index.ts | 5 +-- .../{PageTitle.test.tsx => Title.test.tsx} | 2 +- .../components/Header/components/index.ts | 2 +- .../Page/components/Header/index.ts | 2 +- .../components/Header/tests/Header.test.tsx | 37 +++++++++---------- src/components/Page/components/index.ts | 2 +- .../Popover/components/Pane/Pane.tsx | 8 ++-- .../Popover/components/Pane/index.ts | 5 +-- .../components/Pane/tests/Pane.test.tsx | 4 +- .../PopoverOverlay/PopoverOverlay.tsx | 11 ++++-- .../components/PopoverOverlay/index.ts | 9 +++-- .../tests/PopoverOverlay.test.tsx | 2 +- .../Popover/components/Section/Section.tsx | 4 +- .../Popover/components/Section/index.ts | 5 +-- .../components/Section/tests/Section.test.tsx | 2 +- src/components/Popover/components/index.ts | 8 ++-- .../PositionedOverlay/PositionedOverlay.tsx | 1 + .../PositionedOverlay/utilities/math.ts | 1 + .../components/DualThumb/DualThumb.tsx | 6 +-- .../RangeSlider/components/DualThumb/index.ts | 5 +-- .../DualThumb/tests/DualThumb.test.tsx | 2 +- .../components/SingleThumb/SingleThumb.tsx | 4 +- .../components/SingleThumb/index.ts | 5 +-- .../SingleThumb/tests/SingleThumb.test.tsx | 2 +- .../RangeSlider/components/index.ts | 5 ++- src/components/RangeSlider/types.ts | 1 + src/components/RangeSlider/utilities/index.ts | 2 + src/components/ResourceItem/ResourceItem.tsx | 2 + .../components/BulkActions/BulkActions.tsx | 9 +++-- .../BulkActionButton/BulkActionButton.tsx | 6 +-- .../components/BulkActionButton/index.ts | 5 +-- .../BulkActions/components/index.ts | 5 +-- .../components/BulkActions/index.ts | 5 +-- .../BulkActions/tests/BulkActions.test.tsx | 2 +- .../CheckableButton/CheckableButton.tsx | 6 +-- .../components/CheckableButton/index.ts | 5 +-- .../tests/CheckableButton.test.tsx | 2 +- .../FilterControl/FilterControl.tsx | 6 +-- .../components/DateSelector/DateSelector.tsx | 6 +-- .../components/DateSelector/index.ts | 9 +++-- .../DateSelector/tests/DateSelector.test.tsx | 7 +++- .../FilterCreator/FilterCreator.tsx | 8 ++-- .../components/FilterCreator/index.ts | 5 +-- .../tests/FilterCreator.test.tsx | 19 ++++++---- .../FilterValueSelector.tsx | 8 ++-- .../components/FilterValueSelector/index.ts | 8 ++-- .../tests/FilterValueSelector.test.tsx | 2 +- .../FilterControl/components/index.ts | 13 +++---- .../components/FilterControl/index.ts | 6 +-- .../tests/FilterControl.test.tsx | 4 +- .../ResourceList/components/index.ts | 12 ++---- src/components/ResourceList/index.ts | 8 +--- .../components/ScrollTo/ScrollTo.tsx | 2 +- .../Scrollable/components/ScrollTo/index.ts | 4 +- .../ScrollTo/tests/ScrollTo.test.tsx | 2 +- src/components/Scrollable/components/index.ts | 2 +- src/components/Spinner/images/index.ts | 1 + src/components/Stack/Stack.tsx | 2 + src/components/Stack/components/Item/Item.tsx | 4 +- src/components/Stack/components/Item/index.ts | 5 +-- src/components/Stack/components/index.ts | 2 +- src/components/Tabs/components/Item/Item.tsx | 4 +- src/components/Tabs/components/Item/index.ts | 5 +-- .../Tabs/components/Item/tests/Item.test.tsx | 2 +- src/components/Tabs/components/List/List.tsx | 6 +-- src/components/Tabs/components/List/index.ts | 5 +-- .../Tabs/components/List/tests/List.test.tsx | 4 +- .../Tabs/components/Panel/Panel.tsx | 4 +- src/components/Tabs/components/Panel/index.ts | 5 +-- .../components/Panel/tests/Panel.test.tsx | 2 +- src/components/Tabs/components/Tab/Tab.tsx | 8 ++-- src/components/Tabs/components/Tab/index.ts | 5 +-- .../components/TabMeasurer/TabMeasurer.tsx | 8 ++-- .../Tabs/components/TabMeasurer/index.ts | 5 +-- .../TabMeasurer/tests/TabMeasurer.test.tsx | 6 +-- src/components/Tabs/components/index.ts | 14 +++---- .../TextContainer/TextContainer.tsx | 1 + .../TextField/components/Resizer/Resizer.tsx | 4 +- .../TextField/components/Resizer/index.ts | 5 +-- .../components/Resizer/tests/Resizer.test.tsx | 2 +- .../TextField/components/Spinner/Spinner.tsx | 6 +-- .../TextField/components/Spinner/index.ts | 5 +-- .../components/Spinner/tests/Spinner.test.tsx | 2 +- src/components/TextField/components/index.ts | 4 +- .../TooltipOverlay/TooltipOverlay.tsx | 7 +++- .../components/TooltipOverlay/index.ts | 5 +-- src/components/Tooltip/components/index.ts | 5 +-- .../TopBar/components/Menu/Menu.tsx | 4 +- .../Menu/components/Message/Message.tsx | 6 +-- .../Menu/components/Message/index.ts | 5 +-- .../components/Message/tests/Message.test.tsx | 2 +- .../components/Menu/components/index.ts | 2 +- .../TopBar/components/Menu/index.ts | 6 +-- .../components/Menu/tests/Menu.test.tsx | 2 +- .../TopBar/components/Search/Search.tsx | 4 +- .../TopBar/components/Search/index.ts | 5 +-- .../components/Search/tests/Search.test.tsx | 2 +- .../components/SearchField/SearchField.tsx | 8 ++-- .../TopBar/components/SearchField/index.ts | 5 +-- .../TopBar/components/UserMenu/UserMenu.tsx | 12 +++--- .../TopBar/components/UserMenu/index.ts | 5 +-- .../UserMenu/tests/UserMenu.test.tsx | 4 +- src/components/TopBar/components/index.ts | 12 +++--- src/components/TopBar/index.ts | 2 +- src/index.ts | 1 + src/test-utilities/index.ts | 1 + src/types.ts | 3 ++ src/utilities/app-bridge/index.ts | 2 + src/utilities/frame/index.ts | 2 + src/utilities/i18n/index.ts | 3 ++ src/utilities/link/index.ts | 2 + src/utilities/resource-list/index.ts | 1 + src/utilities/scroll-lock-manager/index.ts | 2 + .../scroll-lock-manager.ts | 2 + src/utilities/sticky-manager/index.ts | 2 + src/utilities/theme/index.ts | 2 + 267 files changed, 584 insertions(+), 730 deletions(-) rename src/components/Page/components/Header/components/Title/tests/{PageTitle.test.tsx => Title.test.tsx} (98%) diff --git a/src/components/ActionList/components/Item/Item.tsx b/src/components/ActionList/components/Item/Item.tsx index 5f4004b2fe5..1f75e3132bc 100644 --- a/src/components/ActionList/components/Item/Item.tsx +++ b/src/components/ActionList/components/Item/Item.tsx @@ -10,9 +10,9 @@ import TextStyle from '../../../TextStyle'; import styles from '../../ActionList.scss'; -export type Props = ActionListItemDescriptor; +export type ItemProps = ActionListItemDescriptor; -export default function Item({ +export function Item({ id, badge, content, @@ -28,7 +28,7 @@ export default function Item({ ellipsis, active, role, -}: Props) { +}: ItemProps) { const className = classNames( styles.Item, disabled && styles.disabled, diff --git a/src/components/ActionList/components/Item/index.ts b/src/components/ActionList/components/Item/index.ts index 02c0b0e1951..e158f53cc0d 100644 --- a/src/components/ActionList/components/Item/index.ts +++ b/src/components/ActionList/components/Item/index.ts @@ -1,4 +1 @@ -import Item from './Item'; - -export {Props} from './Item'; -export default Item; +export {Item, ItemProps} from './Item'; diff --git a/src/components/ActionList/components/Item/tests/Item.test.tsx b/src/components/ActionList/components/Item/tests/Item.test.tsx index 523d917f9be..853105a39b6 100644 --- a/src/components/ActionList/components/Item/tests/Item.test.tsx +++ b/src/components/ActionList/components/Item/tests/Item.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {UnstyledLink} from 'components'; -import Item from '../Item'; +import {Item} from '../Item'; import TextStyle from '../../../../TextStyle'; describe('', () => { diff --git a/src/components/ActionList/components/Section/Section.tsx b/src/components/ActionList/components/Section/Section.tsx index ac63d75f65d..da7d401fa03 100644 --- a/src/components/ActionList/components/Section/Section.tsx +++ b/src/components/ActionList/components/Section/Section.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Item from '../Item'; +import {Item} from '../Item'; import {ActionListItemDescriptor, ActionListSection} from '../../../../types'; import styles from '../../ActionList.scss'; -export interface Props { +export interface SectionProps { /** Section of action items */ section: ActionListSection; /** Should there be multiple sections */ @@ -15,12 +15,12 @@ export interface Props { onActionAnyItem?: ActionListItemDescriptor['onAction']; } -export default function Section({ +export function Section({ section, hasMultipleSections, actionRole, onActionAnyItem, -}: Props) { +}: SectionProps) { const handleAction = (itemOnAction: ActionListItemDescriptor['onAction']) => { return () => { if (itemOnAction) { diff --git a/src/components/ActionList/components/Section/index.ts b/src/components/ActionList/components/Section/index.ts index b147a6e4e4b..344c319971d 100644 --- a/src/components/ActionList/components/Section/index.ts +++ b/src/components/ActionList/components/Section/index.ts @@ -1,4 +1 @@ -import Section from './Section'; - -export {Props} from './Section'; -export default Section; +export {Section, SectionProps} from './Section'; diff --git a/src/components/ActionList/components/Section/tests/Section.test.tsx b/src/components/ActionList/components/Section/tests/Section.test.tsx index 060122fe33b..065ad046172 100644 --- a/src/components/ActionList/components/Section/tests/Section.test.tsx +++ b/src/components/ActionList/components/Section/tests/Section.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Item from '../../Item'; -import Section from '../Section'; +import {Item} from '../../Item'; +import {Section} from '../Section'; describe('
', () => { it('renders its items', () => { diff --git a/src/components/ActionList/components/index.ts b/src/components/ActionList/components/index.ts index 1d5c5674eaf..029ec98e8df 100644 --- a/src/components/ActionList/components/index.ts +++ b/src/components/ActionList/components/index.ts @@ -1,3 +1,3 @@ -export {default as Item, Props as ItemProps} from './Item'; +export {Item, ItemProps} from './Item'; -export {default as Section, Props as SectionProps} from './Section'; +export {Section, SectionProps} from './Section'; diff --git a/src/components/ActionMenu/components/MenuAction/MenuAction.tsx b/src/components/ActionMenu/components/MenuAction/MenuAction.tsx index b5da74f0730..be41586f931 100644 --- a/src/components/ActionMenu/components/MenuAction/MenuAction.tsx +++ b/src/components/ActionMenu/components/MenuAction/MenuAction.tsx @@ -10,12 +10,12 @@ import UnstyledLink from '../../../UnstyledLink'; import styles from './MenuAction.scss'; -export interface Props extends ComplexAction { +export interface MenuActionProps extends ComplexAction { /** Whether or not the action discloses a menu group */ disclosure?: boolean; } -export default function MenuAction({ +export function MenuAction({ content, accessibilityLabel, url, @@ -24,7 +24,7 @@ export default function MenuAction({ disclosure, disabled, onAction, -}: Props) { +}: MenuActionProps) { const iconMarkup = icon && ( diff --git a/src/components/ActionMenu/components/MenuAction/index.ts b/src/components/ActionMenu/components/MenuAction/index.ts index d255ea4d504..e59101fa10c 100644 --- a/src/components/ActionMenu/components/MenuAction/index.ts +++ b/src/components/ActionMenu/components/MenuAction/index.ts @@ -1 +1 @@ -export {default, Props} from './MenuAction'; +export {MenuAction, MenuActionProps} from './MenuAction'; diff --git a/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx b/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx index cf942d524e1..f836358393f 100644 --- a/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx +++ b/src/components/ActionMenu/components/MenuAction/tests/MenuAction.test.tsx @@ -5,10 +5,10 @@ import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import Icon from '../../../../Icon'; import UnstyledLink from '../../../../UnstyledLink'; -import MenuAction, {Props} from '../MenuAction'; +import {MenuAction} from '../MenuAction'; describe('', () => { - const mockProps: Props = { + const mockProps = { content: 'content', }; diff --git a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx index b38b500c5c9..edba3b1c73c 100644 --- a/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx +++ b/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx @@ -4,11 +4,11 @@ import {MenuGroupDescriptor} from '../../../../types'; import ActionList from '../../../ActionList'; import Popover from '../../../Popover'; -import MenuAction from '../MenuAction'; +import {MenuAction} from '../MenuAction'; import styles from './MenuGroup.scss'; -export interface Props extends MenuGroupDescriptor { +export interface MenuGroupProps extends MenuGroupDescriptor { /** Visually hidden menu description for screen readers */ accessibilityLabel?: string; /** Whether or not the menu is open */ @@ -19,7 +19,7 @@ export interface Props extends MenuGroupDescriptor { onClose(title: string): void; } -export default class MenuGroup extends React.Component { +export class MenuGroup extends React.Component { render() { const { accessibilityLabel, diff --git a/src/components/ActionMenu/components/MenuGroup/index.ts b/src/components/ActionMenu/components/MenuGroup/index.ts index dfa7f490c2d..abe8f075c8d 100644 --- a/src/components/ActionMenu/components/MenuGroup/index.ts +++ b/src/components/ActionMenu/components/MenuGroup/index.ts @@ -1 +1 @@ -export {default, Props} from './MenuGroup'; +export {MenuGroup, MenuGroupProps} from './MenuGroup'; diff --git a/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx b/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx index 297f3cb5790..5d19d261471 100644 --- a/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx +++ b/src/components/ActionMenu/components/MenuGroup/tests/MenuGroup.test.tsx @@ -4,11 +4,11 @@ import {SaveMinor} from '@shopify/polaris-icons'; import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {Popover, ActionList} from 'components'; -import MenuAction from '../../MenuAction'; -import MenuGroup, {Props} from '../MenuGroup'; +import {MenuAction} from '../../MenuAction'; +import {MenuGroup} from '../MenuGroup'; describe('', () => { - const mockProps: Props = { + const mockProps = { title: 'title', actions: [], active: undefined, @@ -80,7 +80,7 @@ describe('', () => { }); it('passes `actions` into the ', () => { - const mockActions: Props['actions'] = [ + const mockActions = [ {content: 'mock content 1'}, {content: 'mock content 2'}, ]; diff --git a/src/components/ActionMenu/components/RollupActions/RollupActions.tsx b/src/components/ActionMenu/components/RollupActions/RollupActions.tsx index d7332ecadfa..b4e5863dda1 100644 --- a/src/components/ActionMenu/components/RollupActions/RollupActions.tsx +++ b/src/components/ActionMenu/components/RollupActions/RollupActions.tsx @@ -13,14 +13,14 @@ import Popover from '../../../Popover'; import styles from './RollupActions.scss'; -export interface Props { +export interface RollupActionsProps { /** Collection of actions for the list */ items?: ActionListItemDescriptor[]; /** Collection of sectioned action items */ sections?: ActionListSection[]; } -type ComposedProps = Props & WithAppProviderProps; +type ComposedProps = RollupActionsProps & WithAppProviderProps; interface State { rollupOpen: boolean; @@ -77,4 +77,4 @@ class RollupActions extends React.PureComponent { }; } -export default withAppProvider()(RollupActions); +export default withAppProvider()(RollupActions); diff --git a/src/components/ActionMenu/components/RollupActions/index.ts b/src/components/ActionMenu/components/RollupActions/index.ts index bb26a51e6f8..bdf599e8e90 100644 --- a/src/components/ActionMenu/components/RollupActions/index.ts +++ b/src/components/ActionMenu/components/RollupActions/index.ts @@ -1 +1 @@ -export {default, Props} from './RollupActions'; +export {default as RollupActions, RollupActionsProps} from './RollupActions'; diff --git a/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx b/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx index 68b58bc1858..39ce26f6912 100644 --- a/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx +++ b/src/components/ActionMenu/components/RollupActions/tests/RollupActions.test.tsx @@ -11,12 +11,12 @@ import { Section as ActionListSection, } from '../../../../ActionList/components'; -import RollupActions, {Props} from '../RollupActions'; +import RollupActions, {RollupActionsProps} from '../RollupActions'; -type Wrapper = ReactWrapper; +type Wrapper = ReactWrapper; describe('', () => { - const mockProps: Props = { + const mockProps = { items: undefined, sections: undefined, }; @@ -28,7 +28,7 @@ describe('', () => { }); describe('items', () => { - const mockItems: Props['items'] = [ + const mockItems = [ { content: 'mock content 1', url: 'https://www.google.com', @@ -68,7 +68,7 @@ describe('', () => { }); describe('sections', () => { - const mockSections: Props['sections'] = [ + const mockSections = [ { title: 'mock title 1', items: [ diff --git a/src/components/ActionMenu/components/index.ts b/src/components/ActionMenu/components/index.ts index f0d58cecee7..f55c125f03d 100644 --- a/src/components/ActionMenu/components/index.ts +++ b/src/components/ActionMenu/components/index.ts @@ -1,8 +1,5 @@ -export {default as MenuAction, Props as MenuActionProps} from './MenuAction'; +export {MenuAction, MenuActionProps} from './MenuAction'; -export {default as MenuGroup, Props as MenuGroupProps} from './MenuGroup'; +export {MenuGroup, MenuGroupProps} from './MenuGroup'; -export { - default as RollupActions, - Props as RollupActionsProps, -} from './RollupActions'; +export {RollupActions, RollupActionsProps} from './RollupActions'; diff --git a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx index f24d3107864..d7ab4b8e042 100644 --- a/src/components/Autocomplete/components/ComboBox/ComboBox.tsx +++ b/src/components/Autocomplete/components/ComboBox/ComboBox.tsx @@ -23,7 +23,7 @@ interface State { popoverWasActive: boolean; } -export interface Props { +export interface ComboBoxProps { /** A unique identifier for the ComboBox */ id?: string; /** Collection of options to be listed */ @@ -54,14 +54,14 @@ export interface Props { onEndReached?(): void; } -export default class ComboBox extends React.PureComponent { +export class ComboBox extends React.PureComponent { static getDerivedStateFromProps( { options: nextOptions, selected: nextSelected, actionsBefore: nextActionsBefore, actionsAfter: nextActionsAfter, - }: Props, + }: ComboBoxProps, {navigableOptions, selectedOptions, comboBoxId}: State, ) { const optionsChanged = @@ -129,7 +129,7 @@ export default class ComboBox extends React.PureComponent { }); } - componentDidUpdate(_: Props, prevState: State) { + componentDidUpdate(_: ComboBoxProps, prevState: State) { const {contentBefore, contentAfter, emptyState} = this.props; const {navigableOptions, popoverWasActive} = this.state; diff --git a/src/components/Autocomplete/components/ComboBox/index.ts b/src/components/Autocomplete/components/ComboBox/index.ts index 0374b3c123b..94540f37e9e 100644 --- a/src/components/Autocomplete/components/ComboBox/index.ts +++ b/src/components/Autocomplete/components/ComboBox/index.ts @@ -1,4 +1 @@ -import ComboBox from './ComboBox'; - -export {Props} from './ComboBox'; -export default ComboBox; +export {ComboBox} from './ComboBox'; diff --git a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx index 0a5786ebca4..de438d0da73 100644 --- a/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx +++ b/src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx @@ -2,9 +2,9 @@ import React from 'react'; import {shallow} from 'enzyme'; import {OptionList, ActionList, Popover} from 'components'; import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; -import TextField from '../../TextField'; +import {TextField} from '../../TextField'; import {Key} from '../../../../../types'; -import ComboBox from '..'; +import {ComboBox} from '..'; describe('', () => { const options = [ diff --git a/src/components/Autocomplete/components/TextField/TextField.tsx b/src/components/Autocomplete/components/TextField/TextField.tsx index 9a5dfa87538..57584fc5eda 100644 --- a/src/components/Autocomplete/components/TextField/TextField.tsx +++ b/src/components/Autocomplete/components/TextField/TextField.tsx @@ -4,7 +4,7 @@ import React from 'react'; import {ComboBoxContext} from '../ComboBox/context'; import BaseTextField, {Props as TextFieldProps} from '../../../TextField'; -export default function TextField(props: TextFieldProps) { +export function TextField(props: TextFieldProps) { return ( {({selectedOptionId, comboBoxId}) => ( diff --git a/src/components/Autocomplete/components/TextField/index.ts b/src/components/Autocomplete/components/TextField/index.ts index 7e9c49aabd9..35e9e6ed312 100644 --- a/src/components/Autocomplete/components/TextField/index.ts +++ b/src/components/Autocomplete/components/TextField/index.ts @@ -1,3 +1 @@ -import TextField from './TextField'; - -export default TextField; +export {TextField} from './TextField'; diff --git a/src/components/Autocomplete/components/index.ts b/src/components/Autocomplete/components/index.ts index bf0aef4ab91..8a65d0fe030 100644 --- a/src/components/Autocomplete/components/index.ts +++ b/src/components/Autocomplete/components/index.ts @@ -1,3 +1,3 @@ -export {default as ComboBox} from './ComboBox'; +export {ComboBox} from './ComboBox'; -export {default as TextField} from './TextField'; +export {TextField} from './TextField'; diff --git a/src/components/Avatar/images/index.ts b/src/components/Avatar/images/index.ts index 1ab161e2bfb..c3188e8be61 100644 --- a/src/components/Avatar/images/index.ts +++ b/src/components/Avatar/images/index.ts @@ -1,9 +1,17 @@ export {default as avatarOne} from './avatar-1.svg'; + export {default as avatarTwo} from './avatar-2.svg'; + export {default as avatarThree} from './avatar-3.svg'; + export {default as avatarFour} from './avatar-4.svg'; + export {default as avatarFive} from './avatar-5.svg'; + export {default as avatarSix} from './avatar-6.svg'; + export {default as avatarSeven} from './avatar-7.svg'; + export {default as avatarEight} from './avatar-8.svg'; + export {default as avatarNine} from './avatar-9.svg'; diff --git a/src/components/ButtonGroup/components/Item/Item.tsx b/src/components/ButtonGroup/components/Item/Item.tsx index 024d55579c2..8189e256291 100644 --- a/src/components/ButtonGroup/components/Item/Item.tsx +++ b/src/components/ButtonGroup/components/Item/Item.tsx @@ -5,7 +5,7 @@ import {Props as ButtonProps} from '../../../Button'; import styles from '../../ButtonGroup.scss'; -export interface Props { +export interface ItemProps { button: React.ReactElement; } @@ -13,7 +13,7 @@ interface State { focused: boolean; } -export default class Item extends React.PureComponent { +export class Item extends React.PureComponent { state: State = {focused: false}; render() { diff --git a/src/components/ButtonGroup/components/Item/index.ts b/src/components/ButtonGroup/components/Item/index.ts index 02c0b0e1951..e158f53cc0d 100644 --- a/src/components/ButtonGroup/components/Item/index.ts +++ b/src/components/ButtonGroup/components/Item/index.ts @@ -1,4 +1 @@ -import Item from './Item'; - -export {Props} from './Item'; -export default Item; +export {Item, ItemProps} from './Item'; diff --git a/src/components/ButtonGroup/components/Item/tests/Item.test.tsx b/src/components/ButtonGroup/components/Item/tests/Item.test.tsx index 744b135d75e..7bc1e8c3c03 100644 --- a/src/components/ButtonGroup/components/Item/tests/Item.test.tsx +++ b/src/components/ButtonGroup/components/Item/tests/Item.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {Button} from 'components'; -import Item from '../Item'; +import {Item} from '../Item'; describe('', () => { describe('button', () => { diff --git a/src/components/ButtonGroup/components/index.ts b/src/components/ButtonGroup/components/index.ts index 584c7f5e9a9..e158f53cc0d 100644 --- a/src/components/ButtonGroup/components/index.ts +++ b/src/components/ButtonGroup/components/index.ts @@ -1 +1 @@ -export {default as Item, Props as ItemProps} from './Item'; +export {Item, ItemProps} from './Item'; diff --git a/src/components/Card/components/Header/Header.tsx b/src/components/Card/components/Header/Header.tsx index de908b6e7d0..36804e9c14d 100644 --- a/src/components/Card/components/Header/Header.tsx +++ b/src/components/Card/components/Header/Header.tsx @@ -8,13 +8,13 @@ import Heading from '../../../Heading'; import styles from '../../Card.scss'; -export interface Props { +export interface HeaderProps { title?: React.ReactNode; actions?: DisableableAction[]; children?: React.ReactNode; } -export default function Header({children, title, actions}: Props) { +export function Header({children, title, actions}: HeaderProps) { const actionMarkup = actions ? ( {buttonsFrom(actions, {plain: true})} ) : null; diff --git a/src/components/Card/components/Header/index.ts b/src/components/Card/components/Header/index.ts index 0b0d49402de..c5990fc6821 100644 --- a/src/components/Card/components/Header/index.ts +++ b/src/components/Card/components/Header/index.ts @@ -1,4 +1 @@ -import Header from './Header'; - -export {Props} from './Header'; -export default Header; +export {Header, HeaderProps} from './Header'; diff --git a/src/components/Card/components/Header/tests/Header.test.tsx b/src/components/Card/components/Header/tests/Header.test.tsx index 82eaa724661..26fe9125f9d 100644 --- a/src/components/Card/components/Header/tests/Header.test.tsx +++ b/src/components/Card/components/Header/tests/Header.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {ButtonGroup, Heading, buttonsFrom} from 'components'; -import Header from '../Header'; +import {Header} from '../Header'; jest.mock('../../../../Button', () => ({ ...require.requireActual('../../../../Button'), diff --git a/src/components/Card/components/Section/Section.tsx b/src/components/Card/components/Section/Section.tsx index 1c4a48cdc97..6298e7929bd 100644 --- a/src/components/Card/components/Section/Section.tsx +++ b/src/components/Card/components/Section/Section.tsx @@ -9,7 +9,7 @@ import Subheading from '../../../Subheading'; import styles from '../../Card.scss'; -export interface Props { +export interface SectionProps { title?: React.ReactNode; children?: React.ReactNode; subdued?: boolean; @@ -17,13 +17,13 @@ export interface Props { actions?: ComplexAction[]; } -export default function Section({ +export function Section({ children, title, subdued, fullWidth, actions, -}: Props) { +}: SectionProps) { const className = classNames( styles.Section, subdued && styles['Section-subdued'], diff --git a/src/components/Card/components/Section/index.ts b/src/components/Card/components/Section/index.ts index b147a6e4e4b..344c319971d 100644 --- a/src/components/Card/components/Section/index.ts +++ b/src/components/Card/components/Section/index.ts @@ -1,4 +1 @@ -import Section from './Section'; - -export {Props} from './Section'; -export default Section; +export {Section, SectionProps} from './Section'; diff --git a/src/components/Card/components/Section/tests/Section.test.tsx b/src/components/Card/components/Section/tests/Section.test.tsx index 4f3cfb6fe5d..e84502f41df 100644 --- a/src/components/Card/components/Section/tests/Section.test.tsx +++ b/src/components/Card/components/Section/tests/Section.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {Badge, Subheading, ButtonGroup, Button} from 'components'; -import Section from '../Section'; +import {Section} from '../Section'; describe('', () => { it('can have any valid react element as the card section title', () => { diff --git a/src/components/Card/components/Subsection/Subsection.tsx b/src/components/Card/components/Subsection/Subsection.tsx index 284f92d8b35..80eb1ad9233 100644 --- a/src/components/Card/components/Subsection/Subsection.tsx +++ b/src/components/Card/components/Subsection/Subsection.tsx @@ -2,10 +2,10 @@ import React from 'react'; import styles from '../../Card.scss'; -export interface Props { +export interface SubsectionProps { children?: React.ReactNode; } -export default function Subsection({children}: Props) { +export function Subsection({children}: SubsectionProps) { return
{children}
; } diff --git a/src/components/Card/components/Subsection/index.ts b/src/components/Card/components/Subsection/index.ts index 112fdc0b22a..ccc7a88753b 100644 --- a/src/components/Card/components/Subsection/index.ts +++ b/src/components/Card/components/Subsection/index.ts @@ -1,4 +1 @@ -import Subsection from './Subsection'; - -export {Props} from './Subsection'; -export default Subsection; +export {Subsection, SubsectionProps} from './Subsection'; diff --git a/src/components/Card/components/Subsection/tests/Subsection.test.tsx b/src/components/Card/components/Subsection/tests/Subsection.test.tsx index 02c6e7ebcc4..ae5f5111c52 100644 --- a/src/components/Card/components/Subsection/tests/Subsection.test.tsx +++ b/src/components/Card/components/Subsection/tests/Subsection.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Subsection from '../Subsection'; +import {Subsection} from '../Subsection'; describe('', () => { it('can have any valid react element for children', () => { diff --git a/src/components/Card/components/index.ts b/src/components/Card/components/index.ts index d9eb1e812e4..d9aefd51e39 100644 --- a/src/components/Card/components/index.ts +++ b/src/components/Card/components/index.ts @@ -1,5 +1,5 @@ -export {default as Header, Props as HeaderProps} from './Header'; +export {Header, HeaderProps} from './Header'; -export {default as Section, Props as SectionProps} from './Section'; +export {Section, SectionProps} from './Section'; -export {default as Subsection, Props as SubsectionProps} from './Subsection'; +export {Subsection, SubsectionProps} from './Subsection'; diff --git a/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx b/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx index 817fd6f3cbf..11980f47b94 100644 --- a/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx +++ b/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Slidable, {Position} from '../Slidable'; +import {Slidable, Position} from '../Slidable'; import {HSBColor} from '../../../../utilities/color-types'; import {hsbToRgb} from '../../../../utilities/color-transformers'; import styles from '../../ColorPicker.scss'; @@ -10,13 +10,13 @@ interface State { draggerHeight: number; } -export interface Props { +export interface AlphaPickerProps { color: HSBColor; alpha: number; onChange(hue: number): void; } -export default class AlphaPicker extends React.PureComponent { +export class AlphaPicker extends React.PureComponent { state: State = { sliderHeight: 0, draggerHeight: 0, diff --git a/src/components/ColorPicker/components/AlphaPicker/index.ts b/src/components/ColorPicker/components/AlphaPicker/index.ts index debd7741ff3..3370e046b1d 100644 --- a/src/components/ColorPicker/components/AlphaPicker/index.ts +++ b/src/components/ColorPicker/components/AlphaPicker/index.ts @@ -1,4 +1 @@ -import AlphaPicker from './AlphaPicker'; - -export {Props} from './AlphaPicker'; -export default AlphaPicker; +export {AlphaPicker, AlphaPickerProps} from './AlphaPicker'; diff --git a/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx b/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx index 6d06ba9b061..2e6eb17a6ba 100644 --- a/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx +++ b/src/components/ColorPicker/components/AlphaPicker/tests/AlphaPicker.test.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {calculateDraggerY, alphaForDraggerY} from '../utilities'; -import Slidable from '../../Slidable'; -import AlphaPicker from '../AlphaPicker'; +import {Slidable} from '../../Slidable'; +import {AlphaPicker} from '../AlphaPicker'; describe('', () => { const color = { diff --git a/src/components/ColorPicker/components/HuePicker/HuePicker.tsx b/src/components/ColorPicker/components/HuePicker/HuePicker.tsx index 4ebec764aee..d19ba759d30 100644 --- a/src/components/ColorPicker/components/HuePicker/HuePicker.tsx +++ b/src/components/ColorPicker/components/HuePicker/HuePicker.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Slidable, {Position} from '../Slidable'; +import {Slidable, Position} from '../Slidable'; import styles from '../../ColorPicker.scss'; import {calculateDraggerY, hueForDraggerY} from './utilities'; @@ -8,12 +8,12 @@ interface State { draggerHeight: number; } -export interface Props { +export interface HuePickerProps { hue: number; onChange(hue: number): void; } -export default class HuePicker extends React.PureComponent { +export class HuePicker extends React.PureComponent { state: State = { sliderHeight: 0, draggerHeight: 0, diff --git a/src/components/ColorPicker/components/HuePicker/index.ts b/src/components/ColorPicker/components/HuePicker/index.ts index 4577d6ddeaa..35e8e4e44b8 100644 --- a/src/components/ColorPicker/components/HuePicker/index.ts +++ b/src/components/ColorPicker/components/HuePicker/index.ts @@ -1,4 +1 @@ -import HuePicker from './HuePicker'; - -export {Props} from './HuePicker'; -export default HuePicker; +export {HuePicker, HuePickerProps} from './HuePicker'; diff --git a/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx b/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx index bc09403cc1e..71067f4395b 100644 --- a/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx +++ b/src/components/ColorPicker/components/HuePicker/tests/HuePicker.test.tsx @@ -1,8 +1,8 @@ import React from 'react'; import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {calculateDraggerY, hueForDraggerY} from '../utilities'; -import Slidable from '../../Slidable'; -import HuePicker from '../HuePicker'; +import {Slidable} from '../../Slidable'; +import {HuePicker} from '../HuePicker'; describe('', () => { const mockProps = { diff --git a/src/components/ColorPicker/components/Slidable/Slidable.tsx b/src/components/ColorPicker/components/Slidable/Slidable.tsx index eba111db69a..71f1a54e432 100644 --- a/src/components/ColorPicker/components/Slidable/Slidable.tsx +++ b/src/components/ColorPicker/components/Slidable/Slidable.tsx @@ -13,7 +13,7 @@ interface State { dragging: boolean; } -export interface Props { +export interface SlidableProps { draggerX?: number; draggerY?: number; onChange(position: Position): void; @@ -41,7 +41,7 @@ if (!isServer) { ); } -export default class Slidable extends React.PureComponent { +export class Slidable extends React.PureComponent { state: State = { dragging: false, }; diff --git a/src/components/ColorPicker/components/Slidable/index.ts b/src/components/ColorPicker/components/Slidable/index.ts index 3fa24531f1b..0fb9f465165 100644 --- a/src/components/ColorPicker/components/Slidable/index.ts +++ b/src/components/ColorPicker/components/Slidable/index.ts @@ -1,4 +1 @@ -import Slidable from './Slidable'; - -export {Props, Position} from './Slidable'; -export default Slidable; +export {Slidable, SlidableProps, Position} from './Slidable'; diff --git a/src/components/ColorPicker/components/index.ts b/src/components/ColorPicker/components/index.ts index 475ba12259d..1ac3f93c438 100644 --- a/src/components/ColorPicker/components/index.ts +++ b/src/components/ColorPicker/components/index.ts @@ -1,9 +1,5 @@ -export {default as AlphaPicker, Props as AlphaPickerProps} from './AlphaPicker'; +export {AlphaPicker, AlphaPickerProps} from './AlphaPicker'; -export {default as HuePicker, Props as HuePickerProps} from './HuePicker'; +export {HuePicker, HuePickerProps} from './HuePicker'; -export { - default as Slidable, - Props as SlidableProps, - Position, -} from './Slidable'; +export {Slidable, SlidableProps, Position} from './Slidable'; diff --git a/src/components/Connected/components/Item/Item.tsx b/src/components/Connected/components/Item/Item.tsx index 333ec8ae75c..a9df3b8e68d 100644 --- a/src/components/Connected/components/Item/Item.tsx +++ b/src/components/Connected/components/Item/Item.tsx @@ -8,7 +8,7 @@ export enum ItemPosition { Right, } -export interface Props { +export interface ItemProps { /** Position of the item */ position: ItemPosition; /** Item content */ @@ -19,7 +19,7 @@ interface State { focused: boolean; } -export default class Item extends React.PureComponent { +export class Item extends React.PureComponent { state: State = {focused: false}; render() { diff --git a/src/components/Connected/components/Item/index.ts b/src/components/Connected/components/Item/index.ts index 48b63fdc87e..a38f85e2af4 100644 --- a/src/components/Connected/components/Item/index.ts +++ b/src/components/Connected/components/Item/index.ts @@ -1,4 +1 @@ -import Item from './Item'; - -export {Props, ItemPosition} from './Item'; -export default Item; +export {Item, ItemProps, ItemPosition} from './Item'; diff --git a/src/components/Connected/components/index.ts b/src/components/Connected/components/index.ts index 1eeec74d9d1..a38f85e2af4 100644 --- a/src/components/Connected/components/index.ts +++ b/src/components/Connected/components/index.ts @@ -1 +1 @@ -export {default as Item, Props as ItemProps, ItemPosition} from './Item'; +export {Item, ItemProps, ItemPosition} from './Item'; diff --git a/src/components/DataTable/components/Cell/Cell.tsx b/src/components/DataTable/components/Cell/Cell.tsx index e5e500f7ffc..9e5cda4d3f3 100644 --- a/src/components/DataTable/components/Cell/Cell.tsx +++ b/src/components/DataTable/components/Cell/Cell.tsx @@ -9,7 +9,7 @@ import {SortDirection, VerticalAlign} from '../../types'; import styles from '../../DataTable.scss'; -export interface Props { +export interface CellProps { content?: React.ReactNode; contentType?: string; firstColumn?: boolean; @@ -24,7 +24,7 @@ export interface Props { onSort?(): void; } -export default function Cell({ +export function Cell({ content, contentType, firstColumn, @@ -37,7 +37,7 @@ export default function Cell({ verticalAlign = 'top', defaultSortDirection = 'ascending', onSort, -}: Props) { +}: CellProps) { const {translate} = useI18n(); const numeric = contentType === 'numeric'; const className = classNames( diff --git a/src/components/DataTable/components/Cell/index.ts b/src/components/DataTable/components/Cell/index.ts index 010bb37df68..b42c9beb4a8 100644 --- a/src/components/DataTable/components/Cell/index.ts +++ b/src/components/DataTable/components/Cell/index.ts @@ -1,4 +1 @@ -import Cell from './Cell'; - -export {Props} from './Cell'; -export default Cell; +export {Cell, CellProps} from './Cell'; diff --git a/src/components/DataTable/components/Cell/tests/Cell.test.tsx b/src/components/DataTable/components/Cell/tests/Cell.test.tsx index 4c9b87eaada..3d04af5e7c1 100644 --- a/src/components/DataTable/components/Cell/tests/Cell.test.tsx +++ b/src/components/DataTable/components/Cell/tests/Cell.test.tsx @@ -3,7 +3,7 @@ import {CaretUpMinor, CaretDownMinor} from '@shopify/polaris-icons'; import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {Icon} from '../../../..'; -import Cell from '../Cell'; +import {Cell} from '../Cell'; describe('', () => { describe('content', () => { diff --git a/src/components/DataTable/components/Navigation/Navigation.tsx b/src/components/DataTable/components/Navigation/Navigation.tsx index 41c7ee68735..f9533f1c85e 100644 --- a/src/components/DataTable/components/Navigation/Navigation.tsx +++ b/src/components/DataTable/components/Navigation/Navigation.tsx @@ -9,7 +9,7 @@ import {ColumnVisibilityData} from '../../types'; import styles from '../../DataTable.scss'; -export interface Props { +export interface NavigationProps { columnVisibilityData: ColumnVisibilityData[]; isScrolledFarthestLeft?: boolean; isScrolledFarthestRight?: boolean; @@ -17,13 +17,13 @@ export interface Props { navigateTableRight?(): void; } -export default function Navigation({ +export function Navigation({ columnVisibilityData, isScrolledFarthestLeft, isScrolledFarthestRight, navigateTableLeft, navigateTableRight, -}: Props) { +}: NavigationProps) { const {translate} = useI18n(); const pipMarkup = columnVisibilityData.map((column, index) => { diff --git a/src/components/DataTable/components/Navigation/index.ts b/src/components/DataTable/components/Navigation/index.ts index b88cd6e94c9..471b39990d3 100644 --- a/src/components/DataTable/components/Navigation/index.ts +++ b/src/components/DataTable/components/Navigation/index.ts @@ -1,4 +1 @@ -import Navigation from './Navigation'; - -export {Props} from './Navigation'; -export default Navigation; +export {Navigation, NavigationProps} from './Navigation'; diff --git a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx index 37cc935a3e8..ce6204d2356 100644 --- a/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx +++ b/src/components/DataTable/components/Navigation/tests/Navigation.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {Button} from 'components'; -import Navigation from '../Navigation'; +import {Navigation} from '../Navigation'; describe('', () => { it('renders two buttons', () => { diff --git a/src/components/DataTable/components/index.ts b/src/components/DataTable/components/index.ts index 733e894d313..82eb5dcb550 100644 --- a/src/components/DataTable/components/index.ts +++ b/src/components/DataTable/components/index.ts @@ -1,3 +1,3 @@ -export {default as Cell, Props as CellProps} from './Cell'; +export {Cell, CellProps} from './Cell'; -export {default as Navigation, Props as NavigationProps} from './Navigation'; +export {Navigation, NavigationProps} from './Navigation'; diff --git a/src/components/DatePicker/components/Day/Day.tsx b/src/components/DatePicker/components/Day/Day.tsx index 85b0e0c1866..e040d8612fe 100644 --- a/src/components/DatePicker/components/Day/Day.tsx +++ b/src/components/DatePicker/components/Day/Day.tsx @@ -8,7 +8,7 @@ import { import styles from '../../DatePicker.scss'; -export interface Props { +export interface DayProps { focused?: boolean; day?: Date; selected?: boolean; @@ -20,7 +20,7 @@ export interface Props { onFocus?(day: Date): void; } -type CombinedProps = Props & WithAppProviderProps; +type CombinedProps = DayProps & WithAppProviderProps; class Day extends React.PureComponent { private dayNode: HTMLElement | null = null; @@ -92,6 +92,6 @@ class Day extends React.PureComponent { }; } -export default withAppProvider()(Day); +export default withAppProvider()(Day); function noop() {} diff --git a/src/components/DatePicker/components/Day/index.ts b/src/components/DatePicker/components/Day/index.ts index 411cc179763..52258d0e5cb 100644 --- a/src/components/DatePicker/components/Day/index.ts +++ b/src/components/DatePicker/components/Day/index.ts @@ -1,4 +1 @@ -import Day from './Day'; - -export {Props} from './Day'; -export default Day; +export {default as Day, DayProps} from './Day'; diff --git a/src/components/DatePicker/components/Month/Month.tsx b/src/components/DatePicker/components/Month/Month.tsx index 9719f617348..f10e50f64f6 100644 --- a/src/components/DatePicker/components/Month/Month.tsx +++ b/src/components/DatePicker/components/Month/Month.tsx @@ -15,11 +15,11 @@ import { import {classNames} from '../../../../utilities/css'; import {useI18n} from '../../../../utilities/i18n'; import styles from '../../DatePicker.scss'; -import Day from '../Day'; -import Weekday from '../Weekday'; +import {Day} from '../Day'; +import {Weekday} from '../Weekday'; import {monthName, weekdayName} from '../../utilities'; -export interface Props { +export interface MonthProps { focusedDate?: Date; selected?: Range; hoverDate?: Date; @@ -46,7 +46,7 @@ const WEEKDAYS = [ Weekdays.Saturday, ]; -export default function Month({ +export function Month({ focusedDate, selected, hoverDate, @@ -59,7 +59,7 @@ export default function Month({ month, year, weekStartsOn, -}: Props) { +}: MonthProps) { const intl = useI18n(); const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false; diff --git a/src/components/DatePicker/components/Month/index.ts b/src/components/DatePicker/components/Month/index.ts index fd59ee229fe..d70a44e1ad1 100644 --- a/src/components/DatePicker/components/Month/index.ts +++ b/src/components/DatePicker/components/Month/index.ts @@ -1,4 +1 @@ -import Month from './Month'; - -export {Props} from './Month'; -export default Month; +export {Month, MonthProps} from './Month'; diff --git a/src/components/DatePicker/components/Month/tests/Month.test.tsx b/src/components/DatePicker/components/Month/tests/Month.test.tsx index dff583960d1..4f50a4f5c64 100644 --- a/src/components/DatePicker/components/Month/tests/Month.test.tsx +++ b/src/components/DatePicker/components/Month/tests/Month.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import {Weekdays} from '@shopify/javascript-utilities/dates'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import {Weekday} from '../..'; -import Month from '../Month'; -import Day from '../../Day'; +import {Weekday} from '../../Weekday'; +import {Day} from '../../Day'; +import {Month} from '../Month'; describe('', () => { describe('title', () => { diff --git a/src/components/DatePicker/components/Weekday/Weekday.tsx b/src/components/DatePicker/components/Weekday/Weekday.tsx index 75d1b5d4809..c5747cdd70c 100644 --- a/src/components/DatePicker/components/Weekday/Weekday.tsx +++ b/src/components/DatePicker/components/Weekday/Weekday.tsx @@ -3,13 +3,13 @@ import {Weekdays} from '@shopify/javascript-utilities/dates'; import {classNames} from '../../../../utilities/css'; import styles from '../../DatePicker.scss'; -export interface Props { +export interface WeekdayProps { label: Weekdays; title: string; current: boolean; } -export default function Weekday({label, title, current}: Props) { +export function Weekday({label, title, current}: WeekdayProps) { const className = classNames( styles.Weekday, current && styles['Weekday-current'], diff --git a/src/components/DatePicker/components/Weekday/index.ts b/src/components/DatePicker/components/Weekday/index.ts index 159ba0759a1..daab9771b20 100644 --- a/src/components/DatePicker/components/Weekday/index.ts +++ b/src/components/DatePicker/components/Weekday/index.ts @@ -1,4 +1 @@ -import Weekday from './Weekday'; - -export {Props} from './Weekday'; -export default Weekday; +export {Weekday, WeekdayProps} from './Weekday'; diff --git a/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx b/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx index fddf1e45f19..7de83f3a732 100644 --- a/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx +++ b/src/components/DatePicker/components/Weekday/tests/Weekday.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Weekdays} from '@shopify/javascript-utilities/dates'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Weekday from '../Weekday'; +import {Weekday} from '../Weekday'; describe('', () => { const mockProps = { diff --git a/src/components/DatePicker/components/index.ts b/src/components/DatePicker/components/index.ts index ece618b0107..15ae0a1485a 100644 --- a/src/components/DatePicker/components/index.ts +++ b/src/components/DatePicker/components/index.ts @@ -1,5 +1,5 @@ -export {default as Day, Props as DayProps} from './Day'; +export {Day, DayProps} from './Day'; -export {default as Month, Props as MonthProps} from './Month'; +export {Month, MonthProps} from './Month'; -export {default as Weekday, Props as WeekdayProps} from './Weekday'; +export {Weekday, WeekdayProps} from './Weekday'; diff --git a/src/components/DropZone/components/FileUpload/FileUpload.tsx b/src/components/DropZone/components/FileUpload/FileUpload.tsx index a06f2bc2fe6..69212a8e036 100755 --- a/src/components/DropZone/components/FileUpload/FileUpload.tsx +++ b/src/components/DropZone/components/FileUpload/FileUpload.tsx @@ -18,12 +18,12 @@ import {useI18n} from '../../../../utilities/i18n'; import styles from './FileUpload.scss'; -export interface Props { +export interface FileUploadProps { actionTitle?: string; actionHint?: string; } -export default function FileUpload(props: Props) { +export function FileUpload(props: FileUploadProps) { const {translate} = useI18n(); const {size, type} = useContext(DropZoneContext); const suffix = capitalize(type); diff --git a/src/components/DropZone/components/FileUpload/index.ts b/src/components/DropZone/components/FileUpload/index.ts index 4966fc0ebc6..f65ec72d0a5 100644 --- a/src/components/DropZone/components/FileUpload/index.ts +++ b/src/components/DropZone/components/FileUpload/index.ts @@ -1,4 +1 @@ -import FileUpload from './FileUpload'; - -export {Props} from './FileUpload'; -export default FileUpload; +export {FileUpload, FileUploadProps} from './FileUpload'; diff --git a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx index 7caa16d52df..ef67cc81bb4 100755 --- a/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx +++ b/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Link, Icon, Button, Caption, TextStyle} from 'components'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {DropZoneContext} from '../../../context'; -import FileUpload from '../FileUpload'; +import {FileUpload} from '../FileUpload'; import {fileUpload as fileUploadImage, imageUpload} from '../../../images'; describe('', () => { diff --git a/src/components/DropZone/components/index.ts b/src/components/DropZone/components/index.ts index 49f44ba4ebb..f65ec72d0a5 100644 --- a/src/components/DropZone/components/index.ts +++ b/src/components/DropZone/components/index.ts @@ -1 +1 @@ -export {default as FileUpload, Props as FileUploadProps} from './FileUpload'; +export {FileUpload, FileUploadProps} from './FileUpload'; diff --git a/src/components/DropZone/images/index.ts b/src/components/DropZone/images/index.ts index ce946b47918..71f492df26a 100644 --- a/src/components/DropZone/images/index.ts +++ b/src/components/DropZone/images/index.ts @@ -1,2 +1,3 @@ export {default as fileUpload} from './file-upload.svg'; + export {default as imageUpload} from './image-upload.svg'; diff --git a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx index f906058e745..fde9d4b3dde 100644 --- a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx +++ b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx @@ -18,7 +18,7 @@ export interface PopoverableAction extends Action { onAction(): void; } -export interface Props { +export interface ConnectedFilterControlProps { children: React.ReactNode; rightPopoverableActions?: PopoverableAction[] | null; rightAction?: React.ReactNode; @@ -35,10 +35,11 @@ interface State { } export const FILTER_FIELD_MIN_WIDTH = 150; + export const FILTER_FIELD_CUSTOM_PROPERTY = '--textfield-min-width'; -export default class ConnectedFilterControl extends React.Component< - Props, +export class ConnectedFilterControl extends React.Component< + ConnectedFilterControlProps, State > { state: State = { diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx b/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx index f097cad5110..fd8b295eb37 100644 --- a/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx +++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/Item.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {classNames} from '../../../../../../utilities/css'; import styles from '../../ConnectedFilterControl.scss'; -export interface Props { +interface ItemProps { children?: React.ReactNode; } @@ -10,7 +10,7 @@ interface State { focused: boolean; } -export default class Item extends React.PureComponent { +export class Item extends React.PureComponent { state: State = {focused: false}; render() { diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts b/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts index 01ed425e2fd..374108f2e57 100644 --- a/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts +++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/index.ts @@ -1,3 +1 @@ -import Item from './Item'; - -export default Item; +export {Item} from './Item'; diff --git a/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx b/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx index 0fef5562262..94ec0a686d4 100644 --- a/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx +++ b/src/components/Filters/components/ConnectedFilterControl/components/Item/tests/Item.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; -import Item from '../Item'; +import {Item} from '../Item'; describe('', () => { it('handles focus', () => { diff --git a/src/components/Filters/components/ConnectedFilterControl/components/index.ts b/src/components/Filters/components/ConnectedFilterControl/components/index.ts index 0b556f1ab34..374108f2e57 100644 --- a/src/components/Filters/components/ConnectedFilterControl/components/index.ts +++ b/src/components/Filters/components/ConnectedFilterControl/components/index.ts @@ -1 +1 @@ -export {default as Item} from './Item'; +export {Item} from './Item'; diff --git a/src/components/Filters/components/ConnectedFilterControl/index.ts b/src/components/Filters/components/ConnectedFilterControl/index.ts index 52be243ded0..23cb57aff61 100644 --- a/src/components/Filters/components/ConnectedFilterControl/index.ts +++ b/src/components/Filters/components/ConnectedFilterControl/index.ts @@ -1,8 +1,5 @@ -import ConnectedFilterControl from './ConnectedFilterControl'; - export { - Props as ConnectedFilterControlProps, + ConnectedFilterControl, + ConnectedFilterControlProps, PopoverableAction, } from './ConnectedFilterControl'; - -export default ConnectedFilterControl; diff --git a/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx b/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx index d8a240d59d3..ef3dbe809ba 100644 --- a/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx +++ b/src/components/Filters/components/ConnectedFilterControl/tests/ConnectedFilterControl.test.tsx @@ -3,7 +3,8 @@ import React from 'react'; import {Popover, Button} from 'components'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import ConnectedFilterControl, { +import { + ConnectedFilterControl, PopoverableAction, } from '../ConnectedFilterControl'; diff --git a/src/components/Filters/components/index.ts b/src/components/Filters/components/index.ts index a81eb526575..23cb57aff61 100644 --- a/src/components/Filters/components/index.ts +++ b/src/components/Filters/components/index.ts @@ -1,5 +1,5 @@ export { - default as ConnectedFilterControl, + ConnectedFilterControl, ConnectedFilterControlProps, PopoverableAction, } from './ConnectedFilterControl'; diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index ccf386e2a5d..4edb7f3b1b4 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -10,7 +10,9 @@ export type Enctype = | 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'; + export type Method = 'post' | 'get' | 'action'; + export type Target = '_blank' | '_self' | '_parent' | '_top' | string; export interface Props { diff --git a/src/components/FormLayout/components/Group/Group.tsx b/src/components/FormLayout/components/Group/Group.tsx index 4bb22cd31ef..232fc2a043c 100644 --- a/src/components/FormLayout/components/Group/Group.tsx +++ b/src/components/FormLayout/components/Group/Group.tsx @@ -4,9 +4,9 @@ import {createUniqueIDFactory} from '@shopify/javascript-utilities/other'; import {classNames} from '../../../../utilities/css'; import {wrapWithComponent} from '../../../../utilities/components'; import styles from '../../FormLayout.scss'; -import Item from '../Item'; +import {Item} from '../Item'; -export interface Props { +export interface GroupProps { children?: React.ReactNode; condensed?: boolean; title?: string; @@ -15,7 +15,7 @@ export interface Props { const getUniqueID = createUniqueIDFactory('FormLayoutGroup'); -export default function Group({children, condensed, title, helpText}: Props) { +export function Group({children, condensed, title, helpText}: GroupProps) { const className = classNames(condensed ? styles.condensed : styles.grouped); const id = getUniqueID(); diff --git a/src/components/FormLayout/components/Group/index.ts b/src/components/FormLayout/components/Group/index.ts index e0c6b0e1389..e367408634a 100644 --- a/src/components/FormLayout/components/Group/index.ts +++ b/src/components/FormLayout/components/Group/index.ts @@ -1,4 +1 @@ -import Group from './Group'; - -export {Props} from './Group'; -export default Group; +export {Group, GroupProps} from './Group'; diff --git a/src/components/FormLayout/components/Group/tests/Group.test.tsx b/src/components/FormLayout/components/Group/tests/Group.test.tsx index 65e7182cfbf..1f2d68613eb 100644 --- a/src/components/FormLayout/components/Group/tests/Group.test.tsx +++ b/src/components/FormLayout/components/Group/tests/Group.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {TextField} from 'components'; -import Group from '../Group'; +import {Group} from '../Group'; describe('', () => { let children: React.ReactNode; diff --git a/src/components/FormLayout/components/Item/Item.tsx b/src/components/FormLayout/components/Item/Item.tsx index ef6b14190a8..778820bef1a 100644 --- a/src/components/FormLayout/components/Item/Item.tsx +++ b/src/components/FormLayout/components/Item/Item.tsx @@ -1,10 +1,10 @@ import React from 'react'; import styles from '../../FormLayout.scss'; -export interface Props { +export interface ItemProps { children?: React.ReactNode; } -export default function Item(props: Props) { +export function Item(props: ItemProps) { return
{props.children}
; } diff --git a/src/components/FormLayout/components/Item/index.ts b/src/components/FormLayout/components/Item/index.ts index 02c0b0e1951..e158f53cc0d 100644 --- a/src/components/FormLayout/components/Item/index.ts +++ b/src/components/FormLayout/components/Item/index.ts @@ -1,4 +1 @@ -import Item from './Item'; - -export {Props} from './Item'; -export default Item; +export {Item, ItemProps} from './Item'; diff --git a/src/components/FormLayout/components/Item/tests/Item.test.tsx b/src/components/FormLayout/components/Item/tests/Item.test.tsx index 5b9c3561c6b..56fb409989c 100644 --- a/src/components/FormLayout/components/Item/tests/Item.test.tsx +++ b/src/components/FormLayout/components/Item/tests/Item.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; import {TextField} from 'components'; -import Item from '../Item'; +import {Item} from '../Item'; describe('', () => { it('renders its children', () => { diff --git a/src/components/FormLayout/components/index.ts b/src/components/FormLayout/components/index.ts index 948c6286f21..9c8af724502 100644 --- a/src/components/FormLayout/components/index.ts +++ b/src/components/FormLayout/components/index.ts @@ -1,3 +1,3 @@ -export {default as Group, Props as GroupProps} from './Group'; +export {Group, GroupProps} from './Group'; -export {default as Item, Props as ItemProps} from './Item'; +export {Item, ItemProps} from './Item'; diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx index ea356fc66af..ab784f321ce 100644 --- a/src/components/Frame/Frame.tsx +++ b/src/components/Frame/Frame.tsx @@ -57,8 +57,11 @@ interface State { } export const GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height'; + export const APP_FRAME_MAIN = 'AppFrameMain'; + export const APP_FRAME_MAIN_ANCHOR_TARGET = 'AppFrameMainContent'; + const APP_FRAME_NAV = 'AppFrameNav'; const APP_FRAME_TOP_BAR = 'AppFrameTopBar'; const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar'; diff --git a/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx b/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx index e1e4c4364dc..f902eb49cd6 100644 --- a/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx +++ b/src/components/Frame/components/CSSAnimation/CSSAnimation.tsx @@ -7,7 +7,7 @@ export enum AnimationType { Fade = 'fade', } -export interface Props { +export interface CSSAnimationProps { in: boolean; className: string; type: AnimationType; @@ -21,12 +21,12 @@ enum TransitionStatus { Exited = 'exited', } -export default function Collapsible({ +export function CSSAnimation({ in: inProp, className, type, children, -}: Props) { +}: CSSAnimationProps) { const [transitionStatus, setTransitionStatus] = useState( inProp ? TransitionStatus.Entering : TransitionStatus.Exited, ); diff --git a/src/components/Frame/components/CSSAnimation/index.ts b/src/components/Frame/components/CSSAnimation/index.ts index 942b2b02863..6d70b67eaa2 100644 --- a/src/components/Frame/components/CSSAnimation/index.ts +++ b/src/components/Frame/components/CSSAnimation/index.ts @@ -1 +1 @@ -export {default, AnimationType} from './CSSAnimation'; +export {CSSAnimation, AnimationType} from './CSSAnimation'; diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx index 09f8326b5a9..cabbe9f83f9 100644 --- a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx +++ b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {getWidth} from '../../../../utilities/get-width'; -import {ContextualSaveBarProps as Props} from '../../../../utilities/frame'; +import {ContextualSaveBarProps} from '../../../../utilities/frame'; import { withAppProvider, WithAppProviderProps, @@ -15,7 +15,7 @@ import {DiscardConfirmationModal} from './components'; import styles from './ContextualSaveBar.scss'; -type CombinedProps = Props & WithAppProviderProps; +type CombinedProps = ContextualSaveBarProps & WithAppProviderProps; interface State { discardConfirmationModalVisible: boolean; @@ -140,4 +140,4 @@ class ContextualSaveBar extends React.PureComponent { }; } -export default withAppProvider()(ContextualSaveBar); +export default withAppProvider()(ContextualSaveBar); diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx index c5e9169e41c..009936f99e1 100644 --- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx +++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.tsx @@ -3,17 +3,17 @@ import React from 'react'; import {useI18n} from '../../../../../../utilities/i18n'; import Modal from '../../../../../Modal'; -export interface Props { +export interface DiscardConfirmationModalProps { open: boolean; onDiscard(): void; onCancel(): void; } -export default function DiscardConfirmationModal({ +export function DiscardConfirmationModal({ open, onDiscard, onCancel, -}: Props) { +}: DiscardConfirmationModalProps) { const intl = useI18n(); return ( diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts index 5baa29fb195..69cc6bcc1d9 100644 --- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts +++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/index.ts @@ -1,4 +1,4 @@ -import DiscardConfirmationModal from './DiscardConfirmationModal'; - -export {Props} from './DiscardConfirmationModal'; -export default DiscardConfirmationModal; +export { + DiscardConfirmationModal, + DiscardConfirmationModalProps, +} from './DiscardConfirmationModal'; diff --git a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx index 2a61943dc65..69a395e267e 100644 --- a/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx +++ b/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/tests/DiscardConfirmationModal.test.tsx @@ -4,7 +4,7 @@ import {mountWithAppProvider, trigger} from 'test-utilities/legacy'; import {Modal} from 'components'; -import DiscardConfirmationModal from '../DiscardConfirmationModal'; +import {DiscardConfirmationModal} from '../DiscardConfirmationModal'; describe('', () => { it('passes its open prop value to the Modal', () => { diff --git a/src/components/Frame/components/ContextualSaveBar/components/index.ts b/src/components/Frame/components/ContextualSaveBar/components/index.ts index de597b4aa26..69cc6bcc1d9 100644 --- a/src/components/Frame/components/ContextualSaveBar/components/index.ts +++ b/src/components/Frame/components/ContextualSaveBar/components/index.ts @@ -1,4 +1,4 @@ export { - default as DiscardConfirmationModal, - Props as TDiscardConfirmationModalProps, + DiscardConfirmationModal, + DiscardConfirmationModalProps, } from './DiscardConfirmationModal'; diff --git a/src/components/Frame/components/ContextualSaveBar/index.ts b/src/components/Frame/components/ContextualSaveBar/index.ts index abfd294fe06..5e4ce515a31 100644 --- a/src/components/Frame/components/ContextualSaveBar/index.ts +++ b/src/components/Frame/components/ContextualSaveBar/index.ts @@ -1,3 +1 @@ -import ContextualSaveBar from './ContextualSaveBar'; - -export default ContextualSaveBar; +export {default as ContextualSaveBar} from './ContextualSaveBar'; diff --git a/src/components/Frame/components/Loading/Loading.tsx b/src/components/Frame/components/Loading/Loading.tsx index 81f38c1c946..736c33b7b0a 100644 --- a/src/components/Frame/components/Loading/Loading.tsx +++ b/src/components/Frame/components/Loading/Loading.tsx @@ -2,7 +2,7 @@ import React from 'react'; import debounce from 'lodash/debounce'; import styles from './Loading.scss'; -export interface Props {} +export interface LoadingProps {} interface State { progress: number; @@ -13,7 +13,7 @@ interface State { const INITIAL_STEP = 10; const STUCK_THRESHOLD = 99; -export default class Loading extends React.Component { +export class Loading extends React.Component { state: State = { progress: 0, step: INITIAL_STEP, diff --git a/src/components/Frame/components/Loading/index.ts b/src/components/Frame/components/Loading/index.ts index 88902d9c593..2d49cfe791f 100644 --- a/src/components/Frame/components/Loading/index.ts +++ b/src/components/Frame/components/Loading/index.ts @@ -1,7 +1 @@ -// This path comment acts as a unique ID -// https://github.com/Shopify/sewing-kit/issues/590 -// @polaris/components/Frame/components/Loading/index.ts -import Loading from './Loading'; - -export {Props} from './Loading'; -export default Loading; +export {Loading, LoadingProps} from './Loading'; diff --git a/src/components/Frame/components/Loading/tests/Loading.test.tsx b/src/components/Frame/components/Loading/tests/Loading.test.tsx index 9a618ba4b46..a1b76e458d6 100644 --- a/src/components/Frame/components/Loading/tests/Loading.test.tsx +++ b/src/components/Frame/components/Loading/tests/Loading.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Loading from '../Loading'; +import {Loading} from '../Loading'; describe('', () => { const loading = mountWithAppProvider(); diff --git a/src/components/Frame/components/Toast/Toast.tsx b/src/components/Frame/components/Toast/Toast.tsx index 0add97165bd..77cf3e86b2a 100644 --- a/src/components/Frame/components/Toast/Toast.tsx +++ b/src/components/Frame/components/Toast/Toast.tsx @@ -7,14 +7,17 @@ import Button from '../../../Button'; import Icon from '../../../Icon'; import KeypressListener from '../../../KeypressListener'; -import {ToastProps as Props} from '../../../../utilities/frame'; +import {ToastProps} from '../../../../utilities/frame'; import styles from './Toast.scss'; +export {ToastProps}; + export const DEFAULT_TOAST_DURATION = 5000; + export const DEFAULT_TOAST_DURATION_WITH_ACTION = 10000; -export default class Toast extends React.Component { +export class Toast extends React.Component { private timer?: number; componentDidUpdate() { diff --git a/src/components/Frame/components/Toast/index.ts b/src/components/Frame/components/Toast/index.ts index 57d5c2f2b9d..ca34b50dc78 100644 --- a/src/components/Frame/components/Toast/index.ts +++ b/src/components/Frame/components/Toast/index.ts @@ -1,5 +1,6 @@ export { - default, + Toast, + ToastProps, DEFAULT_TOAST_DURATION, DEFAULT_TOAST_DURATION_WITH_ACTION, } from './Toast'; diff --git a/src/components/Frame/components/Toast/tests/Toast.test.tsx b/src/components/Frame/components/Toast/tests/Toast.test.tsx index 7f7d1a0071a..b9a4018ee47 100644 --- a/src/components/Frame/components/Toast/tests/Toast.test.tsx +++ b/src/components/Frame/components/Toast/tests/Toast.test.tsx @@ -6,8 +6,7 @@ import { findByTestID, } from 'test-utilities/legacy'; import Button from '../../../../Button'; -import {ToastProps as Props} from '../../../../../utilities/frame'; -import Toast from '../Toast'; +import {Toast, ToastProps} from '../Toast'; import {Key} from '../../../../../types'; interface HandlerMap { @@ -15,7 +14,7 @@ interface HandlerMap { } describe('', () => { - const mockProps: Props = { + const mockProps: ToastProps = { content: 'Image uploaded', onDismiss: noop, }; diff --git a/src/components/Frame/components/ToastManager/ToastManager.tsx b/src/components/Frame/components/ToastManager/ToastManager.tsx index 92da2a31673..beb5db389b4 100644 --- a/src/components/Frame/components/ToastManager/ToastManager.tsx +++ b/src/components/Frame/components/ToastManager/ToastManager.tsx @@ -7,17 +7,22 @@ import {classNames} from '../../../../utilities/css'; import EventListener from '../../../EventListener'; import Portal from '../../../Portal'; import {ToastPropsWithID} from '../../../../utilities/frame'; -import Toast from '../Toast'; +import {Toast} from '../Toast'; import {useDeepEffect} from '../../../../utilities/use-deep-effect'; import {useDeepCallback} from '../../../../utilities/use-deep-callback'; import styles from './ToastManager.scss'; -export interface Props { +export interface ToastManagerProps { toastMessages: (ToastPropsWithID)[]; } -function ToastManager({toastMessages}: Props) { +// This does have display name, but the linting has a bug in it +// https://github.com/yannickcr/eslint-plugin-react/issues/2324 +// eslint-disable-next-line react/display-name +export const ToastManager = memo(function ToastManager({ + toastMessages, +}: ToastManagerProps) { const toastNodes: React.RefObject[] = []; const updateToasts = useDeepCallback( @@ -77,12 +82,10 @@ function ToastManager({toastMessages}: Props) { function findDOMNode(index: number) { return () => toastNodes[index].current; } -} +}); const toastClasses = { enter: classNames(styles.ToastWrapper, styles['ToastWrapper-enter']), enterDone: classNames(styles.ToastWrapper, styles['ToastWrapper-enter-done']), exit: classNames(styles.ToastWrapper, styles['ToastWrapper-exit']), }; - -export default memo(ToastManager); diff --git a/src/components/Frame/components/ToastManager/index.ts b/src/components/Frame/components/ToastManager/index.ts index 973707deb6a..47afef2b5ae 100644 --- a/src/components/Frame/components/ToastManager/index.ts +++ b/src/components/Frame/components/ToastManager/index.ts @@ -1,4 +1 @@ -import ToastManager from './ToastManager'; - -export {Props} from './ToastManager'; -export default ToastManager; +export {ToastManager, ToastManagerProps} from './ToastManager'; diff --git a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx index 05eff1c9647..607a528e89f 100644 --- a/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx +++ b/src/components/Frame/components/ToastManager/tests/ToastManager.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import {timer} from '@shopify/jest-dom-mocks'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Toast from '../../Toast'; +import {Toast} from '../../Toast'; import Frame from '../../../Frame'; -import ToastManager from '..'; +import {ToastManager} from '..'; window.matchMedia = window.matchMedia || diff --git a/src/components/Frame/components/index.ts b/src/components/Frame/components/index.ts index 6b364c7170f..507163e4956 100644 --- a/src/components/Frame/components/index.ts +++ b/src/components/Frame/components/index.ts @@ -1,12 +1,13 @@ export { - default as Toast, + Toast, DEFAULT_TOAST_DURATION, DEFAULT_TOAST_DURATION_WITH_ACTION, } from './Toast'; -export { - default as ToastManager, - Props as ToastManagerProps, -} from './ToastManager'; -export {default as Loading, Props as LoadingProps} from './Loading'; -export {default as ContextualSaveBar} from './ContextualSaveBar'; -export {default as CSSAnimation, AnimationType} from './CSSAnimation'; + +export {ToastManager, ToastManagerProps} from './ToastManager'; + +export {Loading, LoadingProps} from './Loading'; + +export {ContextualSaveBar} from './ContextualSaveBar'; + +export {CSSAnimation, AnimationType} from './CSSAnimation'; diff --git a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx index 140a11a731c..9ca24ce1542 100644 --- a/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx +++ b/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx @@ -3,13 +3,13 @@ import Heading from '../../../Heading'; import TextContainer from '../../../TextContainer'; import styles from '../../Layout.scss'; -export interface Props { +export interface AnnotatedSectionProps { children?: React.ReactNode; title?: React.ReactNode; description?: React.ReactNode; } -export default function AnnotatedSection(props: Props) { +export function AnnotatedSection(props: AnnotatedSectionProps) { const {children, title, description} = props; const descriptionMarkup = diff --git a/src/components/Layout/components/AnnotatedSection/index.ts b/src/components/Layout/components/AnnotatedSection/index.ts index c4f33c490e3..319a27f6878 100644 --- a/src/components/Layout/components/AnnotatedSection/index.ts +++ b/src/components/Layout/components/AnnotatedSection/index.ts @@ -1,4 +1 @@ -import AnnotatedSection from './AnnotatedSection'; - -export {Props} from './AnnotatedSection'; -export default AnnotatedSection; +export {AnnotatedSection, AnnotatedSectionProps} from './AnnotatedSection'; diff --git a/src/components/Layout/components/Section/Section.tsx b/src/components/Layout/components/Section/Section.tsx index 1139ddf28ae..5a399242322 100644 --- a/src/components/Layout/components/Section/Section.tsx +++ b/src/components/Layout/components/Section/Section.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {classNames} from '../../../../utilities/css'; import styles from '../../Layout.scss'; -export interface Props { +export interface SectionProps { children?: React.ReactNode; secondary?: boolean; fullWidth?: boolean; @@ -10,13 +10,13 @@ export interface Props { oneThird?: boolean; } -export default function Section({ +export function Section({ children, secondary, fullWidth, oneHalf, oneThird, -}: Props) { +}: SectionProps) { const className = classNames( styles.Section, secondary && styles['Section-secondary'], diff --git a/src/components/Layout/components/Section/index.ts b/src/components/Layout/components/Section/index.ts index b147a6e4e4b..344c319971d 100644 --- a/src/components/Layout/components/Section/index.ts +++ b/src/components/Layout/components/Section/index.ts @@ -1,4 +1 @@ -import Section from './Section'; - -export {Props} from './Section'; -export default Section; +export {Section, SectionProps} from './Section'; diff --git a/src/components/Layout/components/index.ts b/src/components/Layout/components/index.ts index daefbf3dbca..12ea5c4efdc 100644 --- a/src/components/Layout/components/index.ts +++ b/src/components/Layout/components/index.ts @@ -1,6 +1,3 @@ -export { - default as AnnotatedSection, - Props as AnnotatedSectionProps, -} from './AnnotatedSection'; +export {AnnotatedSection, AnnotatedSectionProps} from './AnnotatedSection'; -export {default as Section, Props as SectionProps} from './Section'; +export {Section, SectionProps} from './Section'; diff --git a/src/components/List/components/Item/Item.tsx b/src/components/List/components/Item/Item.tsx index 1d53261855c..5669372bb13 100644 --- a/src/components/List/components/Item/Item.tsx +++ b/src/components/List/components/Item/Item.tsx @@ -1,11 +1,11 @@ import React from 'react'; import styles from '../../List.scss'; -export interface Props { +export interface ItemProps { /** Content to display inside the item */ children?: React.ReactNode; } -export default function Item({children}: Props) { +export function Item({children}: ItemProps) { return
  • {children}
    • ; } diff --git a/src/components/List/components/Item/index.ts b/src/components/List/components/Item/index.ts index 02c0b0e1951..e158f53cc0d 100644 --- a/src/components/List/components/Item/index.ts +++ b/src/components/List/components/Item/index.ts @@ -1,4 +1 @@ -import Item from './Item'; - -export {Props} from './Item'; -export default Item; +export {Item, ItemProps} from './Item'; diff --git a/src/components/List/components/Item/tests/Item.test.tsx b/src/components/List/components/Item/tests/Item.test.tsx index b1a2e0c7ef7..7c08a4fdfb9 100644 --- a/src/components/List/components/Item/tests/Item.test.tsx +++ b/src/components/List/components/Item/tests/Item.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Item from '../Item'; +import {Item} from '../Item'; describe('', () => { it('renders its children', () => { diff --git a/src/components/List/components/index.ts b/src/components/List/components/index.ts index 584c7f5e9a9..e158f53cc0d 100644 --- a/src/components/List/components/index.ts +++ b/src/components/List/components/index.ts @@ -1 +1 @@ -export {default as Item, Props as ItemProps} from './Item'; +export {Item, ItemProps} from './Item'; diff --git a/src/components/Modal/components/CloseButton/CloseButton.tsx b/src/components/Modal/components/CloseButton/CloseButton.tsx index 1cbf47e6e2c..14a25505d57 100644 --- a/src/components/Modal/components/CloseButton/CloseButton.tsx +++ b/src/components/Modal/components/CloseButton/CloseButton.tsx @@ -7,12 +7,12 @@ import Icon from '../../../Icon'; import styles from './CloseButton.scss'; -export interface Props { +export interface CloseButtonProps { title?: boolean; onClick(): void; } -export default function CloseButton({title = true, onClick}: Props) { +export function CloseButton({title = true, onClick}: CloseButtonProps) { const intl = useI18n(); const className = classNames( diff --git a/src/components/Modal/components/CloseButton/index.ts b/src/components/Modal/components/CloseButton/index.ts index 227eac76d8b..17c66f439fe 100644 --- a/src/components/Modal/components/CloseButton/index.ts +++ b/src/components/Modal/components/CloseButton/index.ts @@ -1,4 +1 @@ -import CloseButton from './CloseButton'; - -export {Props as CloseButtonProps} from './CloseButton'; -export default CloseButton; +export {CloseButton, CloseButtonProps} from './CloseButton'; diff --git a/src/components/Modal/components/Dialog/Dialog.tsx b/src/components/Modal/components/Dialog/Dialog.tsx index b138923839e..9f3ae7de4c7 100644 --- a/src/components/Modal/components/Dialog/Dialog.tsx +++ b/src/components/Modal/components/Dialog/Dialog.tsx @@ -10,7 +10,7 @@ import TrapFocus from '../../../TrapFocus'; import styles from './Dialog.scss'; -export interface DialogProps { +export interface BaseDialogProps { labelledBy: string; instant?: boolean; children?: React.ReactNode; @@ -21,9 +21,9 @@ export interface DialogProps { onExited?(): void; } -export type Props = DialogProps & AnimationProps; +export type DialogProps = BaseDialogProps & AnimationProps; -export default function Dialog({ +export function Dialog({ instant, labelledBy, children, @@ -33,7 +33,7 @@ export default function Dialog({ large, limitHeight, ...props -}: Props) { +}: DialogProps) { const containerNode = useRef(null); const findDOMNode = useCallback(() => containerNode.current, []); const classes = classNames( diff --git a/src/components/Modal/components/Dialog/index.ts b/src/components/Modal/components/Dialog/index.ts index 3d6bec6b3ba..29a21065401 100644 --- a/src/components/Modal/components/Dialog/index.ts +++ b/src/components/Modal/components/Dialog/index.ts @@ -1,4 +1 @@ -import Dialog from './Dialog'; - -export {Props as DialogProps} from './Dialog'; -export default Dialog; +export {Dialog, DialogProps} from './Dialog'; diff --git a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx index d4cd5654905..75246f5f2da 100644 --- a/src/components/Modal/components/Dialog/tests/Dialog.test.tsx +++ b/src/components/Modal/components/Dialog/tests/Dialog.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {animationFrame} from '@shopify/jest-dom-mocks'; import {trigger, mountWithAppProvider} from 'test-utilities/legacy'; import {KeypressListener} from 'components'; -import Dialog from '../Dialog'; +import {Dialog} from '../Dialog'; describe('', () => { beforeEach(() => { diff --git a/src/components/Modal/components/Footer/Footer.tsx b/src/components/Modal/components/Footer/Footer.tsx index 91a84ccb4d6..eaeb4fa1765 100644 --- a/src/components/Modal/components/Footer/Footer.tsx +++ b/src/components/Modal/components/Footer/Footer.tsx @@ -7,7 +7,7 @@ import Stack from '../../../Stack'; import styles from './Footer.scss'; -export interface Props { +export interface FooterProps { /** Primary action */ primaryAction?: AppBridgeAction | ComplexAction; /** Collection of secondary actions */ @@ -16,11 +16,11 @@ export interface Props { children?: React.ReactNode; } -export default function Footer({ +export function Footer({ primaryAction, secondaryActions, children, -}: Props) { +}: FooterProps) { const primaryActionButton = (primaryAction && buttonsFrom(primaryAction, {primary: true})) || null; const secondaryActionButtons = diff --git a/src/components/Modal/components/Footer/index.ts b/src/components/Modal/components/Footer/index.ts index 9bdb2ae29aa..d570734dd6a 100644 --- a/src/components/Modal/components/Footer/index.ts +++ b/src/components/Modal/components/Footer/index.ts @@ -1,4 +1 @@ -import Footer from './Footer'; - -export {Props as FooterProps} from './Footer'; -export default Footer; +export {Footer, FooterProps} from './Footer'; diff --git a/src/components/Modal/components/Header/Header.tsx b/src/components/Modal/components/Header/Header.tsx index 1bb445d80b3..e8ad3ca84ef 100644 --- a/src/components/Modal/components/Header/Header.tsx +++ b/src/components/Modal/components/Header/Header.tsx @@ -1,17 +1,17 @@ import React from 'react'; import DisplayText from '../../../DisplayText'; -import CloseButton from '../CloseButton'; +import {CloseButton} from '../CloseButton'; import styles from './Header.scss'; -export interface Props { +export interface HeaderProps { id: string; children?: React.ReactNode; onClose(): void; } -export default function Header({id, children, onClose}: Props) { +export function Header({id, children, onClose}: HeaderProps) { return (
    diff --git a/src/components/Modal/components/Header/index.ts b/src/components/Modal/components/Header/index.ts index 2060baca395..c5990fc6821 100644 --- a/src/components/Modal/components/Header/index.ts +++ b/src/components/Modal/components/Header/index.ts @@ -1,4 +1 @@ -import Header from './Header'; - -export {Props as HeaderProps} from './Header'; -export default Header; +export {Header, HeaderProps} from './Header'; diff --git a/src/components/Modal/components/Section/Section.tsx b/src/components/Modal/components/Section/Section.tsx index 16fdeeb5ec7..15a15845999 100644 --- a/src/components/Modal/components/Section/Section.tsx +++ b/src/components/Modal/components/Section/Section.tsx @@ -2,17 +2,17 @@ import React from 'react'; import {classNames} from '../../../../utilities/css'; import styles from './Section.scss'; -export interface Props { +export interface SectionProps { children?: React.ReactNode; flush?: boolean; subdued?: boolean; } -export default function Section({ +export function Section({ children, flush = false, subdued = false, -}: Props) { +}: SectionProps) { const className = classNames( styles.Section, flush && styles.flush, diff --git a/src/components/Modal/components/Section/index.ts b/src/components/Modal/components/Section/index.ts index f3e3882dfe9..344c319971d 100644 --- a/src/components/Modal/components/Section/index.ts +++ b/src/components/Modal/components/Section/index.ts @@ -1,4 +1 @@ -import Section from './Section'; - -export {Props as SectionProps} from './Section'; -export default Section; +export {Section, SectionProps} from './Section'; diff --git a/src/components/Modal/components/index.ts b/src/components/Modal/components/index.ts index b2cf05b17c4..11c583533b1 100644 --- a/src/components/Modal/components/index.ts +++ b/src/components/Modal/components/index.ts @@ -1,9 +1,9 @@ -export {default as Dialog, DialogProps} from './Dialog'; +export {Dialog, DialogProps} from './Dialog'; -export {default as Footer, FooterProps} from './Footer'; +export {Footer, FooterProps} from './Footer'; -export {default as Header, HeaderProps} from './Header'; +export {Header, HeaderProps} from './Header'; -export {default as CloseButton} from './CloseButton'; +export {CloseButton} from './CloseButton'; -export {default as Section, SectionProps} from './Section'; +export {Section, SectionProps} from './Section'; diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx index bea79912f05..f00ca849dba 100644 --- a/src/components/Navigation/components/Item/Item.tsx +++ b/src/components/Navigation/components/Item/Item.tsx @@ -45,7 +45,7 @@ interface SecondaryAction { icon: IconProps['source']; } -export interface Props extends ItemURLDetails { +export interface ItemProps extends ItemURLDetails { icon?: IconProps['source']; badge?: ReactNode; label: string; @@ -67,7 +67,7 @@ enum MatchState { NoMatch, } -export default function Item({ +export function Item({ url, icon, label, @@ -83,7 +83,7 @@ export default function Item({ exactMatch, matchPaths, excludePaths, -}: Props) { +}: ItemProps) { const intl = useI18n(); const {location, onNavigationDismiss} = useContext(NavigationContext); const [expanded, setExpanded] = useState(false); @@ -276,7 +276,7 @@ export default function Item({ ); - function getClickHandler(onClick: Props['onClick']) { + function getClickHandler(onClick: ItemProps['onClick']) { return (event: MouseEvent) => { const {currentTarget} = event; @@ -307,7 +307,7 @@ export default function Item({ } export function isNavigationItemActive( - navigationItem: Props, + navigationItem: ItemProps, currentPath: string, ) { const matchState = matchStateForItem(navigationItem, currentPath); diff --git a/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx b/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx index 70bbb0d8290..6f38bc10b19 100644 --- a/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx +++ b/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx @@ -9,12 +9,12 @@ const createSecondaryNavigationId = createUniqueIDFactory( 'SecondaryNavigation', ); -interface Props { +interface SecondaryProps { expanded: boolean; children?: React.ReactNode; } -export default function Secondary({children, expanded}: Props) { +export function Secondary({children, expanded}: SecondaryProps) { const secondaryNavigationId = createSecondaryNavigationId(); return ( diff --git a/src/components/Navigation/components/Item/components/Secondary/index.ts b/src/components/Navigation/components/Item/components/Secondary/index.ts index 8a27b0359e6..d8e2c28080e 100644 --- a/src/components/Navigation/components/Item/components/Secondary/index.ts +++ b/src/components/Navigation/components/Item/components/Secondary/index.ts @@ -1,3 +1 @@ -import Secondary from './Secondary'; - -export default Secondary; +export {Secondary} from './Secondary'; diff --git a/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx b/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx index 887808a0c3b..57b925166e0 100644 --- a/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx +++ b/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Secondary from '../Secondary'; +import {Secondary} from '../Secondary'; describe('Secondary()', () => { it('mounts', () => { diff --git a/src/components/Navigation/components/Item/components/index.ts b/src/components/Navigation/components/Item/components/index.ts index d8629dc7f80..d8e2c28080e 100644 --- a/src/components/Navigation/components/Item/components/index.ts +++ b/src/components/Navigation/components/Item/components/index.ts @@ -1 +1 @@ -export {default as Secondary} from './Secondary'; +export {Secondary} from './Secondary'; diff --git a/src/components/Navigation/components/Item/index.ts b/src/components/Navigation/components/Item/index.ts index cc79224d29c..fd4f3f90bb6 100644 --- a/src/components/Navigation/components/Item/index.ts +++ b/src/components/Navigation/components/Item/index.ts @@ -1,4 +1,6 @@ -import Item from './Item'; - -export {Props, SubNavigationItem, isNavigationItemActive} from './Item'; -export default Item; +export { + Item, + ItemProps, + SubNavigationItem, + isNavigationItemActive, +} from './Item'; diff --git a/src/components/Navigation/components/Item/tests/Item.test.tsx b/src/components/Navigation/components/Item/tests/Item.test.tsx index fbf8eea88e3..1c6b465adc8 100644 --- a/src/components/Navigation/components/Item/tests/Item.test.tsx +++ b/src/components/Navigation/components/Item/tests/Item.test.tsx @@ -5,7 +5,7 @@ import {Icon, UnstyledLink, Indicator, Badge} from 'components'; import {act, trigger, mountWithAppProvider} from 'test-utilities/legacy'; import {NavigationContext} from '../../../context'; -import Item, {Props as ItemProps} from '../Item'; +import {Item, ItemProps} from '../Item'; import {Secondary} from '../components'; describe('', () => { diff --git a/src/components/Navigation/components/Message/Message.tsx b/src/components/Navigation/components/Message/Message.tsx index 2b6e0fbe636..fdd9846b043 100644 --- a/src/components/Navigation/components/Message/Message.tsx +++ b/src/components/Navigation/components/Message/Message.tsx @@ -9,7 +9,7 @@ import TextContainer from '../../../TextContainer'; import styles from './Message.scss'; -export interface Props { +export interface MessageProps { title: string; description: string; action: {onClick(): void; content: string}; @@ -17,13 +17,13 @@ export interface Props { badge?: {content: string; status: BadgeProps['status']}; } -export default function Message({ +export function Message({ title, description, action, link, badge, -}: Props) { +}: MessageProps) { const badgeMarkup = badge && ( {badge.content} ); diff --git a/src/components/Navigation/components/Message/index.ts b/src/components/Navigation/components/Message/index.ts index c97b9d21612..2b1800255e2 100644 --- a/src/components/Navigation/components/Message/index.ts +++ b/src/components/Navigation/components/Message/index.ts @@ -1,4 +1 @@ -import Message from './Message'; - -export {Props} from './Message'; -export default Message; +export {Message, MessageProps} from './Message'; diff --git a/src/components/Navigation/components/Message/tests/Message.test.tsx b/src/components/Navigation/components/Message/tests/Message.test.tsx index da52ad85e17..c7cc2241e0e 100644 --- a/src/components/Navigation/components/Message/tests/Message.test.tsx +++ b/src/components/Navigation/components/Message/tests/Message.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Message from '../Message'; +import {Message} from '../Message'; import Badge from '../../../../Badge'; const messageProps = { diff --git a/src/components/Navigation/components/Section/Section.tsx b/src/components/Navigation/components/Section/Section.tsx index b6e0b669eb1..513c3677642 100644 --- a/src/components/Navigation/components/Section/Section.tsx +++ b/src/components/Navigation/components/Section/Section.tsx @@ -8,13 +8,13 @@ import Collapsible from '../../../Collapsible'; import Icon from '../../../Icon'; import {IconProps} from '../../../../types'; -import Item, {Props as ItemProps} from '../Item'; +import {Item, ItemProps} from '../Item'; import styles from '../../Navigation.scss'; const createAdditionalItemsId = createUniqueIDFactory('AdditionalItems'); -export interface Props { +export interface SectionProps { items: ItemProps[]; icon?: IconProps['source']; title?: string; @@ -37,7 +37,7 @@ interface State { expanded: boolean; } -export default class Section extends React.Component { +export class Section extends React.Component { state: State = { expanded: false, }; diff --git a/src/components/Navigation/components/Section/index.ts b/src/components/Navigation/components/Section/index.ts index b147a6e4e4b..344c319971d 100644 --- a/src/components/Navigation/components/Section/index.ts +++ b/src/components/Navigation/components/Section/index.ts @@ -1,4 +1 @@ -import Section from './Section'; - -export {Props} from './Section'; -export default Section; +export {Section, SectionProps} from './Section'; diff --git a/src/components/Navigation/components/Section/tests/Section.test.tsx b/src/components/Navigation/components/Section/tests/Section.test.tsx index f467c102217..7af3495d3ea 100644 --- a/src/components/Navigation/components/Section/tests/Section.test.tsx +++ b/src/components/Navigation/components/Section/tests/Section.test.tsx @@ -9,8 +9,8 @@ import { import Collapsible from '../../../../Collapsible'; import {NavigationContext} from '../../../context'; -import Item from '../../Item'; -import Section from '../Section'; +import {Item} from '../../Item'; +import {Section} from '../Section'; import channelResults from './fixtures/AdminNavQuery/multiple-channels.json'; diff --git a/src/components/Navigation/components/index.ts b/src/components/Navigation/components/index.ts index 7257a363f51..212a759c1ee 100644 --- a/src/components/Navigation/components/index.ts +++ b/src/components/Navigation/components/index.ts @@ -1,3 +1,10 @@ -export {default as Section, Props as SectionProps} from './Section'; -export {default as Item, Props as ItemProps} from './Item'; -export {default as Message, Props as MessageProps} from './Message'; +export {Section, SectionProps} from './Section'; + +export { + Item, + ItemProps, + SubNavigationItem, + isNavigationItemActive, +} from './Item'; + +export {Message, MessageProps} from './Message'; diff --git a/src/components/Navigation/index.ts b/src/components/Navigation/index.ts index bc6a7eac95e..c95cf86b300 100644 --- a/src/components/Navigation/index.ts +++ b/src/components/Navigation/index.ts @@ -4,9 +4,8 @@ export {Props} from './Navigation'; export default Navigation; export { - Props as ItemProps, + ItemProps, SubNavigationItem, isNavigationItemActive, -} from './components/Item'; - -export {MessageProps} from './components'; + MessageProps, +} from './components'; diff --git a/src/components/OptionList/components/Checkbox/Checkbox.tsx b/src/components/OptionList/components/Checkbox/Checkbox.tsx index db6e12a7369..d78d86e9ff8 100644 --- a/src/components/OptionList/components/Checkbox/Checkbox.tsx +++ b/src/components/OptionList/components/Checkbox/Checkbox.tsx @@ -6,7 +6,7 @@ import Icon from '../../../Icon'; import styles from './Checkbox.scss'; -export interface Props { +export interface CheckboxProps { checked?: boolean; disabled?: boolean; active?: boolean; @@ -19,7 +19,7 @@ export interface Props { const getUniqueID = createUniqueIDFactory('Checkbox'); -export default function Checkbox({ +export function Checkbox({ id = getUniqueID(), checked = false, disabled, @@ -28,7 +28,7 @@ export default function Checkbox({ name, value, role, -}: Props) { +}: CheckboxProps) { const className = classNames(styles.Checkbox, active && styles.active); return (
    diff --git a/src/components/OptionList/components/Checkbox/index.ts b/src/components/OptionList/components/Checkbox/index.ts index 6b3558cad00..71a7d3ef7c3 100644 --- a/src/components/OptionList/components/Checkbox/index.ts +++ b/src/components/OptionList/components/Checkbox/index.ts @@ -1,4 +1 @@ -import Checkbox from './Checkbox'; - -export {Props} from './Checkbox'; -export default Checkbox; +export {Checkbox, CheckboxProps} from './Checkbox'; diff --git a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx index ce80b6e1aae..b917172864a 100644 --- a/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx +++ b/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Checkbox, {Props} from '../Checkbox'; +import {Checkbox, CheckboxProps} from '../Checkbox'; describe('', () => { - const defaultProps: Props = { + const defaultProps: CheckboxProps = { checked: true, disabled: false, id: 'checkboxId', diff --git a/src/components/OptionList/components/Option/Option.tsx b/src/components/OptionList/components/Option/Option.tsx index a98582975e6..2a9124324d7 100644 --- a/src/components/OptionList/components/Option/Option.tsx +++ b/src/components/OptionList/components/Option/Option.tsx @@ -5,11 +5,11 @@ import {IconProps} from '../../../../types'; import {Props as ThumbnailProps} from '../../../Thumbnail'; import {Props as AvatarProps} from '../../../Avatar'; import Scrollable from '../../../Scrollable'; -import Checkbox from '../Checkbox'; +import {Checkbox} from '../Checkbox'; import styles from './Option.scss'; -export interface Props { +export interface OptionProps { id: string; label: React.ReactNode; value: string; @@ -28,7 +28,7 @@ interface State { focused: boolean; } -export default class Option extends React.Component { +export class Option extends React.Component { state: State = { focused: false, }; diff --git a/src/components/OptionList/components/Option/index.ts b/src/components/OptionList/components/Option/index.ts index 27e16f58c8d..cbf67aaa1f2 100644 --- a/src/components/OptionList/components/Option/index.ts +++ b/src/components/OptionList/components/Option/index.ts @@ -1,4 +1 @@ -import Option, {Props} from './Option'; - -export default Option; -export {Props}; +export {Option, OptionProps} from './Option'; diff --git a/src/components/OptionList/components/Option/tests/Option.test.tsx b/src/components/OptionList/components/Option/tests/Option.test.tsx index fbc626b8fd3..41c73967290 100644 --- a/src/components/OptionList/components/Option/tests/Option.test.tsx +++ b/src/components/OptionList/components/Option/tests/Option.test.tsx @@ -1,10 +1,10 @@ import React from 'react'; import {mountWithAppProvider} from 'test-utilities/legacy'; -import Checkbox from '../../Checkbox'; -import Option, {Props} from '../Option'; +import {Checkbox} from '../../Checkbox'; +import {Option, OptionProps} from '../Option'; describe('