feat: added typography (#4)

* chore: added typography components

* chore: remove mono fonts

* chore: added typography components stories

* chore: export typography

src/components/button/index.ts

@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export { KIND, SHAPE, SIZE } from './constants';

src/components/typography/Typography.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import {
+  HeadingXXLarge,
+  HeadingXLarge,
+  HeadingLarge,
+  HeadingMedium,
+  HeadingSmall,
+  HeadingXSmall,
+  DisplayLarge,
+  DisplayMedium,
+  DisplaySmall,
+  DisplayXSmall,
+  LabelLarge,
+  LabelMedium,
+  LabelSmall,
+  LabelXSmall,
+  ParagraphLarge,
+  ParagraphMedium,
+  ParagraphSmall,
+  ParagraphXSmall,
+  CaptionMedium,
+  CaptionSmall,
+} from './Typography';
+
+storiesOf('Typography', module)
+  .add('display', () => (
+    <>
+      <DisplayLarge>Display Large</DisplayLarge>
+      <DisplayMedium>Display Medium</DisplayMedium>
+      <DisplaySmall>Display Small</DisplaySmall>
+      <DisplayXSmall>Display XSmall</DisplayXSmall>
+    </>
+  ))
+  .add('heading', () => (
+    <>
+      <HeadingXXLarge>Heading XXLarge</HeadingXXLarge>
+      <HeadingXLarge>Heading XLarge</HeadingXLarge>
+      <HeadingLarge>Heading Large</HeadingLarge>
+      <HeadingMedium>Heading Medium</HeadingMedium>
+      <HeadingSmall>Heading Small</HeadingSmall>
+      <HeadingXSmall>Heading XSmall</HeadingXSmall>
+    </>
+  ))
+  .add('label', () => (
+    <>
+      <LabelLarge>Label Large</LabelLarge>
+      <LabelMedium>Label Medium</LabelMedium>
+      <LabelSmall>Label Small</LabelSmall>
+      <LabelXSmall>Label XSmall</LabelXSmall>
+    </>
+  ))
+  .add('paragraph', () => (
+    <>
+      <ParagraphLarge>Paragraph Large</ParagraphLarge>
+      <ParagraphMedium>Paragraph Medium</ParagraphMedium>
+      <ParagraphSmall>Paragraph Small</ParagraphSmall>
+      <ParagraphXSmall>Paragraph XSmall</ParagraphXSmall>
+    </>
+  ))
+  .add('caption', () => (
+    <>
+      <CaptionMedium>Caption Medium</CaptionMedium>
+      <CaptionSmall>Caption Small</CaptionSmall>
+    </>
+  ));

src/components/typography/Typography.tsx

@@ -0,0 +1,150 @@
+import React, { FC, useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { useThemedStyle } from '@gorhom/base-ui';
+import { stylesCreator } from './styles';
+import { FONT, COLOR } from './constants';
+
+import type { TypographyProps } from './types';
+
+const createTypography = (
+  _font: string,
+  _color: string
+): FC<TypographyProps> => ({
+  font: _providedFont,
+  color: _providedColor,
+  style: _providedStyle,
+  ...rest
+}) => {
+  //#region variables
+  const font = useMemo(() => (_providedFont ? _providedFont : _font), [
+    _providedFont,
+  ]);
+  const color = useMemo(() => (_providedColor ? _providedColor : _color), [
+    _providedColor,
+  ]);
+  //#endregion
+
+  //#region styles
+  const styles = useThemedStyle(stylesCreator, font, color);
+  const textStyle = useMemo(() => [styles.text, _providedStyle], [
+    styles.text,
+    _providedStyle,
+  ]);
+  //#endregion
+  return <RNText style={textStyle} {...rest} />;
+};
+
+//#region display
+export const DisplayLarge = createTypography(
+  FONT.DisplayLarge,
+  COLOR.contentPrimary
+);
+DisplayLarge.displayName = FONT.DisplayLarge;
+export const DisplayMedium = createTypography(
+  FONT.DisplayMedium,
+  COLOR.contentPrimary
+);
+DisplayMedium.displayName = FONT.DisplayMedium;
+export const DisplaySmall = createTypography(
+  FONT.DisplaySmall,
+  COLOR.contentPrimary
+);
+DisplaySmall.displayName = FONT.DisplaySmall;
+export const DisplayXSmall = createTypography(
+  FONT.DisplayXSmall,
+  COLOR.contentPrimary
+);
+DisplayXSmall.displayName = FONT.DisplayXSmall;
+//#endregion
+
+//#region heading
+export const HeadingXXLarge = createTypography(
+  FONT.HeadingXXLarge,
+  COLOR.contentPrimary
+);
+HeadingXXLarge.displayName = FONT.HeadingXXLarge;
+export const HeadingXLarge = createTypography(
+  FONT.HeadingXLarge,
+  COLOR.contentPrimary
+);
+HeadingXLarge.displayName = FONT.HeadingXLarge;
+export const HeadingLarge = createTypography(
+  FONT.HeadingLarge,
+  COLOR.contentPrimary
+);
+HeadingLarge.displayName = FONT.HeadingLarge;
+export const HeadingMedium = createTypography(
+  FONT.HeadingMedium,
+  COLOR.contentPrimary
+);
+HeadingMedium.displayName = FONT.HeadingMedium;
+export const HeadingSmall = createTypography(
+  FONT.HeadingSmall,
+  COLOR.contentPrimary
+);
+HeadingSmall.displayName = FONT.HeadingSmall;
+export const HeadingXSmall = createTypography(
+  FONT.HeadingXSmall,
+  COLOR.contentPrimary
+);
+HeadingXSmall.displayName = FONT.HeadingXSmall;
+//#endregion
+
+//#region label
+export const LabelLarge = createTypography(
+  FONT.LabelLarge,
+  COLOR.contentPrimary
+);
+LabelLarge.displayName = FONT.LabelLarge;
+export const LabelMedium = createTypography(
+  FONT.LabelMedium,
+  COLOR.contentPrimary
+);
+LabelMedium.displayName = FONT.LabelMedium;
+export const LabelSmall = createTypography(
+  FONT.LabelSmall,
+  COLOR.contentPrimary
+);
+LabelSmall.displayName = FONT.LabelSmall;
+export const LabelXSmall = createTypography(
+  FONT.LabelXSmall,
+  COLOR.contentPrimary
+);
+LabelXSmall.displayName = FONT.LabelXSmall;
+//#endregion
+
+//#region paragraph
+export const ParagraphLarge = createTypography(
+  FONT.ParagraphLarge,
+  COLOR.contentPrimary
+);
+ParagraphLarge.displayName = FONT.ParagraphLarge;
+export const ParagraphMedium = createTypography(
+  FONT.ParagraphMedium,
+  COLOR.contentPrimary
+);
+ParagraphLarge.displayName = FONT.ParagraphMedium;
+export const ParagraphSmall = createTypography(
+  FONT.ParagraphSmall,
+  COLOR.contentPrimary
+);
+ParagraphSmall.displayName = FONT.ParagraphSmall;
+export const ParagraphXSmall = createTypography(
+  FONT.ParagraphXSmall,
+  COLOR.contentPrimary
+);
+ParagraphXSmall.displayName = FONT.ParagraphXSmall;
+//#endregion
+
+//#region caption
+export const CaptionMedium = createTypography(
+  FONT.ParagraphXSmall,
+  COLOR.contentSecondary
+);
+CaptionMedium.displayName = FONT.CaptionMedium;
+export const CaptionSmall = createTypography(
+  FONT.LabelXSmall,
+  COLOR.contentSecondary
+);
+CaptionSmall.displayName = FONT.CaptionSmall;
+//#endregion

src/components/typography/constants.ts

@@ -0,0 +1,33 @@
+enum COLOR {
+  contentPrimary = 'contentPrimary',
+  contentSecondary = 'contentSecondary',
+  contentTertiary = 'contentTertiary',
+  contentInversePrimary = 'contentInversePrimary',
+  contentInverseSecondary = 'contentInverseSecondary',
+  contentInverseTertiary = 'contentInverseTertiary',
+}
+
+enum FONT {
+  ParagraphXSmall = 'ParagraphXSmall',
+  ParagraphSmall = 'ParagraphSmall',
+  ParagraphMedium = 'ParagraphMedium',
+  ParagraphLarge = 'ParagraphLarge',
+  LabelXSmall = 'LabelXSmall',
+  LabelSmall = 'LabelSmall',
+  LabelMedium = 'LabelMedium',
+  LabelLarge = 'LabelLarge',
+  HeadingXSmall = 'HeadingXSmall',
+  HeadingSmall = 'HeadingSmall',
+  HeadingMedium = 'HeadingMedium',
+  HeadingLarge = 'HeadingLarge',
+  HeadingXLarge = 'HeadingXLarge',
+  HeadingXXLarge = 'HeadingXXLarge',
+  DisplayXSmall = 'DisplayXSmall',
+  DisplaySmall = 'DisplaySmall',
+  DisplayMedium = 'DisplayMedium',
+  DisplayLarge = 'DisplayLarge',
+  CaptionMedium = 'CaptionMedium',
+  CaptionSmall = 'CaptionSmall',
+}
+
+export { COLOR, FONT };

src/components/typography/index.ts

@@ -0,0 +1,2 @@
+export * from './Typography';
+export { COLOR, FONT } from './constants';

src/components/typography/styles.ts

@@ -0,0 +1,14 @@
+import { createStyles } from '@gorhom/base-ui';
+
+export const stylesCreator = createStyles(
+  (theme, font: string, color: string) => ({
+    text: {
+      // @ts-ignore
+      color: color in theme.colors ? theme.colors[color] : color,
+      ...(font in theme.typography
+        ? //@ts-ignore
+          theme.typography[font]
+        : theme.typography.ParagraphMedium),
+    },
+  })
+);

src/components/typography/types.d.ts

@@ -0,0 +1,7 @@
+import type { TextProps } from 'react-native';
+import type { COLOR, FONT } from './constants';
+
+export interface TypographyProps extends TextProps {
+  color?: string | COLOR;
+  font?: string | FONT;
+}

src/index.ts

@@ -12,3 +12,4 @@ export type { Theme } from './themes';
 
 // components
 export { Button } from './components/button';
+export * from './components/typography';

src/themes/index.ts

@@ -1,4 +1,4 @@
 export { DarkTheme, createDarkTheme } from './dark';
 export { createStyles } from './utilities';
 
-export type { Theme } from './types';
+export type { Theme, Typography } from './types';