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

package/src/make-use-styles/index.d.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { DefaultTheme } from "../default-theme";
+
+export function makeUseStyles<
+  Theme extends DefaultTheme,
+  T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
+  VariantsConfig extends Record<string, StyleSheet.NamedStyles<any>> | undefined = undefined,
+>(config: {
+  styles?: (theme: Theme) => T | StyleSheet.NamedStyles<T>;
+  variants?: ((theme: Theme) => VariantsConfig) | undefined;
+}): <Variants extends { [Key in keyof VariantsConfig]: keyof VariantsConfig[Key] }>(
+  variants?: Partial<Variants>,
+) => T &
+  (VariantsConfig extends undefined
+    ? {}
+    : {
+        variants: {
+          [VKey in keyof Variants]: VKey extends keyof VariantsConfig ? VariantsConfig[VKey][Variants[VKey]] : never;
+        }[keyof Variants];
+      });

package/src/make-use-styles/index.js

@@ -0,0 +1,12 @@
+import { createUseStylesWithoutTheme } from "./create-use-styles-without-theme";
+import { createUseStylesTheme } from "./create-use-styles-theme";
+
+export function makeUseStyles({ styles, variants }) {
+  const hasThemeDependency = styles?.length === 1;
+
+  if (!hasThemeDependency) {
+    return createUseStylesWithoutTheme(styles, variants);
+  }
+
+  return createUseStylesTheme(styles);
+}

package/src/make-use-styles/index.test.js

@@ -0,0 +1,28 @@
+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/make-use-styles/types.ts

@@ -0,0 +1,43 @@
+// import { StyleSheet } from "react-native";
+// import { DefaultTheme } from "../DefaultTheme";
+
+// // // Source - https://stackoverflow.com/a/50375286
+// // // Posted by jcalz, modified by community. See post 'Timeline' for change history
+// // // Retrieved 2026-01-07, License - CC BY-SA 4.0
+
+// // type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (
+// //   x: infer I,
+// // ) => void
+// //   ? I
+// //   : never;
+
+// export function makeUseStyles<
+//   Theme extends DefaultTheme,
+//   T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>,
+//   V extends Record<string, StyleSheet.NamedStyles<any>>,
+// >(
+//   getStyles: (theme: Theme) => T | StyleSheet.NamedStyles<T>,
+//   variants: V,
+// ): <Variants extends { [Key in keyof V]: keyof V[Key] }>(
+//   variants?: Partial<Variants>,
+// ) => T & {
+//   variants: {
+//     [VKey in keyof Variants]: VKey extends keyof V
+//       ? V[VKey][Variants[VKey]]
+//       : never;
+//   }[keyof Variants];
+// } {
+//   return ((variants: any) => {}) as any;
+// }
+
+// const useStyles = makeUseStyles(() => ({ some: { alignContent: "center" } }), {
+//   other: {
+//     one: { alignContent: "flex-end", fontStyle: "italic", fontFamily: "Inter" },
+//     two: { alignContent: "flex-end" },
+//   },
+//   more: {
+//     lol: { color: "red", width: 123 },
+//   },
+// });
+
+// const res = useStyles({ more: "lol"});

package/{makeUseStyles → src/make-use-styles}/utils.js

@@ -1,6 +1,6 @@
 import { optimizeDependencies } from "../dimensions/utils";
-import { getUsing } from "../dependencyUsage";
-import { getDependency } from "../dependencyRegistry";
+import { getUsing } from "../dependency-usage";
+import { getDependency } from "../dependency-registry";
 
 import { useEffect, useRef, useState } from "react";
 
@@ -17,9 +17,7 @@ export const useForceUpdate = (scope) => {
     scope.forceUpdate = scope.forceUpdate.concat(forceRerender);
 
     unsubscribeRef.current = () => {
-      scope.forceUpdate = scope.forceUpdate.filter(
-        (fn) => fn !== forceRerender,
-      );
+      scope.forceUpdate = scope.forceUpdate.filter((fn) => fn !== forceRerender);
     };
   }
 
@@ -32,8 +30,7 @@ export const useForceUpdate = (scope) => {
   );
 };
 
-export const getDependenciesKeys = () =>
-  Object.keys(optimizeDependencies(getUsing())).sort();
+export const getDependenciesKeys = () => Object.keys(optimizeDependencies(getUsing())).sort();
 
 export const subscribe = (dependenciesKeys, handler) => {
   if (dependenciesKeys.length === 0) {
@@ -50,9 +47,7 @@ export const subscribe = (dependenciesKeys, handler) => {
             const dependencyName = dependenciesKeys[index];
 
             if (!onChange) {
-              console.warn(
-                `[react-native-stylex] Could not find onChange handler for ${dependencyName}!`,
-              );
+              console.warn(`[react-native-stylex] Could not find onChange handler for ${dependencyName}!`);
             }
 
             return !!onChange;

package/src/media-query/base.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,96 @@
+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
+    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

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

package/src/orientation.ts

@@ -0,0 +1,13 @@
+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/{safe-area/eventEmitter.js → src/safe-area/event-emitter.ts}

@@ -1,3 +1,4 @@
-import { createEventEmitter } from "../createEventEmitter";
+import { createEventEmitter } from "../create-event-emitter";
 import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
+
 export const { emit, on } = createEventEmitter(SAFE_AREA_DEPENDENCY_KEY);

package/src/safe-area/index.tsx

@@ -0,0 +1,16 @@
+import "./init";
+
+import { onUse } from "../dependency-usage";
+
+import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
+import { EdgeInsets } from "./types";
+import { state } from "./state";
+
+export { StylexSaveAreaConsumer } from "./stylex-save-area-consumer";
+export { SafeAreaProvider } from "./safe-area-provider";
+
+export function getSafeArea(): EdgeInsets {
+  onUse(SAFE_AREA_DEPENDENCY_KEY);
+
+  return state.insets;
+}

package/src/safe-area/init.tsx

@@ -0,0 +1,6 @@
+import { addDependency } from "../dependency-registry";
+
+import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
+import { on } from "./event-emitter";
+
+addDependency(SAFE_AREA_DEPENDENCY_KEY, (handler: () => void) => on(handler));

package/src/safe-area/safe-area-provider.tsx

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

package/{safe-area/state.js → src/safe-area/state.ts}

@@ -1,10 +1,12 @@
 import { initialWindowMetrics as metrics } from "react-native-safe-area-context";
+
 const defaultInsets = {
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
 };
+
 export const state = {
-    insets: metrics?.insets || defaultInsets,
+  insets: metrics?.insets || defaultInsets,
 };

package/src/safe-area/stylex-save-area-consumer.ts

@@ -0,0 +1,22 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { EdgeInsets } from "./types";
+
+import { emit } from "./event-emitter";
+import { state } from "./state";
+import { useLayoutEffect } from "react";
+import type React from "react";
+
+export function StylexSaveAreaConsumer(): React.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/{safe-area/types.d.ts → src/safe-area/types.ts}

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

package/src/tests/createBreakpoints.test.ts

@@ -0,0 +1,152 @@
+import { createBreakpoints } from "../media-query/breakpoints";
+import { getWindowDimensions } from "../dimensions";
+
+jest.mock("../dimensions", () => ({
+  getWindowDimensions: jest.fn(),
+}));
+
+const mockWindowWidth = (width: number) => {
+  const mockGetWindowDimensions = getWindowDimensions as jest.Mock;
+  mockGetWindowDimensions.mockReturnValue({ width });
+};
+
+describe("createBreakpoints", () => {
+  const config = {
+    xs: 360,
+    sm: 600,
+    md: 960,
+    lg: 1280,
+    xl: 1920,
+  };
+  const breakpoints = createBreakpoints(config);
+
+  describe("down", () => {
+    const getStyles = () => ({
+      fontSize: 16,
+      ...breakpoints.down("lg", { fontSize: 18 }),
+      ...breakpoints.down("sm", { fontSize: 20 }),
+    });
+
+    it("should return small variant", () => {
+      mockWindowWidth(0);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+      mockWindowWidth(600);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+    });
+
+    it("should return large variant", () => {
+      mockWindowWidth(601);
+      expect(getStyles()).toEqual({ fontSize: 18 });
+      mockWindowWidth(1280);
+      expect(getStyles()).toEqual({ fontSize: 18 });
+    });
+
+    it("should return default variant", () => {
+      mockWindowWidth(1281);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+      mockWindowWidth(1920);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+      mockWindowWidth(1921);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+    });
+  });
+
+  describe("up", () => {
+    const getStyles = () => ({
+      fontSize: 20,
+      ...breakpoints.up("sm", { fontSize: 18 }),
+      ...breakpoints.up("lg", { fontSize: 16 }),
+    });
+
+    it("should return small variant", () => {
+      mockWindowWidth(0);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+      mockWindowWidth(599);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+    });
+
+    it("should return large variant", () => {
+      mockWindowWidth(600);
+      expect(getStyles()).toEqual({ fontSize: 18 });
+      mockWindowWidth(1279);
+      expect(getStyles()).toEqual({ fontSize: 18 });
+    });
+
+    it("should return default variant", () => {
+      mockWindowWidth(1280);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+      mockWindowWidth(1920);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+      mockWindowWidth(1921);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+    });
+  });
+
+  describe("only", () => {
+    it("should work properly", () => {
+      const getStyles = () => ({
+        fontSize: 16,
+        ...breakpoints.only("md", { fontSize: 20 }),
+      });
+      // window width : 0...xs...sm...md...lg...xl...∞
+      //     fontSize : .............[20...20]...........
+
+      mockWindowWidth(0);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+      mockWindowWidth(config.md - 0.5);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+
+      mockWindowWidth(config.md);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+      mockWindowWidth(config.lg - 0.5);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+
+      mockWindowWidth(config.lg);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+    });
+
+    it("should call up on last breakpoint", () => {
+      const getStyles = () => ({
+        fontSize: 16,
+        ...breakpoints.only("xl", { fontSize: 20 }),
+      });
+      // window width : 0...xs...sm...md...lg...xl...∞
+      //     fontSize : .......................[20.......
+
+      mockWindowWidth(config.xl - 0.5);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+
+      mockWindowWidth(config.xl);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+      mockWindowWidth(config.xl + 0.5);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+    });
+  });
+
+  describe("between", () => {
+    const getStyles = () => ({
+      fontSize: 16,
+      ...breakpoints.between("sm", "lg", { fontSize: 20 }),
+    });
+
+    it("should work properly", () => {
+      // window width : 0...xs...sm...md...lg...xl...∞
+      //     fontSize : ........[20........20]...........
+
+      mockWindowWidth(0);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+      mockWindowWidth(config.sm - 0.5);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+
+      mockWindowWidth(config.sm);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+      mockWindowWidth(config.md);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+      mockWindowWidth(config.lg - 0.5);
+      expect(getStyles()).toEqual({ fontSize: 20 });
+
+      mockWindowWidth(config.lg);
+      expect(getStyles()).toEqual({ fontSize: 16 });
+    });
+  });
+});