flowboard-react 0.1.0

package/src/types/flowboard.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+export type JsonMap = Record<string, any>;
+
+export type FlowboardScreen = JsonMap;
+
+export type FlowboardData = {
+  screens: FlowboardScreen[];
+  flow_id?: string;
+  variant_id?: string;
+  audience_id?: string;
+  bucket?: string;
+  experiment_id?: string;
+} & JsonMap;
+
+export type FlowboardContext = {
+  context?: any;
+  currentIndex: number;
+  totalScreens: number;
+  formData: JsonMap;
+  screenData: FlowboardScreen;
+  onNext: () => void;
+  onPrevious: () => void;
+  onFinish: () => void;
+};
+
+export type CustomScreenBuilder = (ctx: FlowboardContext) => React.ReactNode;
+
+export type CustomActionBuilder = (
+  action: string,
+  ctx: FlowboardContext,
+  data?: JsonMap
+) => void;
+
+export type OnboardingEndCallback = (formData: JsonMap) => void;
+
+export type OnStepChangeCallback = (
+  pageId: string | null | undefined,
+  pageStep: number,
+  formData: JsonMap
+) => void;
+
+export type FlowboardLaunchOptions = {
+  customScreenBuilder?: CustomScreenBuilder;
+  customActionBuilder?: CustomActionBuilder;
+  onOnboardEnd?: OnboardingEndCallback;
+  onStepChange?: OnStepChangeCallback;
+  enableAnalytics?: boolean;
+  alwaysRestart?: boolean;
+};

package/src/types/react-native-vector-icons.d.ts

@@ -0,0 +1,15 @@
+declare module 'react-native-vector-icons/FontAwesome6' {
+  import type { ComponentType } from 'react';
+  import type { TextStyle } from 'react-native';
+
+  interface FontAwesome6Props {
+    name: string;
+    size?: number;
+    color?: string;
+    style?: TextStyle | TextStyle[];
+    solid?: boolean;
+  }
+
+  const FontAwesome6: ComponentType<FontAwesome6Props>;
+  export default FontAwesome6;
+}

package/src/utils/flowboardUtils.ts

@@ -0,0 +1,400 @@
+import { Parser } from 'expr-eval';
+
+export type Insets = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+export const EMPTY_INSETS: Insets = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+const parser = new Parser();
+
+export function parseColor(hex?: string | number | null): string {
+  if (hex === null || hex === undefined) return 'transparent';
+  if (typeof hex === 'number' && Number.isFinite(hex)) {
+    return argbIntToRgba(hex);
+  }
+  if (typeof hex !== 'string') return 'transparent';
+  const raw = hex.trim();
+  if (!raw) return 'transparent';
+
+  if (raw.startsWith('#')) {
+    const hexVal = raw.slice(1);
+    if (hexVal.length === 6) {
+      const r = parseInt(hexVal.slice(0, 2), 16);
+      const g = parseInt(hexVal.slice(2, 4), 16);
+      const b = parseInt(hexVal.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},1)`;
+    }
+    if (hexVal.length === 8) {
+      const a = parseInt(hexVal.slice(0, 2), 16) / 255;
+      const r = parseInt(hexVal.slice(2, 4), 16);
+      const g = parseInt(hexVal.slice(4, 6), 16);
+      const b = parseInt(hexVal.slice(6, 8), 16);
+      return `rgba(${r},${g},${b},${clampAlpha(a)})`;
+    }
+    return 'transparent';
+  }
+
+  if (raw.startsWith('0x') || raw.startsWith('0X')) {
+    const hexVal = raw.slice(2);
+    if (hexVal.length === 8) {
+      const a = parseInt(hexVal.slice(0, 2), 16) / 255;
+      const r = parseInt(hexVal.slice(2, 4), 16);
+      const g = parseInt(hexVal.slice(4, 6), 16);
+      const b = parseInt(hexVal.slice(6, 8), 16);
+      return `rgba(${r},${g},${b},${clampAlpha(a)})`;
+    }
+    if (hexVal.length === 6) {
+      const r = parseInt(hexVal.slice(0, 2), 16);
+      const g = parseInt(hexVal.slice(2, 4), 16);
+      const b = parseInt(hexVal.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},1)`;
+    }
+  }
+
+  return 'transparent';
+}
+
+function clampAlpha(value: number): number {
+  if (Number.isNaN(value)) return 1;
+  return Math.max(0, Math.min(1, value));
+}
+
+function argbIntToRgba(value: number): string {
+  const hex = value.toString(16).padStart(8, '0');
+  const a = parseInt(hex.slice(0, 2), 16) / 255;
+  const r = parseInt(hex.slice(2, 4), 16);
+  const g = parseInt(hex.slice(4, 6), 16);
+  const b = parseInt(hex.slice(6, 8), 16);
+  return `rgba(${r},${g},${b},${clampAlpha(a)})`;
+}
+
+export function parseDimension(
+  value: any,
+  zeroIsNull = false
+): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    if (zeroIsNull && value === 0) return undefined;
+    return value;
+  }
+  if (typeof value === 'string') {
+    if (value.toLowerCase() === 'infinity') return Number.POSITIVE_INFINITY;
+    const numeric = Number(value);
+    if (!Number.isNaN(numeric)) {
+      if (zeroIsNull && numeric === 0) return undefined;
+      return numeric;
+    }
+  }
+  return undefined;
+}
+
+export function parseInsets(value: any): Insets {
+  if (typeof value === 'number') {
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  if (value && typeof value === 'object') {
+    if ('horizontal' in value || 'vertical' in value) {
+      const horizontal = Number(value.horizontal ?? 0);
+      const vertical = Number(value.vertical ?? 0);
+      return {
+        top: vertical,
+        right: horizontal,
+        bottom: vertical,
+        left: horizontal,
+      };
+    }
+    return {
+      top: Number(value.top ?? 0),
+      right: Number(value.right ?? 0),
+      bottom: Number(value.bottom ?? 0),
+      left: Number(value.left ?? 0),
+    };
+  }
+  return { ...EMPTY_INSETS };
+}
+
+export function insetsToStyle(insets: Insets): {
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+} {
+  return {
+    paddingTop: insets.top,
+    paddingRight: insets.right,
+    paddingBottom: insets.bottom,
+    paddingLeft: insets.left,
+  };
+}
+
+export function formatDate(pattern: string, date = new Date()): string {
+  const pad = (value: number, len = 2) => value.toString().padStart(len, '0');
+  const replacements: Record<string, string> = {
+    yyyy: date.getFullYear().toString(),
+    yy: date.getFullYear().toString().slice(-2),
+    MM: pad(date.getMonth() + 1),
+    dd: pad(date.getDate()),
+    HH: pad(date.getHours()),
+    mm: pad(date.getMinutes()),
+    ss: pad(date.getSeconds()),
+  };
+
+  let output = pattern;
+  Object.keys(replacements).forEach((token) => {
+    output = output.split(token).join(replacements[token]);
+  });
+  return output;
+}
+
+export function resolveText(
+  text: string,
+  formData: Record<string, any>
+): string {
+  const regex = /\{\{(.*?)\}\}/g;
+  return text.replace(regex, (_match, content) => {
+    const resolved = evaluateExpression(String(content ?? ''), formData);
+    return resolved === null || resolved === undefined ? '' : String(resolved);
+  });
+}
+
+export function evaluateExpression(
+  content: string,
+  formData: Record<string, any>
+): any {
+  let expressionPart = content;
+  let defaultValue: string | undefined;
+
+  if (content.includes('|')) {
+    const pipeIndex = content.lastIndexOf('|');
+    expressionPart = content.substring(0, pipeIndex).trim();
+    defaultValue = content.substring(pipeIndex + 1).trim();
+  } else {
+    expressionPart = content.trim();
+  }
+
+  if (!expressionPart) return defaultValue ?? '';
+
+  try {
+    if (expressionPart.startsWith('DATE(') && expressionPart.endsWith(')')) {
+      const format = expressionPart.substring(5, expressionPart.length - 1);
+      return formatDate(format);
+    }
+
+    if (/^[a-zA-Z0-9_]+$/.test(expressionPart)) {
+      const val = formData[expressionPart];
+      return val ?? defaultValue ?? '';
+    }
+
+    const context: Record<string, any> = { ...formData };
+    let usedNumericString = false;
+    Object.keys(context).forEach((key) => {
+      if (typeof context[key] === 'string') {
+        const numeric = Number(context[key]);
+        if (!Number.isNaN(numeric)) {
+          context[key] = numeric;
+          usedNumericString = true;
+        }
+      }
+    });
+
+    const expr = parser.parse(expressionPart);
+    const result = expr.evaluate(context);
+    if (
+      usedNumericString &&
+      typeof result === 'number' &&
+      Number.isInteger(result)
+    ) {
+      return result.toFixed(1);
+    }
+    return result ?? defaultValue ?? '';
+  } catch {
+    return defaultValue ?? '';
+  }
+}
+
+export function resolveNumericValue(
+  value: any,
+  formData: Record<string, any>
+): number | null {
+  if (value === null || value === undefined) return null;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (trimmed.startsWith('{{') && trimmed.endsWith('}}')) {
+      const content = trimmed.substring(2, trimmed.length - 2);
+      const result = evaluateExpression(content, formData);
+      if (typeof result === 'number') return result;
+      if (typeof result === 'string') {
+        const numeric = Number(result);
+        if (!Number.isNaN(numeric)) return numeric;
+      }
+      return null;
+    }
+    const numeric = Number(trimmed);
+    if (!Number.isNaN(numeric)) return numeric;
+  }
+  if (typeof value === 'string') return null;
+  if (typeof value === 'boolean') return value ? 1 : 0;
+  return null;
+}
+
+export function parseFontWeight(value?: string | number): any {
+  if (typeof value === 'number') {
+    if (value >= 900) return '900';
+    if (value >= 800) return '800';
+    if (value >= 700) return '700';
+    if (value >= 600) return '600';
+    if (value >= 500) return '500';
+    if (value >= 400) return '400';
+    if (value >= 300) return '300';
+    if (value >= 200) return '200';
+    if (value >= 100) return '100';
+  }
+  switch ((value ?? '').toString().toLowerCase()) {
+    case 'bold':
+    case '700':
+      return '700';
+    case 'w100':
+    case 'thin':
+      return '100';
+    case 'w200':
+    case 'extralight':
+      return '200';
+    case 'w300':
+    case 'light':
+      return '300';
+    case 'w400':
+    case 'regular':
+    case 'normal':
+      return '400';
+    case 'w500':
+    case 'medium':
+      return '500';
+    case 'w600':
+    case 'semibold':
+      return '600';
+    case 'w800':
+    case 'extrabold':
+      return '800';
+    case 'w900':
+    case 'black':
+      return '900';
+    default:
+      return '400';
+  }
+}
+
+export function parseTextDecoration(value?: string): any {
+  switch (value) {
+    case 'underline':
+      return 'underline';
+    case 'lineThrough':
+      return 'line-through';
+    case 'overline':
+      return 'underline';
+    default:
+      return 'none';
+  }
+}
+
+export function parseTextAlign(value?: string): any {
+  switch (value) {
+    case 'center':
+      return 'center';
+    case 'right':
+    case 'end':
+      return 'right';
+    case 'left':
+    case 'start':
+    default:
+      return 'left';
+  }
+}
+
+export function parseFlexAlignment(value?: string): any {
+  switch (value) {
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'flex-end';
+    case 'spaceBetween':
+      return 'space-between';
+    case 'spaceAround':
+      return 'space-around';
+    case 'spaceEvenly':
+      return 'space-evenly';
+    case 'start':
+    default:
+      return 'flex-start';
+  }
+}
+
+export function parseCrossAlignment(value?: string): any {
+  switch (value) {
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'flex-end';
+    case 'stretch':
+      return 'stretch';
+    case 'start':
+    default:
+      return 'flex-start';
+  }
+}
+
+export function parseResizeMode(value?: string): any {
+  switch (value) {
+    case 'contain':
+      return 'contain';
+    case 'cover':
+      return 'cover';
+    case 'fill':
+      return 'stretch';
+    case 'fitWidth':
+    case 'fitHeight':
+      return 'contain';
+    case 'none':
+      return 'center';
+    case 'scaleDown':
+      return 'contain';
+    default:
+      return 'contain';
+  }
+}
+
+export function parseAlignment(value?: string): {
+  justifyContent: any;
+  alignItems: any;
+} {
+  switch (value) {
+    case 'topCenter':
+      return { justifyContent: 'flex-start', alignItems: 'center' };
+    case 'bottomCenter':
+      return { justifyContent: 'flex-end', alignItems: 'center' };
+    case 'centerLeft':
+      return { justifyContent: 'center', alignItems: 'flex-start' };
+    case 'centerRight':
+      return { justifyContent: 'center', alignItems: 'flex-end' };
+    case 'center':
+      return { justifyContent: 'center', alignItems: 'center' };
+    case 'bottomLeft':
+      return { justifyContent: 'flex-end', alignItems: 'flex-start' };
+    case 'bottomRight':
+      return { justifyContent: 'flex-end', alignItems: 'flex-end' };
+    case 'topRight':
+      return { justifyContent: 'flex-start', alignItems: 'flex-end' };
+    case 'topLeft':
+    default:
+      return { justifyContent: 'flex-start', alignItems: 'flex-start' };
+  }
+}