bootstrap-rn 0.3.3 → 0.3.5

package/src/theme/{breakpoints.js → breakpoints.ts}

@@ -1,7 +1,9 @@
 import { GRID_BREAKPOINTS } from './proxies';
 
-export function next(name) {
-  const names = Object.keys(GRID_BREAKPOINTS);
+export function next(name: keyof typeof GRID_BREAKPOINTS) {
+  const names = Object.keys(GRID_BREAKPOINTS) as Array<
+    keyof typeof GRID_BREAKPOINTS
+  >;
   const n = names.indexOf(name);
 
   if (n === -1) {
@@ -11,7 +13,7 @@ export function next(name) {
   return n < names.length ? names[n + 1] : '';
 }
 
-export function infix(breakpoint) {
+export function infix(breakpoint: keyof typeof GRID_BREAKPOINTS | '') {
   if (!breakpoint || breakpoint === 'xs') {
     return '';
   }

package/src/theme/{functions.js → functions.ts}

@@ -2,11 +2,17 @@ import { rgba, opacity, mix } from '../style/functions';
 import { calculate } from '../style/math';
 import RgbaValue from '../style/types/RgbaValue';
 import UnitValue from '../style/types/UnitValue';
-
-export const fn = (handle) => (...args) => (t) => {
-  const input = args.map((arg) => (typeof arg === 'function' ? arg(t) : arg));
-  return handle(input, t);
-};
+import type { ThemeVariables, StyleValue } from '../types';
+
+export const fn =
+  <T extends string | number | null>(
+    handle: (input: T[], t: ThemeVariables) => StyleValue,
+  ) =>
+  (...args: (T | ((t: ThemeVariables) => T))[]) =>
+  (t: ThemeVariables) => {
+    const input = args.map((arg) => (typeof arg === 'function' ? arg(t) : arg));
+    return handle(input, t);
+  };
 
 /* eslint-disable arrow-body-style */
 
@@ -18,8 +24,8 @@ const escapedCharacters = {
   ')': '%29',
 };
 
-export const escapeSvg = (string) => {
-  const strReplace = (val) =>
+export const escapeSvg = (string: string) => {
+  const strReplace = (val: string) =>
     Object.entries(escapedCharacters).reduce(
       (result, [char, encoded]) =>
         result.replace(new RegExp(`\\${char}`, 'g'), encoded),
@@ -40,10 +46,10 @@ const luminanceList = [0.0008, 0.001, 0.0011, 0.0013, 0.0015, 0.0017, 0.002, 0.0
 // Return WCAG2.0 relative luminance
 // See https://www.w3.org/WAI/GL/wiki/Relative_luminance
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-const luminance = (color) => {
+const luminance = (color: string) => {
   const rgb = RgbaValue.parse(color).toRgb();
 
-  const [red, green, blue] = rgb.map((value) => {
+  const [red, green, blue] = rgb.map((value: number) => {
     return value / 255 < 0.04045 ? value / 255 / 12.92 : luminanceList[value];
   });
 
@@ -52,32 +58,32 @@ const luminance = (color) => {
 
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
-const opaque = (background, foreground) => {
+const opaque = (background: string, foreground: string) => {
   const foregroundRgba = RgbaValue.parse(foreground);
   return mix(rgba(foregroundRgba, 1), background, opacity(foregroundRgba));
 };
 
-const contrastRatio = (background, foreground) => {
+const contrastRatio = (background: string, foreground: string) => {
   const l1 = luminance(background);
   const l2 = luminance(opaque(background, foreground));
 
   return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
 };
 
-export const colorContrast = fn(([background], t) => {
+export const colorContrast = fn(([background]: [background: string], t) => {
   const foregrounds = [
-    t['color-contrast-light'],
-    t['color-contrast-dark'],
-    t.white,
-    t.black,
+    t['color-contrast-light'] as string,
+    t['color-contrast-dark'] as string,
+    t.white as string,
+    t.black as string,
   ];
-  let maxRatio = 0;
-  let maxRatioColor = null;
+  let maxRatio: number = 0;
+  let maxRatioColor: string | null = null;
 
   const result = foregrounds.find((color) => {
-    const ratio = contrastRatio(background, color);
+    const ratio = contrastRatio(background as string, color);
 
-    if (ratio > t['min-contrast-ratio']) {
+    if (ratio > (t['min-contrast-ratio'] as number)) {
       return true;
     }
 
@@ -102,65 +108,83 @@ export const colorContrast = fn(([background], t) => {
 });
 
 // Tint a color: mix a color with white
-export const tintColor = fn(([color, weight], t) => {
-  return mix(t.white, color, weight);
-});
+export const tintColor = fn(
+  ([color, weight]: [color: string, weight: number], t) => {
+    return mix(t.white, color, weight);
+  },
+);
 
 // Shade a color: mix a color with black
-export const shadeColor = fn(([color, weight], t) => {
-  return mix(t.black, color, weight);
-});
+export const shadeColor = fn(
+  ([color, weight]: [color: string, weight: number], t) => {
+    return mix(t.black, color, weight);
+  },
+);
 
 // Shade the color if the weight is positive, else tint it
-export const shiftColor = fn(([color, weight], t) => {
-  const percentage = UnitValue.parse(weight).toNumber();
-
-  const handle =
-    percentage > 0
-      ? shadeColor(color, percentage)
-      : tintColor(color, -percentage);
-
-  return handle(t);
-});
-
-export const add = fn(([value1, value2]) => {
-  if (value1 === null) {
-    return value2;
-  }
-
-  if (value2 === null) {
-    return value1;
-  }
+export const shiftColor = fn(
+  ([color, weight]: [color: string, weight: number], t) => {
+    const percentage = UnitValue.parse(weight).toNumber();
+
+    const handle =
+      percentage > 0
+        ? shadeColor(color, percentage)
+        : tintColor(color, -percentage);
+
+    return handle(t);
+  },
+);
+
+export const add = fn(
+  ([value1, value2]: [
+    value1: string | number | null,
+    value2: string | number | null,
+  ]) => {
+    if (value1 === null) {
+      return value2;
+    }
 
-  return calculate(value1, '+', value2);
-});
+    if (value2 === null) {
+      return value1;
+    }
 
-export const subtract = fn(([value1, value2]) => {
-  if (value1 === null && value2 === null) {
-    return null;
-  }
+    return calculate(value1, '+', value2);
+  },
+);
+
+export const subtract = fn(
+  ([value1, value2]: [
+    value1: string | number | null,
+    value2: string | number | null,
+  ]) => {
+    if (value1 === null && value2 === null) {
+      return null;
+    }
 
-  if (value1 === null) {
-    return `-${value2}`;
-  }
+    if (value1 === null) {
+      return `-${value2}`;
+    }
 
-  if (value2 === null) {
-    return value1;
-  }
+    if (value2 === null) {
+      return value1;
+    }
 
-  return calculate(value1, '-', value2);
-});
+    return calculate(value1, '-', value2);
+  },
+);
 
-export const divide = fn(([dividend, divisor]) => {
-  if (Math.abs(parseFloat(dividend)) === 0) {
-    return 0;
-  }
+export const divide = fn(
+  ([dividend, divisor]: [color: string | number, weight: string | number]) => {
+    if (Math.abs(parseFloat(dividend as string)) === 0) {
+      return 0;
+    }
 
-  if (Math.abs(parseFloat(divisor)) === 0) {
-    throw new Error('Cannot divide by 0');
-  }
+    if (Math.abs(parseFloat(divisor as string)) === 0) {
+      throw new Error('Cannot divide by 0');
+    }
 
-  return calculate(dividend, '/', divisor);
-});
+    return calculate(dividend, '/', divisor);
+  },
+);
 
 /* eslint-enable */

package/src/theme/{maps.js → maps.ts}

@@ -1,29 +1,30 @@
 import { THEME_COLORS, SPACERS } from './proxies';
 import { each } from '../utils';
+import type { ThemeVariables } from '../types';
 
 export const UTILITIES_COLORS = THEME_COLORS;
 
 export const UTILITIES_TEXT_COLORS = {
   ...UTILITIES_COLORS,
-  black: (t) => t.black,
-  white: (t) => t.white,
-  body: (t) => t['body-color'],
+  black: (t: ThemeVariables) => t.black,
+  white: (t: ThemeVariables) => t.white,
+  body: (t: ThemeVariables) => t['body-color'],
 };
 
 export const UTILITIES_BG_COLORS = {
   ...UTILITIES_COLORS,
-  black: (t) => t.black,
-  white: (t) => t.white,
-  body: (t) => t['body-bg'],
+  black: (t: ThemeVariables) => t.black,
+  white: (t: ThemeVariables) => t.white,
+  body: (t: ThemeVariables) => t['body-bg'],
 };
 
 export const NEGATIVE_SPACERS = each(SPACERS, (key, value) => {
   if (key === 0) {
-    return null;
+    return {};
   }
 
   return {
-    [`n${key}`]: (t) => `-${value(t)}`,
+    [`n${key}`]: (t: ThemeVariables) => `-${value(t)}`,
   };
 });
 

package/src/theme/{proxies.js → proxies.ts}

@@ -16,7 +16,7 @@ export const GRAYS = makeProxy('grays', [
   '700',
   '800',
   '900',
-]);
+] as const);
 
 export const COLORS = makeProxy('colors', [
   'blue',
@@ -29,7 +29,7 @@ export const COLORS = makeProxy('colors', [
   'green',
   'teal',
   'cyan',
-]);
+] as const);
 
 export const THEME_COLORS = makeProxy('theme-colors', [
   'primary',
@@ -40,7 +40,7 @@ export const THEME_COLORS = makeProxy('theme-colors', [
   'danger',
   'light',
   'dark',
-]);
+] as const);
 
 export const BLUES = makeProxy('blues', [
   'blue-100',
@@ -52,7 +52,7 @@ export const BLUES = makeProxy('blues', [
   'blue-700',
   'blue-800',
   'blue-900',
-]);
+] as const);
 
 export const INDIGOS = makeProxy('indigos', [
   'indigo-100',
@@ -64,7 +64,7 @@ export const INDIGOS = makeProxy('indigos', [
   'indigo-700',
   'indigo-800',
   'indigo-900',
-]);
+] as const);
 
 export const PURPLES = makeProxy('purples', [
   'purple-100',
@@ -76,7 +76,7 @@ export const PURPLES = makeProxy('purples', [
   'purple-700',
   'purple-800',
   'purple-900',
-]);
+] as const);
 
 export const PINKS = makeProxy('pinks', [
   'pink-100',
@@ -88,7 +88,7 @@ export const PINKS = makeProxy('pinks', [
   'pink-700',
   'pink-800',
   'pink-900',
-]);
+] as const);
 
 export const REDS = makeProxy('reds', [
   'red-100',
@@ -100,7 +100,7 @@ export const REDS = makeProxy('reds', [
   'red-700',
   'red-800',
   'red-900',
-]);
+] as const);
 
 export const ORANGES = makeProxy('oranges', [
   'orange-100',
@@ -112,7 +112,7 @@ export const ORANGES = makeProxy('oranges', [
   'orange-700',
   'orange-800',
   'orange-900',
-]);
+] as const);
 
 export const YELLOWS = makeProxy('yellows', [
   'yellow-100',
@@ -124,7 +124,7 @@ export const YELLOWS = makeProxy('yellows', [
   'yellow-700',
   'yellow-800',
   'yellow-900',
-]);
+] as const);
 
 export const GREENS = makeProxy('greens', [
   'green-100',
@@ -136,7 +136,7 @@ export const GREENS = makeProxy('greens', [
   'green-700',
   'green-800',
   'green-900',
-]);
+] as const);
 
 export const TEALS = makeProxy('teals', [
   'teal-100',
@@ -148,7 +148,7 @@ export const TEALS = makeProxy('teals', [
   'teal-700',
   'teal-800',
   'teal-900',
-]);
+] as const);
 
 export const CYANS = makeProxy('cyans', [
   'cyan-100',
@@ -160,7 +160,7 @@ export const CYANS = makeProxy('cyans', [
   'cyan-700',
   'cyan-800',
   'cyan-900',
-]);
+] as const);
 
 // Spacing
 //
@@ -168,13 +168,15 @@ export const CYANS = makeProxy('cyans', [
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
-export const SPACERS = makeProxy('spacers', [0, 1, 2, 3, 4, 5]);
+export const SPACERS = makeProxy('spacers', [0, 1, 2, 3, 4, 5] as const);
 
 // Position
 //
 // Define the edge positioning anchors of the position utilities.
 
-export const POSITION_VALUES = makeProxy('position-values', [0, 50, 100]);
+export const POSITION_VALUES = makeProxy('position-values', [
+  0, 50, 100,
+] as const);
 
 // Grid breakpoints
 //
@@ -188,7 +190,7 @@ export const GRID_BREAKPOINTS = makeProxy('grid-breakpoints', [
   'lg',
   'xl',
   'xxl',
-]);
+] as const);
 
 // Grid containers
 //
@@ -200,7 +202,7 @@ export const CONTAINER_MAX_WIDTHS = makeProxy('container-max-widths', [
   'lg',
   'xl',
   'xxl',
-]);
+] as const);
 
 // Grid columns
 //
@@ -221,29 +223,24 @@ export const ASPECT_RATIOS = makeProxy('aspect-ratios', [
   '4x3',
   '16x9',
   '21x9',
-]);
+] as const);
 
 // Typography
 //
 // Font, line-height, and color for body text, headings, and more.
 
-export const FONT_SIZES = makeProxy('font-sizes', [1, 2, 3, 4, 5, 6]);
+export const FONT_SIZES = makeProxy('font-sizes', [1, 2, 3, 4, 5, 6] as const);
 
 export const DISPLAY_FONT_SIZES = makeProxy('display-font-sizes', [
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-]);
+  1, 2, 3, 4, 5, 6,
+] as const);
 
 // Forms
 
 export const FORM_VALIDATION_STATES = makeProxy('form-validation-states', [
   'valid',
   'invalid',
-]);
+] as const);
 
 const proxies = {
   GRAYS,