bootstrap-rn 0.3.0 → 0.3.2

package/src/style/makeUtilities.js

@@ -0,0 +1,56 @@
+import css from './css';
+import { GRID_BREAKPOINTS } from '../theme/proxies';
+import utilities from '../theme/utilities';
+import { each } from '../utils';
+
+export function makeUtility(options) {
+  return each(options.values, (key, value) => {
+    const name = options.class || options.property;
+    const suffix = key === 'null' ? '' : `-${key}`;
+
+    const styles = {
+      [`${name}${suffix}`]: css`
+        ${options.property}: ${value};
+      `,
+    };
+
+    if (!options.responsive) {
+      return styles;
+    }
+
+    return {
+      ...styles,
+      ...each(GRID_BREAKPOINTS, (breakpoint) => {
+        if (breakpoint === 'xs') {
+          return null;
+        }
+
+        return {
+          [`${name}-${breakpoint}${suffix}`]: css`
+            @include media-breakpoint-up(${breakpoint}) {
+              ${options.property}: ${value};
+            }
+          `,
+        };
+      }),
+    };
+  });
+}
+
+export default function makeUtilities(resolve) {
+  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

@@ -0,0 +1,60 @@
+import { PixelRatio } from 'react-native';
+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 normalizeValue = (number1, number2) => {
+  if (number1.unit === 'px' && number2.unit === 'rem') {
+    return number1.value / (PixelRatio.getFontScale() * 16);
+  }
+
+  if (number1.unit === 'percent' && number2.unit !== 'percent') {
+    return number1.value / 100;
+  }
+
+  return number1.value;
+};
+
+const calculateValue = (number1, operator, number2) => {
+  const value1 = normalizeValue(number1, number2);
+  const value2 = normalizeValue(number2, number1);
+
+  switch (operator) {
+    case '+':
+      return value1 + value2;
+    case '-':
+      return value1 - value2;
+    case '*':
+      return fixRounding(value1 * value2);
+    case '/':
+      return fixRounding(value1 / value2);
+    case '%':
+      return value1 % value2;
+    default:
+      throw new Error('Unknown operator.');
+  }
+};
+
+const determineUnit = (number1, number2) => {
+  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) {
+  const number1 = UnitValue.parse(value1);
+  const number2 = UnitValue.parse(value2);
+
+  const value = calculateValue(number1, operator, number2);
+  const unit = determineUnit(number1, number2);
+
+  return new UnitValue(value, unit).toString();
+}
+
+export function normalizeNumber(value) {
+  return UnitValue.parse(value).toNumber();
+}

package/src/style/mixins/mediaBreakpointBetween.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.up(scope.args[0]) && media.down(scope.args[1]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointDown.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.down(scope.args[0]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointOnly.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.up(scope.args[0]) && media.down(scope.args[0]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointUp.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.up(scope.args[0]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/platform.js

@@ -0,0 +1,14 @@
+import { Platform } from 'react-native';
+
+const platform = {
+  include(scope) {
+    return scope.args[0] === 'native'
+      ? Platform.OS === 'android' || Platform.OS === 'ios'
+      : Platform.OS === scope.args[0];
+  },
+  apply() {
+    return true;
+  },
+};
+
+export default platform;

package/src/style/parse/InputStream.js

@@ -0,0 +1,69 @@
+const checkFunction = (char, silent) => {
+  if (typeof char !== 'function') {
+    return true;
+  }
+
+  if (silent) {
+    return false;
+  }
+
+  throw new Error(`CSS syntax error: Unexpected function.`);
+};
+
+class InputStream {
+  constructor(fragments, ...tags) {
+    this.dictionary = fragments.reduce((result, current, i) => {
+      const value = current.split('');
+      const tag = tags[i - 1];
+
+      if (!tag) {
+        return [...result, ...value];
+      }
+
+      if (typeof tag !== 'string') {
+        return [...result, tag, ...value];
+      }
+
+      return [...result, ...tag.split(''), ...value];
+    });
+    this.cursor = 0;
+  }
+
+  peek(offset = 0) {
+    return this.dictionary[this.cursor + offset];
+  }
+
+  read(marker) {
+    const char = this.peek();
+
+    if (marker && marker !== char) {
+      throw new Error(
+        `CSS syntax error: Expected "${marker}", but found "${char}"`,
+      );
+    }
+
+    if (this.remainingChars() === 0) {
+      throw new Error(`CSS syntax error: Unexpected end of string.`);
+    }
+
+    this.cursor += 1;
+
+    return char;
+  }
+
+  charsWhile(check, silent = false) {
+    let value = '';
+
+    while (checkFunction(this.peek(), silent) && check(this.peek())) {
+      value += this.read();
+    }
+
+    return value;
+  }
+
+  remainingChars() {
+    return this.dictionary.length - this.cursor;
+  }
+}
+
+export default InputStream;

package/src/style/parse/index.js

@@ -0,0 +1,23 @@
+import InputStream from './InputStream';
+import parseBlock from './parseBlock';
+
+function parse(...args) {
+  const input = new InputStream(...args);
+
+  const children = [];
+
+  while (input.remainingChars() > 0) {
+    const block = parseBlock(input);
+
+    if (block) {
+      children.push(block);
+    }
+  }
+
+  return {
+    type: 'root',
+    children,
+  };
+}
+
+export default parse;

package/src/style/parse/isIdent.js

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

package/src/style/parse/isWhitespace.js

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

package/src/style/parse/parseBlock.js

@@ -0,0 +1,37 @@
+import variable from './rules/variable';
+import declaration from './rules/declaration';
+import directive from './rules/directive';
+import selector from './rules/selector';
+import comment from './rules/comment';
+import isWhitespace from './isWhitespace';
+
+function parseBlock(input) {
+  if (isWhitespace(input.peek())) {
+    input.charsWhile(isWhitespace);
+    return null;
+  }
+
+  if (variable.locate(input)) {
+    return variable.read(input);
+  }
+
+  if (declaration.locate(input)) {
+    return declaration.read(input);
+  }
+
+  if (selector.locate(input)) {
+    return selector.read(input, parseBlock);
+  }
+
+  if (directive.locate(input)) {
+    return directive.read(input, parseBlock);
+  }
+
+  if (comment.locate(input)) {
+    return comment.read(input);
+  }
+
+  throw new Error(`CSS syntax error: Unknown error at "${input.peek()}"`);
+}
+
+export default parseBlock;

package/src/style/parse/rules/comment.js

@@ -0,0 +1,40 @@
+const consumeAsterisk = (input) => {
+  input.read('*');
+
+  if (input.peek() === '/') {
+    input.read('/');
+
+    return false;
+  }
+
+  return true;
+};
+
+const comment = {
+  locate(input) {
+    return (
+      input.peek() === '/' && (input.peek(1) === '*' || input.peek(1) === '/')
+    );
+  },
+  read(input) {
+    input.read('/');
+
+    // Read until new line for inline comments
+    if (input.peek() === '/') {
+      input.read('/');
+      input.charsWhile((char) => char !== '\n');
+      return null;
+    }
+
+    input.read('*');
+
+    // Read until comment ending
+    do {
+      input.charsWhile((char) => char !== '*');
+    } while (consumeAsterisk(input));
+
+    return null;
+  },
+};
+
+export default comment;

package/src/style/parse/rules/declaration.js

@@ -0,0 +1,73 @@
+import isIdent from '../isIdent';
+import isWhitespace from '../isWhitespace';
+
+const breaksDeclaration = (char) =>
+  typeof char !== 'function' &&
+  char !== '$' &&
+  char !== ';' &&
+  char !== '}' &&
+  // char !== '(' &&
+  char !== '';
+
+const declaration = {
+  locate(input) {
+    return /[a-z_]/i.test(input.peek());
+  },
+  read(input) {
+    // Parse name.
+    const name = input.charsWhile(isIdent);
+
+    // Parse whitespaces, separator
+    input.charsWhile(isWhitespace);
+    input.read(':');
+    input.charsWhile(isWhitespace, true);
+
+    // Parse value.
+    const value = [];
+
+    do {
+      // Add function to resolve variable.
+      if (input.peek() === '$') {
+        input.read('$');
+
+        const variableName = input.charsWhile(isIdent);
+
+        value.push((variables) => {
+          if (variables[variableName] === undefined) {
+            throw new Error(`Variable $${variableName} is not defined.`);
+          }
+
+          return variables[variableName];
+        });
+      }
+
+      // Add function.
+      if (typeof input.peek() === 'function') {
+        value.push(input.read());
+      }
+
+      const part = input.charsWhile(breaksDeclaration, true);
+
+      // TODO: Parse functions
+      /* if (input.peek() === '(') {
+
+      } */
+
+      if (part.length > 0) {
+        value.push(part);
+      }
+    } while (input.peek() === '$' || typeof input.peek() === 'function');
+
+    if (input.peek() === ';') {
+      input.read(';');
+    }
+
+    return {
+      type: 'declaration',
+      name,
+      value,
+    };
+  },
+};
+
+export default declaration;

package/src/style/parse/rules/directive.js

@@ -0,0 +1,74 @@
+import isIdent from '../isIdent';
+import isWhitespace from '../isWhitespace';
+
+const consumeArgumentSeperator = (input) => {
+  if (input.peek() !== ',') {
+    return false;
+  }
+
+  input.read(',');
+
+  return true;
+};
+
+const directive = {
+  locate(input) {
+    return input.peek() === '@';
+  },
+  read(input, parseBlock) {
+    input.read('@');
+
+    const directiveName = input.charsWhile(isIdent);
+
+    if (directiveName !== 'include') {
+      throw new Error('Only @include directive is supported.');
+    }
+
+    input.charsWhile(isWhitespace);
+    const name = input.charsWhile(isIdent);
+
+    if (name.length === 0) {
+      throw new Error('No name.');
+    }
+
+    input.charsWhile(isWhitespace);
+    input.read('(');
+
+    const args = [];
+
+    do {
+      input.charsWhile(isWhitespace);
+      args.push(input.charsWhile(isIdent));
+      input.charsWhile(isWhitespace);
+    } while (consumeArgumentSeperator(input));
+
+    input.read(')');
+    input.charsWhile(isWhitespace);
+    input.read('{');
+
+    const children = [];
+
+    while (input.peek() !== '}') {
+      const block = parseBlock(input);
+
+      if (block) {
+        children.push(block);
+      }
+    }
+    input.read('}');
+
+    return {
+      type: 'block',
+      scopes: [
+        {
+          type: 'mixin',
+          name,
+          args,
+        },
+      ],
+      children,
+    };
+  },
+};
+
+export default directive;

package/src/style/parse/rules/selector.js

@@ -0,0 +1,47 @@
+import isIdent from '../isIdent';
+import isWhitespace from '../isWhitespace';
+
+const SELECTOR_TYPES = ['hover', 'focus', 'focus-visible', 'active'];
+
+const selector = {
+  locate(input) {
+    return input.peek() === '&' && input.peek(1) === ':';
+  },
+  read(input, parseBlock) {
+    input.read('&');
+    input.read(':');
+
+    const name = input.charsWhile(isIdent);
+
+    if (!SELECTOR_TYPES.includes(name)) {
+      throw new Error(`CSS syntax error: Unexpected selector name "${name}".`);
+    }
+
+    input.charsWhile(isWhitespace);
+    input.read('{');
+
+    const children = [];
+
+    while (input.peek() !== '}') {
+      const block = parseBlock(input);
+
+      if (block) {
+        children.push(block);
+      }
+    }
+    input.read('}');
+
+    return {
+      type: 'block',
+      scopes: [
+        {
+          type: 'selector',
+          name,
+        },
+      ],
+      children,
+    };
+  },
+};
+
+export default selector;

package/src/style/parse/rules/variable.js

@@ -0,0 +1,24 @@
+import declaration from './declaration';
+
+const variable = {
+  locate(input) {
+    return input.peek() === '$';
+  },
+  read(input) {
+    input.read('$');
+
+    if (!declaration.locate(input)) {
+      throw new Error(`CSS syntax error: Unexpected char after $.`);
+    }
+
+    const { name, value } = declaration.read(input);
+
+    return {
+      type: 'variable',
+      name,
+      value,
+    };
+  },
+};
+
+export default variable;

package/src/style/transform/formula.js

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