@codeandmoney/soelma 0.0.0-dev.0

package/docs/media-query.md

@@ -0,0 +1,274 @@
+# Media Query support 💉
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [High level api](#high-level-api)
+  - [`createBreakpoints(breakpoints)`](#createbreakpointsbreakpoints)
+  - [`createBreakpointsMatcher(breakpoints, matcherFunction)`](#createbreakpointsmatcherbreakpoints-matcherfunction)
+  - [Inject into theme](#inject-into-theme)
+- [Core media conditions:](#core-media-conditions)
+  - [`maxWidth(width: number, {/* styles */})`](#maxwidthwidth-number--styles-)
+  - [`minWidth(width: number, {/* styles */})`](#minwidthwidth-number--styles-)
+  - [`maxHeight(height: number, {/* styles */})`](#maxheightheight-number--styles-)
+  - [`minHeight(height: number, {/* styles */})`](#minheightheight-number--styles-)
+  - [`aspectRatio(ratio: number, {/* styles */})`](#aspectratioratio-number--styles-)
+  - [`maxAspectRatio(ratio: number, {/* styles */})`](#maxaspectratioratio-number--styles-)
+  - [`minAspectRatio(ratio: number, {/* styles */})`](#minaspectratioratio-number--styles-)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## High level api
+
+#### `createBreakpoints(breakpoints)`
+
+Media queries are the idiomatic approach to make your UI responsive.
+
+```ts
+import { createBreakpoints } from "react-native-stylex/media-query";
+
+const config = {
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+};
+
+const breakpoints = createBreakpoints(config);
+
+breakpoints.up("sm", value);
+breakpoints.down("md", value);
+breakpoints.only("lg", value);
+breakpoints.between("sm", "lg", value);
+```
+
+- `breakpoints.down<T>(key: string, value: T): T | null`
+
+  A media query matches screen widths less than and including the screen size given by the breakpoint key.
+
+  ```ts
+  makeUseStyles(() => ({
+    text: {
+      fontSize: 16,
+
+      // Match: [0, sm, md, lg] xl, ∞
+      //        [0........1280]
+      ...breakpoints.down("lg", { fontSize: 18 }),
+
+      // Match: [0,   sm] md, lg, xl, ∞
+      //        [0...600]
+      ...breakpoints.down("sm", { fontSize: 20 }),
+    },
+  }));
+  ```
+
+- `breakpoints.up<T>(key: string, value: T): T | null`
+  A media query which matches screen widths greater than and including the screen size given by the breakpoint key.
+
+  ```ts
+  makeUseStyles(() => ({
+    text: {
+      fontSize: 20,
+
+      // Match: 0, [sm, md, lg, xl, ∞]
+      //           [600.............∞]
+      ...breakpoints.up("sm", { fontSize: 18 }),
+
+      // Match: 0, sm, md, [lg, xl, ∞]
+      //                   [1280....∞]
+      ...breakpoints.up("lg", { fontSize: 16 }),
+    },
+  }));
+  ```
+
+- `breakpoints.only<T>(key: string, value: T): T | null`
+  A media query which matches screen widths including the screen size given by the breakpoint key.
+
+  ```ts
+  makeUseStyles(() => ({
+    text: {
+      fontSize: 16,
+
+      // Match: 0, sm, [md,     lg], xl, ∞
+      //               [960...1280]
+      ...breakpoints.only("md", { fontSize: 20 }),
+    },
+  }));
+  ```
+
+- `breakpoints.between<T>(start: string, end: string, value: T): T | null`
+  A media query which matches screen widths greater than the screen width given by the breakpoint key in the first argument and less than the screen width given by the breakpoint key in the second argument
+
+  ```ts
+  makeUseStyles(() => ({
+    text: {
+      fontSize: 16,
+
+      // Match: 0, [sm, md, lg], xl, ∞
+      //           [600...1280]
+      ...breakpoints.between("sm", "lg", { fontSize: 20 }),
+    },
+  }));
+  ```
+
+---
+
+#### `createBreakpointsMatcher(breakpoints, matcherFunction)`
+
+- `breakpoints: { [key: string]: number }` - object where keys have string type and values positive number
+- `matcherFunction: ` - optional, (by default `minWidth`). One of the media query matcher function (maxAspectRatio, maxHeight, maxWidth, minAspectRatio, minHeight, minWidth)
+
+To easily **understand** and **debug** you can use a [CSS analog](https://codepen.io/retyui/pen/dyOzKzV) of implementation `createBreakpointsMatcher` ([video preview...](https://user-images.githubusercontent.com/4661784/108605405-92456780-73bc-11eb-9ec1-eb2e765c4164.mp4))
+
+**Example:**
+
+```tsx
+import {
+  createBreakpointsMatcher,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  minAspectRatio,
+  maxAspectRatio,
+} from "react-native-stylex/media-query";
+
+const applyBreakpoints = createBreakpointsMatcher(
+  {
+    // breakpoints config
+    xxs: 320,
+    xs: 480,
+    s: 640,
+    m: 768,
+    l: 1024,
+    xl: 1200,
+    xxl: 1920,
+  },
+  matcherFunction // Optional matcher function (be default 'minWidth')
+);
+
+/*
+ * ⚠ Pay attention that result of this function depends on the passed matcher function (mix\max)!
+ * ⬇️ See below to understand a difference ⬇️
+ */
+const useStyles = makeUseStyles(() => ({
+  text: {
+    // !!! ⚠ WHEN 'matcherFunction' is 'maxWidth' ⚠ !!!
+    // if window width 0....320  => fontSize: 20
+    // if window width 321..480  => fontSize: 18
+    // if window width 481...    => fontSize: 16
+    fontSize: applyBreakpoints({
+      default: 16,
+      xs: 18,
+      xxs: 20,
+    }),
+  },
+
+  title: {
+    // !!! ⚠ WHEN 'matcherFunction' is 'minWidth' ⚠ !!!
+    // if window width 0....319  => fontSize: 20
+    // if window width 320..479  => fontSize: 18
+    // if window width 480..     => fontSize: 16
+    fontSize: applyBreakpoints({
+      xs: 16,
+      xxs: 18,
+      default: 20,
+    }),
+  },
+}));
+```
+
+#### Inject into theme
+
+> ⚠️ Note: I recommend you to add created breakpoints functions to your theme, and use them directly without importing
+
+**Example:**
+
+```ts
+// theme.ts
+const config = { sm: 360, md: 600 /*...*/ };
+const breakpoints = createBreakpoints(config);
+const applyBreakpoints = createBreakpointsMatcher(config, matcherFunction);
+
+const theme = {
+  pallete: { white: "#fff" /*...*/ },
+  breakpoints,
+  applyBreakpoints,
+};
+
+// -----------------------------------------------
+// styles.ts
+const useStyles = makeUseStyles(({ applyBreakpoints }) => ({
+  root: {
+    fontSize: utils.applyBreakpoints({
+      xxs: 20,
+      xs: 18,
+      default: 16,
+    }),
+  },
+}));
+```
+
+---
+
+## Core media conditions:
+
+#### `maxWidth(width: number, {/* styles */})`
+
+Return styles when a window width is equal or less than passed `width`
+
+#### `minWidth(width: number, {/* styles */})`
+
+Return styles when a window width is equal or greater than passed `width`
+
+#### `maxHeight(height: number, {/* styles */})`
+
+Return styles when window height is equal or less than passed `height`
+
+#### `minHeight(height: number, {/* styles */})`
+
+Return styles when window height is equal or greater than passed `height`
+
+#### `aspectRatio(ratio: number, {/* styles */})`
+
+Return styles when a window aspect ratio is the same as a passed `ratio`
+
+#### `maxAspectRatio(ratio: number, {/* styles */})`
+
+Return styles when a window aspect ratio is equal or less than passed `ratio`
+
+#### `minAspectRatio(ratio: number, {/* styles */})`
+
+Return styles when a window aspect ratio is equal or greater than passed `ratio`
+
+**Example:**
+
+```js
+import { makeUseStyles } from "react-native-stylex";
+import { minWidth } from "react-native-stylex/media-query";
+
+const useStyles = makeUseStyles(() => ({
+  root: {
+    // default styles
+    height: 200,
+    width: 200,
+
+    ...minWidth(320, {
+      // if window width MORE then 320 apply next stylex
+      height: 160,
+      width: 160,
+    }),
+  },
+  panel: {
+    // default styles
+    height: 200,
+    width: 200,
+
+    ...maxWidth(320, {
+      // if window width LESS then 320 apply next stylex
+      height: 160,
+      width: 160,
+    }),
+  },
+}));
+```

package/docs/orientation.md

@@ -0,0 +1,44 @@
+# Orientation 📲
+
+#### `orientation({ portrait, landscape })`
+
+This function given an object containing orientation variants as keys, returns the value for the orientation you are
+currently. (inspired by [`Platform.select(...)`](https://facebook.github.io/reac-native/docs/platform-specific-code#platform-module))
+
+#### `portraitOrientation(value)`
+
+Return passed value when device in portrait orientation
+
+#### `landscapeOrientation(value)`
+
+Return passed value when device in landscape orientation
+
+**Example:**
+
+```js
+import { makeUseStyles } from "react-native-stylex";
+import {
+  orientation,
+  portraitOrientation,
+  landscapeOrientation,
+} from "react-native-stylex/orientation";
+
+const useStyles = makeUseStyles(() => ({
+  cell: {
+    backgroundColor: "red",
+    ...orientation({
+      portrait: { alignSelf: "flex-start" },
+      landscape: { alignSelf: "flex-end" },
+    }),
+  },
+  row: {
+    width: portraitOrientation(100),
+  },
+  root: {
+    ...landscapeOrientation({
+      top: 10,
+      left: 10,
+    }),
+  },
+}));
+```

package/docs/safe-area.md

@@ -0,0 +1,62 @@
+# 🛡️ Safe area
+
+It is really useful for fixed elements on screen
+
+<img src="https://cdn.dribbble.com/users/261602/screenshots/5947654/bottom_search.png" width="500" />
+
+To start using integration with [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) module
+
+You need install it using [instructions](https://github.com/th3rdwave/react-native-safe-area-context#getting-started)!
+
+Then you need to render `<StylexSaveAreaConsumer/>` inside `SafeAreaProvider`.
+
+```jsx
+import React, { useState } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StylexSaveAreaConsumer } from "react-native-stylex/safe-area";
+
+import App from "./App";
+
+const Root = () => {
+  return (
+    <SafeAreaProvider>
+      <App />
+      <StylexSaveAreaConsumer />
+    </SafeAreaProvider>
+  );
+};
+```
+
+Or you can use custom `SafeAreaProvider` from stylex
+
+```jsx
+import React, { useState } from "react";
+import { SafeAreaProvider } from "react-native-stylex/safe-area";
+
+import App from "./App";
+
+const Root = () => {
+  return (
+    <SafeAreaProvider>
+      <App />
+    </SafeAreaProvider>
+  );
+};
+```
+
+After that you can use `getSafeArea()` method to get edge insets
+
+**Example:**
+
+```jsx
+import { makeUseStyles } from "react-native-stylex";
+import { getSafeArea } from "react-native-stylex/safe-area";
+
+export const useStyles = makeUseStyles(() => ({
+  fixedButton: {
+    position: "absolute",
+    start: 20,
+    bottom: 30 + getSafeArea().bottom,
+  },
+}));
+```

package/docs/testting.md

@@ -0,0 +1,51 @@
+# Writing tests 📝
+
+## Using [Jest](https://jestjs.io/) for testing?
+
+You should just use `<Provider>` and manually pass theme as a prop to every component that use `useStyles()` in unit tests
+
+**./testing.js**
+
+```js
+import React from "react";
+import { ThemeProvider } from "react-native-stylex";
+
+import { defaultTheme } from "./my-theme";
+
+export const MockThemeProvider = (props) => (
+  <ThemeProvider {...props} value={defaultTheme} />
+);
+```
+
+**./MyComponent.text.js**
+
+```js
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { MockThemeProvider } from "./testing";
+import MyComponent from "./MyComponent";
+
+const testRenderer = TestRenderer.create(
+  <MockThemeProvider>
+    <MyComponent />
+  </MockThemeProvider>
+);
+
+//...
+```
+
+## Troubleshooting
+
+### **`SyntaxError: Unexpected token export\import` in react-native-stylex/...**
+
+You need to point Jest to transform this package. You can do so, by adding module path to `transformIgnorePatterns` setting in Jest's configuration.
+
+```json
+{
+  "jest": {
+    "transformIgnorePatterns": [
+      'node_modules/(?!((jest-)?react-native|react-native-stylex|@react-native(-community)?)/)',
+    ]
+  }
+}
+```

package/docs/ts.md

@@ -0,0 +1,127 @@
+# Typescript support ⛱️
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [DefaultTheme](#defaulttheme)
+- [`withStyles()` HoC](#withstyles-hoc)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### DefaultTheme
+
+TypeScript definitions for stylex can be extended by using [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) since version `v4.1.4` of the definitions.
+
+So the first step is creating a declarations file. Let's name it `stylex.d.ts` for example.
+
+**./theme.ts**
+
+```ts
+export const theme = {
+  colors: { textColor: "black" },
+};
+
+export type MyTheme = typeof theme;
+```
+
+**./stylex.d.ts**
+
+```ts
+import "react-native-stylex";
+import type { MyTheme } from "./theme";
+
+declare module "react-native-stylex" {
+  export interface DefaultTheme extends MyTheme {}
+}
+```
+
+`DefaultTheme` is being used as an interface of `makeUseStyles(theme => ...)` out of the box.
+
+By default, the interface DefaultTheme is empty so that's why we need to extend it.
+
+---
+
+### `withStyles()` HoC
+
+To make life developer easy was added helper type `InferInjectedStyledProps<TFunc>`
+
+```ts
+const useStyles2 = makeUseStyles(() => ({
+  cell: { width: 10 },
+  root: { color: "red" },
+}));
+
+// {
+//   styles: {
+//     root: {...},
+//     cell: {...}
+//   }
+// }  <==> InferInjectedStyledProps<typeof useStyles>
+```
+
+So final result should be looks like that:
+
+**Example:**
+
+```tsx
+import React, { Ref, forwardRef } from "react";
+import { TextInput } from "react-native";
+import {
+  makeUseStyles,
+  withStyles,
+  InferInjectedStyledProps,
+} from "react-native-stylex";
+
+const useStyles = makeUseStyles(() => ({
+  root: {
+    color: "red",
+  },
+}));
+
+interface Props extends InferInjectedStyledProps<typeof useStyles> {
+  value?: string;
+}
+
+function MyComponent(props: Props) {
+  return <TextInput style={props.styles.root} value={props.value} />;
+}
+
+const Styled = withStyles(useStyles)(MyComponent);
+
+<Styled
+  value="str"
+  // @ts-expect-error: 'styles' Already injected
+  styles={{}}
+/>;
+```
+
+> ⚠️ Ref support by default!
+
+In `4.x.x` version was improved type detection for 'ref'
+
+it works well with class and functional components
+
+```tsx
+const MyFnc = forwardRef<TextInput, Props>((props, ref) => (
+  <TextInput ref={ref} style={props.styles.root} />
+));
+
+class MyTextInput extends React.Component<Props> {
+  scrollTo() {}
+}
+
+const StyledCls = withStyles(useStyles)(MyTextInput);
+const StyledFnc = withStyles(useStyles)(MyFnc);
+
+<StyledCls
+  ref={(instance) => {
+    instance?.scrollTo();
+  }}
+/>;
+
+<StyledFnc
+  ref={(instance) => {
+    instance?.blur();
+  }}
+/>;
+```

package/example/AppStyleX/.watchmanconfig

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

package/example/AppStyleX/android/build.gradle

@@ -0,0 +1,26 @@
+buildscript {
+    def androidTestAppDir = "../node_modules/react-native-test-app/android"
+    apply(from: "${androidTestAppDir}/dependencies.gradle")
+
+    repositories {
+        mavenCentral()
+        google()
+    }
+
+    dependencies {
+        getReactNativeDependencies().each { dependency ->
+            classpath(dependency)
+        }
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url("${rootDir}/../node_modules/react-native/android")
+        }
+        mavenCentral()
+        google()
+    }
+}

package/example/AppStyleX/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.3-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

package/example/AppStyleX/android/gradle.properties

@@ -0,0 +1,53 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the Gradle Daemon. The setting is
+# particularly useful for configuring JVM memory settings for build performance.
+# This does not affect the JVM settings for the Gradle client VM.
+# The default is `-Xmx512m -XX:MaxMetaspaceSize=256m`.
+org.gradle.jvmargs=-Xmx2g -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will fork up to org.gradle.workers.max JVMs to execute
+# projects in parallel. To learn more about parallel task execution, see the
+# section on Gradle build performance:
+# https://docs.gradle.org/current/userguide/performance.html#parallel_execution.
+# Default is `false`.
+#org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+# Jetifier randomly fails on these libraries
+android.jetifier.ignorelist=hermes-android
+
+# Version of Flipper to use with React Native. Default value is whatever React
+# Native defaults to. To enable Flipper, set the value to `X.Y.Z` (version you want to use).
+# To disable Flipper, set it to `false`.
+FLIPPER_VERSION=false
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Enable Fabric at runtime.
+#USE_FABRIC=1
+
+# Enable new architecture, i.e. Fabric + TurboModule - implies USE_FABRIC=1.
+# Note that this is incompatible with web debugging.
+#newArchEnabled=true
+
+# Uncomment the line below if building react-native from source
+#ANDROID_NDK_VERSION=23.1.7779620
+
+# Version of Kotlin to build against.
+#KOTLIN_VERSION=1.7.22