react-native-unistyles 3.0.0-alpha.33 → 3.0.0-alpha.35

package/src/specs/ShadowRegistry/index.js

@@ -1,26 +0,0 @@
-import { NitroModules } from 'react-native-nitro-modules';
-const HybridShadowRegistry = NitroModules.createHybridObject('UnistylesShadowRegistry');
-const findShadowNodeForHandle = (handle) => {
-    const node = handle?.__internalInstanceHandle?.stateNode?.node
-        ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
-        ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node;
-    if (!node) {
-        // todo extend log with file name / component name
-        throw new Error('Could not find shadow node for one of your components');
-    }
-    return node;
-};
-HybridShadowRegistry.add = (handle, style, variants, args) => {
-    // virtualized nodes can be null
-    if (!handle || !style) {
-        return;
-    }
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? []);
-};
-HybridShadowRegistry.remove = handle => {
-    if (!handle) {
-        return;
-    }
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle));
-};
-export const UnistylesShadowRegistry = HybridShadowRegistry;

package/src/specs/ShadowRegistry/types.js

@@ -1 +0,0 @@
-export {};

package/src/specs/StatusBar/UnistylesStatusBar.nitro.js

@@ -1 +0,0 @@
-export {};

package/src/specs/StatusBar/index.js

@@ -1,25 +0,0 @@
-import { processColor, StatusBar as NativeStatusBar } from 'react-native';
-import { StatusBarStyle } from '../types';
-export const attachStatusBarJSMethods = (hybridObject) => {
-    hybridObject.setStyle = (style, animated) => {
-        switch (style) {
-            case StatusBarStyle.Light:
-                return NativeStatusBar.setBarStyle('light-content', animated);
-            case StatusBarStyle.Dark:
-                return NativeStatusBar.setBarStyle('dark-content', animated);
-            case StatusBarStyle.Default:
-                return NativeStatusBar.setBarStyle('default', animated);
-        }
-    };
-    const privateHybrid = hybridObject;
-    privateHybrid._setHidden = hybridObject.setHidden;
-    hybridObject.setHidden = (isHidden, animation) => {
-        NativeStatusBar.setHidden(isHidden, animation);
-        privateHybrid._setHidden(isHidden);
-    };
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor;
-    hybridObject.setBackgroundColor = (color) => {
-        const parsedColor = processColor(color) ?? 0;
-        privateHybrid._setBackgroundColor(parsedColor);
-    };
-};

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.js

@@ -1 +0,0 @@
-import { UnistyleDependency } from '../NativePlatform';

package/src/specs/StyleSheet/index.js

@@ -1,13 +0,0 @@
-import { NitroModules } from 'react-native-nitro-modules';
-import { processColor, StyleSheet as NativeStyleSheet } from 'react-native';
-const HybridUnistylesStyleSheet = NitroModules
-    .createHybridObject('UnistylesStyleSheet');
-HybridUnistylesStyleSheet.absoluteFillObject = NativeStyleSheet.absoluteFillObject;
-HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill;
-HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten;
-HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose;
-HybridUnistylesStyleSheet.jsMethods = {
-    processColor
-};
-HybridUnistylesStyleSheet.init();
-export const StyleSheet = HybridUnistylesStyleSheet;

package/src/specs/TurboUnistyles/NativeTurboUnistyles.js

@@ -1,2 +0,0 @@
-import { TurboModuleRegistry } from 'react-native';
-TurboModuleRegistry.get('Unistyles');

package/src/specs/TurboUnistyles/index.js

@@ -1 +0,0 @@
-import './NativeTurboUnistyles';

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.js

@@ -1 +0,0 @@
-export {};

package/src/specs/UnistylesRuntime/index.js

@@ -1,20 +0,0 @@
-import { processColor } from 'react-native';
-import { NitroModules } from 'react-native-nitro-modules';
-import { attachStatusBarJSMethods } from '../StatusBar';
-import { attachNavigationBarJSMethods } from '../NavigtionBar';
-import { isIOS } from '../../common';
-const HybridUnistylesRuntime = NitroModules
-    .createHybridObject('UnistylesRuntime');
-HybridUnistylesRuntime.statusBar = HybridUnistylesRuntime.createHybridStatusBar();
-HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNavigationBar();
-HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor;
-HybridUnistylesRuntime.setRootViewBackgroundColor = (color) => {
-    const parsedColor = processColor(color) ?? 0;
-    HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor);
-};
-if (isIOS) {
-    HybridUnistylesRuntime.setImmersiveMode = (isEnabled) => HybridUnistylesRuntime.statusBar.setHidden(isEnabled, 'fade');
-}
-attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar);
-attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar);
-export const Runtime = HybridUnistylesRuntime;

package/src/specs/index.js

@@ -1,8 +0,0 @@
-import './TurboUnistyles';
-import { Runtime } from './UnistylesRuntime';
-import { StyleSheet } from './StyleSheet';
-import { UnistylesShadowRegistry } from './ShadowRegistry';
-import { StatusBarStyle, ColorScheme, Orientation } from './types';
-import { UnistyleDependency } from './NativePlatform';
-export { StatusBarStyle, ColorScheme, Orientation, UnistyleDependency };
-export { UnistylesShadowRegistry, Runtime as UnistylesRuntime, StyleSheet, };

package/src/specs/index.web.js

@@ -1,2 +0,0 @@
-export const getSSRUnistyles = () => [];
-export * from '../web';

package/src/specs/types.js

@@ -1,17 +0,0 @@
-export var ColorScheme;
-(function (ColorScheme) {
-    ColorScheme["Light"] = "light";
-    ColorScheme["Dark"] = "dark";
-    ColorScheme["Unspecified"] = "unspecified";
-})(ColorScheme || (ColorScheme = {}));
-export var Orientation;
-(function (Orientation) {
-    Orientation["Portrait"] = "portrait";
-    Orientation["Landscape"] = "landscape";
-})(Orientation || (Orientation = {}));
-export var StatusBarStyle;
-(function (StatusBarStyle) {
-    StatusBarStyle["Default"] = "default";
-    StatusBarStyle["Light"] = "light";
-    StatusBarStyle["Dark"] = "dark";
-})(StatusBarStyle || (StatusBarStyle = {}));

package/src/types/accessibility.js

@@ -1,30 +0,0 @@
-export var IOSContentSizeCategory;
-(function (IOSContentSizeCategory) {
-    IOSContentSizeCategory["AccessibilityExtraExtraExtraLarge"] = "accessibilityExtraExtraExtraLarge";
-    IOSContentSizeCategory["AccessibilityExtraExtraLarge"] = "accessibilityExtraExtraLarge";
-    IOSContentSizeCategory["AccessibilityExtraLarge"] = "accessibilityExtraLarge";
-    IOSContentSizeCategory["AccessibilityLarge"] = "accessibilityLarge";
-    IOSContentSizeCategory["AccessibilityMedium"] = "accessibilityMedium";
-    IOSContentSizeCategory["ExtraExtraExtraLarge"] = "xxxLarge";
-    IOSContentSizeCategory["ExtraExtraLarge"] = "xxLarge";
-    IOSContentSizeCategory["ExtraLarge"] = "xLarge";
-    IOSContentSizeCategory["Large"] = "Large";
-    IOSContentSizeCategory["Medium"] = "Medium";
-    IOSContentSizeCategory["Small"] = "Small";
-    IOSContentSizeCategory["ExtraSmall"] = "xSmall";
-    IOSContentSizeCategory["Unspecified"] = "unspecified";
-})(IOSContentSizeCategory || (IOSContentSizeCategory = {}));
-export var AndroidContentSizeCategory;
-(function (AndroidContentSizeCategory) {
-    AndroidContentSizeCategory["Small"] = "Small";
-    AndroidContentSizeCategory["Default"] = "Default";
-    AndroidContentSizeCategory["Large"] = "Large";
-    AndroidContentSizeCategory["ExtraLarge"] = "ExtraLarge";
-    AndroidContentSizeCategory["Huge"] = "Huge";
-    AndroidContentSizeCategory["ExtraHuge"] = "ExtraHuge";
-    AndroidContentSizeCategory["ExtraExtraHuge"] = "ExtraExtraHuge";
-})(AndroidContentSizeCategory || (AndroidContentSizeCategory = {}));
-export var WebContentSizeCategory;
-(function (WebContentSizeCategory) {
-    WebContentSizeCategory["Unspecified"] = "web-unspecified";
-})(WebContentSizeCategory || (WebContentSizeCategory = {}));

package/src/types/breakpoints.js

@@ -1 +0,0 @@
-export {};

package/src/types/common.js

@@ -1 +0,0 @@
-export {};

package/src/types/core.js

@@ -1 +0,0 @@
-export {};

package/src/types/index.js

@@ -1 +0,0 @@
-export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility';

package/src/types/stylesheet.js

@@ -1,2 +0,0 @@
-const create = (stylesheet) => stylesheet;
-export {};

package/src/types/variants.js

@@ -1 +0,0 @@
-export {};

package/src/web/convert/boxShadow.js

@@ -1,59 +0,0 @@
-import { deepMergeObjects, warn } from '../utils';
-import { validateShadow } from './shadow';
-import { BOX_SHADOW_STYLES } from './types';
-import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
-const createBoxShadowValue = (style) => {
-    // at this point every prop is present
-    const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
-    const offsetX = normalizeNumericValue(shadowOffset.width);
-    const offsetY = normalizeNumericValue(shadowOffset.height);
-    const radius = normalizeNumericValue(shadowRadius);
-    const color = normalizeColor(shadowColor, shadowOpacity);
-    return `${offsetX} ${offsetY} ${radius} ${color}`;
-};
-export const getBoxShadowStyle = (styles) => {
-    const missingStyles = BOX_SHADOW_STYLES.filter(key => !(key in styles));
-    if (missingStyles.length) {
-        warn(`can't apply box shadow as you miss these properties: ${missingStyles.join(', ')}`);
-        return {};
-    }
-    const breakpointsSet = new Set();
-    try {
-        validateShadow(BOX_SHADOW_STYLES, styles, breakpointsSet);
-    }
-    catch (error) {
-        if (typeof error === 'string') {
-            warn(error);
-        }
-        return {};
-    }
-    const breakpoints = Array.from(breakpointsSet);
-    // If no breakpoints were used return styles without media queries
-    if (breakpoints.length === 0) {
-        return {
-            boxShadow: createBoxShadowValue(styles)
-        };
-    }
-    // Create boxShadow for each breakpoint
-    const breakpointStyles = breakpoints.map(breakpoint => {
-        const color = extractShadowValue('shadowColor', breakpoint, styles);
-        const { width, height } = extractShadowValue('shadowOffset', breakpoint, styles);
-        const radius = extractShadowValue('shadowRadius', breakpoint, styles);
-        const opacity = extractShadowValue('shadowOpacity', breakpoint, styles);
-        return {
-            [breakpoint]: {
-                boxShadow: createBoxShadowValue({
-                    shadowColor: color,
-                    shadowOffset: {
-                        width,
-                        height
-                    },
-                    shadowRadius: radius,
-                    shadowOpacity: opacity
-                })
-            }
-        };
-    });
-    // Merge all breakpoints styles into one
-    return deepMergeObjects(...breakpointStyles);
-};

package/src/web/convert/index.js

@@ -1,56 +0,0 @@
-import { isPseudo } from './pseudo';
-import { getStyle } from './style';
-import { deepMergeObjects } from '../utils';
-import { getTransformStyle } from './transform';
-import { isBoxShadow, isTextShadow, isTransform } from './utils';
-import { getTextShadowStyle } from './textShadow';
-import { getBoxShadowStyle } from './boxShadow';
-export const convertUnistyles = (value) => {
-    // Flag to mark if textShadow is already created
-    let hasTextShadow = false;
-    // Flag to mark if boxShadow is already created
-    let hasBoxShadow = false;
-    const stylesArray = Object.entries({
-        ...value,
-        ...value._web
-    }).flatMap(([unistylesKey, unistylesValue]) => {
-        // Keys to omit
-        if (['_classNames', '_web', 'variants', 'compoundVariants', 'uni__dependencies', '__unistyles-secrets__'].includes(unistylesKey) || unistylesKey.startsWith('variant-')) {
-            return [];
-        }
-        // Pseudo classes :hover, :before etc.
-        if (isPseudo(unistylesKey)) {
-            const flattenValues = convertUnistyles(unistylesValue);
-            return { [unistylesKey]: flattenValues };
-        }
-        // Text shadow
-        if (isTextShadow(unistylesKey)) {
-            if (hasTextShadow) {
-                return [];
-            }
-            hasTextShadow = true;
-            return getTextShadowStyle(value);
-        }
-        // Box shadow
-        if (isBoxShadow(unistylesKey)) {
-            if (hasBoxShadow) {
-                return [];
-            }
-            hasBoxShadow = true;
-            return getBoxShadowStyle(value);
-        }
-        // Transforms
-        if (isTransform(unistylesKey, unistylesValue)) {
-            return getTransformStyle(unistylesValue);
-        }
-        // Breakpoints
-        if (typeof unistylesValue === 'object' && unistylesValue !== null) {
-            return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) };
-            });
-        }
-        // Regular styles
-        return getStyle(unistylesKey, unistylesValue);
-    });
-    return deepMergeObjects(...stylesArray);
-};

package/src/web/convert/pseudo.js

@@ -1,131 +0,0 @@
-export const pseudos = [
-    '_-moz-broken',
-    '_-moz-drag-over',
-    '_-moz-first-node',
-    '_-moz-handler-blocked',
-    '_-moz-handler-crashed',
-    '_-moz-handler-disabled',
-    '_-moz-last-node',
-    '_-moz-loading',
-    '_-moz-locale-dir(ltr)',
-    '_-moz-locale-dir(rtl)',
-    '_-moz-only-whitespace',
-    '_-moz-submit-invalid',
-    '_-moz-suppressed',
-    '_-moz-user-disabled',
-    '_-moz-window-inactive',
-    '_active',
-    '_any-link',
-    '_autofill',
-    '_blank',
-    '_buffering',
-    '_checked',
-    '_current',
-    '_default',
-    '_defined',
-    '_dir(',
-    '_disabled',
-    '_empty',
-    '_enabled',
-    '_first',
-    '_first-child',
-    '_first-of-type',
-    '_focus',
-    '_focus-visible',
-    '_focus-within',
-    '_fullscreen',
-    '_future',
-    '_has(',
-    '_host',
-    '_host-context(',
-    '_host(',
-    '_hover',
-    '_in-range',
-    '_indeterminate',
-    '_invalid',
-    '_is(',
-    '_lang(',
-    '_last-child',
-    '_last-of-type',
-    '_left',
-    '_link',
-    '_local-link',
-    '_modal',
-    '_muted',
-    '_not(',
-    '_nth-child(',
-    '_nth-last-child(',
-    '_nth-last-of-type(',
-    '_nth-of-type(',
-    '_only-child',
-    '_only-of-type',
-    '_optional',
-    '_out-of-range',
-    '_past',
-    '_paused',
-    '_picture-in-picture',
-    '_placeholder-shown',
-    '_playing',
-    '_popover-open',
-    '_read-only',
-    '_read-write',
-    '_required',
-    '_right',
-    '_scope',
-    '_seeking',
-    '_stalled',
-    '_state(',
-    '_target',
-    '_target-within',
-    '_user-invalid',
-    '_user-valid',
-    '_valid',
-    '_visited',
-    '_volume-locked',
-    '_where(',
-    '_-moz-color-swatch',
-    '_-moz-focus-inner',
-    '_-moz-list-bullet',
-    '_-moz-list-number',
-    '_-moz-meter-bar',
-    '_-moz-progress-bar',
-    '_-moz-range-progress',
-    '_-moz-range-thumb',
-    '_-moz-range-track',
-    '_-webkit-inner-spin-button',
-    '_-webkit-meter-barDeprecated',
-    '_-webkit-meter-even-less-good-value',
-    '_-webkit-meter-inner-element',
-    '_-webkit-meter-optimum-value',
-    '_-webkit-meter-suboptimum-value',
-    '_-webkit-progress-bar',
-    '_-webkit-progress-inner-element',
-    '_-webkit-progress-value',
-    '_-webkit-scrollbar',
-    '_-webkit-search-cancel-button',
-    '_-webkit-search-results-button',
-    '_-webkit-slider-runnable-track',
-    '_-webkit-slider-thumb',
-    '_after',
-    '_backdrop',
-    '_before',
-    '_cue',
-    '_file-selector-button',
-    '_first-letter',
-    '_first-line',
-    '_grammar-error',
-    '_highlight(',
-    '_marker',
-    '_part(',
-    '_placeholder',
-    '_selection',
-    '_slotted(',
-    '_spelling-error',
-    '_target-text',
-    '_view-transition',
-    '_view-transition-group',
-    '_view-transition-image-pair',
-    '_view-transition-new',
-    '_view-transition-old',
-];
-export const isPseudo = (selector) => pseudos.some(pseudo => selector.startsWith(pseudo));

package/src/web/convert/shadow.js

@@ -1,50 +0,0 @@
-export const validateShadow = (shadowProperties, styles, breakpoints) => {
-    // Collect breakpoints
-    shadowProperties.forEach(key => {
-        const value = styles[key];
-        if (typeof value !== 'object') {
-            return;
-        }
-        if (key === 'shadowOffset' || key === 'textShadowOffset') {
-            const { width, height } = value;
-            // If shadowOffset.width has breakpoints
-            if (typeof width === 'object') {
-                Object.keys(width).forEach(breakpoint => breakpoints.add(breakpoint));
-            }
-            // If shadowOffset.height has breakpoints
-            if (typeof height === 'object') {
-                Object.keys(height).forEach(breakpoint => breakpoints.add(breakpoint));
-            }
-            return;
-        }
-        // Collect regular breakpoints
-        Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint));
-    });
-    // Validate if all breakpoints are present
-    shadowProperties.forEach(key => {
-        const value = styles[key];
-        if (typeof value !== 'object') {
-            return;
-        }
-        if (key === 'shadowOffset' || key === 'textShadowOffset') {
-            const { width, height } = value;
-            if (typeof width === 'object') {
-                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in width));
-                if (missingBreakpoints.length) {
-                    throw `missing breakpoints in ${key}.width: ${missingBreakpoints.join(', ')}`;
-                }
-            }
-            if (typeof height === 'object') {
-                const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in height));
-                if (missingBreakpoints.length) {
-                    throw `missing breakpoints in ${key}.height: ${missingBreakpoints.join(', ')}`;
-                }
-            }
-            return;
-        }
-        const missingBreakpoints = Array.from(breakpoints).filter(breakpoint => !(breakpoint in value));
-        if (missingBreakpoints.length) {
-            throw `missing breakpoints in ${key}: ${missingBreakpoints.join(', ')}`;
-        }
-    });
-};

package/src/web/convert/style.js

@@ -1,137 +0,0 @@
-import { keyInObject } from '../utils';
-const SKIP_STYLES = [
-    'borderCurve',
-    'elevation',
-    'textAlignVertical',
-    'includeFontPadding',
-    'overlayColor',
-    'tintColor'
-];
-const CSS_NUMBER_KEYS = [
-    'animationIterationCount',
-    'borderImageOutset',
-    'borderImageSlice',
-    'borderImageWidth',
-    'boxFlex',
-    'boxFlexGroup',
-    'boxOrdinalGroup',
-    'columnCount',
-    'columns',
-    'counterIncrement',
-    'counterReset',
-    'flex',
-    'flexGrow',
-    'flexPositive',
-    'flexShrink',
-    'flexNegative',
-    'flexOrder',
-    'fontWeight',
-    'gridArea',
-    'gridColumn',
-    'gridColumnEnd',
-    'gridColumnSpan',
-    'gridColumnStart',
-    'gridRow',
-    'gridRowEnd',
-    'gridRowSpan',
-    'gridRowStart',
-    'line-clamp',
-    'line-height',
-    'opacity',
-    'order',
-    'orphans',
-    'tabSize',
-    'widows',
-    'zIndex',
-    'zoom',
-    'fillOpacity',
-    'floodOpacity',
-    'stopOpacity',
-    'strokeDasharray',
-    'strokeDashoffset',
-    'strokeMiterlimit',
-    'strokeOpacity',
-    'strokeWidth'
-];
-const convertMap = {
-    marginHorizontal: (value) => ({
-        marginInline: value
-    }),
-    marginVertical: (value) => ({
-        marginBlock: value
-    }),
-    paddingHorizontal: (value) => ({
-        paddingInline: value
-    }),
-    paddingVertical: (value) => ({
-        paddingBlock: value
-    }),
-    writingDirection: (value) => ({
-        direction: value
-    }),
-    borderBottomEndRadius: (value) => ({
-        borderBottomRightRadius: value
-    }),
-    borderBottomStartRadius: (value) => ({
-        borderBottomLeftRadius: value
-    }),
-    borderEndColor: (value) => ({
-        borderInlineEndColor: value
-    }),
-    borderStartColor: (value) => ({
-        borderInlineStartColor: value
-    }),
-    borderTopEndRadius: (value) => ({
-        borderTopRightRadius: value
-    }),
-    borderTopStartRadius: (value) => ({
-        borderTopLeftRadius: value
-    }),
-    borderEndWidth: (value) => ({
-        borderInlineEndWidth: value
-    }),
-    borderStartWidth: (value) => ({
-        borderInlineStartWidth: value
-    }),
-    end: (value) => ({
-        right: value
-    }),
-    start: (value) => ({
-        left: value
-    }),
-    marginEnd: (value) => ({
-        marginRight: value
-    }),
-    marginStart: (value) => ({
-        marginLeft: value
-    }),
-    paddingEnd: (value) => ({
-        paddingRight: value
-    }),
-    paddingStart: (value) => ({
-        paddingLeft: value
-    }),
-    transformMatrix: (value) => ({
-        transform: `matrix(${value.join(', ')})`
-    }),
-    resizeMode: (value) => ({
-        backgroundSize: value
-    })
-};
-const convertNumber = (key, value) => {
-    if (typeof value === 'number') {
-        return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`;
-    }
-    return value;
-};
-export const getStyle = (key, value) => {
-    if (SKIP_STYLES.includes(key)) {
-        return {};
-    }
-    if (keyInObject(convertMap, key)) {
-        return convertMap[key]?.(convertNumber(key, value)) ?? {};
-    }
-    return {
-        [key]: convertNumber(key, value)
-    };
-};