fix: remove cycles from the codebase (#2508)

src/babel/__fixtures__/rewrite-imports/output.js

@@ -3,8 +3,8 @@ import { Text } from 'react-native';
 import PaperProvider from "react-native-paper/lib/module/core/Provider";
 import BottomNavigation from "react-native-paper/lib/module/components/BottomNavigation";
 import Button from "react-native-paper/lib/module/components/Button";
-import FAB from "react-native-paper/lib/module/components/FAB/FAB";
-import Appbar from "react-native-paper/lib/module/components/Appbar/Appbar";
+import FAB from "react-native-paper/lib/module/components/FAB";
+import Appbar from "react-native-paper/lib/module/components/Appbar";
 import * as Colors from "react-native-paper/lib/module/styles/colors";
 import { NonExistent, NonExistentSecond as Stuff, Theme } from "react-native-paper/lib/module/index.js";
 import { ThemeProvider } from "react-native-paper/lib/module/core/theming";

src/components/Appbar/Appbar.tsx

@@ -2,12 +2,9 @@ import * as React from 'react';
 import { View, ViewStyle, Platform, StyleSheet, StyleProp } from 'react-native';
 import color from 'color';
 
-import {
-  AppbarContent,
-  AppbarAction,
-  AppbarBackAction,
-  AppbarHeader,
-} from './AppbarElements';
+import AppbarContent from './AppbarContent';
+import AppbarAction from './AppbarAction';
+import AppbarBackAction from './AppbarBackAction';
 import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
 import { black, white } from '../../styles/colors';
@@ -171,15 +168,6 @@ const Appbar = ({ children, dark, style, theme, ...rest }: Props) => {
   );
 };
 
-// @component ./AppbarContent.tsx
-Appbar.Content = AppbarContent;
-// @component ./AppbarAction.tsx
-Appbar.Action = AppbarAction;
-// @component ./AppbarBackAction.tsx
-Appbar.BackAction = AppbarBackAction;
-// @component ./AppbarHeader.tsx
-Appbar.Header = AppbarHeader;
-
 const styles = StyleSheet.create({
   appbar: {
     height: DEFAULT_APPBAR_HEIGHT,

src/components/Appbar/AppbarBackAction.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { $Omit } from './../../types';
-import { AppbarAction, AppbarBackIcon } from './AppbarElements';
+import AppbarAction from './AppbarAction';
+import AppbarBackIcon from './AppbarBackIcon';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 type Props = $Omit<

src/components/Appbar/AppbarHeader.tsx

@@ -7,8 +7,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import overlay from '../../styles/overlay';
-import { Appbar } from './AppbarElements';
-import { DEFAULT_APPBAR_HEIGHT } from './Appbar';
+import { DEFAULT_APPBAR_HEIGHT, Appbar } from './Appbar';
 import shadow from '../../styles/shadow';
 import { withTheme } from '../../core/theming';
 import { APPROX_STATUSBAR_HEIGHT } from '../../constants';

src/components/Appbar/index.ts

@@ -0,0 +1,22 @@
+import AppbarComponent from './Appbar';
+import AppbarContent from './AppbarContent';
+import AppbarAction from './AppbarAction';
+import AppbarBackAction from './AppbarBackAction';
+import AppbarHeader from './AppbarHeader';
+
+const Appbar = Object.assign(
+  // @component ./Appbar.tsx
+  AppbarComponent,
+  {
+    // @component ./AppbarContent.tsx
+    Content: AppbarContent,
+    // @component ./AppbarAction.tsx
+    Action: AppbarAction,
+    // @component ./AppbarBackAction.tsx
+    BackAction: AppbarBackAction,
+    // @component ./AppbarHeader.tsx
+    Header: AppbarHeader,
+  }
+);
+
+export default Appbar;

src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import { CheckboxIOS, CheckboxItem, CheckboxAndroid } from './CheckboxElements';
+import CheckboxIOS from './CheckboxIOS';
+import CheckboxAndroid from './CheckboxAndroid';
 import { withTheme } from '../../core/theming';
 
 type Props = {
@@ -84,15 +85,6 @@ const Checkbox = (props: Props) =>
     <CheckboxAndroid {...props} />
   );
 
-// @component ./CheckboxItem.tsx
-Checkbox.Item = CheckboxItem;
-
-// @component ./CheckboxAndroid.tsx
-Checkbox.Android = CheckboxAndroid;
-
-// @component ./CheckboxIOS.tsx
-Checkbox.IOS = CheckboxIOS;
-
 export default withTheme(Checkbox);
 
 // @component-docs ignore-next-line

src/components/Checkbox/CheckboxItem.tsx

@@ -8,7 +8,9 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { Checkbox, CheckboxAndroid, CheckboxIOS } from './CheckboxElements';
+import Checkbox from './Checkbox';
+import CheckboxAndroid from './CheckboxAndroid';
+import CheckboxIOS from './CheckboxIOS';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';

src/components/Checkbox/index.ts

@@ -0,0 +1,19 @@
+import CheckboxComponent from './Checkbox';
+import CheckboxItem from './CheckboxItem';
+import CheckboxAndroid from './CheckboxAndroid';
+import CheckboxIOS from './CheckboxIOS';
+
+const Checkbox = Object.assign(
+  // @component ./Checkbox.tsx
+  CheckboxComponent,
+  {
+    // @component ./CheckboxItem.tsx
+    Item: CheckboxItem,
+    // @component ./CheckboxAndroid.tsx
+    Android: CheckboxAndroid,
+    // @component ./CheckboxIOS.tsx
+    IOS: CheckboxIOS,
+  }
+);
+
+export default Checkbox;

src/components/FAB/FAB.tsx

@@ -12,7 +12,6 @@ import { withTheme } from '../../core/theming';
 import type { $RemoveChildren } from '../../types';
 import type { IconSource } from './../Icon';
 import type { AccessibilityState } from 'react-native';
-import { FABGroup } from './FABElements';
 
 type Props = $RemoveChildren<typeof Surface> & {
   /**
@@ -244,9 +243,6 @@ const FAB = ({
   );
 };
 
-// @component ./FABGroup.tsx
-FAB.Group = FABGroup;
-
 const styles = StyleSheet.create({
   container: {
     borderRadius: 28,

src/components/FAB/FABGroup.tsx

@@ -9,7 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import color from 'color';
-import { FAB } from './FABElements';
+import FAB from './FAB';
 import Text from '../Typography/Text';
 import Card from '../Card/Card';
 import { withTheme } from '../../core/theming';

src/components/FAB/index.ts

@@ -0,0 +1,13 @@
+import FABComponent from './FAB';
+import FABGroup from './FABGroup';
+
+const FAB = Object.assign(
+  // @component ./FAB.tsx
+  FABComponent,
+  {
+    // @component ./FABGroup.tsx
+    Group: FABGroup,
+  }
+);
+
+export default FAB;

src/components/RadioButton/RadioButton.tsx

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import {
-  RadioButtonAndroid,
-  RadioButtonGroup,
-  RadioButtonIOS,
-  RadioButtonItem,
-} from './RadioButtonElements';
+import RadioButtonAndroid from './RadioButtonAndroid';
+import RadioButtonIOS from './RadioButtonIOS';
 import { withTheme } from '../../core/theming';
 
 export type Props = {
@@ -102,18 +98,6 @@ const RadioButton = (props: Props) => {
   return <Button {...props} />;
 };
 
-// @component ./RadioButtonGroup.tsx
-RadioButton.Group = RadioButtonGroup;
-
-// @component ./RadioButtonAndroid.tsx
-RadioButton.Android = RadioButtonAndroid;
-
-// @component ./RadioButtonIOS.tsx
-RadioButton.IOS = RadioButtonIOS;
-
-// @component ./RadioButtonItem.tsx
-RadioButton.Item = RadioButtonItem;
-
 export default withTheme(RadioButton);
 
 // @component-docs ignore-next-line

src/components/RadioButton/RadioButtonItem.tsx

@@ -10,7 +10,7 @@ import { withTheme } from '../../core/theming';
 import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
 import { handlePress } from './utils';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import { RadioButton } from './RadioButtonElements';
+import RadioButton from './RadioButton';
 import Text from '../Typography/Text';
 import RadioButtonAndroid from './RadioButtonAndroid';
 import RadioButtonIOS from './RadioButtonIOS';

src/components/RadioButton/index.ts

@@ -0,0 +1,22 @@
+import RadioButtonComponent from './RadioButton';
+import RadioButtonGroup from './RadioButtonGroup';
+import RadioButtonAndroid from './RadioButtonAndroid';
+import RadioButtonIOS from './RadioButtonIOS';
+import RadioButtonItem from './RadioButtonItem';
+
+const RadioButton = Object.assign(
+  // @component ./RadioButton.tsx
+  RadioButtonComponent,
+  {
+    // @component ./RadioButtonGroup.tsx
+    Group: RadioButtonGroup,
+    // @component ./RadioButtonAndroid.tsx
+    Android: RadioButtonAndroid,
+    // @component ./RadioButtonIOS.tsx
+    IOS: RadioButtonIOS,
+    // @component ./RadioButtonItem.tsx
+    Item: RadioButtonItem,
+  }
+);
+
+export default RadioButton;

src/components/ToggleButton/ToggleButton.tsx

@@ -11,7 +11,6 @@ import IconButton from '../IconButton';
 import { ToggleButtonGroupContext } from './ToggleButtonGroup';
 import { black, white } from '../../styles/colors';
 import type { IconSource } from '../Icon';
-import { ToggleButtonRow, ToggleButtonGroup } from './ToggleButtonElements';
 
 type Props = {
   /**
@@ -154,12 +153,6 @@ const ToggleButton = ({
   );
 };
 
-// @component ./ToggleButtonGroup.tsx
-ToggleButton.Group = ToggleButtonGroup;
-
-// @component ./ToggleButtonRow.tsx
-ToggleButton.Row = ToggleButtonRow;
-
 const styles = StyleSheet.create({
   content: {
     width: 42,

src/components/ToggleButton/ToggleButtonRow.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
-import { ToggleButton } from './ToggleButtonElements';
+import ToggleButtonGroup from './ToggleButtonGroup';
+import ToggleButton from './ToggleButton';
 
 type Props = {
   /**
@@ -51,7 +52,7 @@ const ToggleButtonRow = ({ value, onValueChange, children, style }: Props) => {
   const count = React.Children.count(children);
 
   return (
-    <ToggleButton.Group value={value} onValueChange={onValueChange}>
+    <ToggleButtonGroup value={value} onValueChange={onValueChange}>
       <View style={[styles.row, style]}>
         {React.Children.map(children, (child, i) => {
           // @ts-ignore
@@ -74,7 +75,7 @@ const ToggleButtonRow = ({ value, onValueChange, children, style }: Props) => {
           return child;
         })}
       </View>
-    </ToggleButton.Group>
+    </ToggleButtonGroup>
   );
 };
 

src/components/ToggleButton/index.ts

@@ -0,0 +1,16 @@
+import ToggleButtonComponent from './ToggleButton';
+import ToggleButtonGroup from './ToggleButtonGroup';
+import ToggleButtonRow from './ToggleButtonRow';
+
+const ToggleButton = Object.assign(
+  // @component ./ToggleButton.tsx
+  ToggleButtonComponent,
+  {
+    // @component ./ToggleButtonGroup.tsx
+    Group: ToggleButtonGroup,
+    // @component ./ToggleButtonRow.tsx
+    Row: ToggleButtonRow,
+  }
+);
+
+export default ToggleButton;

src/components/__tests__/Appbar/Appbar.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Appbar from '../../Appbar/Appbar';
+import Appbar from '../../Appbar';
 import Searchbar from '../../Searchbar';
 
 describe('Appbar', () => {

src/components/__tests__/Checkbox/Checkbox.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import Checkbox from '../../Checkbox/Checkbox';
+import Checkbox from '../../Checkbox';
 
 it('renders checked Checkbox with onPress', () => {
   const tree = renderer

src/components/__tests__/Checkbox/CheckboxItem.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import renderer from 'react-test-renderer';
-import Checkbox from '../../Checkbox/Checkbox';
+import Checkbox from '../../Checkbox';
 
 it('renders unchecked', () => {
   const tree = renderer

src/components/__tests__/FAB.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import renderer from 'react-test-renderer';
-import FAB from '../FAB/FAB';
+import FAB from '../FAB';
 
 it('renders normal FAB', () => {
   const tree = renderer.create(<FAB onPress={() => {}} icon="plus" />).toJSON();

src/components/__tests__/RadioButton/RadioButton.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { RadioButtonContext } from '../../RadioButton/RadioButtonGroup';
-import RadioButton from '../../RadioButton/RadioButton';
+import RadioButton from '../../RadioButton';
 
 describe('RadioButton', () => {
   afterEach(() => jest.resetModules());

src/components/__tests__/RadioButton/RadioButtonGroup.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import RadioButton from '../../RadioButton/RadioButton';
+import RadioButton from '../../RadioButton';
 
 describe('RadioButtonGroup', () => {
   it('renders properly', () => {

src/components/__tests__/RadioButton/RadioButtonItem.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import renderer from 'react-test-renderer';
-import RadioButton from '../../RadioButton/RadioButton';
+import RadioButton from '../../RadioButton';
 
 it('renders unchecked', () => {
   const tree = renderer