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

package/src/tests/orientation.test.ts

@@ -0,0 +1,61 @@
+import { landscapeOrientation, portraitOrientation } from "../orientation";
+
+import { Dimensions } from "react-native";
+
+const mockStyle = { color: "black" };
+
+const mockGetDimensions = (dimensions: any) => {
+  Dimensions.get = () => dimensions;
+};
+
+describe("landscapeOrientation", () => {
+  it("should return style when screen height less than width", () => {
+    const dimensions = { height: 1, width: 2 };
+
+    mockGetDimensions(dimensions);
+
+    expect(landscapeOrientation(mockStyle)).toEqual(mockStyle);
+  });
+
+  it("should return 'undefined' when screen height equal width", () => {
+    const dimensions = { height: 1, width: 1 };
+
+    mockGetDimensions(dimensions);
+
+    expect(landscapeOrientation(mockStyle)).toBeUndefined();
+  });
+
+  it("should return 'null' when screen height more than width", () => {
+    const dimensions = { height: 2, width: 1 };
+
+    mockGetDimensions(dimensions);
+
+    expect(landscapeOrientation(mockStyle)).toBeUndefined();
+  });
+});
+
+describe("portraitOrientation", () => {
+  it("should return 'undefined' when screen height less than width", () => {
+    const dimensions = { height: 1, width: 2 };
+
+    mockGetDimensions(dimensions);
+
+    expect(portraitOrientation(mockStyle)).toBeUndefined();
+  });
+
+  it("should return 'mockStyle' when screen height equal width", () => {
+    const dimensions = { height: 1, width: 1 };
+
+    mockGetDimensions(dimensions);
+
+    expect(portraitOrientation(mockStyle)).toEqual(mockStyle);
+  });
+
+  it("should return 'mockStyle' when screen height more than width", () => {
+    const dimensions = { height: 2, width: 1 };
+
+    mockGetDimensions(dimensions);
+
+    expect(portraitOrientation(mockStyle)).toEqual(mockStyle);
+  });
+});

package/src/tests/useTheme.test.ts

@@ -0,0 +1,26 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { useTheme } from "../use-theme";
+import { ThemeProvider } from "../context";
+
+it("should throw an error when context value wasn't passed", () => {
+  expect(() => {
+    const { result } = renderHook(() => useTheme());
+
+    // trigger invoking passed hook
+    result.current;
+  }).toThrow();
+});
+
+it("should not throw an error", () => {
+  const theme = { test: "theme" };
+
+  expect(() => {
+    const { result } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: { value: theme },
+    });
+
+    // trigger invoking passed hook
+    result.current;
+  }).not.toThrow();
+});

package/src/tests/withStyles.types-test.tsx

@@ -0,0 +1,172 @@
+// @ts-nocheck
+
+import { FC, forwardRef } from "react";
+import { TextInput } from "react-native";
+import { InferInjectedStyledProps, withStyles } from "../with-styles";
+import { makeUseStyles } from "../make-use-styles";
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      color: "red",
+    },
+  }));
+
+  interface Props extends InferInjectedStyledProps<typeof useStyles> {
+    a: boolean;
+  }
+
+  function Component(props: Props): React.JSX.Element | null {
+    props.styles.root.color = "";
+
+    // @ts-expect-error 'a' not exists
+    props.styles.a = {};
+
+    return null;
+  }
+
+  const ComponentWithStyles = withStyles(useStyles)(Component);
+
+  <ComponentWithStyles a={false} />;
+  <ComponentWithStyles
+    // @ts-expect-error: string is not a boolean
+    a={"not bool"}
+  />;
+
+  <ComponentWithStyles
+    a
+    // @ts-expect-error: already ibjected by hook
+    styles={{
+      root: {},
+    }}
+  />;
+}
+
+{
+  interface MyTheme {
+    colors: {
+      red: string;
+    };
+  }
+
+  const useStyles = makeUseStyles((theme: MyTheme) => ({
+    root: {
+      color: theme.colors.red,
+      // @ts-expect-error: 'gold' not exists
+      borderColor: theme.colors.gold,
+    },
+  }));
+
+  interface Props extends InferInjectedStyledProps<typeof useStyles> {
+    a: boolean;
+  }
+
+  const WithRef = forwardRef<TextInput, Props>(function Component(props, ref): React.JSX.Element | null {
+    props.styles.root.color = "";
+
+    // @ts-expect-error 'a' not exists
+    props.styles.a = {};
+
+    return <TextInput ref={ref} />;
+  });
+
+  const ComponentWithStylesAndRef = withStyles(useStyles)(WithRef);
+
+  <ComponentWithStylesAndRef a={false} />;
+
+  <ComponentWithStylesAndRef
+    a={false}
+    ref={(instance) => {
+      instance?.focus();
+
+      // @ts-expect-error 'abc' not exists
+      instance?.abc();
+    }}
+  />;
+  <ComponentWithStylesAndRef
+    // @ts-expect-error: string is not a boolean
+    a={"not bool"}
+  />;
+
+  <ComponentWithStylesAndRef
+    a
+    // @ts-expect-error: already ibjected by hook
+    styles={{
+      root: {},
+    }}
+  />;
+}
+
+{
+  interface MyTheme {
+    colors: {
+      red: string;
+    };
+  }
+
+  const useStyles = makeUseStyles((theme: MyTheme) => ({
+    root: {
+      color: theme.colors.red,
+      // @ts-expect-error: 'gold' not exists
+      borderColor: theme.colors.gold,
+    },
+  }));
+
+  interface Props extends InferInjectedStyledProps<typeof useStyles> {
+    a: boolean;
+  }
+
+  class MyCls extends React.Component<Props> {
+    focus() {}
+    render() {
+      return null;
+    }
+  }
+
+  const ComponentWithStylesAndRef = withStyles(useStyles)(MyCls);
+
+  <ComponentWithStylesAndRef a={false} />;
+
+  <ComponentWithStylesAndRef
+    a={false}
+    ref={(instance) => {
+      instance?.focus();
+
+      // @ts-expect-error 'abc' not exists
+      instance?.abc();
+    }}
+  />;
+  <ComponentWithStylesAndRef
+    // @ts-expect-error: string is not a boolean
+    a={"not bool"}
+  />;
+
+  <ComponentWithStylesAndRef
+    a
+    // @ts-expect-error: already ibjected by hook
+    styles={{
+      root: {},
+    }}
+  />;
+}
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      color: "red",
+    },
+  }));
+
+  interface Props extends InferInjectedStyledProps<typeof useStyles> {}
+
+  const MyCmp: FC<Props> = () => null;
+
+  const StyledMyCmp = withStyles(useStyles)(MyCmp);
+
+  <StyledMyCmp
+    ref={(e) => {
+      // @ts-expect-error: StyledMyCmp doesn't have 'ref' type
+      e?.aa();
+    }}
+  />;
+}

package/src/use-color-transition.ts

@@ -0,0 +1,50 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Animated } from "react-native";
+import { DefaultTheme } from "./default-theme";
+import { useTheme } from "./use-theme";
+
+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/use-theme.ts

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+
+import { themeContext } from "./context";
+import type { DefaultTheme } from "./default-theme";
+
+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/with-styles.tsx

@@ -0,0 +1,22 @@
+import React, { ComponentProps, ComponentType, forwardRef, Ref, ComponentRef } 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<ComponentRef<TComponent>>) => {
+      const styles = useStyles();
+      // @ts-expect-error: 'ref' as never
+      return <Component {...props} ref={ref} styles={styles} />;
+    };
+
+    // @ts-expect-error
+    return forwardRef(renderComponent);
+  }
+
+  return WithStyles;
+}

package/tsconfig.build.json

@@ -0,0 +1,31 @@
+{
+  "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"],
+  "exclude": ["./src/tests"]
+}

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"]
+}

package/DefaultTheme.d.ts

@@ -1,2 +0,0 @@
-export interface DefaultTheme {
-}

package/DefaultTheme.js

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

package/appearance/consts.d.ts

@@ -1 +0,0 @@
-export declare const UI_MODE_DEPENDENCY_KEY = "react-native-appearance";

package/appearance/index.d.ts

@@ -1,8 +0,0 @@
-import "./init";
-export type ColorSchemeName = "light" | "dark" | "default";
-export declare function appearance<T>({ dark, light, default: defaultScheme, }: {
-    [mode in ColorSchemeName]?: T;
-}): T | undefined;
-export declare const darkAppearance: <T>(dark: T) => T | undefined;
-export declare const lightAppearance: <T>(light: T) => T | undefined;
-export declare const noPreferenceAppearance: <T>(defaultScheme: T) => T | undefined;

package/appearance/index.js

@@ -1,18 +0,0 @@
-import "./init";
-import { Appearance } from "react-native";
-import { onUse } from "../dependencyUsage";
-import { UI_MODE_DEPENDENCY_KEY } from "./consts";
-export function appearance({ dark, light, default: defaultScheme, }) {
-    onUse(UI_MODE_DEPENDENCY_KEY);
-    // Note: getColorScheme() will always return light when debugging with Chrome.
-    if (Appearance.getColorScheme() === "light") {
-        return light;
-    }
-    if (Appearance.getColorScheme() === "dark") {
-        return dark;
-    }
-    return defaultScheme;
-}
-export const darkAppearance = (dark) => appearance({ dark });
-export const lightAppearance = (light) => appearance({ light });
-export const noPreferenceAppearance = (defaultScheme) => appearance({ default: defaultScheme });

package/appearance/init.d.ts

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

package/appearance/init.js

@@ -1,7 +0,0 @@
-import { Appearance } from "react-native";
-import { addDependency } from "../dependencyRegistry";
-import { createEventEmitter } from "../createEventEmitter";
-import { UI_MODE_DEPENDENCY_KEY } from "./consts";
-const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
-addDependency(UI_MODE_DEPENDENCY_KEY, (handler) => on(handler));
-Appearance.addChangeListener(emit);

package/context.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { DefaultTheme } from "./DefaultTheme";
-export declare const themeContext: import("react").Context<DefaultTheme | null>;
-export declare const ThemeProvider: import("react").Provider<DefaultTheme | null>, ThemeConsumer: import("react").Consumer<DefaultTheme | null>;

package/createEventEmitter.d.ts

@@ -1,8 +0,0 @@
-type Handler = () => void;
-type UnSubscribe = () => void;
-interface Result {
-    on: (callback: Handler) => UnSubscribe;
-    emit: () => void;
-}
-export declare function createEventEmitter(event: string): Result;
-export {};

package/createEventEmitter.js

@@ -1,11 +0,0 @@
-const events = {};
-export function createEventEmitter(event) {
-    const emit = () => (events[event] || []).forEach((fn) => fn());
-    const on = (cb) => {
-        (events[event] = events[event] || []).push(cb);
-        return () => {
-            events[event] = events[event].filter((fn) => fn !== cb);
-        };
-    };
-    return { on, emit };
-}

package/dark-mode/consts.d.ts

@@ -1 +0,0 @@
-export declare const UI_MODE_DEPENDENCY_KEY = "react-native-dark-mode";

package/dark-mode/index.d.ts

@@ -1,7 +0,0 @@
-import "./init";
-export type UiType = "dark" | "light";
-export declare function uiMode<T>({ dark, light, }: {
-    [mode in UiType]?: T;
-}): T | undefined;
-export declare const darkUiMode: <T>(dark: T) => T | undefined;
-export declare const lightUiMode: <T>(light: T) => T | undefined;

package/dark-mode/index.js

@@ -1,16 +0,0 @@
-import "./init";
-import { onUse } from "../dependencyUsage";
-import { UI_MODE_DEPENDENCY_KEY } from "./consts";
-import { state } from "./state";
-export function uiMode({ dark, light, }) {
-    onUse(UI_MODE_DEPENDENCY_KEY);
-    if (state.mode === "dark") {
-        return dark;
-    }
-    if (state.mode === "light") {
-        return light;
-    }
-    return undefined;
-}
-export const darkUiMode = (dark) => uiMode({ dark });
-export const lightUiMode = (light) => uiMode({ light });

package/dark-mode/init.d.ts

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

package/dark-mode/init.js

@@ -1,13 +0,0 @@
-import { eventEmitter } from "react-native-dark-mode";
-import { addDependency } from "../dependencyRegistry";
-import { createEventEmitter } from "../createEventEmitter";
-import { UI_MODE_DEPENDENCY_KEY } from "./consts";
-import { state } from "./state";
-const { on, emit } = createEventEmitter(UI_MODE_DEPENDENCY_KEY);
-addDependency(UI_MODE_DEPENDENCY_KEY, (handler) => on(handler));
-eventEmitter.on("currentModeChanged", (newMode) => {
-    if (state.mode !== newMode) {
-        state.mode = newMode;
-        emit();
-    }
-});

package/dark-mode/state.d.ts

@@ -1,3 +0,0 @@
-export declare const state: {
-    mode: import("react-native-dark-mode").Mode;
-};

package/dependencyRegistry.d.ts

@@ -1,5 +0,0 @@
-type UnSubscribeFn = () => void;
-type SubscribeFn = (handler: () => void) => UnSubscribeFn;
-export declare function addDependency(name: string, onChange: SubscribeFn): void;
-export declare function getDependency(name: string): SubscribeFn | undefined;
-export {};

package/dependencyRegistry.js

@@ -1,12 +0,0 @@
-const registry = {};
-export function addDependency(name, onChange) {
-    if (!registry[name]) {
-        Object.defineProperty(registry, name, {
-            value: onChange,
-            writable: false,
-        });
-    }
-}
-export function getDependency(name) {
-    return registry[name];
-}

package/dependencyUsage.d.ts

@@ -1,7 +0,0 @@
-interface UsingSpec {
-    [dependencyName: string]: boolean;
-}
-export declare function resetUsing(): void;
-export declare function getUsing(): UsingSpec;
-export declare function onUse(name: string): void;
-export {};

package/dependencyUsage.js

@@ -1,10 +0,0 @@
-const ref = { current: {} };
-export function resetUsing() {
-    ref.current = {};
-}
-export function getUsing() {
-    return { ...ref.current };
-}
-export function onUse(name) {
-    ref.current[name] = true;
-}

package/dimensions/consts.d.ts

@@ -1,2 +0,0 @@
-export declare const WINDOW_DEPENDENCY_KEY = "Dimensions.window";
-export declare const SCREEN_DEPENDENCY_KEY = "Dimensions.screen";

package/dimensions/index.d.ts

@@ -1,4 +0,0 @@
-import "./init";
-import { ScaledSize } from "react-native";
-export declare function getWindowDimensions(): ScaledSize;
-export declare function getScreenDimensions(): ScaledSize;

package/dimensions/index.js

@@ -1,13 +0,0 @@
-import "./init";
-import { Dimensions } from "react-native";
-import { onUse } from "../dependencyUsage";
-import { WINDOW_DEPENDENCY_KEY, SCREEN_DEPENDENCY_KEY } from "./consts";
-const get = (dim) => Dimensions.get(dim);
-export function getWindowDimensions() {
-    onUse(WINDOW_DEPENDENCY_KEY);
-    return get("window");
-}
-export function getScreenDimensions() {
-    onUse(SCREEN_DEPENDENCY_KEY);
-    return get("screen");
-}

package/dimensions/init.d.ts

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

package/dimensions/init.js

@@ -1,21 +0,0 @@
-import { Dimensions } from "react-native";
-import { createEventEmitter } from "../createEventEmitter";
-import { addDependency } from "../dependencyRegistry";
-import { SCREEN_DEPENDENCY_KEY, WINDOW_DEPENDENCY_KEY } from "./consts";
-const { get, addEventListener } = Dimensions;
-const state = { window: get("window"), screen: get("screen") };
-const windowEventEmitter = createEventEmitter(WINDOW_DEPENDENCY_KEY);
-const screenEventEmitter = createEventEmitter(SCREEN_DEPENDENCY_KEY);
-const isNotEqual = (a, b) => a.width !== b.width || a.height !== b.height;
-addDependency(WINDOW_DEPENDENCY_KEY, (handler) => windowEventEmitter.on(handler));
-addDependency(SCREEN_DEPENDENCY_KEY, (handler) => screenEventEmitter.on(handler));
-addEventListener("change", ({ window, screen }) => {
-    if (isNotEqual(screen, state.screen)) {
-        state.screen = screen;
-        screenEventEmitter.emit();
-    }
-    if (isNotEqual(window, state.window)) {
-        state.window = window;
-        windowEventEmitter.emit();
-    }
-});

package/dimensions/utils.d.ts

@@ -1 +0,0 @@
-export declare const optimizeDependencies: (keys: Record<string, boolean>) => Record<string, boolean>;

package/dimensions/utils.js

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

package/i18n.d.ts

@@ -1,7 +0,0 @@
-type LayoutDirectionType = "rtl" | "ltr";
-export declare function i18n<T>({ rtl, ltr, }: {
-    [direction in LayoutDirectionType]?: T;
-}): T | undefined;
-export declare const rtl: <T>(styles: T) => T | undefined;
-export declare const ltr: <T>(styles: T) => T | undefined;
-export {};

package/i18n.js

@@ -1,9 +0,0 @@
-import { I18nManager } from "react-native";
-export function i18n({ rtl, ltr, }) {
-    if (I18nManager.isRTL) {
-        return rtl;
-    }
-    return ltr;
-}
-export const rtl = (styles) => i18n({ rtl: styles });
-export const ltr = (styles) => i18n({ ltr: styles });