feat(refactor): refactor typography and toast

Author: minheq

README.md

@@ -1,8 +1,8 @@
-# Ongoing development
+# Warning
 
-Basic components are available and usable. However, until 2.0, updates in 1.\* may have breaking changes, and have some cross-platform incompabilities
+Until 2.0, updates in 1.\* will have breaking changes as it is continuously being refined
 
-# Paramount
+# Goals
 
 Cross platform React Native and React Web UI components library
 

package.json

@@ -46,7 +46,6 @@
     "react-dom": "16.8.3",
     "react-icons": "3.3.0",
     "react-native-web": "0.10.0",
-    "react-powerplug": "1.0.0",
     "react-spring": "7.2.11",
     "terser": "3.16",
     "ts-essentials": "2.0.0"
@@ -84,6 +83,7 @@
     "metro-react-native-babel-preset": "0.52.0",
     "prettier": "1.16.4",
     "react-docgen-typescript-loader": "3.0.1",
+    "react-powerplug": "1.0.0",
     "react-test-renderer": "16.8.3",
     "rimraf": "2.6.3",
     "semantic-release": "15.13.3",

src/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../../icons';
 import { Theme, withTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Spacing } from '../Layout';
-import { Strong, Text } from '../Typography';
+import { Text } from '../Typography';
 import { AlertStyles, GetAlertStyles, getAlertStyles } from './Alert.styles';
 
 export interface AlertProps {
@@ -76,7 +76,7 @@ const AlertBase = (props: AlertProps) => {
       )}
       {component || (
         <View style={bodyStyle}>
-          <Strong>{title}</Strong>
+          <Text bold>{title}</Text>
           <Text>{description}</Text>
         </View>
       )}

src/components/Badge/Badge.tsx

@@ -6,7 +6,7 @@ import { Theme, withTheme } from '../../theme';
 import { FillColor } from '../../theme/ThemeInterface';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import Box, { Shape } from '../Layout/Box';
-import { Strong } from '../Typography';
+import { Text } from '../Typography';
 import {
   BadgeSize,
   BadgeStyles,
@@ -44,14 +44,15 @@ const BadgeBase = (props: BadgeProps) => {
 
   return (
     <View style={containerStyle} testID={testID}>
-      <Strong
+      <Text
+        bold
         size={size}
         getStyles={() => ({
           textStyle,
         })}
       >
         {children}
-      </Strong>
+      </Text>
     </View>
   );
 };

src/components/ListItem/ListItem.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
-import { Theme, withTheme } from '../../theme';
+import { ThemeContext } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Avatar, AvatarProps } from '../Avatar';
 import { Text } from '../Typography';
@@ -20,7 +20,6 @@ import {
 } from './ListItem.styles';
 
 export interface ListItemProps extends AccessibilityProps {
-  theme: Theme;
   size?: ListItemSize;
   isDisabled?: boolean;
   label: string;
@@ -33,7 +32,7 @@ export interface ListItemProps extends AccessibilityProps {
   testID?: string;
 }
 
-const ListItemBase = (props: ListItemProps) => {
+const ListItem = (props: ListItemProps) => {
   const {
     getStyles,
     isDisabled = false,
@@ -43,11 +42,11 @@ const ListItemBase = (props: ListItemProps) => {
     size = 'medium',
     onPress,
     rightIcon = null,
-    theme,
     avatarProps,
     testID,
     ...accessibilityProps
   } = props;
+  const theme = React.useContext(ThemeContext);
 
   const {
     imageWrapperStyle,
@@ -90,5 +89,4 @@ const ListItemBase = (props: ListItemProps) => {
   );
 };
 
-export const ListItem = withTheme(React.memo(ListItemBase));
 export default ListItem;

src/components/Modal/FormModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
-import { Strong } from '../Typography';
+import { Text } from '../Typography';
 import CloseableModal, { CloseableModalProps } from './CloseableModal';
 
 export interface FormModalProps extends CloseableModalProps {
@@ -37,7 +37,7 @@ const FormModalBase = (props: FormModalProps) => {
               paddingHorizontal: 16,
             }}
           >
-            <Strong>{clearText}</Strong>
+            <Text bold>{clearText}</Text>
           </View>
         </TouchableOpacity>
       }

src/components/Toast/Toast.mdx

@@ -11,10 +11,6 @@ import Toast from './Toast';
 
 ## Usage
 
-ToastProvider should inserted at the top-level component so that it displays from within the window container. However, it is possible to display Toast within another component like in the below example.
-
-You could additionally wrap the container component with `overflow="hidden"` so that it disappears correctly
-
 Composes `Alert`
 
 <Playground>

src/components/Toast/Toast.styles.ts

@@ -1,4 +1,4 @@
-import { TextStyle, ViewStyle } from 'react-native';
+import { Platform, TextStyle, ViewStyle } from 'react-native';
 
 import { Intent } from '../../constants';
 import { Theme } from '../../theme/ThemeInterface';
@@ -65,7 +65,8 @@ export const getToastVariables = (theme: Theme): ToastVariables => {
       marginRight: 'auto',
       marginTop: 0,
       maxWidth: 560,
-      position: 'absolute',
+      // @ts-ignore: Compat with web
+      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
       right: 32,
       top: 10,
       zIndex: 100,

src/components/Toast/Toast.tsx

@@ -45,7 +45,7 @@ class ToastBase extends React.Component<ToastProps, ToastState> {
   }
 
   public componentDidMount() {
-    const { onRemove, duration = 3000, offset = 75 } = this.props;
+    const { onRemove, duration = 3000, offset = 16 } = this.props;
     const { value } = this.state;
 
     Animated.sequence([

src/components/Typography/BulletItem.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { TextColor } from '../../theme/ThemeInterface';
+import ListItem, { ListItemProps } from './ListItem';
+
+export interface BulletItemProps extends ListItemProps {
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  iconColor?: TextColor;
+}
+
+const BulletItem = (props: BulletItemProps) => {
+  const { icon, iconColor, ...listItemProps } = props;
+
+  return <ListItem mark={icon} {...listItemProps} />;
+};
+
+export default BulletItem;