@codeandmoney/soelma 0.0.0-dev.0

package/src/__tests__/makeUseStyles.types-test.ts

@@ -0,0 +1,69 @@
+import { makeUseStyles } from "../makeUseStyles";
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      textAlign: "center",
+    },
+  }));
+
+  const a: "center" = useStyles().root.textAlign;
+
+  // @ts-expect-error: expect literal type
+  const b: "not center" = useStyles().root.textAlign;
+}
+
+{
+  interface Theme {
+    color: string;
+  }
+
+  const useStyles = makeUseStyles(({ color }: Theme) => ({
+    root: {
+      color,
+      textAlign: "center",
+    },
+  }));
+
+  const a: "center" = useStyles().root.textAlign;
+
+  // @ts-expect-error: expect literal type
+  const b: "not center" = useStyles().root.textAlign;
+}
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      // @ts-expect-error: invalid color value
+      color: [],
+    },
+  }));
+
+  const {
+    root,
+    // @ts-expect-error: 'otherProps' not exist
+    otherProp,
+  } = useStyles();
+}
+
+{
+  interface MyTheme {
+    color: {
+      red: string;
+    };
+  }
+
+  const useStyles = makeUseStyles((theme: MyTheme) => ({
+    root: {
+      color: theme.color.red,
+      // @ts-expect-error: 'blue' not exist in passed theme
+      borderColor: theme.color.blue,
+    },
+  }));
+
+  const {
+    root,
+    // @ts-expect-error: 'otherProps' not exist
+    otherProp,
+  } = useStyles();
+}

package/src/__tests__/media-query.test.ts

@@ -0,0 +1,204 @@
+import { Dimensions } from "react-native";
+import {
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  aspectRatio,
+  minAspectRatio,
+  maxAspectRatio,
+} from "../media-query";
+
+const mockStyle = { color: "black" };
+
+const mockGetDimensions = (dimensions: any) => {
+  Dimensions.get = () => dimensions;
+};
+
+describe("max*", () => {
+  describe("maxHeight", () => {
+    it("should return style when device height less than passed", () => {
+      const dimensions = { height: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxHeight(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device height more than passed value", () => {
+      const dimensions = { height: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxHeight(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return null when device height equal a passed value", () => {
+      const dimensions = { height: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxHeight(320, mockStyle)).toEqual(null);
+    });
+  });
+
+  describe("maxWidth", () => {
+    it("should return style when device width less than passed", () => {
+      const dimensions = { width: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxWidth(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device width more than passed value", () => {
+      const dimensions = { width: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxWidth(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return null when device width equal a passed value", () => {
+      const dimensions = { width: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxWidth(320, mockStyle)).toEqual(null);
+    });
+  });
+});
+
+describe("min*", () => {
+  describe("minHeight", () => {
+    it("should return null when device height less than passed", () => {
+      const dimensions = { height: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minHeight(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when device height more than passed value", () => {
+      const dimensions = { height: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minHeight(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device height equal a passed value", () => {
+      const dimensions = { height: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minHeight(320, mockStyle)).toEqual(null);
+    });
+  });
+
+  describe("minWidth", () => {
+    it("should return null when device width less than passed", () => {
+      const dimensions = { width: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minWidth(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when device width more than passed value", () => {
+      const dimensions = { width: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minWidth(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device width equal a passed value", () => {
+      const dimensions = { width: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minWidth(320, mockStyle)).toEqual(null);
+    });
+  });
+});
+
+describe("aspectRatio", () => {
+  describe("equal", () => {
+    it("should return null when device ratio less then passed", () => {
+      const dimensions = { width: 100, height: 201 };
+
+      mockGetDimensions(dimensions);
+
+      expect(aspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when ratio equal", () => {
+      const dimensions = { width: 100, height: 200 };
+
+      mockGetDimensions(dimensions);
+
+      expect(aspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device ratio greater than passed", () => {
+      const dimensions = { width: 100, height: 199 };
+
+      mockGetDimensions(dimensions);
+
+      expect(aspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+  });
+
+  describe("min", () => {
+    it("should return null when device ratio less then passed", () => {
+      const dimensions = { width: 100, height: 201 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minAspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when ratio equal passed", () => {
+      const dimensions = { width: 100, height: 200 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return style when ratio greater than passed", () => {
+      const dimensions = { width: 100, height: 199 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+  });
+
+  describe("max", () => {
+    it("should return style when device ratio less then passed", () => {
+      const dimensions = { width: 100, height: 201 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return style when ratio equal passed", () => {
+      const dimensions = { width: 100, height: 200 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when ratio greater than passed", () => {
+      const dimensions = { width: 100, height: 199 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxAspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+  });
+});

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 "../useTheme";
+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,173 @@
+import React, { FC, forwardRef } from "react";
+import { TextInput } from "react-native";
+import { InferInjectedStyledProps, withStyles } from "../withStyles";
+import { makeUseStyles } from "../makeUseStyles";
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      color: "red",
+    },
+  }));
+
+  interface Props extends InferInjectedStyledProps<typeof useStyles> {
+    a: boolean;
+  }
+
+  function Component(props: Props): 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
+  ): 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/appearance/consts.ts

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

package/src/appearance/index.ts

@@ -0,0 +1,37 @@
+import "./init";
+
+import { Appearance } from "react-native";
+
+import { onUse } from "../dependencyUsage";
+
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+
+export type ColorSchemeName = "light" | "dark" | "default";
+
+export function appearance<T>({
+  dark,
+  light,
+  default: defaultScheme,
+}: { [mode in ColorSchemeName]?: T }): T | undefined {
+  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 = <T>(dark: T): T | undefined =>
+  appearance<T>({ dark });
+
+export const lightAppearance = <T>(light: T): T | undefined =>
+  appearance<T>({ light });
+
+export const noPreferenceAppearance = <T>(defaultScheme: T): T | undefined =>
+  appearance<T>({ default: defaultScheme });

package/src/appearance/init.ts

@@ -0,0 +1,12 @@
+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: () => void) => on(handler));
+
+Appearance.addChangeListener(emit);

package/src/context.ts

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

package/src/createEventEmitter.ts

@@ -0,0 +1,26 @@
+type Handler = () => void;
+type UnSubscribe = () => void;
+
+interface EventsRegistry {
+  [eventName: string]: Array<Handler>;
+}
+
+interface Result {
+  on: (callback: Handler) => UnSubscribe;
+  emit: () => void;
+}
+
+const events: EventsRegistry = {};
+
+export function createEventEmitter(event: string): Result {
+  const emit = (): void => (events[event] || []).forEach((fn) => fn());
+  const on = (cb: Handler): UnSubscribe => {
+    (events[event] = events[event] || []).push(cb);
+
+    return () => {
+      events[event] = events[event]!.filter((fn) => fn !== cb);
+    };
+  };
+
+  return { on, emit };
+}

package/src/dark-mode/consts.ts

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

package/src/dark-mode/index.ts

@@ -0,0 +1,29 @@
+import "./init";
+
+import { onUse } from "../dependencyUsage";
+
+import { UI_MODE_DEPENDENCY_KEY } from "./consts";
+import { state } from "./state";
+
+export type UiType = "dark" | "light";
+
+export function uiMode<T>({
+  dark,
+  light,
+}: { [mode in UiType]?: T }): T | undefined {
+  onUse(UI_MODE_DEPENDENCY_KEY);
+
+  if (state.mode === "dark") {
+    return dark;
+  }
+
+  if (state.mode === "light") {
+    return light;
+  }
+
+  return undefined;
+}
+
+export const darkUiMode = <T>(dark: T): T | undefined => uiMode<T>({ dark });
+
+export const lightUiMode = <T>(light: T): T | undefined => uiMode<T>({ light });

package/src/dark-mode/init.ts

@@ -0,0 +1,19 @@
+import { eventEmitter, Mode } 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: () => void) => on(handler));
+
+eventEmitter.on("currentModeChanged", (newMode: Mode) => {
+  if (state.mode !== newMode) {
+    state.mode = newMode;
+
+    emit();
+  }
+});

package/src/dark-mode/state.ts

@@ -0,0 +1,5 @@
+import { initialMode } from "react-native-dark-mode";
+
+export const state = {
+  mode: initialMode,
+};