@codeandmoney/soelma 0.0.0-dev.0

package/src/media-query/breakpoints.ts

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

@@ -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,17 @@
+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

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

@@ -0,0 +1,23 @@
+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/consts.ts

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

package/src/safe-area/eventEmitter.ts

@@ -0,0 +1,4 @@
+import { createEventEmitter } from "../createEventEmitter";
+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 "../dependencyUsage";
+
+import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
+import { EdgeInsets } from "./types";
+import { state } from "./state";
+
+export { StylexSaveAreaConsumer } from "./StylexSaveAreaConsumer";
+export { SafeAreaProvider } from "./SafeAreaProvider";
+
+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 "../dependencyRegistry";
+
+import { SAFE_AREA_DEPENDENCY_KEY } from "./consts";
+import { on } from "./eventEmitter";
+
+addDependency(SAFE_AREA_DEPENDENCY_KEY, (handler: () => void) => on(handler));

package/src/safe-area/state.ts

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

package/src/safe-area/types.ts

@@ -0,0 +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 { }

package/src/useColorTransition.ts

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

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

@@ -0,0 +1,35 @@
+/* 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

@@ -0,0 +1,30 @@
+{
+  "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"]
+}