bootstrap-rn 0.3.2 → 0.3.4

package/src/style/parse/rules/{declaration.js → declaration.ts}

@@ -1,7 +1,9 @@
+import type { DeclarationNode } from '../../transform';
+import InputStream, { Char } from '../InputStream';
 import isIdent from '../isIdent';
 import isWhitespace from '../isWhitespace';
 
-const breaksDeclaration = (char) =>
+const breaksDeclaration = (char: Char) =>
   typeof char !== 'function' &&
   char !== '$' &&
   char !== ';' &&
@@ -10,10 +12,11 @@ const breaksDeclaration = (char) =>
   char !== '';
 
 const declaration = {
-  locate(input) {
-    return /[a-z_]/i.test(input.peek());
+  locate(input: InputStream) {
+    const char = input.peek();
+    return typeof char === 'string' && /[a-z_]/i.test(char);
   },
-  read(input) {
+  read(input: InputStream) {
     // Parse name.
     const name = input.charsWhile(isIdent);
 
@@ -32,7 +35,7 @@ const declaration = {
 
         const variableName = input.charsWhile(isIdent);
 
-        value.push((variables) => {
+        value.push((variables: Record<string, string>) => {
           if (variables[variableName] === undefined) {
             throw new Error(`Variable $${variableName} is not defined.`);
           }
@@ -66,7 +69,7 @@ const declaration = {
       type: 'declaration',
       name,
       value,
-    };
+    } as DeclarationNode;
   },
 };
 

package/src/style/parse/rules/{directive.js → directive.ts}

@@ -1,7 +1,9 @@
+import type { BlockNode, MixinStyleScope } from '../../transform';
+import InputStream from '../InputStream';
 import isIdent from '../isIdent';
 import isWhitespace from '../isWhitespace';
 
-const consumeArgumentSeperator = (input) => {
+const consumeArgumentSeperator = (input: InputStream) => {
   if (input.peek() !== ',') {
     return false;
   }
@@ -12,10 +14,10 @@ const consumeArgumentSeperator = (input) => {
 };
 
 const directive = {
-  locate(input) {
+  locate(input: InputStream) {
     return input.peek() === '@';
   },
-  read(input, parseBlock) {
+  read(input: InputStream, parseBlock: (value: InputStream) => object | null) {
     input.read('@');
 
     const directiveName = input.charsWhile(isIdent);
@@ -64,10 +66,10 @@ const directive = {
           type: 'mixin',
           name,
           args,
-        },
+        } as MixinStyleScope,
       ],
       children,
-    };
+    } as BlockNode;
   },
 };
 

package/src/style/parse/rules/{selector.js → selector.ts}

@@ -1,13 +1,15 @@
+import type { BlockNode, SelectorStyleScope } from '../../transform';
+import InputStream from '../InputStream';
 import isIdent from '../isIdent';
 import isWhitespace from '../isWhitespace';
 
 const SELECTOR_TYPES = ['hover', 'focus', 'focus-visible', 'active'];
 
 const selector = {
-  locate(input) {
+  locate(input: InputStream) {
     return input.peek() === '&' && input.peek(1) === ':';
   },
-  read(input, parseBlock) {
+  read(input: InputStream, parseBlock: (value: InputStream) => object | null) {
     input.read('&');
     input.read(':');
 
@@ -32,15 +34,15 @@ const selector = {
     input.read('}');
 
     return {
-      type: 'block',
+      type: 'block' as const,
       scopes: [
         {
           type: 'selector',
           name,
-        },
+        } as SelectorStyleScope,
       ],
       children,
-    };
+    } as BlockNode;
   },
 };
 

package/src/style/parse/rules/{variable.js → variable.ts}

@@ -1,10 +1,12 @@
+import type { VariableNode } from '../../transform';
+import InputStream from '../InputStream';
 import declaration from './declaration';
 
 const variable = {
-  locate(input) {
+  locate(input: InputStream) {
     return input.peek() === '$';
   },
-  read(input) {
+  read(input: InputStream) {
     input.read('$');
 
     if (!declaration.locate(input)) {
@@ -17,7 +19,7 @@ const variable = {
       type: 'variable',
       name,
       value,
-    };
+    } as VariableNode;
   },
 };
 

package/src/style/transform/{formula.js → formula.ts}

@@ -1,24 +1,25 @@
 import { calculate } from '../math';
 
-const formulaRE = /([+-]+)?([\d.Ee]+)(rem|px|%)?\s*(\+|-|\*|%)\s*([+-]+)?([\d.Ee]+)(rem|px|%)?/g;
+const formulaRE =
+  /([+-]+)?([\d.Ee]+)(rem|px|%)?\s*(\+|-|\*|%)\s*([+-]+)?([\d.Ee]+)(rem|px|%)?/g;
 
-function formula(value) {
+function formula(value: string) {
   // Naïve approach to calculate simple formulas.
   // TODO: Support more complex formulas including parenthesis.
   return value.replace(
     formulaRE,
     (
       _,
-      leftUnary = '',
+      leftUnary,
       leftNumber,
-      leftUnit = '',
+      leftUnit,
       operator,
-      rightUnary = '',
+      rightUnary,
       rightNumber,
       rightUnit = '',
     ) => {
-      const leftValue = `${leftUnary}${leftNumber}${leftUnit}`;
-      const rightValue = `${rightUnary}${rightNumber}${rightUnit}`;
+      const leftValue = `${leftUnary || ''}${leftNumber}${leftUnit || ''}`;
+      const rightValue = `${rightUnary || ''}${rightNumber}${rightUnit}`;
 
       return calculate(leftValue, operator, rightValue);
     },

package/src/style/transform/{index.js → index.ts}

@@ -7,13 +7,71 @@ import backgroundSize from './properties/backgroundSize';
 import backgroundPosition from './properties/backgroundPosition';
 import backgroundPositionX from './properties/backgroundPositionX';
 import backgroundPositionY from './properties/backgroundPositionY';
+import type { BaseStyle } from '../../types';
+
+type Value = string | ((v: object, k: string | undefined) => string);
+
+export type SelectorStyleScope = {
+  type: 'selector';
+  name: 'hover' | 'focus' | 'focus-visible' | 'active';
+};
+
+export type MixinStyleScope = {
+  type: 'mixin';
+  name:
+    | 'media-breakpoint-between'
+    | 'media-breakpoint-down'
+    | 'media-breakpoint-only'
+    | 'media-breakpoint-up'
+    | 'platform';
+  args: string[];
+};
+
+export type StyleScope = SelectorStyleScope | MixinStyleScope;
+
+export type RootNode = {
+  type: 'root';
+  // eslint-disable-next-line no-use-before-define
+  children: Node[];
+};
+
+export type VariableNode = { type: 'variable'; name: string; value: Value[] };
+
+export type DeclarationNode = {
+  type: 'declaration';
+  name: string;
+  value: Value[];
+};
+
+export type BlockNode = {
+  type: 'block';
+  scopes: StyleScope[];
+  // eslint-disable-next-line no-use-before-define
+  children: Node[];
+};
+
+export type Node = RootNode | VariableNode | DeclarationNode | BlockNode;
+
+export type StyleDefinition = {
+  scopes: StyleScope[];
+  declarations: BaseStyle;
+  variables: Record<string, string>;
+};
+
+type Options = {
+  key?: string;
+  preferTheme?: boolean;
+};
 
 const urlRE = /^url\(.*?\)$/g;
 
-const applyVariables = (variables, key, value) =>
-  typeof value === 'function' ? value(variables, key) : value;
+const applyVariables = (
+  variables: Record<string, string>,
+  key: string | undefined,
+  value: Value,
+) => (typeof value === 'function' ? value(variables, key) : value);
 
-const applyTransforms = (result) => {
+const applyTransforms = (result: string) => {
   // Do not transform values that belong to an url().
   if (result.match(urlRE)) {
     return result;
@@ -22,7 +80,12 @@ const applyTransforms = (result) => {
   return rgba(formula(rem(result)));
 };
 
-const resolveValue = (value, definition, theme, options) => {
+const resolveValue = (
+  value: Value[],
+  definition: StyleDefinition,
+  theme: object,
+  options: Options,
+) => {
   const variables = options.preferTheme
     ? { ...definition.variables, ...theme }
     : { ...theme, ...definition.variables };
@@ -40,17 +103,17 @@ const resolveValue = (value, definition, theme, options) => {
     '',
   );
 
-  return applyTransforms(stringifiedResult);
+  return applyTransforms(stringifiedResult as string);
 };
 
 export default function transform(
-  children,
-  theme,
-  options = {},
-  scopes = [],
-  variables = {},
+  children: Node[],
+  theme: object,
+  options: Options = {},
+  scopes: StyleScope[] = [],
+  variables: Record<string, string> = {},
 ) {
-  let definitions = [
+  let definitions: StyleDefinition[] = [
     {
       scopes,
       declarations: {},

package/src/style/transform/properties/{backgroundPosition.js → backgroundPosition.ts}

@@ -1,8 +1,12 @@
+// @ts-expect-error export exists in css-to-react-native
 import { transformRawValue } from 'css-to-react-native';
 
 const positionRE = /(top|right|bottom|left|center)/;
 
-const sortPairs = (first, second) => {
+const sortPairs = (
+  first: [string] | [string, string],
+  second: [string] | [string, string],
+) => {
   const firstValue = {
     position: first[0],
     offset: first[1]
@@ -28,7 +32,7 @@ const sortPairs = (first, second) => {
 };
 
 // Spec: https://w3c.github.io/csswg-drafts/css-backgrounds-3/#background-position
-export default function backgroundPosition(value) {
+export default function backgroundPosition(value: string) {
   const values = value.split(' ');
   const [first, second = 'center', third, fourth] = values;
 

package/src/style/transform/properties/{backgroundPositionX.js → backgroundPositionX.ts}

@@ -1,6 +1,7 @@
+// @ts-expect-error export exists in css-to-react-native
 import { transformRawValue } from 'css-to-react-native';
 
-export default function backgroundPositionX(value) {
+export default function backgroundPositionX(value: string) {
   const values = value.split(' ');
   const [first, second = 'auto'] = values;
 

package/src/style/transform/properties/{backgroundPositionY.js → backgroundPositionY.ts}

@@ -1,6 +1,7 @@
+// @ts-expect-error export exists in css-to-react-native
 import { transformRawValue } from 'css-to-react-native';
 
-export default function backgroundPositionY(value) {
+export default function backgroundPositionY(value: string) {
   const values = value.split(' ');
   const [first, second = 'auto'] = values;
 

package/src/style/transform/properties/{backgroundSize.js → backgroundSize.ts}

@@ -1,7 +1,8 @@
+// @ts-expect-error export exists in css-to-react-native
 import { transformRawValue } from 'css-to-react-native';
 
 // Spec: https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-size
-export default function backgroundSize(value) {
+export default function backgroundSize(value: string) {
   const values = value.split(' ');
   const [first, second = 'auto'] = values;
 

package/src/style/transform/{rem.js → rem.ts}

@@ -2,16 +2,17 @@ import { Platform, PixelRatio } from 'react-native';
 
 const transformREMUnitRE = /([+-]+)?([\d.Ee]+)rem/g;
 
-const convertRemToPx = (value) => PixelRatio.getFontScale() * 16 * value;
+const convertRemToPx = (value: number) =>
+  PixelRatio.getFontScale() * 16 * value;
 
-function rem(value) {
+function rem(value: string) {
   if (Platform.OS === 'web') {
     return value;
   }
 
   return value.replace(
     transformREMUnitRE,
-    (_, unary = '', number) => `${unary}${convertRemToPx(number)}px`,
+    (_, unary, number) => `${unary || ''}${convertRemToPx(number)}px`,
   );
 }
 

package/src/style/transform/{rgba.js → rgba.ts}

@@ -2,7 +2,7 @@ import { rgba as transform } from '../functions';
 
 const transformRgbaRE = /rgba\(\s*([#0-9a-z]+)\s*,\s*([\d.Ee]+)\s*\)/g;
 
-function rgba(value) {
+function rgba(value: string) {
   return value.replace(transformRgbaRE, (_, hex, alpha) =>
     transform(hex, alpha),
   );

package/src/style/types/RgbaValue.ts

@@ -0,0 +1,127 @@
+// Copied from https://github.com/styled-components/polished/blob/main/src/color/parseToRgb.js
+const hexRE = /^#[a-fA-F0-9]{6}$/;
+const hexRgbaRE = /^#[a-fA-F0-9]{8}$/;
+const shortHexRE = /^#[a-fA-F0-9]{3}$/;
+const shortRgbaHexRE = /^#[a-fA-F0-9]{4}$/;
+const rgbRE =
+  /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+const rgbaRE =
+  /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+const hslRE =
+  /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+const hslaRE =
+  /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+
+// Copied from https://reactnative.dev/docs/colors
+// prettier-ignore
+const colorNames: Record<string, string> = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', rebeccapurple: '#663399', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' };
+
+const hslToRgb = (h: number, s: number, l: number) => {
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number, k: number = (n + h / 30) % 12) =>
+    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  return [f(0), f(8), f(4)];
+};
+
+export default class RgbaValue {
+  red;
+
+  green;
+
+  blue;
+
+  alpha;
+
+  constructor(red: number, green: number, blue: number, alpha: number = 1) {
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+
+  static parse(value: RgbaValue | string) {
+    if (value instanceof RgbaValue) {
+      return value;
+    }
+
+    const color = colorNames[value] || value;
+
+    // Handle hex value
+    const hexMatch =
+      color.match(hexRE) ||
+      color.match(hexRgbaRE) ||
+      color.match(shortHexRE) ||
+      color.match(shortRgbaHexRE);
+    if (hexMatch) {
+      const paramsHexMatch =
+        hexMatch[0].length <= 4
+          ? (hexMatch[0].match(/\w/g) || []).map((x) => `${x}${x}`)
+          : hexMatch[0].match(/\w\w/g);
+
+      if (!paramsHexMatch) {
+        throw new Error(`Rgba value ${value} could not be parsed.`);
+      }
+
+      const params = paramsHexMatch.map((hex, key) => {
+        const x = parseInt(hex, 16);
+        const alpha = key === 3;
+        return alpha ? Number((x / 255).toFixed(2)) : x;
+      });
+
+      const [r, g, b, alpha] = params;
+
+      return new RgbaValue(r, g, b, alpha);
+    }
+
+    // Handle rgb(a) value
+    const rgbMatch = color.match(rgbRE) || color.match(rgbaRE);
+    if (rgbMatch) {
+      const params = rgbMatch.slice(1).map((x, key) => {
+        const alpha = key === 3;
+        return alpha ? parseFloat(x) : parseInt(x, 10);
+      });
+
+      const [r, g, b, alpha] = params;
+
+      return new RgbaValue(r, g, b, alpha);
+    }
+
+    // Handle hsl(a) value
+    const hslMatch = color.match(hslRE) || color.match(hslaRE);
+    if (hslMatch) {
+      const h = parseInt(hslMatch[1], 10);
+      const s = parseInt(hslMatch[2], 10) / 100;
+      const l = parseInt(hslMatch[3], 10) / 100;
+      const alpha = (hslMatch[4] && parseFloat(hslMatch[4])) || undefined;
+
+      const [r, g, b] = hslToRgb(h, s, l);
+
+      return new RgbaValue(r, g, b, alpha);
+    }
+
+    throw new Error(`Unknown color "${value}".`);
+  }
+
+  toRgb() {
+    return [this.red, this.green, this.blue];
+  }
+
+  toRgba() {
+    return [...this.toRgb(), this.alpha];
+  }
+
+  toHex() {
+    const [...values] = this.toRgb();
+
+    if (this.alpha < 1) {
+      values.push(this.alpha);
+    }
+
+    return `#${values
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+      })
+      .join('')}`;
+  }
+}

package/src/style/types/{UnitValue.js → UnitValue.ts}

@@ -7,12 +7,12 @@ export default class UnitValue {
 
   unit;
 
-  constructor(value, unit = 'number') {
+  constructor(value: number, unit: string = 'number') {
     this.value = value;
     this.unit = unit;
   }
 
-  static parse(value) {
+  static parse(value: UnitValue | number | string) {
     if (value instanceof UnitValue) {
       return value;
     }
@@ -47,7 +47,7 @@ export default class UnitValue {
 
   toString() {
     if (this.unit === 'number') {
-      return this.value;
+      return `${this.value}`;
     }
 
     if (this.unit === 'percent') {

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 '';
   }