creactive 0.0.56 → 0.0.57

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

@@ -1,26 +0,0 @@
-import type { FunctionComponent, PropsWithChildren } from 'react'
-import type { MediaBreakpoint } from '../../constants'
-
-/**
- * Media default component props.
- * This variant does accept any breakpoint.
- * This props variant will render children on smallest screen.
- * It will also will render children during server-side rendering.
- */
-interface MediaDefaultProps extends PropsWithChildren {
-  isDefault: true
-  breakpoint?: never
-}
-/**
- * Media breakpoint component props.
- * This variant does accept only one breakpoint.
- * Renders children only on a larger than smallest screen.
- */
-interface MediaBreakpointProps extends PropsWithChildren {
-  isDefault?: never
-  breakpoint: MediaBreakpoint
-}
-export type MediaProps = MediaDefaultProps | MediaBreakpointProps
-export type MediaComponent = FunctionComponent<MediaProps> & {
-  Breakpoint: Record<keyof typeof MediaBreakpoint, MediaBreakpoint>
-}

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

@@ -1,2 +0,0 @@
-export { Wrapper } from './wrapper'
-export type { WrapperComponent, WrapperProps } from './wrapper.types'

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

@@ -1,73 +0,0 @@
-import type { CSSProperties, JSX } from 'react'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { Platform } from 'react-native'
-import { WrapperProps } from './wrapper.types'
-
-export const Wrapper = Platform.select({
-  // We need a wrapper for hiding content blinking.
-  // Server side rendered result is allways matching mobile media.
-  // Client side effects may decide to render something different.
-  // This wrapper helps us to handle this situation gracefully.
-  web: ({ children }: WrapperProps) => {
-    const ref = useRef<HTMLDivElement>()
-    // Hydration flag, allows to detect server and first client render.
-    const [isHydrated, setHydrated] = useState(false)
-    // Update hydration flag after first render.
-    useEffect(() => {
-      setHydrated(true)
-    }, [])
-    // Memorized wrapper style.
-    const style = useMemo(() => {
-      // Return visible wrapper styles during hydrated client render.
-      // Return visible wrapper styles during server side rendering also.
-      if (
-        isHydrated ||
-        typeof window === 'undefined' ||
-        typeof document === 'undefined'
-      ) {
-        return {
-          display: 'flex',
-          flexGrow: 1,
-          flexShrink: 1,
-          flexBasis: '100%',
-          flexDirection: 'column',
-        }
-      }
-      // Return hidden wrapper styles during first client render.
-      // Display style will be already modified by inline script to be onest.
-      // Anyway, we want this object to be consistent with final state later.
-      return {
-        display: 'none',
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: '100%',
-        flexDirection: 'column',
-      }
-    }, [isHydrated])
-
-    return (
-      <>
-        <div
-          ref={ref}
-          style={style as CSSProperties}
-          // We don't want to see hydration warning on this element.
-          // We'll set display none in the script below.
-          // This will allow us to hide wrapped content during first render.
-          suppressHydrationWarning
-        >
-          {children}
-        </div>
-
-        <script
-          // Hide wrapper content immediately during first render.
-          dangerouslySetInnerHTML={{
-            __html:
-              'document.currentScript.previousSibling.style.display="none"',
-          }}
-        />
-      </>
-    )
-  },
-  // We don't need any wrapping on native platfrom.
-  default: ({ children }: WrapperProps) => children as JSX.Element,
-})

package/source/contexts/media/components/wrapper/wrapper.types.ts

@@ -1,3 +0,0 @@
-import type { FunctionComponent, PropsWithChildren } from 'react'
-export interface WrapperProps extends PropsWithChildren {}
-export type WrapperComponent = FunctionComponent<WrapperProps>

package/source/contexts/media/constants/breakpoint.ts

@@ -1,18 +0,0 @@
-/**
- * Media breakpoint constants enum.
- * Should be used to define and compare breakpoint.
- * If you mean the smallest screen, use undefined value.
- */
-export enum MediaBreakpoint {
-  MD,
-  LG,
-  XL,
-}
-
-/**
- * Default media breakpoint values.
- * This values will are used if no overrides provided.
- */
-export const BREAKPOINT_MD = 768
-export const BREAKPOINT_LG = 1024
-export const BREAKPOINT_XL = 1280

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

@@ -1,6 +0,0 @@
-export {
-  BREAKPOINT_LG,
-  BREAKPOINT_MD,
-  BREAKPOINT_XL,
-  MediaBreakpoint,
-} from './breakpoint'

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

@@ -1 +0,0 @@
-export { useMediaBreakpoint } from './use-breakpoint'

package/source/contexts/media/hooks/use-breakpoint.ts

@@ -1,18 +0,0 @@
-import { useMemo } from 'react'
-import { useWindowDimensions } from 'react-native'
-import { MediaBreakpoint } from '../constants'
-
-export const useMediaBreakpoint = (
-  breakpointMD: number,
-  breakpointLG: number,
-  breakpointXL: number
-) => {
-  const { width } = useWindowDimensions()
-  // Returning memorized breakpoint, based on current width.
-  return useMemo(() => {
-    // Mobile first breakpoint switching ierarchy.
-    if (width >= breakpointXL) return MediaBreakpoint.XL
-    if (width >= breakpointLG) return MediaBreakpoint.LG
-    if (width >= breakpointMD) return MediaBreakpoint.MD
-  }, [width >= breakpointXL, width >= breakpointLG, width >= breakpointMD])
-}

package/source/contexts/media/index.ts

@@ -1,7 +0,0 @@
-export { Media } from './components'
-export type { MediaComponent, MediaProps } from './components'
-export { MediaContextProvider, useMediaContext } from './media'
-export type {
-  MediaContextProviderComponent,
-  MediaContextValue,
-} from './media.types'

package/source/contexts/media/media.tsx

@@ -1,36 +0,0 @@
-import { createContext, useContext, useMemo } from 'react'
-import { Wrapper } from './components'
-import { BREAKPOINT_LG, BREAKPOINT_MD, BREAKPOINT_XL } from './constants'
-import { useMediaBreakpoint } from './hooks'
-import type {
-  MediaContextProviderComponent,
-  MediaContextValue,
-} from './media.types'
-
-const MediaContext = createContext<MediaContextValue>({})
-
-export const MediaContextProvider: MediaContextProviderComponent = ({
-  breakpointMD,
-  breakpointLG,
-  breakpointXL,
-  children,
-}) => {
-  const breakpoint = useMediaBreakpoint(
-    breakpointMD ?? BREAKPOINT_MD,
-    breakpointLG ?? BREAKPOINT_LG,
-    breakpointXL ?? BREAKPOINT_XL
-  )
-  // Memorizing context value to avoid extra re-renders.
-  const value = useMemo(
-    () => ({
-      breakpoint,
-    }),
-    [breakpoint]
-  )
-  return (
-    <MediaContext.Provider value={value}>
-      <Wrapper>{children}</Wrapper>
-    </MediaContext.Provider>
-  )
-}
-export const useMediaContext = () => useContext(MediaContext)

package/source/contexts/media/media.types.ts

@@ -1,38 +0,0 @@
-import type { FunctionComponent, PropsWithChildren } from 'react'
-import type { MediaBreakpoint } from './constants'
-
-/**
- * Media context value interface.
- * Contains current media breakpoint.
- */
-export interface MediaContextValue {
-  /**
-   * Current media breakpoint.
-   * We are using undefined value during server-side rendering.
-   * As mobile-first we also use undefined value for the smallest screens.
-   * @default undefined
-  */
-  breakpoint?: MediaBreakpoint
-}
-interface MediaContextProviderProps extends PropsWithChildren {
-  /**
-   * Media breakpoint for MD screens.
-   * When layout whould switches first time from its smalest version.
-   * @default 768
-   */
-  breakpointMD?: number
-  /**
-   * Media breakpoint for LG screens.
-   * Second layout switch to its large version.
-   * @default 1024
-   */
-  breakpointLG?: number
-  /**
-   * Media breakpoint for XL screens.
-   * Largest layout version - last switch.
-   * @default 1280
-   */
-  breakpointXL?: number
-}
-export type MediaContextProviderComponent =
-  FunctionComponent<MediaContextProviderProps>

package/source/contexts/theme/index.ts

@@ -1,8 +0,0 @@
-export { ThemeContextProvider, useThemeContext } from './theme'
-export type {
-  ThemeColorRGB,
-  ThemeContextProviderComponent,
-  ThemeContextProviderProps,
-  ThemeContextValue,
-  ThemeFontWeight,
-} from './theme.types'

package/source/contexts/theme/theme.tsx

@@ -1,280 +0,0 @@
-import {
-  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'
-import { createContext, useContext, useMemo } from 'react'
-import type {
-  ThemeContextProviderComponent,
-  ThemeContextValue,
-} from './theme.types'
-
-// We can use context even outside provider.
-// This can be helpful for testing and storybook.
-const ThemeContext = createContext<ThemeContextValue>({
-  colorForegroundBase100: COLOR_FOREGROUND_BASE_100,
-  colorForegroundBase200: COLOR_FOREGROUND_BASE_200,
-  colorForegroundBase300: COLOR_FOREGROUND_BASE_300,
-  colorForegroundBase400: COLOR_FOREGROUND_BASE_400,
-  colorForegroundBase500: COLOR_FOREGROUND_BASE_500,
-  colorForegroundBase600: COLOR_FOREGROUND_BASE_600,
-  colorForegroundBase700: COLOR_FOREGROUND_BASE_700,
-  colorForegroundBase800: COLOR_FOREGROUND_BASE_800,
-  colorForegroundBase900: COLOR_FOREGROUND_BASE_900,
-  colorForegroundInverse100: COLOR_FOREGROUND_INVERSE_100,
-  colorForegroundInverse200: COLOR_FOREGROUND_INVERSE_200,
-  colorForegroundInverse300: COLOR_FOREGROUND_INVERSE_300,
-  colorForegroundInverse400: COLOR_FOREGROUND_INVERSE_400,
-  colorForegroundInverse500: COLOR_FOREGROUND_INVERSE_500,
-  colorForegroundInverse600: COLOR_FOREGROUND_INVERSE_600,
-  colorForegroundInverse700: COLOR_FOREGROUND_INVERSE_700,
-  colorForegroundInverse800: COLOR_FOREGROUND_INVERSE_800,
-  colorForegroundInverse900: COLOR_FOREGROUND_INVERSE_900,
-  fontFamilyBase: FONT_FAMILY_BASE,
-  fontWeightBaseThin: FONT_WEIGHT_BASE_THIN,
-  fontWeightBaseExtraLight: FONT_WEIGHT_BASE_EXTRALIGHT,
-  fontWeightBaseLight: FONT_WEIGHT_BASE_LIGHT,
-  fontWeightBaseRegular: FONT_WEIGHT_BASE_REGULAR,
-  fontWeightBaseMedium: FONT_WEIGHT_BASE_MEDIUM,
-  fontWeightBaseSemibold: FONT_WEIGHT_BASE_SEMIBOLD,
-  fontWeightBaseBold: FONT_WEIGHT_BASE_BOLD,
-  fontWeightBaseExtraBold: FONT_WEIGHT_BASE_EXTRABOLD,
-  fontWeightBaseBlack: FONT_WEIGHT_BASE_BLACK,
-  fontSizeBaseX2S: FONT_SIZE_BASE_X2S,
-  fontSizeBaseXS: FONT_SIZE_BASE_XS,
-  fontSizeBaseSM: FONT_SIZE_BASE_SM,
-  fontSizeBaseMD: FONT_SIZE_BASE_MD,
-  fontSizeBaseLG: FONT_SIZE_BASE_LG,
-  fontSizeBaseXL: FONT_SIZE_BASE_XL,
-  fontSizeBaseX2L: FONT_SIZE_BASE_X2L,
-  fontSizeBaseX3L: FONT_SIZE_BASE_X3L,
-  fontSizeBaseX4L: FONT_SIZE_BASE_X4L,
-  fontSizeBaseX5L: FONT_SIZE_BASE_X5L,
-  lineHeightBaseNone: LINE_HEIGHT_BASE_NONE,
-  lineHeightBaseTight: LINE_HEIGHT_BASE_TIGHT,
-  lineHeightBaseSnug: LINE_HEIGHT_BASE_SNUG,
-  lineHeightBaseNormal: LINE_HEIGHT_BASE_NORMAL,
-  lineHeightBaseRelaxed: LINE_HEIGHT_BASE_RELAXED,
-  lineHeightBaseLoose: LINE_HEIGHT_BASE_LOOSE,
-})
-
-export const ThemeContextProvider: ThemeContextProviderComponent = ({
-  // Foreground color tokens.
-  colorForegroundBase100,
-  colorForegroundBase200,
-  colorForegroundBase300,
-  colorForegroundBase400,
-  colorForegroundBase500,
-  colorForegroundBase600,
-  colorForegroundBase700,
-  colorForegroundBase800,
-  colorForegroundBase900,
-  colorForegroundInverse100,
-  colorForegroundInverse200,
-  colorForegroundInverse300,
-  colorForegroundInverse400,
-  colorForegroundInverse500,
-  colorForegroundInverse600,
-  colorForegroundInverse700,
-  colorForegroundInverse800,
-  colorForegroundInverse900,
-  // Font family tokens.
-  fontFamilyBase,
-  // Font weight tokens.
-  fontWeightBaseThin,
-  fontWeightBaseExtraLight,
-  fontWeightBaseLight,
-  fontWeightBaseRegular,
-  fontWeightBaseMedium,
-  fontWeightBaseSemibold,
-  fontWeightBaseBold,
-  fontWeightBaseExtraBold,
-  fontWeightBaseBlack,
-  // Font size tokens.
-  fontSizeBaseX2S,
-  fontSizeBaseXS,
-  fontSizeBaseSM,
-  fontSizeBaseMD,
-  fontSizeBaseLG,
-  fontSizeBaseXL,
-  fontSizeBaseX2L,
-  fontSizeBaseX3L,
-  fontSizeBaseX4L,
-  fontSizeBaseX5L,
-  // Line height tokens.
-  lineHeightBaseNone,
-  lineHeightBaseTight,
-  lineHeightBaseSnug,
-  lineHeightBaseNormal,
-  lineHeightBaseRelaxed,
-  lineHeightBaseLoose,
-  // And at least.. :)
-  children,
-}) => {
-  // Memorizing context value.
-  // Allows to avoid unnecessary re-renders.
-  // Context consumers will re-render only if value changes.
-  const value = useMemo(
-    () => ({
-      // Foreground color tokens.
-      colorForegroundBase100:
-        colorForegroundBase100 ?? COLOR_FOREGROUND_BASE_100,
-      colorForegroundBase200:
-        colorForegroundBase200 ?? COLOR_FOREGROUND_BASE_200,
-      colorForegroundBase300:
-        colorForegroundBase300 ?? COLOR_FOREGROUND_BASE_300,
-      colorForegroundBase400:
-        colorForegroundBase400 ?? COLOR_FOREGROUND_BASE_400,
-      colorForegroundBase500:
-        colorForegroundBase500 ?? COLOR_FOREGROUND_BASE_500,
-      colorForegroundBase600:
-        colorForegroundBase600 ?? COLOR_FOREGROUND_BASE_600,
-      colorForegroundBase700:
-        colorForegroundBase700 ?? COLOR_FOREGROUND_BASE_700,
-      colorForegroundBase800:
-        colorForegroundBase800 ?? COLOR_FOREGROUND_BASE_800,
-      colorForegroundBase900:
-        colorForegroundBase900 ?? COLOR_FOREGROUND_BASE_900,
-      colorForegroundInverse100:
-        colorForegroundInverse100 ?? COLOR_FOREGROUND_INVERSE_100,
-      colorForegroundInverse200:
-        colorForegroundInverse200 ?? COLOR_FOREGROUND_INVERSE_200,
-      colorForegroundInverse300:
-        colorForegroundInverse300 ?? COLOR_FOREGROUND_INVERSE_300,
-      colorForegroundInverse400:
-        colorForegroundInverse400 ?? COLOR_FOREGROUND_INVERSE_400,
-      colorForegroundInverse500:
-        colorForegroundInverse500 ?? COLOR_FOREGROUND_INVERSE_500,
-      colorForegroundInverse600:
-        colorForegroundInverse600 ?? COLOR_FOREGROUND_INVERSE_600,
-      colorForegroundInverse700:
-        colorForegroundInverse700 ?? COLOR_FOREGROUND_INVERSE_700,
-      colorForegroundInverse800:
-        colorForegroundInverse800 ?? COLOR_FOREGROUND_INVERSE_800,
-      colorForegroundInverse900:
-        colorForegroundInverse900 ?? COLOR_FOREGROUND_INVERSE_900,
-      // Font family tokens.
-      fontFamilyBase: fontFamilyBase ?? FONT_FAMILY_BASE,
-      // Base font weight tokens.
-      fontWeightBaseThin: fontWeightBaseThin ?? FONT_WEIGHT_BASE_THIN,
-      fontWeightBaseExtraLight:
-        fontWeightBaseExtraLight ?? FONT_WEIGHT_BASE_EXTRALIGHT,
-      fontWeightBaseLight: fontWeightBaseLight ?? FONT_WEIGHT_BASE_LIGHT,
-      fontWeightBaseRegular: fontWeightBaseRegular ?? FONT_WEIGHT_BASE_REGULAR,
-      fontWeightBaseMedium: fontWeightBaseMedium ?? FONT_WEIGHT_BASE_MEDIUM,
-      fontWeightBaseSemibold:
-        fontWeightBaseSemibold ?? FONT_WEIGHT_BASE_SEMIBOLD,
-      fontWeightBaseBold: fontWeightBaseBold ?? FONT_WEIGHT_BASE_BOLD,
-      fontWeightBaseExtraBold:
-        fontWeightBaseExtraBold ?? FONT_WEIGHT_BASE_EXTRABOLD,
-      fontWeightBaseBlack: fontWeightBaseBlack ?? FONT_WEIGHT_BASE_BLACK,
-      // Base font size tokens.
-      fontSizeBaseX2S: fontSizeBaseX2S ?? FONT_SIZE_BASE_X2S,
-      fontSizeBaseXS: fontSizeBaseXS ?? FONT_SIZE_BASE_XS,
-      fontSizeBaseSM: fontSizeBaseSM ?? FONT_SIZE_BASE_SM,
-      fontSizeBaseMD: fontSizeBaseMD ?? FONT_SIZE_BASE_MD,
-      fontSizeBaseLG: fontSizeBaseLG ?? FONT_SIZE_BASE_LG,
-      fontSizeBaseXL: fontSizeBaseXL ?? FONT_SIZE_BASE_XL,
-      fontSizeBaseX2L: fontSizeBaseX2L ?? FONT_SIZE_BASE_X2L,
-      fontSizeBaseX3L: fontSizeBaseX3L ?? FONT_SIZE_BASE_X3L,
-      fontSizeBaseX4L: fontSizeBaseX4L ?? FONT_SIZE_BASE_X4L,
-      fontSizeBaseX5L: fontSizeBaseX5L ?? FONT_SIZE_BASE_X5L,
-      // Base line height tokens.
-      lineHeightBaseNone: lineHeightBaseNone ?? LINE_HEIGHT_BASE_NONE,
-      lineHeightBaseTight: lineHeightBaseTight ?? LINE_HEIGHT_BASE_TIGHT,
-      lineHeightBaseSnug: lineHeightBaseSnug ?? LINE_HEIGHT_BASE_SNUG,
-      lineHeightBaseNormal: lineHeightBaseNormal ?? LINE_HEIGHT_BASE_NORMAL,
-      lineHeightBaseRelaxed: lineHeightBaseRelaxed ?? LINE_HEIGHT_BASE_RELAXED,
-      lineHeightBaseLoose: lineHeightBaseLoose ?? LINE_HEIGHT_BASE_LOOSE,
-    }),
-    [
-      colorForegroundBase100,
-      colorForegroundBase200,
-      colorForegroundBase300,
-      colorForegroundBase400,
-      colorForegroundBase500,
-      colorForegroundBase600,
-      colorForegroundBase700,
-      colorForegroundBase800,
-      colorForegroundBase900,
-      colorForegroundInverse100,
-      colorForegroundInverse200,
-      colorForegroundInverse300,
-      colorForegroundInverse400,
-      colorForegroundInverse500,
-      colorForegroundInverse600,
-      colorForegroundInverse700,
-      colorForegroundInverse800,
-      colorForegroundInverse900,
-      fontFamilyBase,
-      fontWeightBaseThin,
-      fontWeightBaseExtraLight,
-      fontWeightBaseLight,
-      fontWeightBaseRegular,
-      fontWeightBaseMedium,
-      fontWeightBaseSemibold,
-      fontWeightBaseBold,
-      fontWeightBaseExtraBold,
-      fontWeightBaseBlack,
-      fontSizeBaseX2S,
-      fontSizeBaseXS,
-      fontSizeBaseSM,
-      fontSizeBaseMD,
-      fontSizeBaseLG,
-      fontSizeBaseXL,
-      fontSizeBaseX2L,
-      fontSizeBaseX3L,
-      fontSizeBaseX4L,
-      fontSizeBaseX5L,
-      lineHeightBaseNone,
-      lineHeightBaseTight,
-      lineHeightBaseSnug,
-      lineHeightBaseNormal,
-      lineHeightBaseRelaxed,
-      lineHeightBaseLoose,
-    ]
-  )
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-}
-export const useThemeContext = () => useContext(ThemeContext)