bootstrap-rn 0.3.2 → 0.3.4

package/src/style/{StyleSheet.js → StyleSheet.ts}

@@ -1,31 +1,48 @@
 import { StyleSheet as BaseStyleSheet } from 'react-native';
+import type { ExtendedStyle, BaseStyle, ThemeVariables } from '../types';
 
-let activeKey = null;
+type StyleSource = Record<
+  string,
+  (theme: object, key: string) => ExtendedStyle | ExtendedStyle
+>;
 
-const themes = {};
-const sheets = [];
+type NamedExtendedStyles = Record<string, ExtendedStyle>;
+type NamedStyles = Record<string, BaseStyle>;
 
-const createSheet = (sheet) => {
-  const theme = themes[activeKey];
+type StyleSheetDefinition = {
+  source: StyleSource;
+  cache: Record<string, NamedExtendedStyles>;
+  active: NamedExtendedStyles;
+};
+
+let activeKey: string | null = null;
+
+const themes: Record<string, ThemeVariables> = {};
+const sheets: StyleSheetDefinition[] = [];
+
+const createSheet = (sheet: StyleSheetDefinition): NamedExtendedStyles => {
+  const theme = themes[activeKey as string];
 
-  const statelessSource = {};
-  const statefulSource = {};
+  const statelessSource: NamedStyles = {};
+  const statefulSource: NamedExtendedStyles = {};
 
   // Apply theme to themeable styles.
   Object.entries(sheet.source).forEach(([key, style]) => {
     // Resolve theme.
-    const value = typeof style === 'function' ? style(theme, activeKey) : style;
+    const value =
+      typeof style === 'function' ? style(theme, activeKey as string) : style;
 
     if (typeof value === 'function') {
       statefulSource[key] = value;
     } else {
-      statelessSource[key] = value;
+      statelessSource[key] = value as BaseStyle;
     }
   });
 
   // Wrap stateful and stateless in a proxy, so that we can update the styles on theme change.
   // For using Object.assign below we need some additional methods on the proxy that are mentioned here:
   // https://stackoverflow.com/questions/43185453/object-assign-and-proxies
+  // @ts-expect-error proxy is equivalent to NamedExtendedStyles
   return new Proxy(
     {
       keys: Object.keys(sheet.source),
@@ -33,12 +50,14 @@ const createSheet = (sheet) => {
       stateful: statefulSource,
     },
     {
-      get(target, prop) {
+      get(target, prop: string) {
         return target.stateless[prop] || target.stateful[prop] || undefined;
       },
       ownKeys: (target) => target.keys,
-      getOwnPropertyDescriptor(target, name) {
+      getOwnPropertyDescriptor(target, name: string) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
+
         return {
           get value() {
             return proxy.get(target, name);
@@ -47,7 +66,7 @@ const createSheet = (sheet) => {
           enumerable: true,
         };
       },
-      has: (target, name) => target.keys.indexOf(name) >= 0,
+      has: (target, name: string) => target.keys.indexOf(name) >= 0,
     },
   );
 };
@@ -55,28 +74,26 @@ const createSheet = (sheet) => {
 const { absoluteFill, absoluteFillObject, hairlineWidth } = BaseStyleSheet;
 
 const StyleSheet = {
-  create(source) {
+  create(source: StyleSource) {
     // Create sheet object.
-    const sheet = {
+    const sheet: StyleSheetDefinition = {
       source,
       cache: {},
-      active: null,
+      // Placeholder until build method is called.
+      active: {},
     };
 
     // If initialized, set active sheet based by active theme.
     if (activeKey !== null) {
       sheet.cache[activeKey] = createSheet(sheet);
       sheet.active = sheet.cache[activeKey];
-    } else {
-      // Placeholder until build method is called.
-      sheet.active = {};
     }
 
     sheets.push(sheet);
 
     return sheet.active;
   },
-  build(theme, key = 'default') {
+  build(theme: ThemeVariables, key: string = 'default') {
     if (!themes[key]) {
       themes[key] = theme;
     }
@@ -103,7 +120,7 @@ const StyleSheet = {
       Object.assign(sheets[i].active, sheets[i].cache[key]);
     });
   },
-  value(key) {
+  value(key: keyof ThemeVariables) {
     if (activeKey === null) {
       throw new Error('Use of StyleSheet.value() before initializing.');
     }

package/src/style/TextStyleContext.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+
+export type TextStyleContextType = {
+  style: StyleProp<TextStyle>;
+  hasTextAncestor?: boolean;
+};
+
+const TextStyleContext = React.createContext<TextStyleContextType | null>(null);
+
+TextStyleContext.displayName = 'TextStyleContext';
+
+export default TextStyleContext;

package/src/style/TextStyleProvider.tsx

@@ -0,0 +1,30 @@
+import React, { useContext, useMemo } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import TextStyleContext from './TextStyleContext';
+
+type TextStyleProviderProps = {
+  children: React.ReactNode;
+  style: StyleProp<TextStyle>;
+};
+
+function TextStyleProvider(props: TextStyleProviderProps) {
+  const { children, style } = props;
+
+  const parentContext = useContext(TextStyleContext);
+
+  const contextValue = useMemo(
+    () => ({
+      style: parentContext ? [parentContext.style, style] : style,
+      hasTextAncestor: !!(parentContext && parentContext.hasTextAncestor),
+    }),
+    [parentContext, style],
+  );
+
+  return (
+    <TextStyleContext.Provider value={contextValue}>
+      {children}
+    </TextStyleContext.Provider>
+  );
+}
+
+export default TextStyleProvider;

package/src/style/{createStyle.js → createStyle.ts}

@@ -4,6 +4,8 @@ import mediaBreakpointDown from './mixins/mediaBreakpointDown';
 import mediaBreakpointOnly from './mixins/mediaBreakpointOnly';
 import mediaBreakpointUp from './mixins/mediaBreakpointUp';
 import platform from './mixins/platform';
+import type { StyleDefinition } from './transform';
+import type { SpecialInteractionStyle, BaseStyle } from '../types';
 
 export const BOOTSTRAP_RN_STYLE = Symbol.for('bootstrap-rn.style');
 
@@ -15,10 +17,10 @@ const mixins = {
   platform,
 };
 
-const hasInteraction = ({ scopes }) =>
+const hasInteraction = ({ scopes }: StyleDefinition) =>
   scopes.some((scope) => scope.type === 'selector');
 
-function createStyle(definitions) {
+function createStyle(definitions: StyleDefinition[]) {
   // If there is only one definition without conditions, return.
   if (definitions.length === 1 && definitions[0].scopes.length === 0) {
     return definitions[0].declarations;
@@ -36,14 +38,20 @@ function createStyle(definitions) {
   );
 
   // Create style sheets.
-  const styles = StyleSheet.create({
-    ...platformDefinitions.map((item) => item.declarations),
-  });
+  const styles = StyleSheet.create(
+    platformDefinitions.reduce(
+      (acc, definition, index) => {
+        acc[index] = definition.declarations;
+        return acc;
+      },
+      {} as Record<number, BaseStyle>,
+    ),
+  );
 
-  const resolve = (state) => {
+  const resolve: SpecialInteractionStyle<BaseStyle> = (state) => {
     const { interaction } = state;
-    const basicStyles = [];
-    const interactionStyles = [];
+    const basicStyles: BaseStyle[] = [];
+    const interactionStyles: BaseStyle[] = [];
 
     Object.values(styles).forEach((style, key) => {
       const active = platformDefinitions[key].scopes.every((scope) => {

package/src/style/css.ts

@@ -0,0 +1,21 @@
+import parse from './parse';
+import transform from './transform';
+import createStyle from './createStyle';
+import type { ThemeVariables, StyleValue } from '../types';
+
+export default function css(
+  fragments: readonly string[],
+  ...tags: (string | ((t: ThemeVariables) => StyleValue))[]
+) {
+  const ast = parse(fragments, tags);
+
+  const result = (theme: object, key: string) => {
+    const transformed = transform(ast.children, theme, { key });
+
+    return createStyle(transformed);
+  };
+
+  result.ast = ast;
+
+  return result;
+}

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

@@ -2,24 +2,28 @@ import RgbaValue from './types/RgbaValue';
 import UnitValue from './types/UnitValue';
 
 // Sass equivalent
-export function rgb(value) {
+export function rgb(value: RgbaValue | string) {
   const color = RgbaValue.parse(value);
   return `rgb(${color.red},${color.green},${color.blue})`;
 }
 
 // Sass equivalent
-export function rgba(value, alpha) {
+export function rgba(value: RgbaValue | string, alpha: number) {
   const color = RgbaValue.parse(value);
   return `rgba(${color.red},${color.green},${color.blue},${alpha})`;
 }
 
 // Sass equivalent
-export function opacity(value) {
+export function opacity(value: RgbaValue | string) {
   return RgbaValue.parse(value).alpha;
 }
 
 // Sass equivalent
-export function mix(color1, color2, weight = 0.5) {
+export function mix(
+  color1: RgbaValue | string,
+  color2: RgbaValue | string,
+  weight: number = 0.5,
+) {
   const rgb1 = RgbaValue.parse(color1).toRgb();
   const rgb2 = RgbaValue.parse(color2).toRgb();
   const percentage = UnitValue.parse(weight).toNumber();

package/src/style/makeTheme.ts

@@ -0,0 +1,35 @@
+import transform, { RootNode } from './transform';
+import variables from '../theme/variables';
+import type { ExtendedStyle } from '../types';
+
+type SourceType =
+  | object
+  | {
+      (theme: object, key: string): ExtendedStyle;
+      ast: RootNode;
+    };
+
+const extractVariables = (
+  source?: SourceType,
+  options?: object,
+  baseVariables: object = {},
+) => {
+  if (!source) {
+    return { ...baseVariables };
+  }
+
+  if (typeof source === 'object') {
+    // TODO: Resolve t => ... functions on source object.
+    return { ...source, ...baseVariables };
+  }
+
+  const result = transform(source.ast.children, baseVariables, options);
+
+  return { ...result[0].variables, ...baseVariables };
+};
+
+export default function makeTheme(customVariables?: object): object {
+  const customTheme = extractVariables(customVariables);
+
+  return extractVariables(variables, { preferTheme: true }, customTheme);
+}

package/src/style/makeUtilities.ts

@@ -0,0 +1,76 @@
+import css from './css';
+import { GRID_BREAKPOINTS } from '../theme/proxies';
+import utilities from '../theme/utilities';
+import { each } from '../utils';
+import type { StyleUtility } from '../types';
+
+export function makeUtility(options: StyleUtility) {
+  return each(options.values, (key, value) => {
+    const name = options.class || options.property;
+    const suffix = key === 'null' ? '' : `-${key}`;
+
+    // We use css as a function, because of ts-styled-plugin error.
+    //
+    // Equivalent code:
+    // css`
+    //   ${options.property}: ${value};
+    // `
+
+    const styles = {
+      [`${name}${suffix}`]: css(['', ': ', ';'], options.property, value),
+    };
+
+    if (!options.responsive) {
+      return styles;
+    }
+
+    return {
+      ...styles,
+      ...each(GRID_BREAKPOINTS, (breakpoint) => {
+        if (breakpoint === 'xs') {
+          return {};
+        }
+
+        // We use css as a function, because of ts-styled-plugin error.
+        //
+        // Equivalent code:
+        // css`
+        //   @include media-breakpoint-up(${breakpoint}) {
+        //     ${options.property}: ${value};
+        //   }
+        // `
+
+        return {
+          [`${name}-${breakpoint}${suffix}`]: css(
+            ['@include media-breakpoint-up(', ') {\n', ': ', ';\n}'],
+            breakpoint,
+            options.property,
+            value,
+          ),
+        };
+      }),
+    };
+  });
+}
+
+export default function makeUtilities(
+  resolve:
+    | Record<string, StyleUtility>
+    | ((u: Record<string, StyleUtility>) => Record<string, StyleUtility>),
+) {
+  const customUtilities =
+    typeof resolve === 'function' ? resolve(utilities) : resolve;
+
+  const definitions = Object.values({
+    ...utilities,
+    ...customUtilities,
+  }).reduce((result, utility) => {
+    if (!utility) {
+      return result;
+    }
+
+    return Object.assign(result, makeUtility(utility));
+  }, {});
+
+  return definitions;
+}

package/src/style/{math.js → math.ts}

@@ -4,9 +4,9 @@ import UnitValue from './types/UnitValue';
 const POWER = 10 ** 8;
 const UNIT_ORDER = ['percent', 'number', 'px', 'rem'];
 
-const fixRounding = (value) => Math.round(value * POWER) / POWER;
+const fixRounding = (value: number) => Math.round(value * POWER) / POWER;
 
-const normalizeValue = (number1, number2) => {
+const normalizeValue = (number1: UnitValue, number2: UnitValue) => {
   if (number1.unit === 'px' && number2.unit === 'rem') {
     return number1.value / (PixelRatio.getFontScale() * 16);
   }
@@ -18,7 +18,11 @@ const normalizeValue = (number1, number2) => {
   return number1.value;
 };
 
-const calculateValue = (number1, operator, number2) => {
+const calculateValue = (
+  number1: UnitValue,
+  operator: string,
+  number2: UnitValue,
+) => {
   const value1 = normalizeValue(number1, number2);
   const value2 = normalizeValue(number2, number1);
 
@@ -38,14 +42,18 @@ const calculateValue = (number1, operator, number2) => {
   }
 };
 
-const determineUnit = (number1, number2) => {
+const determineUnit = (number1: UnitValue, number2: UnitValue) => {
   const index1 = UNIT_ORDER.indexOf(number1.unit);
   const index2 = UNIT_ORDER.indexOf(number2.unit);
 
   return index1 > index2 ? number1.unit : number2.unit;
 };
 
-export function calculate(value1, operator, value2) {
+export function calculate(
+  value1: UnitValue | number | string,
+  operator: string,
+  value2: UnitValue | number | string,
+) {
   const number1 = UnitValue.parse(value1);
   const number2 = UnitValue.parse(value2);
 
@@ -55,6 +63,6 @@ export function calculate(value1, operator, value2) {
   return new UnitValue(value, unit).toString();
 }
 
-export function normalizeNumber(value) {
+export function normalizeNumber(value: UnitValue | number | string) {
   return UnitValue.parse(value).toNumber();
 }

package/src/style/mixins/mediaBreakpointBetween.ts

@@ -0,0 +1,16 @@
+import type { MixinStyleScope } from '../transform';
+import type { InteractionState, Viewport } from '../../types';
+
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope: MixinStyleScope, { media }: InteractionState) {
+    return (
+      media.up(scope.args[0] as Viewport) &&
+      media.down(scope.args[1] as Viewport)
+    );
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointDown.ts

@@ -0,0 +1,13 @@
+import type { MixinStyleScope } from '../transform';
+import type { InteractionState, Viewport } from '../../types';
+
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope: MixinStyleScope, { media }: InteractionState) {
+    return media.down(scope.args[0] as Viewport);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointOnly.ts

@@ -0,0 +1,16 @@
+import type { MixinStyleScope } from '../transform';
+import type { InteractionState, Viewport } from '../../types';
+
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope: MixinStyleScope, { media }: InteractionState) {
+    return (
+      media.up(scope.args[0] as Viewport) &&
+      media.down(scope.args[0] as Viewport)
+    );
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointUp.ts

@@ -0,0 +1,13 @@
+import type { MixinStyleScope } from '../transform';
+import type { InteractionState, Viewport } from '../../types';
+
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope: MixinStyleScope, { media }: InteractionState) {
+    return media.up(scope.args[0] as Viewport);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/{platform.js → platform.ts}

@@ -1,7 +1,8 @@
 import { Platform } from 'react-native';
+import type { MixinStyleScope } from '../transform';
 
 const platform = {
-  include(scope) {
+  include(scope: MixinStyleScope) {
     return scope.args[0] === 'native'
       ? Platform.OS === 'android' || Platform.OS === 'ios'
       : Platform.OS === scope.args[0];

package/src/style/parse/{InputStream.js → InputStream.ts}

@@ -1,4 +1,8 @@
-const checkFunction = (char, silent) => {
+import type { ThemeVariables, StyleValue } from '../../types';
+
+export type Char = string | ((t: ThemeVariables) => StyleValue);
+
+const checkFunction = (char: Char, silent: boolean) => {
   if (typeof char !== 'function') {
     return true;
   }
@@ -11,7 +15,11 @@ const checkFunction = (char, silent) => {
 };
 
 class InputStream {
-  constructor(fragments, ...tags) {
+  cursor;
+
+  dictionary: Char[];
+
+  constructor(fragments: readonly string[], tags: Char[]) {
     this.dictionary = fragments.reduce((result, current, i) => {
       const value = current.split('');
       const tag = tags[i - 1];
@@ -25,7 +33,7 @@ class InputStream {
       }
 
       return [...result, ...tag.split(''), ...value];
-    });
+    }, [] as Char[]);
     this.cursor = 0;
   }
 
@@ -33,7 +41,7 @@ class InputStream {
     return this.dictionary[this.cursor + offset];
   }
 
-  read(marker) {
+  read(marker?: string) {
     const char = this.peek();
 
     if (marker && marker !== char) {
@@ -51,7 +59,7 @@ class InputStream {
     return char;
   }
 
-  charsWhile(check, silent = false) {
+  charsWhile(check: (tag: Char) => boolean, silent: boolean = false) {
     let value = '';
 
     while (checkFunction(this.peek(), silent) && check(this.peek())) {

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

@@ -1,8 +1,9 @@
-import InputStream from './InputStream';
+import type { RootNode } from '../transform';
+import InputStream, { Char } from './InputStream';
 import parseBlock from './parseBlock';
 
-function parse(...args) {
-  const input = new InputStream(...args);
+function parse(fragments: readonly string[], tags: Char[]) {
+  const input = new InputStream(fragments, tags);
 
   const children = [];
 
@@ -17,7 +18,7 @@ function parse(...args) {
   return {
     type: 'root',
     children,
-  };
+  } as RootNode;
 }
 
 export default parse;

package/src/style/parse/isIdent.ts

@@ -0,0 +1,3 @@
+export default function isIdent(char: string) {
+  return /[a-z0-9_-]/i.test(char);
+}

package/src/style/parse/isWhitespace.ts

@@ -0,0 +1,3 @@
+export default function isWhitespace(char: string) {
+  return /\s/.test(char);
+}

package/src/style/parse/{parseBlock.js → parseBlock.ts}

@@ -1,3 +1,4 @@
+import InputStream from './InputStream';
 import variable from './rules/variable';
 import declaration from './rules/declaration';
 import directive from './rules/directive';
@@ -5,8 +6,10 @@ import selector from './rules/selector';
 import comment from './rules/comment';
 import isWhitespace from './isWhitespace';
 
-function parseBlock(input) {
-  if (isWhitespace(input.peek())) {
+function parseBlock(input: InputStream) {
+  const char = input.peek();
+
+  if (typeof char === 'string' && isWhitespace(char)) {
     input.charsWhile(isWhitespace);
     return null;
   }

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

@@ -1,4 +1,6 @@
-const consumeAsterisk = (input) => {
+import InputStream, { Char } from '../InputStream';
+
+const consumeAsterisk = (input: InputStream) => {
   input.read('*');
 
   if (input.peek() === '/') {
@@ -11,18 +13,18 @@ const consumeAsterisk = (input) => {
 };
 
 const comment = {
-  locate(input) {
+  locate(input: InputStream) {
     return (
       input.peek() === '/' && (input.peek(1) === '*' || input.peek(1) === '/')
     );
   },
-  read(input) {
+  read(input: InputStream) {
     input.read('/');
 
     // Read until new line for inline comments
     if (input.peek() === '/') {
       input.read('/');
-      input.charsWhile((char) => char !== '\n');
+      input.charsWhile((char: Char) => char !== '\n');
       return null;
     }
 
@@ -30,7 +32,7 @@ const comment = {
 
     // Read until comment ending
     do {
-      input.charsWhile((char) => char !== '*');
+      input.charsWhile((char: Char) => char !== '*');
     } while (consumeAsterisk(input));
 
     return null;