@codeandmoney/soelma 0.0.0-dev.1 → 0.0.0-dev.10

package/index.d.ts

@@ -1,7 +0,0 @@
-export { useTheme } from "./useTheme";
-export { withStyles } from "./withStyles";
-export { ThemeProvider, ThemeConsumer } from "./context";
-export { useColorTransition } from "./useColorTransition";
-export { makeUseStyles } from "./makeUseStyles";
-export type { DefaultTheme } from "./DefaultTheme";
-export type { InferInjectedStyledProps } from "./withStyles";

package/index.js

@@ -1,5 +0,0 @@
-export { useTheme } from "./useTheme";
-export { withStyles } from "./withStyles";
-export { ThemeProvider, ThemeConsumer } from "./context";
-export { useColorTransition } from "./useColorTransition";
-export { makeUseStyles } from "./makeUseStyles";

package/makeUseStyles/index.d.ts

@@ -1,7 +0,0 @@
-import { StyleSheet } from "react-native";
-import { DefaultTheme } from "../DefaultTheme";
-
-export function makeUseStyles<
-  Theme extends DefaultTheme,
-  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
->(getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>): () => T;

package/makeUseStyles/index.js

@@ -1,12 +0,0 @@
-import { createUseStylesWithoutTheme } from "./createUseStylesWithoutTheme";
-import { createUseStylesTheme } from "./createUseStylesTheme";
-
-export function makeUseStyles(getStyles) {
-  const hasThemeDependency = getStyles.length === 1;
-
-  if (!hasThemeDependency) {
-    return createUseStylesWithoutTheme(getStyles);
-  }
-
-  return createUseStylesTheme(getStyles);
-}

package/media-query/base.d.ts

@@ -1,12 +0,0 @@
-import { ScaledSize } from "react-native";
-export declare const createDimensionQueryHelper: <Value>(queryFunction: (options: {
-    value: Value;
-    dimensions: ScaledSize;
-}) => boolean) => <T>(value: Value, styles: T) => T | null;
-export declare const maxHeight: <T>(value: number, styles: T) => T | null;
-export declare const maxWidth: <T>(value: number, styles: T) => T | null;
-export declare const minHeight: <T>(value: number, styles: T) => T | null;
-export declare const minWidth: <T>(value: number, styles: T) => T | null;
-export declare const minAspectRatio: <T>(value: number, styles: T) => T | null;
-export declare const maxAspectRatio: <T>(value: number, styles: T) => T | null;
-export declare const aspectRatio: <T>(value: number, styles: T) => T | null;

package/media-query/base.js

@@ -1,18 +0,0 @@
-import { getWindowDimensions } from "../dimensions";
-export const createDimensionQueryHelper = (queryFunction) => (value, styles) => {
-    const isMatched = queryFunction({
-        value,
-        dimensions: getWindowDimensions(),
-    });
-    if (isMatched) {
-        return styles;
-    }
-    return null;
-};
-export const maxHeight = createDimensionQueryHelper(({ value, dimensions }) => value >= dimensions.height);
-export const maxWidth = createDimensionQueryHelper(({ value, dimensions }) => value >= dimensions.width);
-export const minHeight = createDimensionQueryHelper(({ value, dimensions }) => value <= dimensions.height);
-export const minWidth = createDimensionQueryHelper(({ value, dimensions }) => value <= dimensions.width);
-export const minAspectRatio = createDimensionQueryHelper(({ value, dimensions: { width, height } }) => value <= width / height);
-export const maxAspectRatio = createDimensionQueryHelper(({ value, dimensions: { width, height } }) => value >= width / height);
-export const aspectRatio = createDimensionQueryHelper(({ value, dimensions: { width, height } }) => value === width / height);

package/media-query/breakpoints.d.ts

@@ -1,18 +0,0 @@
-interface BreakpointsMatcher<TBreakpoints> {
-    <T>(values: {
-        [mode in keyof TBreakpoints]?: T;
-    }): T | undefined;
-    <T>(values: {
-        [mode in keyof TBreakpoints]?: T;
-    } & {
-        default: T;
-    }): T;
-}
-export declare function createBreakpointsMatcher<TBreakpoints extends Record<string, number>>(breakpoints: TBreakpoints, matchFunction?: <T>(value: number, styles: T) => T | null): BreakpointsMatcher<TBreakpoints>;
-export declare function createBreakpoints<TBreakpoints extends Record<string, number>>(breakpoints: TBreakpoints): {
-    up: <T>(key: keyof TBreakpoints, value: T) => T | null;
-    down: <T_1>(key: keyof TBreakpoints, value: T_1) => T_1 | null;
-    only: <T_2>(key: keyof TBreakpoints, value: T_2) => T_2 | null;
-    between: <T_3>(start: keyof TBreakpoints, end: keyof TBreakpoints, value: T_3) => T_3 | null;
-};
-export {};

package/media-query/breakpoints.js

@@ -1,60 +0,0 @@
-import { minAspectRatio, minWidth, minHeight, maxWidth } from "./base";
-const orderByMin = [minWidth, minAspectRatio, minHeight];
-const toOrderedBreakpointNames = (values, breakpoints, matchFunction) => {
-    const result = Object.keys(values)
-        .filter((e) => e !== "default")
-        .sort((a, b) => breakpoints[a] - breakpoints[b]);
-    if (orderByMin.includes(matchFunction)) {
-        return result.slice().reverse();
-    }
-    return result;
-};
-/*
- * To debug use analog on CSS: https://codepen.io/retyui/pen/dyOzKzV
- */
-export function createBreakpointsMatcher(breakpoints, matchFunction = minWidth) {
-    return function breakpointsMatcher(values) {
-        /* istanbul ignore next */
-        // @ts-expect-error: was removed
-        if (process.env.NODE_ENV !== "production") {
-            const invalidKeys = Object.keys(values).filter((key) => {
-                return key !== "default" && breakpoints[key] === undefined;
-            });
-            if (invalidKeys.length > 0) {
-                console.warn(`[react-native-stylex]: Invalid values was passed to 'breakpointsMatcher' function
-
-allowed keys: ${Object.keys(breakpoints).join(", ")}
-unexpected keys: ${invalidKeys.join(", ")}
-`);
-            }
-        }
-        const orderedBreakpointNames = toOrderedBreakpointNames(values, breakpoints, matchFunction);
-        const key = orderedBreakpointNames.find((breakpointName) => matchFunction(breakpoints[breakpointName], values[breakpointName])) || "default";
-        return values[key] || null;
-    };
-}
-function getNextByKey(breakpoints, key) {
-    const breakpointsKeys = Object.keys(breakpoints).sort((a, b) => breakpoints[a] - breakpoints[b]);
-    const index = breakpointsKeys.indexOf(key);
-    const nextKey = breakpointsKeys[index + 1];
-    return nextKey;
-}
-export function createBreakpoints(breakpoints) {
-    function up(key, value) {
-        return minWidth(breakpoints[key], value);
-    }
-    function down(key, value) {
-        return maxWidth(breakpoints[key], value);
-    }
-    function only(key, value) {
-        const nextKey = getNextByKey(breakpoints, key);
-        if (nextKey !== undefined) {
-            return minWidth(breakpoints[key], maxWidth(breakpoints[nextKey] - 0.05, value));
-        }
-        return minWidth(breakpoints[key], value);
-    }
-    function between(start, end, value) {
-        return minWidth(breakpoints[start], maxWidth(breakpoints[end] - 0.05, value));
-    }
-    return { up, down, only, between };
-}

package/media-query/index.d.ts

@@ -1,2 +0,0 @@
-export { minWidth, minAspectRatio, maxWidth, aspectRatio, createDimensionQueryHelper, maxAspectRatio, maxHeight, minHeight, } from "./base";
-export { createBreakpointsMatcher, createBreakpoints } from "./breakpoints";

package/media-query/index.js

@@ -1,2 +0,0 @@
-export { minWidth, minAspectRatio, maxWidth, aspectRatio, createDimensionQueryHelper, maxAspectRatio, maxHeight, minHeight, } from "./base";
-export { createBreakpointsMatcher, createBreakpoints } from "./breakpoints";

package/orientation.d.ts

@@ -1,7 +0,0 @@
-type OrientationType = "portrait" | "landscape";
-export declare function orientation<T>(spec: {
-    [orientation in OrientationType]?: T;
-}): T | undefined;
-export declare const portraitOrientation: <T>(portraitStyles: T) => T | undefined;
-export declare const landscapeOrientation: <T>(landscapeStyles: T) => T | undefined;
-export {};

package/orientation.js

@@ -1,7 +0,0 @@
-import { getScreenDimensions } from "./dimensions";
-export function orientation(spec) {
-    const { height, width } = getScreenDimensions();
-    return width <= height ? spec.portrait : spec.landscape;
-}
-export const portraitOrientation = (portraitStyles) => orientation({ portrait: portraitStyles });
-export const landscapeOrientation = (landscapeStyles) => orientation({ landscape: landscapeStyles });

package/safe-area/SafeAreaProvider.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { SafeAreaViewProps } from "./types";
-export declare function SafeAreaProvider(props: SafeAreaViewProps): JSX.Element | null;

package/safe-area/SafeAreaProvider.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { SafeAreaProvider as CoreSafeAreaProvider, initialWindowMetrics, initialWindowSafeAreaInsets, } from "react-native-safe-area-context";
-import { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
-export function SafeAreaProvider(props) {
-    return (<CoreSafeAreaProvider initialSafeAreaInsets={props.initialSafeAreaInsets || initialWindowSafeAreaInsets} initialMetrics={props.initialMetrics || initialWindowMetrics} {...props}>
-      {props.children}
-      <StylexSaveAreaConsumer />
-    </CoreSafeAreaProvider>);
-}

package/safe-area/StylexSaveAreaConsumer.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function StylexSaveAreaConsumer(): JSX.Element | null;

package/safe-area/StylexSaveAreaConsumer.js

@@ -1,15 +0,0 @@
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { emit } from "./eventEmitter";
-import { state } from "./state";
-import { useLayoutEffect } from "react";
-export function StylexSaveAreaConsumer() {
-    const insets = useSafeAreaInsets();
-    useLayoutEffect(() => {
-        const isChanged = Object.entries(insets).some(([key, value]) => state.insets[key] !== value);
-        if (isChanged) {
-            state.insets = insets;
-            emit();
-        }
-    }, [insets]);
-    return null;
-}

package/safe-area/consts.d.ts

@@ -1 +0,0 @@
-export declare const SAFE_AREA_DEPENDENCY_KEY = "react-native-safe-area-context";

package/safe-area/eventEmitter.d.ts

@@ -1 +0,0 @@
-export declare const emit: () => void, on: (callback: () => void) => () => void;

package/safe-area/index.d.ts

@@ -1,5 +0,0 @@
-import "./init";
-import { EdgeInsets } from "./types";
-export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
-export { SafeAreaProvider } from "./SafeAreaProvider";
-export declare function getSafeArea(): EdgeInsets;

package/safe-area/index.js

@@ -1,10 +0,0 @@
-import "./init";
-import { onUse } from "../dependencyUsage";
-import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
-import { state } from "./state";
-export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
-export { SafeAreaProvider } from "./SafeAreaProvider";
-export function getSafeArea() {
-    onUse(SAFE_AREA_DEPENDENCY_KEY);
-    return state.insets;
-}

package/safe-area/init.d.ts

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

package/safe-area/init.js

@@ -1,4 +0,0 @@
-import { addDependency } from "../dependencyRegistry";
-import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
-import { on } from "./eventEmitter";
-addDependency(SAFE_AREA_DEPENDENCY_KEY, (handler) => on(handler));

package/safe-area/state.d.ts

@@ -1,8 +0,0 @@
-export declare const state: {
-    insets: {
-        top: number;
-        left: number;
-        bottom: number;
-        right: number;
-    };
-};

package/safe-area/types.js

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

package/useColorTransition.d.ts

@@ -1,5 +0,0 @@
-import { Animated } from "react-native";
-import { DefaultTheme } from "./DefaultTheme";
-export declare function useColorTransition<Theme = DefaultTheme>(colorGetterFn: (theme: Theme) => string, options?: {
-    duration: number;
-}): Animated.AnimatedInterpolation<string>;

package/useColorTransition.js

@@ -1,38 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { Animated } from "react-native";
-import { useTheme } from "./useTheme";
-const { Value, timing } = Animated;
-const INITIAL_VALUE = 0;
-const defaultOptions = { duration: 250 };
-export function useColorTransition(colorGetterFn, options = defaultOptions) {
-    const theme = useTheme();
-    const currentColor = colorGetterFn(theme);
-    const animatedValue = useRef(new Value(INITIAL_VALUE));
-    const colors = useRef({
-        toValue: INITIAL_VALUE,
-        prev: currentColor,
-        current: currentColor,
-    });
-    if (currentColor !== colors.current.current) {
-        colors.current = {
-            toValue: colors.current.toValue === 0 ? 1 : 0,
-            prev: colors.current.current,
-            current: currentColor,
-        };
-    }
-    const { toValue, prev, current } = colors.current;
-    useEffect(() => {
-        timing(animatedValue.current, {
-            toValue,
-            useNativeDriver: false,
-            ...options,
-        }).start();
-    }, [toValue]);
-    return useMemo(() => {
-        const outputRange = toValue === 1 ? [prev, current] : [current, prev];
-        return animatedValue.current.interpolate({
-            inputRange: [0, 1],
-            outputRange,
-        });
-    }, [prev, current]);
-}

package/useTheme.d.ts

@@ -1,2 +0,0 @@
-import type { DefaultTheme } from "./DefaultTheme";
-export declare const useTheme: <Theme = DefaultTheme>() => Theme;

package/useTheme.js

@@ -1,9 +0,0 @@
-import { useContext } from "react";
-import { themeContext } from "./context";
-export const useTheme = () => {
-    const contextValue = useContext(themeContext);
-    if (!contextValue) {
-        throw new Error("[react-native-stylex]: Please make sure that you wrapped your component with <ThemeProvider/>.");
-    }
-    return contextValue;
-};

package/withStyles.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-interface InjectedStyledProps<Styles> {
-    styles: Styles;
-}
-export type InferInjectedStyledProps<Fn extends (...args: any) => any> = InjectedStyledProps<ReturnType<Fn>>;
-export declare function withStyles<Styles>(useStyles: () => Styles): <TComponent extends React.ComponentType<any>>(Component: TComponent) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<React.ComponentProps<TComponent>, "styles">> & React.RefAttributes<React.ElementRef<TComponent>>>;
-export {};

package/withStyles.js

@@ -1,13 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { forwardRef, } from "react";
-export function withStyles(useStyles) {
-    function WithStyles(Component) {
-        const renderComponent = (props, ref) => {
-            const styles = useStyles();
-            // @ts-expect-error: 'ref' as never
-            return <Component {...props} ref={ref} styles={styles}/>;
-        };
-        return forwardRef(renderComponent);
-    }
-    return WithStyles;
-}