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

package/src/dimensions/utils.ts

@@ -1,11 +0,0 @@
-import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
-
-export const optimizeDependencies = (
-  keys: Record<string, boolean>
-): Record<string, boolean> => {
-  if (keys[WINDOW_DEPENDENCY_KEY] && keys[SCREEN_DEPENDENCY_KEY]) {
-    delete keys[SCREEN_DEPENDENCY_KEY];
-  }
-
-  return keys;
-};

package/src/i18n.ts

@@ -1,18 +0,0 @@
-import { I18nManager } from "react-native";
-
-type LayoutDirectionType = "rtl" | "ltr";
-
-export function i18n<T>({
-  rtl,
-  ltr,
-}: { [direction in LayoutDirectionType]?: T }): T | undefined {
-  if (I18nManager.isRTL) {
-    return rtl;
-  }
-
-  return ltr;
-}
-
-export const rtl = <T>(styles: T): T | undefined => i18n<T>({ rtl: styles });
-
-export const ltr = <T>(styles: T): T | undefined => i18n<T>({ ltr: styles });

package/src/makeUseStyles/createUseStylesTheme.test.js

@@ -1,137 +0,0 @@
-import { renderHook, act } from "@testing-library/react-hooks";
-import { createUseStylesTheme } from "./createUseStylesTheme";
-import { ThemeProvider } from "../context";
-import { createEventEmitter } from "../createEventEmitter";
-import { addDependency } from "../dependencyRegistry";
-import { onUse } from "../dependencyUsage";
-
-it("should create styles using a theme", () => {
-  const mockGetStyles = jest.fn(({ colors }) => ({
-    root: { color: colors.red },
-  }));
-
-  const useStyles = createUseStylesTheme(mockGetStyles);
-  const { result } = renderHook(() => useStyles(), {
-    wrapper: ThemeProvider,
-    initialProps: { value: { colors: { red: "red" } } },
-  });
-
-  expect(result.current).toEqual({
-    root: { color: "red" },
-  });
-});
-
-it("should create styles once", () => {
-  const theme = { colors: { red: "red" } };
-  const mockGetStyles = jest.fn(({ colors }) => ({
-    root: { color: colors.red },
-  }));
-
-  const useStyles = createUseStylesTheme(mockGetStyles);
-
-  renderHook(
-    () => {
-      useStyles();
-      useStyles();
-      useStyles();
-    },
-    {
-      wrapper: ThemeProvider,
-      initialProps: { value: theme },
-    }
-  );
-
-  expect(mockGetStyles).toHaveBeenCalledTimes(1);
-});
-
-it("should not update styles when component rerender", () => {
-  const theme = { colors: { red: "red" } };
-  const mockGetStyles = jest.fn(({ colors }) => ({
-    root: { color: colors.red },
-  }));
-
-  const useStyles = createUseStylesTheme(mockGetStyles);
-  const { rerender } = renderHook(() => useStyles(), {
-    wrapper: ThemeProvider,
-    initialProps: { value: theme },
-  });
-
-  rerender({ value: theme, a: 1 });
-  rerender({ value: theme, a: 2 });
-  rerender({ value: theme, a: 3 });
-
-  expect(mockGetStyles).toHaveBeenCalledTimes(1);
-});
-
-it("should use memoized styles when component rerender", () => {
-  const theme = { colors: { red: "red" } };
-  const mockGetStyles = jest.fn(({ colors }) => ({
-    root: { color: colors.red },
-  }));
-
-  const useStyles = createUseStylesTheme(mockGetStyles);
-  const { rerender, result } = renderHook(() => useStyles(), {
-    wrapper: ThemeProvider,
-    initialProps: { value: theme },
-  });
-
-  const initialStyles = result.current;
-
-  rerender({ value: theme, a: 1 });
-  rerender({ value: theme, a: 2 });
-  rerender({ value: theme, a: 3 });
-
-  const afterUpdateStyles = result.current;
-
-  expect(afterUpdateStyles).toBe(initialStyles);
-});
-
-it("should update styles when theme was changed", () => {
-  const initialTheme = { colors: { red: "red" } };
-  const newTheme = { colors: { red: "white" } };
-
-  const mockGetStyles = jest.fn(({ colors }) => ({
-    root: { color: colors.red },
-  }));
-
-  const useStyles = createUseStylesTheme(mockGetStyles);
-  const { rerender } = renderHook(() => useStyles(), {
-    wrapper: ThemeProvider,
-    initialProps: { value: initialTheme },
-  });
-
-  act(() => {
-    rerender({ value: newTheme });
-  });
-
-  expect(mockGetStyles).toHaveBeenCalledTimes(2);
-});
-
-it("should update styles when dependency changed", () => {
-  const theme = { colors: { red: "red" } };
-  const TEST_DEPENDENCY_KEY = `test_${Math.random()}`;
-  const { on, emit } = createEventEmitter(TEST_DEPENDENCY_KEY);
-  const mockGetStyles = jest.fn(({ colors }) => {
-    // simulate using a dependency
-    onUse(TEST_DEPENDENCY_KEY);
-
-    return {
-      root: { color: colors.red },
-    };
-  });
-
-  addDependency(TEST_DEPENDENCY_KEY, (handler) => on(handler));
-
-  const useStyles = createUseStylesTheme(mockGetStyles);
-
-  renderHook(() => useStyles(), {
-    wrapper: ThemeProvider,
-    initialProps: { value: theme },
-  });
-
-  act(() => {
-    emit();
-  });
-
-  expect(mockGetStyles).toHaveBeenCalledTimes(2);
-});

package/src/makeUseStyles/createUseStylesWithoutTheme.test.js

@@ -1,63 +0,0 @@
-import { renderHook, act } from "@testing-library/react-hooks";
-import { createUseStylesWithoutTheme } from "./createUseStylesWithoutTheme";
-
-import { addDependency } from "../dependencyRegistry";
-import { onUse } from "../dependencyUsage";
-import { createEventEmitter } from "../createEventEmitter";
-
-const TEST_DEPENDENCY_KEY = `test_${Math.random()}`;
-
-const { on, emit } = createEventEmitter(TEST_DEPENDENCY_KEY);
-
-addDependency(TEST_DEPENDENCY_KEY, (handler) => on(handler));
-
-const useStyles = createUseStylesWithoutTheme(() => {
-  // simulate using a dependency
-  onUse(TEST_DEPENDENCY_KEY);
-
-  return {
-    root: { color: "red" },
-  };
-});
-
-it("should use the same styles object to reduce memory usage", () => {
-  const { result } = renderHook(() => ({
-    stl1: useStyles(),
-    stl2: useStyles(),
-  }));
-
-  expect(result.current.stl1).toBe(result.current.stl2);
-});
-
-it("should update styles when dependency changed", () => {
-  const { result } = renderHook(() => ({
-    stl1: useStyles(),
-    stl2: useStyles(),
-  }));
-
-  const initialResult = { ...result.current };
-
-  act(() => {
-    emit();
-  });
-
-  const updatedResult = { ...result.current };
-
-  expect(initialResult.stl1).not.toBe(updatedResult.stl1);
-  expect(initialResult.stl2).not.toBe(updatedResult.stl2);
-});
-
-it("should return the same style when component rerender", () => {
-  const mockUseStyles = jest.fn(useStyles);
-
-  const { result, rerender } = renderHook(() => mockUseStyles());
-
-  const initialResult = result.current;
-
-  rerender({});
-
-  const updatedResult = result.current;
-
-  expect(mockUseStyles).toHaveBeenCalledTimes(2);
-  expect(initialResult).toBe(updatedResult);
-});

package/src/makeUseStyles/index.test.js

@@ -1,28 +0,0 @@
-import { createUseStylesWithoutTheme } from "./createUseStylesWithoutTheme";
-import { createUseStylesTheme } from "./createUseStylesTheme";
-import { makeUseStyles } from "./index";
-
-jest.mock("./createUseStylesWithoutTheme");
-jest.mock("./createUseStylesTheme");
-
-afterEach(() => {
-  jest.clearAllMocks();
-});
-
-it("should invoke 'createUseStylesWithoutTheme' when pass function without first argument", () => {
-  const withoutThemeDeps = () => ({});
-
-  makeUseStyles(withoutThemeDeps);
-
-  expect(createUseStylesWithoutTheme).toHaveBeenCalledTimes(1);
-  expect(createUseStylesTheme).toHaveBeenCalledTimes(0);
-});
-
-it("should invoke 'createUseStylesTheme' when pass function with first argument", () => {
-  const withThemeDeps = (theme) => ({});
-
-  makeUseStyles(withThemeDeps);
-
-  expect(createUseStylesWithoutTheme).toHaveBeenCalledTimes(0);
-  expect(createUseStylesTheme).toHaveBeenCalledTimes(1);
-});

package/src/media-query/base.ts

@@ -1,43 +0,0 @@
-import { ScaledSize } from "react-native";
-
-import { getWindowDimensions } from "../dimensions";
-
-export const createDimensionQueryHelper = <Value>(
-  queryFunction: (options: { value: Value; dimensions: ScaledSize }) => boolean
-) => <T>(value: Value, styles: T): null | T => {
-  const isMatched = queryFunction({ value, dimensions: getWindowDimensions() });
-
-  if (isMatched) {
-    return styles;
-  }
-
-  return null;
-};
-
-export const maxHeight = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value >= dimensions.height
-);
-
-export const maxWidth = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value >= dimensions.width
-);
-
-export const minHeight = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value <= dimensions.height
-);
-
-export const minWidth = createDimensionQueryHelper<number>(
-  ({ value, dimensions }) => value <= dimensions.width
-);
-
-export const minAspectRatio = createDimensionQueryHelper<number>(
-  ({ value, dimensions: { width, height } }) => value <= width / height
-);
-
-export const maxAspectRatio = createDimensionQueryHelper<number>(
-  ({ value, dimensions: { width, height } }) => value >= width / height
-);
-
-export const aspectRatio = createDimensionQueryHelper<number>(
-  ({ value, dimensions: { width, height } }) => value === width / height
-);

package/src/media-query/breakpoints.ts

@@ -1,121 +0,0 @@
-import { minAspectRatio, minWidth, minHeight, maxWidth } from "./base";
-
-interface BreakpointsMatcher<TBreakpoints> {
-  <T>(values: { [mode in keyof TBreakpoints]?: T }): T | undefined;
-  <T>(values: { [mode in keyof TBreakpoints]?: T } & { default: T }): T;
-}
-
-const orderByMin = [minWidth, minAspectRatio, minHeight];
-
-const toOrderedBreakpointNames = <TBreakpoints extends Record<string, number>>(
-  values: any,
-  breakpoints: any,
-  matchFunction: any
-): Array<keyof TBreakpoints> => {
-  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<
-  TBreakpoints extends Record<string, number>
->(
-  breakpoints: TBreakpoints,
-  matchFunction = minWidth
-): BreakpointsMatcher<TBreakpoints> {
-  return function breakpointsMatcher(values: any) {
-    /* 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<TBreakpoints>(
-      values,
-      breakpoints,
-      matchFunction
-    );
-
-    const key =
-      orderedBreakpointNames.find((breakpointName) =>
-        matchFunction(
-          breakpoints[breakpointName] as number,
-          values[breakpointName]
-        )
-      ) || "default";
-
-    return values[key] || null;
-  };
-}
-
-function getNextByKey<TBreakpoints extends Record<string, number>>(
-  breakpoints: TBreakpoints,
-  key: keyof TBreakpoints
-) {
-  type Keys = keyof TBreakpoints;
-
-  const breakpointsKeys: Array<Keys> = Object.keys(breakpoints).sort(
-    (a: Keys, b: Keys) => breakpoints[a]!  - breakpoints[b]!
-  );
-  const index = breakpointsKeys.indexOf(key);
-  const nextKey: Keys | undefined = breakpointsKeys[index + 1];
-
-  return nextKey;
-}
-
-export function createBreakpoints<TBreakpoints extends Record<string, number>>(
-  breakpoints: TBreakpoints
-) {
-  type Keys = keyof TBreakpoints;
-
-  function up<T>(key: Keys, value: T): T | null {
-    return minWidth<T>(breakpoints[key] as number, value);
-  }
-
-  function down<T>(key: Keys, value: T): T | null {
-    return maxWidth<T>(breakpoints[key] as number, value);
-  }
-
-  function only<T>(key: Keys, value: T): T | null {
-    const nextKey = getNextByKey<TBreakpoints>(breakpoints, key);
-
-    if (nextKey !== undefined) {
-      return minWidth(
-        breakpoints[key] as number,
-        maxWidth(breakpoints[nextKey]! - 0.05, value)
-      );
-    }
-
-    return minWidth(breakpoints[key] as number, value);
-  }
-
-  function between<T>(start: Keys, end: Keys, value: T): T | null {
-    return minWidth(
-      breakpoints[start] as number,
-      maxWidth(breakpoints[end]! - 0.05, value)
-    );
-  }
-
-  return { up, down, only, between };
-}

package/src/media-query/index.ts

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

package/src/orientation.ts

@@ -1,17 +0,0 @@
-import { getScreenDimensions } from "./dimensions";
-
-type OrientationType = "portrait" | "landscape";
-
-export function orientation<T>(
-  spec: { [orientation in OrientationType]?: T }
-): T | undefined {
-  const { height, width } = getScreenDimensions();
-
-  return width <= height ? spec.portrait : spec.landscape;
-}
-
-export const portraitOrientation = <T>(portraitStyles: T): T | undefined =>
-  orientation<T>({ portrait: portraitStyles });
-
-export const landscapeOrientation = <T>(landscapeStyles: T): T | undefined =>
-  orientation<T>({ landscape: landscapeStyles });

package/src/safe-area/SafeAreaProvider.tsx

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

package/src/safe-area/StylexSaveAreaConsumer.ts

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

package/src/safe-area/types.ts

@@ -1,10 +0,0 @@
-import {SafeAreaProviderProps} from "react-native-safe-area-context";
-
-export interface EdgeInsets {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-export interface SafeAreaViewProps extends SafeAreaProviderProps { }

package/src/useColorTransition.ts

@@ -1,50 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { Animated } from "react-native";
-import { DefaultTheme } from "./DefaultTheme";
-import { useTheme } from "./useTheme";
-
-const { Value, timing } = Animated;
-
-const INITIAL_VALUE = 0;
-const defaultOptions = { duration: 250 };
-
-export function useColorTransition<Theme = DefaultTheme>(
-  colorGetterFn: (theme: Theme) => string,
-  options = defaultOptions
-): Animated.AnimatedInterpolation<string> {
-  const theme = useTheme<Theme>();
-  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/src/useTheme.ts

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

package/src/withStyles.tsx

@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, {
-  ComponentProps,
-  ComponentType,
-  forwardRef,
-  Ref,
-  ElementRef
-} from "react";
-
-interface InjectedStyledProps<Styles> {
-  styles: Styles;
-}
-
-export type InferInjectedStyledProps<
-  Fn extends (...args: any) => any
-> = InjectedStyledProps<ReturnType<Fn>>;
-
-export function withStyles<Styles>(useStyles: () => Styles) {
-  function WithStyles<TComponent extends ComponentType<any>>(
-    Component: TComponent
-  ) {
-    const renderComponent = (
-      props: Omit<ComponentProps<TComponent>, "styles">,
-      ref: Ref<ElementRef<TComponent>>
-    ) => {
-      const styles = useStyles();
-      // @ts-expect-error: 'ref' as never
-      return <Component {...props} ref={ref} styles={styles} />;
-    };
-
-    return forwardRef(renderComponent);
-  }
-
-  return WithStyles;
-}

package/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "ESNext",
-    "target": "ESNext",
-    "lib": ["ESNext"],
-    "skipLibCheck": true,
-    "declaration": true,
-    "rootDir": "./src",
-    "jsx": "react-native",
-    "strict": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictBindCallApply": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
-    "outDir": "./lib"
-  },
-  "include": ["./src"]
-}