feat(typography): add docs and refactoring

Author: minheq

src/components/KitchenSink/KitchenSink.tsx

@@ -9,7 +9,7 @@ import { Box, Heading } from '..';
 
 # Heading
 
-Composes React Native's `Text` component (i.e. you can pass its props)
+Composes React Native's `Text` component
 
 ### Usage
 

src/components/Typography/Heading.mdx

@@ -9,31 +9,10 @@ import { Box, Paragraph } from '..';
 
 # Paragraph
 
-Composes React Native's `Text` component (i.e. you can pass its props)
-
-**Note!!!** In web environment sometimes you need to wrap `Paragraph` in a `<Box>` or provide a parent node with `display: flex` and `flex-direction: column` for centering to work properly. In React Native it is non issue because all nodes be default have these properties
+Composes React Native's `Text` component
 
 ### Usage
 
-<Playground>
-  <Box>
-    <Paragraph
-      color="primary"
-      align="left"
-      size="large" // small - large or number
-      fontFamily="text"
-      weight="normal"
-      getStyles={(props, theme) => ({
-        paragraphStyle: {},
-      })}
-    >
-      Lorem ipsum dolar set amet
-    </Paragraph>
-  </Box>
-</Playground>
-
-### Sizes
-
 <Playground>
   <Box flexDirection="column">
     <Paragraph size="small">Lorem ipsum dolar set amet</Paragraph>
@@ -45,3 +24,21 @@ Composes React Native's `Text` component (i.e. you can pass its props)
 ### Props
 
 <Props of={Paragraph} />
+
+### Customization
+
+Using `getStyles` prop
+
+```
+ParagraphStyles {
+  textStyle: ParagraphStyle;
+}
+
+getStyles={(ParagraphProps, Theme) => ParagraphStyles}
+```
+
+Markup
+
+```tsx
+<Paragraph paragraphStyle />
+```

src/components/Typography/Paragraph.mdx

@@ -1,30 +1,15 @@
 import { TextStyle } from 'react-native';
 
-import {
-  FontFamily,
-  FontWeight,
-  ParagraphSize,
-  ParagraphSizes,
-  TextColor,
-  Theme,
-} from '../../theme/Theme';
-import { getFontFamily, getFontWeight, getTextColor } from './Text.styles';
-import { TextAlign } from './types';
-
-export interface ParagraphStylesProps {
-  align: TextAlign;
-  size: ParagraphSize;
-  color: TextColor;
-  fontFamily: FontFamily;
-  weight?: FontWeight;
-}
+import { ParagraphSize, ParagraphSizes, Theme } from '../../theme/Theme';
+import { ParagraphProps } from './Paragraph';
+import { getFontWeight, getTextColor } from './Text.styles';
 
 export interface ParagraphStyles {
   paragraphStyle: TextStyle;
 }
 
 export type GetParagraphStyles = (
-  paragraphStylesProps: ParagraphStylesProps,
+  props: ParagraphProps,
   theme: Theme,
 ) => ParagraphStyles;
 
@@ -38,7 +23,7 @@ export const getParagraphSize = (paragraphSizes: ParagraphSizes) => (
 };
 
 export const getParagraphStyles: GetParagraphStyles = (
-  { size, color, fontFamily, align, weight },
+  { color = 'default', size = 'medium', align = 'left', weight },
   theme,
 ) => {
   const sizeStyle = getParagraphSize(theme.paragraphSizes)(size);
@@ -47,7 +32,7 @@ export const getParagraphStyles: GetParagraphStyles = (
     paragraphStyle: {
       ...sizeStyle,
       color: getTextColor(theme.colors.text)(color),
-      fontFamily: getFontFamily(theme.fontFamilies)(fontFamily),
+      fontFamily: theme.fontFamilies.text,
       fontWeight:
         getFontWeight(theme.fontWeights)(weight) || sizeStyle.fontWeight,
       marginBottom: theme.textSizes.medium.fontSize,

src/components/Typography/Paragraph.styles.ts

@@ -3,12 +3,7 @@ import { Text, TextProps } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
-import {
-  FontFamily,
-  FontWeight,
-  ParagraphSize,
-  TextColor,
-} from '../../theme/Theme';
+import { FontWeight, TextColor, TextSize } from '../../theme/Theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import {
   GetParagraphStyles,
@@ -19,13 +14,34 @@ import { TextAlign } from './types';
 
 // @ts-ignore: need to override for web purposes
 export interface ParagraphProps extends TextProps {
-  children: React.ReactNode;
+  /**
+   * Size of the paragraph.
+   * @default "medium"
+   */
+  size?: TextSize;
+
+  /**
+   * Color of the paragraph.
+   * @default "default"
+   */
   color?: TextColor;
-  size?: ParagraphSize;
-  weight?: FontWeight;
+
+  /**
+   * Alignment of the paragraph.
+   * @default "left"
+   */
   align?: TextAlign;
-  fontFamily?: FontFamily;
 
+  /**
+   * Weight of the paragraph.
+   * @default paragraphSize.fontWeight
+   */
+  weight?: FontWeight;
+
+  /** Text content */
+  children?: React.ReactNode;
+
+  /** Callback to get element styles. */
   getStyles?: ReplaceReturnType<
     GetParagraphStyles,
     DeepPartial<ParagraphStyles>
@@ -36,7 +52,6 @@ export const Paragraph = (props: ParagraphProps) => {
   const {
     children,
     color = 'default',
-    fontFamily = 'text',
     size = 'medium',
     align = 'left',
     weight,
@@ -49,7 +64,7 @@ export const Paragraph = (props: ParagraphProps) => {
     getParagraphStyles,
     getStyles,
     theme.components.getParagraphStyles,
-  )({ align, size, color, fontFamily, weight }, theme);
+  )(props, theme);
 
   return (
     <Text

src/components/Typography/Paragraph.tsx

@@ -9,31 +9,7 @@ import { Box, Text } from '..';
 
 # Text
 
-Composes React Native's `Text` component (i.e. you can pass its props)
-
-**Note!!!** In web environment sometimes you need to wrap `Text` in a `<Box>` or provide a parent node with `display: flex` and `flex-direction: column` for centering to work properly. In React Native it is non issue because all nodes be default have these properties
-
-### Usage
-
-<Playground>
-  <Box>
-    <Text
-      color="primary" // or custom
-      align="left"
-      size="large" // small - large or number
-      fontFamily="text"
-      weight="normal"
-      isItalic
-      isInline
-      transform="uppercase"
-      getStyles={(props, theme) => ({
-        textStyle: {},
-      })}
-    >
-      Lorem ipsum dolar set amet
-    </Text>
-  </Box>
-</Playground>
+Composes React Native's `Text`
 
 ### Sizes
 
@@ -65,16 +41,6 @@ Composes React Native's `Text` component (i.e. you can pass its props)
   </Box>
 </Playground>
 
-### Font Families
-
-<Playground>
-  <Box flexDirection="column">
-    <Text fontFamily="heading">heading</Text>
-    <Text fontFamily="text">text</Text>
-    <Text fontFamily="mono">mono</Text>
-  </Box>
-</Playground>
-
 ### Font Weights
 
 <Playground>
@@ -87,20 +53,52 @@ Composes React Native's `Text` component (i.e. you can pass its props)
   </Box>
 </Playground>
 
-### Variations
+### Alignments
 
 <Playground>
   <Box flexDirection="column">
-    <Text isItalic>Lorem ipsum dolar set amet</Text>
     <Text align="left">Lorem ipsum dolar set amet</Text>
     <Text align="center">Lorem ipsum dolar set amet</Text>
     <Text align="right">Lorem ipsum dolar set amet</Text>
+  </Box>
+</Playground>
+
+### Transforms
+
+<Playground>
+  <Box flexDirection="column">
     <Text transform="uppercase">Lorem ipsum dolar set amet</Text>
     <Text transform="lowercase">Lorem ipsum dolar set amet</Text>
     <Text transform="capitalize">Lorem ipsum dolar set amet</Text>
   </Box>
 </Playground>
 
+### Italic
+
+<Playground>
+  <Box flexDirection="column">
+    <Text isItalic>Lorem ipsum dolar set amet</Text>
+  </Box>
+</Playground>
+
 ### Props
 
 <Props of={Text} />
+
+### Customization
+
+Using `getStyles` prop
+
+```
+TextStyles {
+  textStyle: TextStyle;
+}
+
+getStyles={(TextProps, Theme) => TextStyles}
+```
+
+Markup
+
+```tsx
+<Text textStyle />
+```

src/components/Typography/Text.mdx

@@ -1,8 +1,6 @@
 import { TextStyle } from 'react-native';
 
 import {
-  FontFamilies,
-  FontFamily,
   FontWeight,
   FontWeights,
   RNFontWeight,
@@ -12,31 +10,13 @@ import {
   TextSizes,
   Theme,
 } from '../../theme/Theme';
-import { TextAlign, TextTransform } from './types';
-
-export interface TextStylesProps {
-  isItalic: boolean;
-  size: TextSize;
-  color: TextColor;
-  align: TextAlign;
-  transform?: TextTransform;
-  fontFamily: FontFamily;
-  isInline: boolean;
-  weight?: FontWeight;
-}
+import { TextProps } from './Text';
 
 export interface TextStyles {
   textStyle: TextStyle;
 }
 
-export type GetTextStyles = (
-  textStylesProps: TextStylesProps,
-  theme: Theme,
-) => TextStyles;
-
-export const getFontFamily = (fontFamilies: FontFamilies) => (
-  fontFamily: FontFamily,
-) => fontFamilies[fontFamily];
+export type GetTextStyles = (props: TextProps, theme: Theme) => TextStyles;
 
 export const getFontWeight = (fontWeights: FontWeights) => (
   fontWeight?: FontWeight,
@@ -68,7 +48,14 @@ export const getTextSize = (textSizes: TextSizes) => (
 };
 
 export const getTextStyles: GetTextStyles = (
-  { size, color, fontFamily, isInline, isItalic, align, transform, weight },
+  {
+    color = 'default',
+    size = 'medium',
+    align = 'left',
+    weight,
+    isItalic = false,
+    transform,
+  },
   theme,
 ) => {
   const sizeStyle = getTextSize(theme.textSizes)(size);
@@ -77,16 +64,10 @@ export const getTextStyles: GetTextStyles = (
     textStyle: {
       ...sizeStyle,
       color: getTextColor(theme.colors.text)(color),
-      fontFamily: getFontFamily(theme.fontFamilies)(fontFamily),
+      fontFamily: theme.fontFamilies.text,
       fontWeight:
         getFontWeight(theme.fontWeights)(weight) || sizeStyle.fontWeight,
       textAlign: align,
-      ...(isInline
-        ? {
-            alignSelf: 'flex-start',
-            flexDirection: 'row',
-          }
-        : {}),
       ...(isItalic && {
         fontStyle: 'italic',
       }),