creactive 0.0.54 → 0.0.56

package/source/components/text/spec/type.spec.web.tsx

@@ -0,0 +1,55 @@
+import { faker } from '@faker-js/faker'
+import { render, screen } from '@testing-library/react'
+import { Text } from '../text'
+
+describe('@/components/text', () => {
+  describe('type passing as property', () => {
+    it('renders provided string into DIV tag by default', () => {
+      const text = faker.lorem.words(2)
+      render(<Text>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('DIV')
+    })
+
+    it('renders H1 tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.H1}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('H1')
+    })
+
+    it('renders H2 tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.H2}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('H2')
+    })
+
+    it('renders H3 tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.H3}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('H3')
+    })
+
+    it('renders H4 tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.H4}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('H4')
+    })
+
+    it('renders H5 tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.H5}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('H5')
+    })
+
+    it('renders H6 tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.H6}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('H6')
+    })
+
+    it('renders P tag when same type prop provided', () => {
+      const text = faker.lorem.words(2)
+      render(<Text type={Text.Type.P}>{text}</Text>)
+      expect(screen.getByText(text).tagName).toEqual('P')
+    })
+  })
+})

package/source/components/text/text.stories.tsx

@@ -0,0 +1,46 @@
+import { StorybookControl } from '@/helpers'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Text } from './text'
+
+const typeControl = StorybookControl.fromNumericEnum(Text.Type, true)
+const alignControl = StorybookControl.fromNumericEnum(Text.Align, true)
+const fontWeightControl = StorybookControl.fromNumericEnum(
+  Text.FontWeight,
+  true
+)
+const fontSizeControl = StorybookControl.fromNumericEnum(Text.FontSize, true)
+const lineHeightControl = StorybookControl.fromNumericEnum(
+  Text.LineHeight,
+  true
+)
+const maxLinesControl = StorybookControl.forNumber()
+const colorControl = StorybookControl.fromNumericEnum(Text.Color, true)
+const childrenControl = StorybookControl.forChildren()
+
+const meta: Meta<typeof Text> = {
+  component: Text,
+  decorators: [StorybookControl.getDecorator()],
+  argTypes: {
+    type: typeControl,
+    align: alignControl,
+    fontWeight: fontWeightControl,
+    fontSize: fontSizeControl,
+    lineHeight: lineHeightControl,
+    maxLines: maxLinesControl,
+    color: colorControl,
+    children: childrenControl,
+  },
+  args: {
+    type: typeControl.defaultValue,
+    align: alignControl.defaultValue,
+    fontWeight: fontWeightControl.defaultValue,
+    fontSize: fontSizeControl.defaultValue,
+    lineHeight: lineHeightControl.defaultValue,
+    maxLines: maxLinesControl.defaultValue,
+    color: colorControl.defaultValue,
+    children: childrenControl.defaultValue,
+  },
+}
+export default meta
+
+export const DefaultState: StoryObj<typeof Text> = {}

package/source/components/text/text.tsx

@@ -0,0 +1,262 @@
+import { useThemeContext } from '@/contexts'
+import { useThemeStyleSheet } from '@/hooks'
+import { useMemo } from 'react'
+import type { Role } from 'react-native'
+import { Text as ReactNativeText, StyleSheet } from 'react-native'
+import {
+  TEXT_TYPE_HEADING,
+  TextAlign,
+  TextColor,
+  TextFontSize,
+  TextFontWeight,
+  TextLineHeight,
+  TextRole,
+  TextType,
+} from './constants'
+import type { TextComponent } from './text.types'
+
+const textStyleSheet = StyleSheet.create({
+  // To override default position style.
+  // Better match with web default behavior.
+  textPositionStatic: {
+    position: 'static',
+  },
+  textAlignLeft: {
+    textAlign: 'left',
+  },
+  textAlignCenter: {
+    textAlign: 'center',
+  },
+  textAlignRight: {
+    textAlign: 'right',
+  },
+  textColorTransparent: {
+    // Is a shortcut for rgba(0,0,0,0) in React Native, same like in CSS3.
+    // We don't use this style when animating, so it is won't be a problem.
+    color: 'transparent',
+  },
+})
+
+const lineHeightStyleSheetCache = new Map()
+const getLineHeightStyleSheet = (fontSize: number, lineHeight: number) => {
+  const cacheKey = [fontSize, lineHeight].join('-')
+  if (lineHeightStyleSheetCache.has(cacheKey)) {
+    return lineHeightStyleSheetCache.get(cacheKey)
+  }
+  const lineHeightStyleSheet = StyleSheet.create({
+    textLineHeight: {
+      lineHeight: fontSize * lineHeight,
+    },
+  })
+  lineHeightStyleSheetCache.set(cacheKey, lineHeightStyleSheet)
+  return lineHeightStyleSheet
+}
+
+export const Text: TextComponent = ({
+  type,
+  align = TextAlign.LEFT,
+  fontWeight = TextFontWeight.REGULAR,
+  fontSize = TextFontSize.MD,
+  lineHeight = TextLineHeight.NONE,
+  maxLines,
+  color = TextColor.BASE_800,
+  children,
+}) => {
+  const themeContext = useThemeContext()
+  const themeStyleSheet = useThemeStyleSheet()
+
+  const getRole = () => {
+    // Casting paragraph role type because it is supported by react-native-web.
+    // As a result - text would be rendered to paragraph tag...
+    if (TextType.P === type) return TextRole.PARAGRAPH as Role
+    if (TEXT_TYPE_HEADING.includes(type)) return TextRole.HEADING
+  }
+
+  const getAriaLevel = () => {
+    if (TEXT_TYPE_HEADING.includes(type)) {
+      if (type === TextType.H1) return 1
+      if (type === TextType.H2) return 2
+      if (type === TextType.H3) return 3
+      if (type === TextType.H4) return 4
+      if (type === TextType.H5) return 5
+      if (type === TextType.H6) return 6
+    }
+  }
+
+  const getAlignStyle = () => {
+    switch (align) {
+      case TextAlign.LEFT:
+        return textStyleSheet.textAlignLeft
+      case TextAlign.CENTER:
+        return textStyleSheet.textAlignCenter
+      case TextAlign.RIGHT:
+        return textStyleSheet.textAlignRight
+    }
+  }
+
+  const getFontWeightStyle = () => {
+    switch (fontWeight) {
+      case TextFontWeight.THIN:
+        return themeStyleSheet.fontWeightBaseThin
+      case TextFontWeight.EXTRA_LIGHT:
+        return themeStyleSheet.fontWeightBaseExtraLight
+      case TextFontWeight.LIGHT:
+        return themeStyleSheet.fontWeightBaseLight
+      case TextFontWeight.REGULAR:
+        return themeStyleSheet.fontWeightBaseRegular
+      case TextFontWeight.MEDIUM:
+        return themeStyleSheet.fontWeightBaseMedium
+      case TextFontWeight.SEMIBOLD:
+        return themeStyleSheet.fontWeightBaseSemibold
+      case TextFontWeight.BOLD:
+        return themeStyleSheet.fontWeightBaseBold
+      case TextFontWeight.EXTRA_BOLD:
+        return themeStyleSheet.fontWeightBaseExtraBold
+      case TextFontWeight.BLACK:
+        return themeStyleSheet.fontWeightBaseBlack
+    }
+  }
+
+  const getFontSizeStyle = () => {
+    switch (fontSize) {
+      case TextFontSize.X2S:
+        return themeStyleSheet.fontSizeBaseX2S
+      case TextFontSize.XS:
+        return themeStyleSheet.fontSizeBaseXS
+      case TextFontSize.SM:
+        return themeStyleSheet.fontSizeBaseSM
+      case TextFontSize.MD:
+        return themeStyleSheet.fontSizeBaseMD
+      case TextFontSize.LG:
+        return themeStyleSheet.fontSizeBaseLG
+      case TextFontSize.XL:
+        return themeStyleSheet.fontSizeBaseXL
+      case TextFontSize.X2L:
+        return themeStyleSheet.fontSizeBaseX2L
+      case TextFontSize.X3L:
+        return themeStyleSheet.fontSizeBaseX3L
+      case TextFontSize.X4L:
+        return themeStyleSheet.fontSizeBaseX4L
+      case TextFontSize.X5L:
+        return themeStyleSheet.fontSizeBaseX5L
+    }
+  }
+
+  const lineHeightStyle = useMemo(() => {
+    const getFontSizeTokenValue = () => {
+      switch (fontSize) {
+        case TextFontSize.X2S:
+          return themeContext.fontSizeBaseX2S
+        case TextFontSize.XS:
+          return themeContext.fontSizeBaseXS
+        case TextFontSize.SM:
+          return themeContext.fontSizeBaseSM
+        case TextFontSize.MD:
+          return themeContext.fontSizeBaseMD
+        case TextFontSize.LG:
+          return themeContext.fontSizeBaseLG
+        case TextFontSize.XL:
+          return themeContext.fontSizeBaseXL
+        case TextFontSize.X2L:
+          return themeContext.fontSizeBaseX2L
+        case TextFontSize.X3L:
+          return themeContext.fontSizeBaseX3L
+        case TextFontSize.X4L:
+          return themeContext.fontSizeBaseX4L
+        case TextFontSize.X5L:
+          return themeContext.fontSizeBaseX5L
+      }
+    }
+
+    const getLineHeightTokenValue = () => {
+      switch (lineHeight) {
+        case TextLineHeight.NONE:
+          return themeContext.lineHeightBaseNone
+        case TextLineHeight.TIGHT:
+          return themeContext.lineHeightBaseTight
+        case TextLineHeight.SNUG:
+          return themeContext.lineHeightBaseSnug
+        case TextLineHeight.NORMAL:
+          return themeContext.lineHeightBaseNormal
+        case TextLineHeight.RELAXED:
+          return themeContext.lineHeightBaseRelaxed
+        case TextLineHeight.LOOSE:
+          return themeContext.lineHeightBaseLoose
+      }
+    }
+
+    const lineHeightStyleSheet = getLineHeightStyleSheet(
+      getFontSizeTokenValue(),
+      getLineHeightTokenValue()
+    )
+    return lineHeightStyleSheet.textLineHeight
+  }, [fontSize, lineHeight, themeContext])
+
+  const getColorStyle = () => {
+    switch (color) {
+      case TextColor.TRANSPARENT:
+        return textStyleSheet.textColorTransparent
+      case TextColor.BASE_100:
+        return themeStyleSheet.colorForegroundBase100
+      case TextColor.BASE_200:
+        return themeStyleSheet.colorForegroundBase200
+      case TextColor.BASE_300:
+        return themeStyleSheet.colorForegroundBase300
+      case TextColor.BASE_400:
+        return themeStyleSheet.colorForegroundBase400
+      case TextColor.BASE_500:
+        return themeStyleSheet.colorForegroundBase500
+      case TextColor.BASE_600:
+        return themeStyleSheet.colorForegroundBase600
+      case TextColor.BASE_700:
+        return themeStyleSheet.colorForegroundBase700
+      case TextColor.BASE_800:
+        return themeStyleSheet.colorForegroundBase800
+      case TextColor.BASE_900:
+        return themeStyleSheet.colorForegroundBase900
+      case TextColor.INVERSE_100:
+        return themeStyleSheet.colorForegroundInverse100
+      case TextColor.INVERSE_200:
+        return themeStyleSheet.colorForegroundInverse200
+      case TextColor.INVERSE_300:
+        return themeStyleSheet.colorForegroundInverse300
+      case TextColor.INVERSE_400:
+        return themeStyleSheet.colorForegroundInverse400
+      case TextColor.INVERSE_500:
+        return themeStyleSheet.colorForegroundInverse500
+      case TextColor.INVERSE_600:
+        return themeStyleSheet.colorForegroundInverse600
+      case TextColor.INVERSE_700:
+        return themeStyleSheet.colorForegroundInverse700
+      case TextColor.INVERSE_800:
+        return themeStyleSheet.colorForegroundInverse800
+      case TextColor.INVERSE_900:
+        return themeStyleSheet.colorForegroundInverse900
+    }
+  }
+
+  return (
+    <ReactNativeText
+      role={getRole()}
+      aria-level={getAriaLevel()}
+      style={[
+        textStyleSheet.textPositionStatic,
+        themeStyleSheet.fontFamilyBase,
+        getAlignStyle(),
+        getFontWeightStyle(),
+        getFontSizeStyle(),
+        lineHeightStyle,
+        getColorStyle(),
+      ]}
+      numberOfLines={maxLines}
+    >
+      {children}
+    </ReactNativeText>
+  )
+}
+Text.Type = TextType
+Text.Align = TextAlign
+Text.FontWeight = TextFontWeight
+Text.FontSize = TextFontSize
+Text.LineHeight = TextLineHeight
+Text.Color = TextColor

package/source/components/text/text.types.ts

@@ -0,0 +1,67 @@
+import type { FunctionComponent, PropsWithChildren } from 'react'
+import type {
+  TextAlign,
+  TextColor,
+  TextFontSize,
+  TextFontWeight,
+  TextLineHeight,
+  TextType,
+} from './constants'
+
+export interface TextProps extends PropsWithChildren {
+  /**
+   * Specific text type if required.
+   * Affects appearance, accessibility and semantics.
+   * Allows to control HTML element, that will be to rendered.
+   * @default undefined - renders into DIV element
+   */
+  type?: TextType
+  /**
+   * Text component align control property.
+   * Inner text will be aligned according to this value.
+   * @default Text.Align.LEFT
+   */
+  align?: TextAlign
+  /**
+   * Font weight property.
+   * Changes font weight, depending on theme.
+   * Uses base font weight tokens for mapping.
+   * @default Text.FontWeight.REGULAR
+   */
+  fontWeight?: TextFontWeight
+  /**
+   * Specific text size if required.
+   * Will change text size, depending on theme.
+   * Uses base font size tokens for mapping.
+   * @default Text.FontSize.MD
+   */
+  fontSize?: TextFontSize
+  /**
+   * Text line height property.
+   * Depends on configured theme token.
+   * Calculates using base font size and base line height ratio.
+   * @default Text.LineHeight.NONE
+   */
+  lineHeight?: TextLineHeight
+  /**
+   * Limiting text lines count.
+   * Text will be truncated with an ellipsis after specified lines count.
+   * @default undefined
+   */
+  maxLines?: number
+  /**
+   * Specifying text color property.
+   * Allows to change color, depending on theme.
+   * Theme independent colors and values may be also available.
+   * @default Text.Color.BASE_800
+   */
+  color?: TextColor
+}
+export type TextComponent = FunctionComponent<TextProps> & {
+  Type: Record<keyof typeof TextType, TextType>
+  Align: Record<keyof typeof TextAlign, TextAlign>
+  FontWeight: Record<keyof typeof TextFontWeight, TextFontWeight>
+  FontSize: Record<keyof typeof TextFontSize, TextFontSize>
+  LineHeight: Record<keyof typeof TextLineHeight, TextLineHeight>
+  Color: Record<keyof typeof TextColor, TextColor>
+}

package/source/constants/index.ts

@@ -0,0 +1,46 @@
+export {
+  COLOR_FOREGROUND_BASE_100,
+  COLOR_FOREGROUND_BASE_200,
+  COLOR_FOREGROUND_BASE_300,
+  COLOR_FOREGROUND_BASE_400,
+  COLOR_FOREGROUND_BASE_500,
+  COLOR_FOREGROUND_BASE_600,
+  COLOR_FOREGROUND_BASE_700,
+  COLOR_FOREGROUND_BASE_800,
+  COLOR_FOREGROUND_BASE_900,
+  COLOR_FOREGROUND_INVERSE_100,
+  COLOR_FOREGROUND_INVERSE_200,
+  COLOR_FOREGROUND_INVERSE_300,
+  COLOR_FOREGROUND_INVERSE_400,
+  COLOR_FOREGROUND_INVERSE_500,
+  COLOR_FOREGROUND_INVERSE_600,
+  COLOR_FOREGROUND_INVERSE_700,
+  COLOR_FOREGROUND_INVERSE_800,
+  COLOR_FOREGROUND_INVERSE_900,
+  FONT_FAMILY_BASE,
+  FONT_SIZE_BASE_LG,
+  FONT_SIZE_BASE_MD,
+  FONT_SIZE_BASE_SM,
+  FONT_SIZE_BASE_X2L,
+  FONT_SIZE_BASE_X2S,
+  FONT_SIZE_BASE_X3L,
+  FONT_SIZE_BASE_X4L,
+  FONT_SIZE_BASE_X5L,
+  FONT_SIZE_BASE_XL,
+  FONT_SIZE_BASE_XS,
+  FONT_WEIGHT_BASE_BLACK,
+  FONT_WEIGHT_BASE_BOLD,
+  FONT_WEIGHT_BASE_EXTRABOLD,
+  FONT_WEIGHT_BASE_EXTRALIGHT,
+  FONT_WEIGHT_BASE_LIGHT,
+  FONT_WEIGHT_BASE_MEDIUM,
+  FONT_WEIGHT_BASE_REGULAR,
+  FONT_WEIGHT_BASE_SEMIBOLD,
+  FONT_WEIGHT_BASE_THIN,
+  LINE_HEIGHT_BASE_LOOSE,
+  LINE_HEIGHT_BASE_NONE,
+  LINE_HEIGHT_BASE_NORMAL,
+  LINE_HEIGHT_BASE_RELAXED,
+  LINE_HEIGHT_BASE_SNUG,
+  LINE_HEIGHT_BASE_TIGHT,
+} from '@/constants/theme'

package/source/constants/theme/color.ts

@@ -0,0 +1,27 @@
+/**
+ * Base foreground color constants.
+ * Use it for coloring text, icons and etc.
+ */
+export const COLOR_FOREGROUND_BASE_100 = 'rgb(244,244,245)'
+export const COLOR_FOREGROUND_BASE_200 = 'rgb(228,228,231)'
+export const COLOR_FOREGROUND_BASE_300 = 'rgb(212,212,216)'
+export const COLOR_FOREGROUND_BASE_400 = 'rgb(159,159,169)'
+export const COLOR_FOREGROUND_BASE_500 = 'rgb(113,113,123)'
+export const COLOR_FOREGROUND_BASE_600 = 'rgb(82,82,92)'
+export const COLOR_FOREGROUND_BASE_700 = 'rgb(63,63,70)'
+export const COLOR_FOREGROUND_BASE_800 = 'rgb(39,39,42)'
+export const COLOR_FOREGROUND_BASE_900 = 'rgb(24,24,27)'
+
+/**
+ * Inverse foreground color constants.
+ * Use it for coloring inversed elements.
+ */
+export const COLOR_FOREGROUND_INVERSE_100 = 'rgb(24,24,27)'
+export const COLOR_FOREGROUND_INVERSE_200 = 'rgb(39,39,42)'
+export const COLOR_FOREGROUND_INVERSE_300 = 'rgb(63,63,70)'
+export const COLOR_FOREGROUND_INVERSE_400 = 'rgb(82,82,92)'
+export const COLOR_FOREGROUND_INVERSE_500 = 'rgb(113,113,123)'
+export const COLOR_FOREGROUND_INVERSE_600 = 'rgb(159,159,169)'
+export const COLOR_FOREGROUND_INVERSE_700 = 'rgb(212,212,216)'
+export const COLOR_FOREGROUND_INVERSE_800 = 'rgb(228,228,231)'
+export const COLOR_FOREGROUND_INVERSE_900 = 'rgb(244,244,245)'

package/source/constants/theme/font.ts

@@ -0,0 +1,48 @@
+/**
+ * Base font family constant.
+ * Supposed to be used for styling text.
+ * Maybe we'll need som extra font family in future..
+ */
+export const FONT_FAMILY_BASE = [
+  'ui-sans-serif',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  'Helvetica',
+  'Arial',
+  'sans-serif',
+].join(',')
+
+/**
+ * Base font weight constants.
+ * Supposed to be used for styling text.
+ * It seems like we wont need an extra set of font weights.
+ * But we named them as base just in case, you know..
+ */
+export const FONT_WEIGHT_BASE_THIN = 100
+export const FONT_WEIGHT_BASE_EXTRALIGHT = 200
+export const FONT_WEIGHT_BASE_LIGHT = 300
+export const FONT_WEIGHT_BASE_REGULAR = 400
+export const FONT_WEIGHT_BASE_MEDIUM = 500
+export const FONT_WEIGHT_BASE_SEMIBOLD = 600
+export const FONT_WEIGHT_BASE_BOLD = 700
+export const FONT_WEIGHT_BASE_EXTRABOLD = 800
+export const FONT_WEIGHT_BASE_BLACK = 900
+
+/**
+ * Base font size constants.
+ * Supposed to be used for styling text.
+ * It seems like we wont need an extra set of font sizes.
+ * But we named them as base just in case also..
+ */
+export const FONT_SIZE_BASE_X2S = 12
+export const FONT_SIZE_BASE_XS = 14
+export const FONT_SIZE_BASE_SM = 16
+export const FONT_SIZE_BASE_MD = 18
+export const FONT_SIZE_BASE_LG = 20
+export const FONT_SIZE_BASE_XL = 24
+export const FONT_SIZE_BASE_X2L = 30
+export const FONT_SIZE_BASE_X3L = 36
+export const FONT_SIZE_BASE_X4L = 48
+export const FONT_SIZE_BASE_X5L = 60

package/source/constants/theme/index.ts

@@ -0,0 +1,50 @@
+export {
+  COLOR_FOREGROUND_BASE_100,
+  COLOR_FOREGROUND_BASE_200,
+  COLOR_FOREGROUND_BASE_300,
+  COLOR_FOREGROUND_BASE_400,
+  COLOR_FOREGROUND_BASE_500,
+  COLOR_FOREGROUND_BASE_600,
+  COLOR_FOREGROUND_BASE_700,
+  COLOR_FOREGROUND_BASE_800,
+  COLOR_FOREGROUND_BASE_900,
+  COLOR_FOREGROUND_INVERSE_100,
+  COLOR_FOREGROUND_INVERSE_200,
+  COLOR_FOREGROUND_INVERSE_300,
+  COLOR_FOREGROUND_INVERSE_400,
+  COLOR_FOREGROUND_INVERSE_500,
+  COLOR_FOREGROUND_INVERSE_600,
+  COLOR_FOREGROUND_INVERSE_700,
+  COLOR_FOREGROUND_INVERSE_800,
+  COLOR_FOREGROUND_INVERSE_900,
+} from './color'
+export {
+  FONT_FAMILY_BASE,
+  FONT_SIZE_BASE_LG,
+  FONT_SIZE_BASE_MD,
+  FONT_SIZE_BASE_SM,
+  FONT_SIZE_BASE_X2L,
+  FONT_SIZE_BASE_X2S,
+  FONT_SIZE_BASE_X3L,
+  FONT_SIZE_BASE_X4L,
+  FONT_SIZE_BASE_X5L,
+  FONT_SIZE_BASE_XL,
+  FONT_SIZE_BASE_XS,
+  FONT_WEIGHT_BASE_BLACK,
+  FONT_WEIGHT_BASE_BOLD,
+  FONT_WEIGHT_BASE_EXTRABOLD,
+  FONT_WEIGHT_BASE_EXTRALIGHT,
+  FONT_WEIGHT_BASE_LIGHT,
+  FONT_WEIGHT_BASE_MEDIUM,
+  FONT_WEIGHT_BASE_REGULAR,
+  FONT_WEIGHT_BASE_SEMIBOLD,
+  FONT_WEIGHT_BASE_THIN,
+} from './font'
+export {
+  LINE_HEIGHT_BASE_LOOSE,
+  LINE_HEIGHT_BASE_NONE,
+  LINE_HEIGHT_BASE_NORMAL,
+  LINE_HEIGHT_BASE_RELAXED,
+  LINE_HEIGHT_BASE_SNUG,
+  LINE_HEIGHT_BASE_TIGHT,
+} from './text'

package/source/constants/theme/text.ts

@@ -0,0 +1,12 @@
+/**
+ * Base text line height constants.
+ * Supposed to be used for styling text.
+ * It seems like we wont need an extra set of line heights.
+ * But we named them as base just in case also..
+ */
+export const LINE_HEIGHT_BASE_NONE = 1
+export const LINE_HEIGHT_BASE_TIGHT = 1.25
+export const LINE_HEIGHT_BASE_SNUG = 1.375
+export const LINE_HEIGHT_BASE_NORMAL = 1.5
+export const LINE_HEIGHT_BASE_RELAXED = 1.625
+export const LINE_HEIGHT_BASE_LOOSE = 2

package/source/contexts/index.ts

@@ -0,0 +1,15 @@
+export { Media, MediaContextProvider, useMediaContext } from '@/contexts/media'
+export type {
+  MediaComponent,
+  MediaContextProviderComponent,
+  MediaContextValue,
+  MediaProps,
+} from '@/contexts/media'
+export { ThemeContextProvider, useThemeContext } from '@/contexts/theme'
+export type {
+  ThemeColorRGB,
+  ThemeContextProviderComponent,
+  ThemeContextProviderProps,
+  ThemeContextValue,
+  ThemeFontWeight,
+} from '@/contexts/theme'

package/source/contexts/media/components/index.ts

@@ -0,0 +1,4 @@
+export { Media } from './media'
+export type { MediaComponent, MediaProps } from './media'
+export { Wrapper } from './wrapper'
+export type { WrapperComponent, WrapperProps } from './wrapper'

package/source/contexts/media/components/media/index.ts

@@ -0,0 +1,2 @@
+export { Media } from './media'
+export type { MediaComponent, MediaProps } from './media.types'

package/source/contexts/media/components/media/media.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import { Platform } from 'react-native'
+import { MediaBreakpoint } from '../../constants'
+import { useMediaContext } from '../../media'
+import type { MediaComponent, MediaProps } from './media.types'
+
+const MediaBase = Platform.select({
+  // Web media component with server side rendering support.
+  web: ({ isDefault, breakpoint, children }: MediaProps) => {
+    const mediaContext = useMediaContext()
+    // Hydration flag, allows to detect server and first client render.
+    const [isHydrated, setHydrated] = useState(false)
+    // Update hydration flag after first render.
+    useEffect(() => {
+      setHydrated(true)
+    }, [])
+    // Hydration completed, we have window object and we already rendered once.
+    // Server and client first renders matched (but hidden by wrapper).
+    // We can switch to correct media content now safely.
+    if (isHydrated) {
+      if (isDefault && mediaContext.breakpoint === undefined) return children
+      if (mediaContext.breakpoint === breakpoint) return children
+    } else if (isDefault) {
+      // During first or server render we return default media children only.
+      return children
+    }
+  },
+  // Native media component whithout any tricks.
+  default: ({ isDefault, breakpoint, children }: MediaProps) => {
+    const mediaContext = useMediaContext()
+    if (isDefault && mediaContext.breakpoint === undefined) return children
+    if (mediaContext.breakpoint === breakpoint) return children
+  },
+})
+
+export const Media = MediaBase as MediaComponent
+Media.Breakpoint = MediaBreakpoint