fix(*): massive refactor

Author: minheq

src/components/Alert/Alert.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { Playground, PropsTable } from 'docz';
-import Alert from './Alert';
+import { Alert } from './Alert';
 import { Spacing } from '../Layout';
 
 # Alert

src/components/Alert/Alert.tsx

@@ -4,14 +4,13 @@ import { DeepPartial } from 'ts-essentials';
 
 import { Intent } from '../../constants/Intent';
 import { Icon } from '../../icons';
-import { Theme, withTheme } from '../../theme';
+import { Theme, useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Spacing } from '../Layout';
 import { Text } from '../Typography';
 import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
 
 export interface AlertProps {
-  theme: Theme;
   title?: string;
   description?: string;
   testID?: string;
@@ -48,7 +47,7 @@ const resolveIcon = (intent: Intent, theme: Theme) => {
   }
 };
 
-const AlertBase = (props: AlertProps) => {
+export const Alert = (props: AlertProps) => {
   const {
     title,
     description,
@@ -58,10 +57,11 @@ const AlertBase = (props: AlertProps) => {
     icon,
     intent = 'info',
     getStyles,
-    theme,
     testID,
   } = props;
 
+  const theme = useTheme();
+
   const { containerStyle, bodyStyle } = mergeStyles(getAlertStyles, getStyles)(
     { intent },
     theme,
@@ -90,6 +90,3 @@ const AlertBase = (props: AlertProps) => {
     </View>
   );
 };
-
-export const Alert = withTheme(AlertBase);
-export default Alert;

src/components/Alert/index.ts

@@ -1 +1 @@
-export { default as Alert, AlertProps } from './Alert';
+export * from './Alert';

src/components/Avatar/Avatar.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { Playground, PropsTable } from 'docz';
-import Avatar from './Avatar';
+import { Avatar } from './Avatar';
 
 # Avatar
 

src/components/Avatar/Avatar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Image, ImageSourcePropType, View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
-import { Theme, withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { FillColors } from '../../theme/ThemeInterface';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Text } from '../Typography';
@@ -15,7 +15,7 @@ import {
 // https://github.com/segmentio/evergreen/blob/master/source/avatar/README.md
 export type GetInitialsType = (name?: string, fallback?: string) => string;
 
-export const globalGetInitials: GetInitialsType = (name, fallback = '?') => {
+const globalGetInitials: GetInitialsType = (name, fallback = '?') => {
   if (!name) return fallback;
 
   return name
@@ -77,20 +77,13 @@ export interface AvatarProps {
    */
   sizeLimitOneCharacter?: number;
 
-  /**
-   * Theme provided by ThemeProvider.
-   */
-  theme: Theme;
-
   getStyles?: ReplaceReturnType<GetAvatarStyles, DeepPartial<AvatarStyles>>;
 
   testID?: string;
 }
 
-export const AvatarBase = (props: AvatarProps) => {
+export const Avatar = (props: AvatarProps) => {
   const {
-    theme,
-
     source,
     size = 48,
     name,
@@ -104,6 +97,8 @@ export const AvatarBase = (props: AvatarProps) => {
     testID,
   } = props;
 
+  const theme = useTheme();
+
   const { imageHasFailedLoading } = { imageHasFailedLoading: false };
   const imageUnavailable = !source || imageHasFailedLoading;
 
@@ -144,6 +139,3 @@ export const AvatarBase = (props: AvatarProps) => {
     </View>
   );
 };
-
-export const Avatar = withTheme(AvatarBase);
-export default Avatar;

src/components/Avatar/index.ts

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

src/components/Badge/Badge.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { Playground, PropsTable } from 'docz';
-import Badge from './Badge';
+import { Badge } from './Badge';
 import { ThemeContext } from '../../theme';
 import { Box } from '../Layout';
 

src/components/Badge/Badge.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
-import { Theme, withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { FillColor } from '../../theme/ThemeInterface';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
-import Box, { Shape } from '../Layout/Box';
+import { Shape } from '../Layout/Box';
 import { Text } from '../Typography';
 import {
   BadgeSize,
@@ -16,7 +16,6 @@ import {
 
 export interface BadgeProps {
   children: React.ReactNode;
-  theme: Theme;
   color?: FillColor;
   size?: BadgeSize;
   shape?: Shape;
@@ -25,18 +24,19 @@ export interface BadgeProps {
   testID?: string;
 }
 
-const BadgeBase = (props: BadgeProps) => {
+export const Badge = (props: BadgeProps) => {
   const {
     children,
     color = 'neutral',
     getStyles,
     isSolid = false,
     shape = 'rounded',
     size = 'small',
-    theme,
     testID,
   } = props;
 
+  const theme = useTheme();
+
   const { containerStyle, textStyle } = mergeStyles(getBadgeStyles, getStyles)(
     { size, color, isSolid, shape },
     theme,
@@ -56,6 +56,3 @@ const BadgeBase = (props: BadgeProps) => {
     </View>
   );
 };
-
-export const Badge = withTheme(BadgeBase);
-export default Badge;

src/components/Badge/index.ts

@@ -1 +1 @@
-export { default as Badge, BadgeProps } from './Badge';
+export * from './Badge';

src/components/Button/BackButton.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 
 import { Icon } from '../../icons';
-import { withTheme } from '../../theme';
-import Button, { ButtonProps } from './Button';
+import { useTheme } from '../../theme';
+import { Button, ButtonProps } from './Button';
+
+export const BackButton = (props: ButtonProps) => {
+  const theme = useTheme();
 
-const BackButton = (props: ButtonProps) => {
-  const { theme } = props;
   return (
     <Button
       appearance="minimal"
@@ -18,5 +19,3 @@ const BackButton = (props: ButtonProps) => {
     />
   );
 };
-
-export default withTheme(BackButton);