Merge pull request #2625 from Shopify/export-star-components

Use export *  in component indexes and subcomponent reexports

UNRELEASED.md

@@ -15,5 +15,6 @@
 ### Code quality
 
 - Converted `/tests/build.test.js` to TypeScript ([#2617](https://github.com/Shopify/polaris-react/pull/2617))
+- Use `export *` to rexport component content in component indexs and subcomponent listings ([#2625](https://github.com/Shopify/polaris-react/pull/2625))
 
 ### Deprecations

src/components/AccountConnection/index.ts

@@ -1 +1 @@
-export {AccountConnection, AccountConnectionProps} from './AccountConnection';
+export * from './AccountConnection';

src/components/ActionList/components/Item/index.ts

@@ -1 +1 @@
-export {Item, ItemProps} from './Item';
+export * from './Item';

src/components/ActionList/components/Section/index.ts

@@ -1 +1 @@
-export {Section, SectionProps} from './Section';
+export * from './Section';

src/components/ActionList/components/index.ts

@@ -1,3 +1,3 @@
-export {Item, ItemProps} from './Item';
+export * from './Item';
 
-export {Section, SectionProps} from './Section';
+export * from './Section';

src/components/ActionList/index.ts

@@ -1 +1 @@
-export {ActionList, ActionListProps} from './ActionList';
+export * from './ActionList';

src/components/ActionMenu/ActionMenu.tsx

@@ -106,7 +106,7 @@ export function hasGroupsWithActions(groups: ActionMenuProps['groups'] = []) {
     : groups.some((group) => group.actions.length > 0);
 }
 
-export function convertGroupToSection({
+function convertGroupToSection({
   title,
   actions,
 }: MenuGroupDescriptor): ActionListSection {

src/components/ActionMenu/components/MenuAction/index.ts

@@ -1 +1 @@
-export {MenuAction, MenuActionProps} from './MenuAction';
+export * from './MenuAction';

src/components/ActionMenu/components/MenuGroup/index.ts

@@ -1 +1 @@
-export {MenuGroup, MenuGroupProps} from './MenuGroup';
+export * from './MenuGroup';

src/components/ActionMenu/components/RollupActions/index.ts

@@ -1 +1 @@
-export {RollupActions, RollupActionsProps} from './RollupActions';
+export * from './RollupActions';

src/components/ActionMenu/components/index.ts

@@ -1,5 +1,5 @@
-export {MenuAction, MenuActionProps} from './MenuAction';
+export * from './MenuAction';
 
-export {MenuGroup, MenuGroupProps} from './MenuGroup';
+export * from './MenuGroup';
 
-export {RollupActions, RollupActionsProps} from './RollupActions';
+export * from './RollupActions';

src/components/ActionMenu/index.ts

@@ -1 +1 @@
-export {ActionMenu, ActionMenuProps, hasGroupsWithActions} from './ActionMenu';
+export * from './ActionMenu';

src/components/ActionMenu/tests/ActionMenu.test.tsx

@@ -4,11 +4,7 @@ import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 
 import {MenuGroupDescriptor, ActionListItemDescriptor} from '../../../types';
 import {MenuAction, MenuGroup, RollupActions} from '../components';
-import {
-  ActionMenu,
-  ActionMenuProps,
-  convertGroupToSection,
-} from '../ActionMenu';
+import {ActionMenu, ActionMenuProps} from '../ActionMenu';
 
 describe('<ActionMenu />', () => {
   const mockProps: ActionMenuProps = {
@@ -72,9 +68,9 @@ describe('<ActionMenu />', () => {
     });
 
     it('renders as <RollupActions /> `sections` when `rollup` is `true`', () => {
-      const convertedSections = mockGroups.map((group) =>
-        convertGroupToSection(group),
-      );
+      const convertedSections = mockGroups.map((group) => {
+        return {title: group.title, items: group.actions};
+      });
       const wrapper = mountWithAppProvider(
         <ActionMenu {...mockProps} groups={mockGroups} rollup />,
       );

src/components/AfterInitialMount/index.ts

@@ -1 +1 @@
-export {AfterInitialMount} from './AfterInitialMount';
+export * from './AfterInitialMount';

src/components/AppProvider/index.ts

@@ -1 +1 @@
-export {AppProvider, AppProviderProps} from './AppProvider';
+export * from './AppProvider';

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -23,7 +23,7 @@ interface State {
   popoverWasActive: boolean;
 }
 
-export interface ComboBoxProps {
+interface ComboBoxProps {
   /** A unique identifier for the ComboBox */
   id?: string;
   /** Collection of options to be listed */

src/components/Autocomplete/components/ComboBox/index.ts

@@ -1 +1 @@
-export {ComboBox} from './ComboBox';
+export * from './ComboBox';

src/components/Autocomplete/components/TextField/index.ts

@@ -1 +1 @@
-export {TextField} from './TextField';
+export * from './TextField';

src/components/Autocomplete/components/index.ts

@@ -1,3 +1,3 @@
-export {ComboBox} from './ComboBox';
+export * from './ComboBox';
 
-export {TextField} from './TextField';
+export * from './TextField';

src/components/Autocomplete/index.ts

@@ -1 +1 @@
-export {Autocomplete, AutocompleteProps} from './Autocomplete';
+export * from './Autocomplete';

src/components/Avatar/Avatar.tsx

@@ -9,15 +9,15 @@ import {Image} from '../Image';
 import styles from './Avatar.scss';
 import * as avatars from './images';
 
-export type Size = 'small' | 'medium' | 'large';
+type Size = 'small' | 'medium' | 'large';
 
 enum Status {
   Pending = 'PENDING',
   Loaded = 'LOADED',
   Errored = 'ERRORED',
 }
 
-export const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];
+const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];
 const AVATAR_IMAGES = Object.keys(avatars).map(
   // import/namespace does not allow computed values by default
   // eslint-disable-next-line import/namespace

src/components/Avatar/index.ts

@@ -1 +1 @@
-export {Avatar, AvatarProps} from './Avatar';
+export * from './Avatar';

src/components/Avatar/tests/Avatar.test.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 import {Avatar, Image} from 'components';
-import {STYLE_CLASSES} from '../Avatar';
 
 describe('<Avatar />', () => {
   describe('intials', () => {
@@ -116,10 +115,6 @@ describe('<Avatar />', () => {
   });
 
   describe('styleClass', () => {
-    it('defaults to five styles', () => {
-      expect(STYLE_CLASSES).toHaveLength(5);
-    });
-
     it('renders a sixth style when unstableGlobalTheming is false', () => {
       const avatar = mountWithApp(<Avatar name="e" />, {
         features: {unstableGlobalTheming: false},

src/components/Backdrop/index.ts

@@ -1 +1 @@
-export {Backdrop, BackdropProps} from './Backdrop';
+export * from './Backdrop';

src/components/Badge/Badge.tsx

@@ -4,9 +4,9 @@ import {useI18n} from '../../utilities/i18n';
 import {VisuallyHidden} from '../VisuallyHidden';
 import styles from './Badge.scss';
 
-export type Status = 'success' | 'info' | 'attention' | 'warning' | 'new';
-export type Progress = 'incomplete' | 'partiallyComplete' | 'complete';
-export type Size = 'small' | 'medium';
+type Status = 'success' | 'info' | 'attention' | 'warning' | 'new';
+type Progress = 'incomplete' | 'partiallyComplete' | 'complete';
+type Size = 'small' | 'medium';
 
 export interface BadgeProps {
   /** The content to display inside the badge. */

src/components/Badge/index.ts

@@ -1,8 +1 @@
-export {
-  Badge,
-  Progress,
-  BadgeProps,
-  Status,
-  PROGRESS_LABELS,
-  STATUS_LABELS,
-} from './Badge';
+export * from './Badge';

src/components/Badge/tests/Badge.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {VisuallyHidden} from 'components';
-import {Badge, Status, Progress, PROGRESS_LABELS, STATUS_LABELS} from '..';
+import {Badge, PROGRESS_LABELS, STATUS_LABELS} from '..';
 
 describe('<Badge />', () => {
   it('renders its children', () => {
@@ -12,20 +12,22 @@ describe('<Badge />', () => {
   });
 
   it('accepts a status prop and renders a visually hidden label', () => {
-    Object.keys(STATUS_LABELS).forEach((key: Status) => {
+    Object.keys(STATUS_LABELS).forEach((key: keyof typeof STATUS_LABELS) => {
       const badge = mountWithAppProvider(<Badge status={STATUS_LABELS[key]} />);
       expect(badge.find(VisuallyHidden).exists()).toBe(true);
       badge.unmount();
     });
   });
 
   it('accepts a progress prop and renders a visually hidden label', () => {
-    Object.keys(PROGRESS_LABELS).forEach((key: Progress) => {
-      const badge = mountWithAppProvider(
-        <Badge progress={PROGRESS_LABELS[key]} />,
-      );
-      expect(badge.find(VisuallyHidden).exists()).toBe(true);
-      badge.unmount();
-    });
+    Object.keys(PROGRESS_LABELS).forEach(
+      (key: keyof typeof PROGRESS_LABELS) => {
+        const badge = mountWithAppProvider(
+          <Badge progress={PROGRESS_LABELS[key]} />,
+        );
+        expect(badge.find(VisuallyHidden).exists()).toBe(true);
+        badge.unmount();
+      },
+    );
   });
 });

src/components/Banner/index.ts

@@ -1 +1 @@
-export {Banner, BannerProps, BannerStatus} from './Banner';
+export * from './Banner';

src/components/Breadcrumbs/index.ts

@@ -1 +1 @@
-export {Breadcrumbs, BreadcrumbsProps} from './Breadcrumbs';
+export * from './Breadcrumbs';

src/components/Button/Button.tsx

@@ -10,11 +10,11 @@ import {IconProps} from '../../types';
 import {Spinner} from '../Spinner';
 import styles from './Button.scss';
 
-export type Size = 'slim' | 'medium' | 'large';
+type Size = 'slim' | 'medium' | 'large';
 
-export type TextAlign = 'left' | 'right' | 'center';
+type TextAlign = 'left' | 'right' | 'center';
 
-export type IconSource = IconProps['source'];
+type IconSource = IconProps['source'];
 
 export interface ButtonProps {
   /** The content to display inside the button */
@@ -274,7 +274,7 @@ export function Button({
   );
 }
 
-export function IconWrapper({children}: any) {
+function IconWrapper({children}: any) {
   return <span className={styles.Icon}>{children}</span>;
 }
 

src/components/Button/tests/Button.test.tsx

@@ -4,7 +4,7 @@ import {PlusMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 import {UnstyledLink, Icon, Spinner} from 'components';
-import {Button, IconWrapper} from '../Button';
+import {Button} from '../Button';
 
 describe('<Button />', () => {
   describe('url', () => {
@@ -168,7 +168,7 @@ describe('<Button />', () => {
 
     it('does not render the markup for the icon if none is provided', () => {
       const button = mountWithAppProvider(<Button />);
-      expect(button.find(IconWrapper).exists()).toBe(false);
+      expect(button.find('svg').exists()).toBe(false);
     });
   });
 

src/components/ButtonGroup/components/Item/index.ts

@@ -1 +1 @@
-export {Item, ItemProps} from './Item';
+export * from './Item';

src/components/ButtonGroup/components/index.ts

@@ -1 +1 @@
-export {Item, ItemProps} from './Item';
+export * from './Item';

src/components/ButtonGroup/index.ts

@@ -1 +1 @@
-export {ButtonGroup, ButtonGroupProps} from './ButtonGroup';
+export * from './ButtonGroup';

src/components/CalloutCard/index.ts

@@ -1 +1 @@
-export {CalloutCard, CalloutCardProps} from './CalloutCard';
+export * from './CalloutCard';

src/components/Caption/index.ts

@@ -1 +1 @@
-export {Caption, CaptionProps} from './Caption';
+export * from './Caption';

src/components/Card/components/Header/index.ts

@@ -1 +1 @@
-export {Header, HeaderProps} from './Header';
+export * from './Header';

src/components/Card/components/Section/index.ts

@@ -1 +1 @@
-export {Section, SectionProps} from './Section';
+export * from './Section';

src/components/Card/components/Subsection/index.ts

@@ -1 +1 @@
-export {Subsection, SubsectionProps} from './Subsection';
+export * from './Subsection';

src/components/Card/components/index.ts

@@ -1,5 +1,5 @@
-export {Header, HeaderProps} from './Header';
+export * from './Header';
 
-export {Section, SectionProps} from './Section';
+export * from './Section';
 
-export {Subsection, SubsectionProps} from './Subsection';
+export * from './Subsection';

src/components/Card/index.ts

@@ -1 +1 @@
-export {Card, CardProps} from './Card';
+export * from './Card';

src/components/Checkbox/Checkbox.tsx

@@ -11,7 +11,7 @@ import {Error, Key, CheckboxHandles} from '../../types';
 
 import styles from './Checkbox.scss';
 
-export interface BaseProps {
+export interface CheckboxProps {
   /** Indicates the ID of the element that describes the checkbox*/
   ariaDescribedBy?: string;
   /** Label for the checkbox */
@@ -40,8 +40,6 @@ export interface BaseProps {
   onBlur?(): void;
 }
 
-export interface CheckboxProps extends BaseProps {}
-
 export const Checkbox = React.forwardRef<CheckboxHandles, CheckboxProps>(
   function Checkbox(
     {

src/components/Checkbox/index.ts

@@ -1 +1 @@
-export {Checkbox, CheckboxProps} from './Checkbox';
+export * from './Checkbox';

src/components/Choice/index.ts

@@ -1 +1 @@
-export {Choice, ChoiceProps, helpTextID} from './Choice';
+export * from './Choice';

src/components/ChoiceList/ChoiceList.tsx

@@ -10,7 +10,7 @@ import {Error} from '../../types';
 
 import styles from './ChoiceList.scss';
 
-export interface ChoiceDescriptor {
+interface Choice {
   /** Value of the choice */
   value: string;
   /** Label for the choice */
@@ -25,8 +25,6 @@ export interface ChoiceDescriptor {
   renderChildren?(isSelected: boolean): React.ReactNode | false;
 }
 
-export type Choice = ChoiceDescriptor;
-
 export interface ChoiceListProps {
   /** Label for list of choices */
   title: React.ReactNode;

src/components/ChoiceList/tests/ChoiceList.test.tsx

@@ -3,10 +3,10 @@ import {mountWithApp} from 'test-utilities';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider, ReactWrapper} from 'test-utilities/legacy';
 import {RadioButton, Checkbox, InlineError, errorTextID} from 'components';
-import {ChoiceList, ChoiceDescriptor} from '../ChoiceList';
+import {ChoiceList, ChoiceListProps} from '../ChoiceList';
 
 describe('<ChoiceList />', () => {
-  let choices: ChoiceDescriptor[];
+  let choices: ChoiceListProps['choices'];
 
   beforeEach(() => {
     choices = [

src/components/Collapsible/Collapsible.tsx

@@ -18,7 +18,7 @@ export interface CollapsibleProps {
   children?: React.ReactNode;
 }
 
-export type AnimationState =
+type AnimationState =
   | 'idle'
   | 'measuring'
   | 'closingStart'
@@ -34,7 +34,7 @@ interface State {
 
 const ParentCollapsibleExpandingContext = createContext(false);
 
-class Collapsible extends React.Component<CollapsibleProps, State> {
+class CollapsibleInner extends React.Component<CollapsibleProps, State> {
   static contextType = ParentCollapsibleExpandingContext;
 
   static getDerivedStateFromProps(
@@ -165,7 +165,7 @@ function collapsibleHeight(
   return `${height || 0}px`;
 }
 
-// Use named export once we work out why not casting this breaks web
-// eslint-disable-next-line import/no-default-export
-export default Collapsible as ComponentClass<CollapsibleProps> &
-  typeof Collapsible;
+export const Collapsible = CollapsibleInner as ComponentClass<
+  CollapsibleProps
+> &
+  typeof CollapsibleInner;

src/components/Collapsible/index.ts

@@ -1,3 +1 @@
-import Collapsible, {CollapsibleProps} from './Collapsible';
-
-export {Collapsible, CollapsibleProps};
+export * from './Collapsible';

src/components/Collapsible/tests/Collapsible.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import Collapsible from '../Collapsible';
+import {Collapsible} from '../Collapsible';
 
 describe('<Collapsible />', () => {
   const ariaHiddenSelector = '[aria-hidden=true]';