react-native-varia 0.0.1 → 0.2.0

package/lib/varia/utils.ts

@@ -0,0 +1,283 @@
+export function hexToRgba(hex: string, alpha: number = 1) {
+  hex = hex.replace(/^#/, '')
+
+  let r, g, b, a
+
+  if (hex.length === 6) {
+    r = parseInt(hex.slice(0, 2), 16)
+    g = parseInt(hex.slice(2, 4), 16)
+    b = parseInt(hex.slice(4, 6), 16)
+    a = alpha
+  } else if (hex.length === 8) {
+    r = parseInt(hex.slice(0, 2), 16)
+    g = parseInt(hex.slice(2, 4), 16)
+    b = parseInt(hex.slice(4, 6), 16)
+    a = parseInt(hex.slice(6, 8), 16) / 255
+  } else {
+    throw new Error('Invalid hex color format. Use #RRGGBB or #RRGGBBAA.')
+  }
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`
+}
+
+import {Dimensions, PixelRatio} from 'react-native'
+import {
+  AlphaPalette,
+  ColorPalette,
+  ColorPaletteBackground,
+  ColorPaletteBorder,
+  ColorPaletteForeground,
+  ColorScheme,
+  CreatePresetDTO,
+  CustomColorScheme,
+  ThemeColors,
+  ThemePresetDTO,
+} from './types'
+import {NestedColorsType} from './types'
+import {defaultColors} from './defaultTheme'
+
+const {width, height} = Dimensions.get('window')
+
+const guidelineBaseWidth = 375
+const guidelineBaseHeight = 667
+
+const scale = (size: number): number => (width / guidelineBaseWidth) * size
+const verticalScale = (size: number): number =>
+  (height / guidelineBaseHeight) * size
+const moderateScale = (size: number, factor: number = 0.5): number =>
+  size + (scale(size) - size) * factor
+
+// FONT SCALING
+// Usage: nf(16)
+const scaleNew = height / 667
+const normalizeFont = (size: number): number => {
+  const newSize = size * scaleNew
+  return Math.round(PixelRatio.roundToNearestPixel(newSize))
+}
+
+// DYNAMIC DIMENSION CONSTANTS
+// Usage: wp(5), hp(20)
+const widthPercentageToDP = (widthPercent: string): number => {
+  // Convert string input to decimal number
+  const elemWidth = parseFloat(widthPercent)
+  return PixelRatio.roundToNearestPixel((width * elemWidth) / 100)
+}
+const heightPercentageToDP = (heightPercent: string): number => {
+  // Convert string input to decimal number
+  const elemHeight = parseFloat(heightPercent)
+  return PixelRatio.roundToNearestPixel((height * elemHeight) / 100)
+}
+
+// Usage: wpx(141), hpx(220)
+const widthFromPixel = (widthPx: number, w: number = 414): number =>
+  widthPx * (width / w)
+const heightFromPixel = (heightPx: number, h: number = 896): number =>
+  heightPx * (height / h)
+
+export {
+  scale,
+  verticalScale,
+  moderateScale,
+  normalizeFont as nf,
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+  widthFromPixel as wpx,
+  heightFromPixel as hpx,
+}
+
+export const extractThemeColor = (color: ThemeColors, theme: any) => {
+  return color.includes('.')
+    ? (
+        theme.colors[
+          color.split('.')[0] as keyof typeof theme.colors
+        ] as unknown as Record<string, string>
+      )[color.split('.')[1]]
+    : color in theme.colors &&
+      typeof theme.colors[color as keyof typeof theme.colors] === 'string'
+    ? (theme.colors[color as keyof typeof theme.colors] as string)
+    : !(color in theme.colors)
+    ? color
+    : undefined
+}
+
+export const resolveColor = (
+  value: string,
+  colors: NestedColorsType,
+  colorPalette?: string,
+): string => {
+  if (value.includes('.')) {
+    const [palette, key] = value.split('.')
+
+    if (palette === 'colorPalette' && colorPalette) {
+      const paletteObj = (colors as any)[colorPalette]
+      if (paletteObj && key in paletteObj) {
+        return paletteObj[key]
+      }
+    }
+
+    const paletteObj = (colors as any)[palette]
+    if (paletteObj && key in paletteObj) {
+      return paletteObj[key]
+    }
+  }
+
+  if (value in colors) {
+    return (colors as any)[value]
+  }
+
+  return value
+}
+
+export const resolveFontSize = <T extends Record<string, number>>(
+  fontSize: number | keyof T,
+  fontSizes: T,
+): number => {
+  if (typeof fontSize === 'number') {
+    return fontSize
+  }
+
+  return fontSizes[fontSize]
+}
+
+export const createPreset = <T extends CreatePresetDTO>(
+  rawPalettes: T,
+): {
+  light: ColorScheme &
+    CustomColorScheme & {[K in keyof T | 'black' | 'white']: ColorPalette} & {
+      backdrop: string
+    }
+  dark: ColorScheme &
+    CustomColorScheme & {[K in keyof T | 'black' | 'white']: ColorPalette} & {
+      backdrop: string
+    }
+} => {
+  const themeColor = {
+    light: {} as Record<string, any>,
+    dark: {} as Record<string, any>,
+  }
+
+  const palettesWithDefaults = {
+    ...rawPalettes,
+  }
+
+  function isThemePresetDTO(palette: any): palette is ThemePresetDTO {
+    return 'light' in palette && 'dark' in palette
+  }
+
+  Object.keys(palettesWithDefaults).forEach(paletteName => {
+    const palette = palettesWithDefaults[paletteName]
+    const isGray = paletteName === 'gray'
+
+    if (isThemePresetDTO(palette)) {
+      themeColor.light[paletteName] = {
+        ...palette.light,
+        default: palette.light[9],
+        emphasized: palette.light[10],
+        fg: isGray ? 'white' : palettesWithDefaults.gray.light[12],
+        text: palette.light.a11,
+      }
+
+      themeColor.dark[paletteName] = {
+        ...palette.dark,
+        default: palette.dark[9],
+        emphasized: palette.dark[10],
+        fg: isGray ? 'white' : palettesWithDefaults.gray.light[12],
+        text: palette.dark.a11,
+      }
+    } else {
+      const alphaPalette = palette as AlphaPalette
+
+      themeColor.light[paletteName] = {
+        ...alphaPalette,
+        default: alphaPalette.a9,
+        emphasized: alphaPalette.a10,
+        fg: 'white',
+        text: alphaPalette.a11,
+      }
+
+      themeColor.dark[paletteName] = {
+        ...alphaPalette,
+        default: alphaPalette.a9,
+        emphasized: alphaPalette.a10,
+        fg: 'white',
+        text: alphaPalette.a11,
+      }
+    }
+  })
+
+  const grayLight = themeColor.light.gray
+  const grayDark = themeColor.dark.gray
+
+  const redLight = themeColor.light.red
+  const redDark = themeColor.dark.red
+
+  Object.assign(themeColor.light, {
+    bg: {
+      canvas: grayLight['1'],
+      default: grayLight['2'],
+      subtle: grayLight['3'],
+      muted: grayLight['4'],
+      emphasized: grayLight['5'],
+      disabled: grayLight['6'],
+    } satisfies ColorPaletteBackground,
+    fg: {
+      default: grayLight['12'],
+      muted: grayLight['11'],
+      subtle: grayLight['10'],
+      disabled: grayLight['9'],
+      error: redLight['9'],
+    } satisfies ColorPaletteForeground,
+    border: {
+      default: grayLight['7'],
+      muted: grayLight['6'],
+      subtle: grayLight['4'],
+      disabled: grayLight['5'],
+      outline: grayLight['a9'],
+      error: redLight['9'],
+    } satisfies ColorPaletteBorder,
+  })
+
+  Object.assign(themeColor.dark, {
+    bg: {
+      canvas: grayDark['1'],
+      default: grayDark['2'],
+      subtle: grayDark['3'],
+      muted: grayDark['4'],
+      emphasized: grayDark['5'],
+      disabled: grayDark['6'],
+    } satisfies ColorPaletteBackground,
+    fg: {
+      default: grayDark['12'],
+      muted: grayDark['11'],
+      subtle: grayDark['10'],
+      disabled: grayDark['9'],
+      error: redDark['9'],
+    } satisfies ColorPaletteForeground,
+    border: {
+      default: grayDark['7'],
+      muted: grayDark['6'],
+      subtle: grayDark['4'],
+      disabled: grayDark['5'],
+      outline: grayDark['a9'],
+      error: redDark['9'],
+    } satisfies ColorPaletteBorder,
+  })
+
+  themeColor.light.backdrop = defaultColors.white.a10
+  themeColor.dark.backdrop = defaultColors.black.a10
+
+  return themeColor as {
+    light: ColorScheme &
+      CustomColorScheme & {[K in keyof T]: ColorPalette} & {
+        black: AlphaPalette
+        white: AlphaPalette
+        backdrop: string
+      }
+    dark: ColorScheme &
+      CustomColorScheme & {[K in keyof T]: ColorPalette} & {
+        black: AlphaPalette
+        white: AlphaPalette
+        backdrop: string
+      }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-varia",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "bin": {
     "varia": "bin/cli.js"
   },