@codeandmoney/soelma 0.0.0-dev.0

package/jest.config.js

@@ -0,0 +1,19 @@
+const { resolve } = require("path");
+const { name: displayName } = require("./package");
+
+module.exports = {
+  displayName,
+  testEnvironment: "node",
+  preset: "react-native",
+  cacheDirectory: resolve(__dirname, "./node_modules/.jestcache"),
+  moduleFileExtensions: ["ts", "tsx", "js"],
+  testRegex: "\\.test\\.(js|ts)x?$",
+  coveragePathIgnorePatterns: ["init.ts"],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      statements: 100,
+    },
+  },
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@codeandmoney/soelma",
+  "publishConfig": {"access": "public"},
+  "version": "0.0.0-dev.0",
+  "private": false,
+  "main": "index.js",
+  "types": "index.d.ts",
+  "author": "David <4661784+retyui@users.noreply.github.com>",
+  "description": "Fork of git@github.com:retyui/react-native-stylex.git",
+  "license": "MIT",
+  "scripts": {
+    "prebuild": "rm -rf lib",
+    "build": "tsc",
+    "postbuild": "mkdir lib/makeUseStyles && cp src/makeUseStyles/* lib/makeUseStyles && rm -rf lib/**/*test.* && prettier --write lib/**/*.{js,ts}",
+    "clean-publish": "yarn test && yarn build && node ./node_modules/clean-publish/clear-package-json.js package.json > lib/package.json && cp CHANGELOG.md LICENSE README.md lib",
+    "publish-next": "yarn clean-publish && cd lib && npm publish --tag next",
+    "presize": "yarn build",
+    "postinstall": "rm -rf node_modules/@types/node node_modules/@types/yauzl node_modules/@types/graceful-fs",
+    "lint": "eslint './src/*.{js,ts,tsx}' --quiet",
+    "test": "jest --coverage",
+    "size": "size-limit",
+    "ci": "yarn lint && yarn test && yarn size"
+  },
+  "peerDependencies": {
+    "react": ">=16.4.0",
+    "react-native": ">=0.59.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@size-limit/preset-app": "^11.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.45",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "clean-publish": "^4.2.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "jest": "^29.7.0",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-dark-mode": "^0.2.2",
+    "react-native-safe-area-context": "^4.8.1",
+    "react-native-test-app": "^2.5.34",
+    "react-test-renderer": "^18.2.0",
+    "size-limit": "^11.0.1",
+    "typescript": "^5.3.3"
+  }
+}

package/src/DefaultTheme.ts

@@ -0,0 +1,4 @@
+// This interface can be augmented by users to add default types for the theme when using react-native-stylex.
+// Use module augmentation to append your own type definition in a your_custom_stylex_type.d.ts file.
+// https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+export interface DefaultTheme {}

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 });
+    });
+  });
+});

package/src/__tests__/createBreakpointsMatcher.test.ts

@@ -0,0 +1,188 @@
+import { createBreakpointsMatcher, maxWidth, minWidth } from "../media-query";
+import { getWindowDimensions } from "../dimensions";
+
+jest.mock("../dimensions", () => ({
+  getWindowDimensions: jest.fn(),
+}));
+
+const mockWindowWidth = (width: number) => {
+  const mockGetWindowDimensions = getWindowDimensions as jest.Mock;
+  mockGetWindowDimensions.mockReturnValue({ width });
+};
+
+/*
+ * To debug use analog on CSS: https://codepen.io/retyui/pen/dyOzKzV
+ */
+describe("createBreakpointsMatcher", () => {
+  const config = {
+    xxs: 100,
+    xs: 200,
+    s: 300,
+    m: 400,
+    l: 500,
+  };
+  const breakpointsMaxWidth = createBreakpointsMatcher(config, maxWidth);
+  const breakpointsMinWidth = createBreakpointsMatcher(config);
+
+  const values = {
+    xxs: "xxs: 100",
+    xs: "xs: 200",
+    s: "s: 300",
+    m: "m: 400",
+    l: "l: 500",
+    default: "default",
+  };
+
+  it("should return boundary values", () => {
+    mockWindowWidth(600);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "default",
+      minWidth: "l: 500",
+    });
+
+    mockWindowWidth(50);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "xxs: 100",
+      minWidth: "default",
+    });
+  });
+
+  it("should work properly", () => {
+    mockWindowWidth(450);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "l: 500",
+      minWidth: "m: 400",
+    });
+
+    mockWindowWidth(401);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "l: 500",
+      minWidth: "m: 400",
+    });
+
+    mockWindowWidth(400);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "m: 400",
+      minWidth: "m: 400",
+    });
+
+    mockWindowWidth(399);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "m: 400",
+      minWidth: "s: 300",
+    });
+  });
+
+  it("should return null when no default and it pass boundary values", () => {
+    const { default: _, ...valuesWithoutDefault } = values;
+    mockWindowWidth(600);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(valuesWithoutDefault),
+      minWidth: breakpointsMinWidth(valuesWithoutDefault),
+    }).toEqual({
+      maxWidth: null,
+      minWidth: "l: 500",
+    });
+
+    mockWindowWidth(50);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(valuesWithoutDefault),
+      minWidth: breakpointsMinWidth(valuesWithoutDefault),
+    }).toEqual({
+      maxWidth: "xxs: 100",
+      minWidth: null,
+    });
+  });
+});
+
+describe("docs examples", () => {
+  const config = {
+    xxs: 320,
+    xs: 480,
+    s: 640,
+    m: 768,
+    l: 1024,
+    xl: 1200,
+    xxl: 1920,
+  };
+  describe("maxWidth", () => {
+    const applyBreakpoints = createBreakpointsMatcher(config, maxWidth);
+
+    it("should work properly", () => {
+      const values = { xxs: 20, xs: 18, default: 16 };
+
+      mockWindowWidth(0);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(320);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(321);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(480);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(481);
+      expect(applyBreakpoints(values)).toBe(16);
+
+      mockWindowWidth(999);
+      expect(applyBreakpoints(values)).toBe(16);
+    });
+  });
+
+  describe("minWidth", () => {
+    const applyBreakpoints = createBreakpointsMatcher(config, minWidth);
+
+    it("should work properly", () => {
+      const values = { xxs: 18, xs: 16, default: 20 };
+
+      mockWindowWidth(0);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(319);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(320);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(479);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(480);
+      expect(applyBreakpoints(values)).toBe(16);
+
+      mockWindowWidth(481);
+      expect(applyBreakpoints(values)).toBe(16);
+
+      mockWindowWidth(999);
+      expect(applyBreakpoints(values)).toBe(16);
+    });
+  });
+});

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

@@ -0,0 +1,81 @@
+import { makeUseStyles } from "../index";
+import { createBreakpointsMatcher } from "../media-query";
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  makeUseStyles(() => ({
+    root: {
+      position: breakpoints({
+        l: "absolute",
+        default: "relative",
+      }),
+
+      // @ts-expect-error - 'invalid value' is wrong value
+      alignItems: breakpoints({
+        l: "invalid value",
+      }),
+    },
+  }));
+}
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  const a1: string | undefined = breakpoints({ s: "1" });
+  const a2: string | undefined = breakpoints({ s: "1", m: "2" });
+  const a3: string | undefined = breakpoints({ s: "1", m: "2", l: "3" });
+  const a4: string = breakpoints({
+    s: "1",
+    m: "2",
+    l: "3",
+    default: "0",
+  });
+}
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  // @ts-expect-error - 'number' is not 'string'
+  const a1: string | undefined = breakpoints({ s: 1 });
+  const a2 = breakpoints({
+    s: 1,
+    // @ts-expect-error - 'string' is not 'number'
+    m: "2",
+  });
+}
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  // @ts-expect-error - can be 'undefined'
+  const a1: string = breakpoints({ s: "1" });
+  // @ts-expect-error - can be 'undefined'
+  const a2: string = breakpoints({ s: "1", m: "2" });
+  // @ts-expect-error - can be 'undefined'
+  const a3: string = breakpoints({ s: "1", m: "2", l: "3" });
+
+  // @ts-expect-error - 'undefined' is not 'string'
+  const a4: undefined = breakpoints({
+    s: "1",
+    m: "2",
+    l: "3",
+    default: "0",
+  });
+}

package/src/__tests__/createEventEmitter.test.ts

@@ -0,0 +1,37 @@
+import { createEventEmitter } from "../createEventEmitter";
+
+it("should call handler when invoke emit", () => {
+  const a = createEventEmitter("event");
+  const handler = jest.fn();
+
+  const unsub = a.on(handler);
+
+  expect(handler).toHaveBeenCalledTimes(0);
+
+  a.emit();
+
+  expect(handler).toHaveBeenCalledTimes(1);
+});
+
+it("should not call handler when unsubscribe", () => {
+  const a = createEventEmitter("event");
+  const handler = jest.fn();
+
+  const unsub = a.on(handler);
+
+  a.emit();
+
+  expect(handler).toHaveBeenCalledTimes(1);
+
+  unsub();
+
+  a.emit();
+
+  expect(handler).toHaveBeenCalledTimes(1);
+});
+
+it("should throw error when no subscribed functions", () => {
+  const a = createEventEmitter("test");
+
+  a.emit();
+});

package/src/__tests__/dark-mode.test.ts

@@ -0,0 +1,56 @@
+import type { Mode } from "react-native-dark-mode";
+
+import { darkUiMode, lightUiMode } from "../dark-mode";
+import { state } from "../dark-mode/state";
+
+jest.mock("react-native-dark-mode", () => ({
+  initialMode: "light",
+  eventEmitter: { on: jest.fn() },
+}));
+
+const mockStyles = { color: "red" };
+
+const mutateUiMode = (mode: Mode | null) => {
+  // @ts-expect-error: for test only add null
+  state.mode = mode;
+};
+
+describe("darkUiMode", () => {
+  it("should return style when dark mode", () => {
+    mutateUiMode("dark");
+
+    expect(darkUiMode(mockStyles)).toEqual(mockStyles);
+  });
+
+  it("should return 'undefined' when light mode", () => {
+    mutateUiMode("light");
+
+    expect(darkUiMode(mockStyles)).toBeUndefined();
+  });
+
+  it("should return 'undefined' when unknown mode", () => {
+    mutateUiMode(null);
+
+    expect(darkUiMode(mockStyles)).toBeUndefined();
+  });
+});
+
+describe("lightUiMode", () => {
+  it("should return style when light mode", () => {
+    mutateUiMode("light");
+
+    expect(lightUiMode(mockStyles)).toEqual(mockStyles);
+  });
+
+  it("should return 'undefined' when dark mode", () => {
+    mutateUiMode("dark");
+
+    expect(lightUiMode(mockStyles)).toBeUndefined();
+  });
+
+  it("should return 'undefined' when unknown mode", () => {
+    mutateUiMode(null);
+
+    expect(lightUiMode(mockStyles)).toBeUndefined();
+  });
+});

package/src/__tests__/dependencyRegistry.test.ts

@@ -0,0 +1,16 @@
+import { addDependency, getDependency } from "../dependencyRegistry";
+
+it("should overwrite handler", () => {
+  const name = "dark-mode";
+  const handler = () => () => {};
+
+  addDependency(name, handler);
+
+  expect(getDependency(name)).toBe(handler);
+
+  const newHandler = () => () => {};
+
+  addDependency(name, newHandler);
+
+  expect(getDependency(name)).not.toBe(newHandler);
+});

package/src/__tests__/dependencyUsage.test.ts

@@ -0,0 +1,13 @@
+import { onUse, resetUsing, getUsing } from "../dependencyUsage";
+
+it("should clear usage map", () => {
+  onUse("a");
+  onUse("a");
+  onUse("b");
+
+  expect(getUsing()).toEqual({ a: true, b: true });
+
+  resetUsing();
+
+  expect(getUsing()).toEqual({});
+});

package/src/__tests__/dimensions.test.ts

@@ -0,0 +1,36 @@
+import {
+  WINDOW_DEPENDENCY_KEY,
+  SCREEN_DEPENDENCY_KEY,
+} from "../dimensions/consts";
+import { optimizeDependencies } from "../dimensions/utils";
+
+describe("optimizeDependencies", () => {
+  it("should remove screen dependency when window dependency exist", () => {
+    expect(
+      optimizeDependencies({
+        [WINDOW_DEPENDENCY_KEY]: true,
+        [SCREEN_DEPENDENCY_KEY]: true,
+      })
+    ).toEqual({
+      [WINDOW_DEPENDENCY_KEY]: true,
+    });
+  });
+
+  it("should skip removing", () => {
+    expect(
+      optimizeDependencies({
+        [WINDOW_DEPENDENCY_KEY]: true,
+      })
+    ).toEqual({
+      [WINDOW_DEPENDENCY_KEY]: true,
+    });
+
+    expect(
+      optimizeDependencies({
+        [SCREEN_DEPENDENCY_KEY]: true,
+      })
+    ).toEqual({
+      [SCREEN_DEPENDENCY_KEY]: true,
+    });
+  });
+});