react-native-molecules 0.5.0-beta.0

package/utils/date-fns.ts

@@ -0,0 +1,7 @@
+export { add } from 'date-fns/add';
+export { addDays } from 'date-fns/addDays';
+export { endOfDay } from 'date-fns/endOfDay';
+export { format } from 'date-fns/format';
+export { isValid } from 'date-fns/isValid';
+export { parse } from 'date-fns/parse';
+export { startOfWeek } from 'date-fns/startOfWeek';

package/utils/dateTimePicker.ts

@@ -0,0 +1,5 @@
+export function range(start: number, end: number) {
+    return Array(end - start + 1)
+        .fill(null)
+        .map((_, i) => start + i);
+}

package/utils/escapeRegex.ts

@@ -0,0 +1,9 @@
+export const escapeRegex = (string: string) => {
+    if (typeof string !== 'string') {
+        throw new TypeError('Expected a string');
+    }
+
+    // Escape characters with special meaning either inside or outside character sets.
+    // Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+    return string.replace(/[|\\{}()[\]^$+\-*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+};

package/utils/extractTextStyles.ts

@@ -0,0 +1,52 @@
+import type { TextStyle } from 'react-native';
+
+import { memoize } from './lodash';
+
+const textStyleProps = [
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textDecorationLine',
+    'textDecorationStyle',
+    'textDecorationColor',
+    'textShadowColor',
+    'textShadowOffset',
+    'textShadowRadius',
+    'textTransform',
+] as const;
+
+const defaultTextStyle: TextStyle = {};
+const extract = <T extends TextStyle>(styles: T) => {
+    const { textStyle, otherStyle } = textStyleProps.reduce(
+        (obj, key) => {
+            if (key in obj.otherStyle) {
+                const value = obj.otherStyle[key] as T[typeof key];
+
+                // delete from the object;
+                obj.otherStyle = { ...obj.otherStyle };
+                delete obj.otherStyle[key];
+
+                // return if value is falsy
+                if (!value) return obj;
+
+                obj.textStyle = { ...obj.textStyle, [key]: value };
+            }
+            return obj;
+        },
+        {
+            textStyle: defaultTextStyle,
+            otherStyle: styles as T,
+        },
+    );
+
+    return [textStyle, otherStyle];
+};
+
+export const extractTextStyle = Object.assign(memoize, { Cache: Map })(extract, style =>
+    JSON.stringify(style),
+);

package/utils/formatNumberWithMask/formatNumberWithMask.ts

@@ -0,0 +1,26 @@
+import { createNumberMask, type CreateNumberMaskProps } from '../createNumberMask';
+import { isNil } from '../lodash';
+import { formatWithMask } from './formatWithMask';
+
+export type FormatNumberWithMaskProps = CreateNumberMaskProps & {
+    number: number | string | undefined | null;
+};
+
+export const formatNumberWithMask = ({
+    number,
+    separator = '.',
+    suffix = '',
+    precision = 0,
+    ...rest
+}: FormatNumberWithMaskProps) => {
+    if (isNil(number) || number === '' || isNaN(Number(number))) return '';
+
+    const numberMask = createNumberMask({ separator, suffix, precision, ...rest });
+
+    const numberString = `${Number(number).toFixed(precision)}`;
+
+    const separatorReplacedNumber =
+        numberString.replace('.', separator) + (numberString ? suffix : '');
+
+    return formatWithMask({ text: separatorReplacedNumber, mask: numberMask }).masked;
+};

package/utils/formatNumberWithMask/formatWithMask.ts

@@ -0,0 +1,119 @@
+// https://github.com/CaioQuirinoMedeiros/react-native-mask-input/blob/main/src/formatWithMask.ts
+
+import type { Mask } from '../createNumberMask/createNumberMask';
+
+export type FormatWithMaskResult = {
+    masked: string;
+    unmasked: string;
+    obfuscated: string;
+};
+
+export type FormatWithMaskProps = {
+    /**
+     * Text to be formatted with the mask.
+     */
+    text?: string;
+    /**
+     * Mask
+     */
+    mask?: Mask;
+    /**
+     * Character to be used on the obfuscated characters. Defaults to `"*"`
+     */
+    obfuscationCharacter?: string;
+    /** Add next mask characters at the end of the value. Defaults to `false`.
+     *
+     * Example: In a date mask, a input value of `"15/10"` will result:
+     * - When set to false: `"15/10"`
+     * - When set to true: `"15/10/"`
+     */
+    maskAutoComplete?: boolean;
+};
+
+export const formatWithMask = (props: FormatWithMaskProps): FormatWithMaskResult => {
+    const { text, mask, obfuscationCharacter = '*', maskAutoComplete = false } = props;
+
+    // make sure it'll not break with null or undefined inputs
+    if (!text) return { masked: '', unmasked: '', obfuscated: '' };
+    if (!mask)
+        return {
+            masked: text || '',
+            unmasked: text || '',
+            obfuscated: text || '',
+        };
+
+    const maskArray = typeof mask === 'function' ? mask(text) : mask;
+
+    let masked = '';
+    let obfuscated = '';
+    let unmasked = '';
+
+    let maskCharIndex = 0;
+    let valueCharIndex = 0;
+
+    while (true) {
+        // if mask is ended, break.
+        if (maskCharIndex === maskArray.length) {
+            break;
+        }
+
+        const maskChar = maskArray[maskCharIndex];
+        const valueChar = text[valueCharIndex];
+
+        // if value is ended, break.
+        if (valueCharIndex === text.length) {
+            if (typeof maskChar === 'string' && maskAutoComplete) {
+                masked += maskChar;
+                obfuscated += maskChar;
+
+                maskCharIndex += 1;
+                continue;
+            }
+            break;
+        }
+
+        // value equals mask: add to masked result and advance on both mask and value indexes
+        if (maskChar === valueChar) {
+            masked += maskChar;
+            obfuscated += maskChar;
+
+            valueCharIndex += 1;
+            maskCharIndex += 1;
+            continue;
+        }
+
+        const unmaskedValueChar = text[valueCharIndex];
+
+        // it's a regex maskChar: let's advance on value index and validate the value within the regex
+        if (typeof maskChar === 'object') {
+            // advance on value index
+            valueCharIndex += 1;
+
+            const shouldObsfucateChar = Array.isArray(maskChar);
+
+            const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
+
+            const matchRegex = RegExp(maskCharRegex).test(valueChar);
+
+            // value match regex: add to masked and unmasked result and advance on mask index too
+            if (matchRegex) {
+                masked += valueChar;
+                obfuscated += shouldObsfucateChar ? obfuscationCharacter : valueChar;
+                unmasked += unmaskedValueChar;
+
+                maskCharIndex += 1;
+            }
+
+            continue;
+        } else {
+            // it's a fixed maskChar: add to maskedResult and advance on mask index
+            masked += maskChar;
+            obfuscated += maskChar;
+
+            maskCharIndex += 1;
+            continue;
+        }
+    }
+
+    return { masked, unmasked, obfuscated };
+};

package/utils/formatNumberWithMask/index.ts

@@ -0,0 +1,6 @@
+export { formatNumberWithMask, type FormatNumberWithMaskProps } from './formatNumberWithMask';
+export {
+    formatWithMask,
+    type FormatWithMaskProps,
+    type FormatWithMaskResult,
+} from './formatWithMask';

package/utils/getCursorStyle/getCursorStyle.native.ts

@@ -0,0 +1 @@
+export const getCursorStyle = (_cursor: string) => ({});

package/utils/getCursorStyle/getCursorStyle.ts

@@ -0,0 +1 @@
+export const getCursorStyle = (cursor: string) => ({ cursor });

package/utils/getCursorStyle/index.ts

@@ -0,0 +1 @@
+export * from './getCursorStyle';

package/utils/getOS/getOS.native.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+
+export const getOS = () => {
+    return Platform.OS;
+};
+
+export const isMac = () => false;

package/utils/getOS/getOS.ts

@@ -0,0 +1,24 @@
+export const getOS = () => {
+    if (!globalThis.navigator) return 'server';
+    const userAgent = globalThis.navigator.userAgent.toLowerCase();
+    const macosPlatforms = /(macintosh|macintel|macppc|mac68k|macos)/i;
+    const windowsPlatforms = /(win32|win64|windows|wince)/i;
+    const iosPlatforms = /(iphone|ipad|ipod)/i;
+    let os = null;
+
+    if (macosPlatforms.test(userAgent)) {
+        os = 'macos';
+    } else if (iosPlatforms.test(userAgent)) {
+        os = 'ios';
+    } else if (windowsPlatforms.test(userAgent)) {
+        os = 'windows';
+    } else if (/android/.test(userAgent)) {
+        os = 'android';
+    } else if (!os && /linux/.test(userAgent)) {
+        os = 'linux';
+    }
+
+    return os;
+};
+
+export const isMac = () => getOS() === 'macos';

package/utils/getOS/index.ts

@@ -0,0 +1 @@
+export * from './getOS';

package/utils/getyearRange.ts

@@ -0,0 +1,5 @@
+import { range } from './dateTimePicker';
+
+export const getYearRange = (startYear = 1800, endYear = 2200) => {
+    return range(startYear, endYear);
+};

package/utils/index.ts

@@ -0,0 +1,20 @@
+export { addEventListener, addListener } from './addEventListener';
+export { BackgroundContext } from './backgroundContext';
+export { default as color, resolveContrastColor } from './color';
+export * from './compare';
+export { default as composeEventHandlers } from './composeEventHandlers';
+export { createNumberMask, type CreateNumberMaskProps } from './createNumberMask';
+export * from './createSyntheticEvent';
+export { formatNumberWithMask, type FormatNumberWithMaskProps } from './formatNumberWithMask';
+export * from './getCursorStyle';
+export * from './getOS';
+export { getYearRange } from './getyearRange';
+export { default as mergeRefs } from './mergeRefs';
+export { normalizeBorderRadiuses } from './normalizeBorderRadiuses';
+export { normalizeSpacings, type SpacingKey, type SpacingType } from './normalizeSpacings';
+export {
+    normalizeToNumberString,
+    type NormalizeToNumberStringProps,
+} from './normalizeToNumberString';
+export { Repository } from './repository';
+export * from './resolveStateVariant';

package/utils/lodash.ts

@@ -0,0 +1,50 @@
+import memoize from 'lodash.memoize';
+export { default as debounce } from 'lodash.debounce';
+export { default as get } from 'lodash.get';
+export { default as keyBy } from 'lodash.keyby';
+export { default as memoize } from 'lodash.memoize';
+export { default as omitBy } from 'lodash.omitby';
+
+export const isNil = (value: unknown): value is null | undefined => value == null;
+export const noop = () => {};
+
+const uniqueIdFactory = () => {
+    let number = Number.MAX_SAFE_INTEGER;
+    return () => number--;
+};
+
+const getUniqueId = uniqueIdFactory();
+const weakMemoize = Object.assign(memoize.bind(null), { Cache: WeakMap });
+const getObjectMemoryAddress = weakMemoize((x: unknown | null) => x && getUniqueId());
+
+export const allArgumentResolver = (...args: unknown[]) =>
+    args
+        .map(x => {
+            const type = typeof x;
+            switch (type) {
+                case 'object':
+                case 'function':
+                    return type.slice(0, 2)! + getObjectMemoryAddress(x);
+                default:
+                    return type.slice(0, 2)! + String(x);
+            }
+        })
+        .join('_');
+
+export const createMemoizedFunction = ({
+    resolver = allArgumentResolver,
+    Cache = Map,
+}: {
+    resolver?: (...args: any[]) => any;
+    Cache?: typeof memoize.Cache;
+} = {}) => {
+    const memo = Object.assign(memoize.bind(null), { Cache });
+    return Object.assign(
+        <T extends (...args: any[]) => any>(func: T, resolverOverwride?: (...args: any[]) => any) =>
+            memo(func, resolverOverwride ?? resolver),
+    );
+};
+
+export const weakMemoized = createMemoizedFunction({
+    Cache: WeakMap,
+});

package/utils/mergeRefs.ts

@@ -0,0 +1,13 @@
+export default function mergeRefs<T = any>(
+    refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined>,
+): React.RefCallback<T> {
+    return value => {
+        refs.forEach(ref => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref != null) {
+                (ref as React.MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+}

package/utils/normalizeBorderRadiuses.ts

@@ -0,0 +1,24 @@
+import type { ViewStyle } from 'react-native';
+
+export const normalizeBorderRadiuses = ({
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+}: ViewStyle) => {
+    const borderRadiuses: Record<string, any> = {
+        borderTopLeftRadius,
+        borderTopRightRadius,
+        borderBottomLeftRadius,
+        borderBottomRightRadius,
+        borderRadius,
+    };
+
+    return Object.keys(borderRadiuses).reduce((acc: Record<string, any>, key) => {
+        if (borderRadiuses[key] !== undefined && borderRadiuses[key] !== null) {
+            acc[key] = borderRadiuses[key];
+        }
+        return acc;
+    }, {});
+};

package/utils/normalizeSpacings.ts

@@ -0,0 +1,110 @@
+import { I18nManager, type TextStyle } from 'react-native';
+
+export type SpacingKey =
+    | 'margin'
+    | 'marginBottom'
+    | 'marginEnd'
+    | 'marginHorizontal'
+    | 'marginLeft'
+    | 'marginRight'
+    | 'marginStart'
+    | 'marginTop'
+    | 'marginVertical'
+    | 'padding'
+    | 'paddingBottom'
+    | 'paddingEnd'
+    | 'paddingHorizontal'
+    | 'paddingLeft'
+    | 'paddingRight'
+    | 'paddingStart'
+    | 'paddingTop'
+    | 'paddingVertical';
+
+export type SpacingType =
+    | 'paddingTop'
+    | 'paddingBottom'
+    | 'paddingLeft'
+    | 'paddingRight'
+    | 'marginTop'
+    | 'marginBottom'
+    | 'marginLeft'
+    | 'marginRight';
+
+type StyleObject = TextStyle & Partial<Record<SpacingKey, number>>; // only support number values
+
+const normalizeMarginRight = (styleObj: StyleObject) => {
+    return (
+        styleObj?.marginRight ||
+        styleObj?.marginHorizontal ||
+        styleObj?.margin ||
+        (I18nManager.isRTL ? styleObj?.marginStart : styleObj?.marginEnd) ||
+        0
+    );
+};
+
+const normalizeMarginLeft = (styleObj: StyleObject) => {
+    return (
+        styleObj?.marginLeft ||
+        styleObj?.marginHorizontal ||
+        styleObj?.margin ||
+        (I18nManager.isRTL ? styleObj?.marginEnd : styleObj?.marginStart) ||
+        0
+    );
+};
+
+const normalizeMarginTop = (styleObj: StyleObject) => {
+    return styleObj?.marginTop || styleObj?.marginVertical || styleObj?.margin || 0;
+};
+
+const normalizeMarginBottom = (styleObj: StyleObject) => {
+    return styleObj?.marginBottom || styleObj?.marginVertical || styleObj?.margin || 0;
+};
+
+const normalizePaddingRight = (styleObj: StyleObject) => {
+    return (
+        styleObj?.paddingRight ||
+        styleObj?.paddingHorizontal ||
+        styleObj?.padding ||
+        (I18nManager.isRTL ? styleObj?.paddingStart : styleObj?.paddingEnd) ||
+        0
+    );
+};
+
+const normalizePaddingLeft = (styleObj: StyleObject) => {
+    return (
+        styleObj?.paddingLeft ||
+        styleObj?.paddingHorizontal ||
+        styleObj?.padding ||
+        (I18nManager.isRTL ? styleObj?.paddingEnd : styleObj?.paddingStart) ||
+        0
+    );
+};
+
+const normalizePaddingTop = (styleObj: StyleObject) => {
+    return styleObj?.paddingTop || styleObj?.paddingVertical || styleObj?.padding || 0;
+};
+
+const normalizePaddingBottom = (styleObj: StyleObject) => {
+    return styleObj?.paddingBottom || styleObj?.paddingVertical || styleObj?.padding || 0;
+};
+
+export const normalizeSpacings = (styleObj: StyleObject, spacingType: SpacingType) => {
+    switch (spacingType) {
+        case 'paddingTop':
+            return normalizePaddingTop(styleObj);
+        case 'paddingBottom':
+            return normalizePaddingBottom(styleObj);
+        case 'paddingLeft':
+            return normalizePaddingLeft(styleObj);
+        case 'paddingRight':
+            return normalizePaddingRight(styleObj);
+        case 'marginTop':
+            return normalizeMarginTop(styleObj);
+        case 'marginBottom':
+            return normalizeMarginBottom(styleObj);
+        case 'marginLeft':
+            return normalizeMarginLeft(styleObj);
+        case 'marginRight':
+            return normalizeMarginRight(styleObj);
+    }
+};

package/utils/normalizeToNumberString/index.ts

@@ -0,0 +1,4 @@
+export {
+    normalizeToNumberString,
+    type NormalizeToNumberStringProps,
+} from './normalizeToNumberString';

package/utils/normalizeToNumberString/normalizeToNumberString.ts

@@ -0,0 +1,48 @@
+import { isNil } from '../lodash';
+
+export type NormalizeToNumberStringProps = {
+    text: string;
+    prefix?: string;
+    suffix?: string;
+    separator?: string;
+    allowNegative?: boolean;
+    precision?: number;
+};
+
+const checkAndRemove = (text: string, searchValue: string): string =>
+    searchValue && text.includes(searchValue) ? text.replace(searchValue, '') : text;
+
+const checkAndReplaceAll = (text: string, searchValue: string, replaceValue: string): string =>
+    searchValue && text.includes(searchValue) ? text.replaceAll(searchValue, replaceValue) : text;
+
+// TODO - Need to improvement this, later this should also work with mathematical constants like e
+export const normalizeToNumberString = ({
+    text: _text,
+    prefix = '',
+    suffix = '',
+    separator = '',
+    allowNegative = false,
+    precision = 0,
+}: NormalizeToNumberStringProps) => {
+    const text = _text || '';
+
+    const removedSuffixAndPrefix = checkAndRemove(checkAndRemove(text, prefix), suffix);
+
+    const separatorReplacedText = checkAndReplaceAll(removedSuffixAndPrefix, separator, '.');
+
+    const textWithNumbersDotsAndMinusSign = separatorReplacedText.replace(/[^0-9.-]/g, '');
+
+    const numberText = textWithNumbersDotsAndMinusSign.replace(/[^0-9.]/g, '');
+
+    const number = parseFloat(numberText);
+
+    const outputNumberString = !isNil(number) && !isNaN(number) ? number.toFixed(precision) : '';
+
+    // after removing everything we expect the minus sign to be in front of the number if it's exists and if the number exists
+    const prefixText =
+        allowNegative && outputNumberString && textWithNumbersDotsAndMinusSign[0] === '-'
+            ? '-'
+            : '';
+
+    return `${prefixText}${outputNumberString}`;
+};

package/utils/repository.ts

@@ -0,0 +1,103 @@
+import EventEmitter, {
+    type ConstructorOptions,
+    type event as Event,
+    type eventNS,
+} from 'eventemitter2';
+
+import { debounce } from './lodash';
+
+interface RepositoryConstructor<T> extends ConstructorOptions {
+    onRegister?: (arg: T, name: string, registery: Record<string, T>) => T;
+    name?: string;
+}
+
+let id = Date.now();
+
+export class Repository<T> extends EventEmitter {
+    private registry: Record<string, T> = {};
+    readonly #name!: string;
+
+    readonly #onRegister!: (arg: T, name: string, registery: Record<string, T>) => T;
+
+    get name() {
+        return this.#name;
+    }
+
+    static get uniqueId() {
+        return (id++).toString(36).substring(0, 15);
+    }
+
+    constructor({
+        onRegister = arg => arg,
+        name = Repository.uniqueId,
+        ...options
+    }: RepositoryConstructor<T> = {}) {
+        super(options);
+        this.#onRegister = onRegister;
+        this.#name = name;
+    }
+
+    has = (itemName: string): boolean => {
+        return !!this.registry[itemName];
+    };
+
+    emit(event: eventNS | Event, ...values: any[]) {
+        event = typeof event === 'string' ? `${this.#name}::event` : event;
+        return super.emit(event, ...values);
+    }
+
+    /**
+     * Register a item with the src.
+     */
+    register = <X extends T = T, ItemName extends string = ''>(itemName: ItemName, item: X) => {
+        let updatedItem = this.#onRegister?.(item, itemName, { ...this.registry });
+        if (!updatedItem) updatedItem = item;
+
+        this.registry = {
+            ...this.registry,
+            [itemName]: updatedItem,
+        };
+
+        this.emit('item_registered', itemName);
+    };
+
+    /**
+     * Get all registered module from the registry.
+     */
+    getAll = () => {
+        return this.registry;
+    };
+
+    /**
+     * Register a listener to the module registry.
+     * Return value returns a function that removes the listener.
+     */
+    listen = (
+        callback: (events: string[]) => void,
+        { throttle = 100 }: { throttle?: number } = {},
+    ) => {
+        let cached: string[] = [];
+
+        const wrappedCallback = () => {
+            callback(cached);
+            cached = [];
+        };
+
+        const debouncedCallback = !throttle
+            ? wrappedCallback
+            : debounce(wrappedCallback, Math.abs(throttle), {
+                  trailing: true,
+                  leading: false,
+              });
+
+        const handledCallback = (itemName: string) => {
+            cached.push(itemName);
+            debouncedCallback();
+        };
+
+        this.on('item_registered', handledCallback);
+        return () => {
+            this.off('item_registered', handledCallback);
+        };
+    };
+}

package/utils/resolveColorMode.ts

@@ -0,0 +1,9 @@
+import { Appearance } from 'react-native';
+
+export declare type ColorMode = 'auto' | 'light' | 'dark';
+
+export const resolveColorMode = (colorMode: ColorMode) => {
+    const defaultMode = Appearance.getColorScheme() || 'light';
+
+    return colorMode === 'auto' ? defaultMode : colorMode;
+};