@codeandmoney/soelma 0.0.0-dev.0

package/.eslintignore

@@ -0,0 +1 @@
+/*.js

package/.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  rules: {
+    "react/prop-types": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        extendDefaults: true,
+        types: {
+          object: false,
+        },
+      },
+    ],
+  },
+};

package/.github/workflows/nodejs.yml

@@ -0,0 +1,33 @@
+name: Code Quality
+
+on:
+  pull_request:
+    branches:
+      - master
+  push:
+    branches:
+      - master
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-22.04, macos-14]
+        node-version: [20.x]
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        cache: 'yarn'
+        node-version: ${{ matrix.node-version }}
+    - run: yarn install --frozen-lockfile --ignore-engines
+    - run: yarn ci

package/.size-limit.json

@@ -0,0 +1,6 @@
+[
+  {
+    "limit": "8.9 KB",
+    "path": "lib/**/*.js"
+  }
+]

package/CHANGELOG.md

@@ -0,0 +1,90 @@
+# Change Log
+
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+# 4.2.0
+
+- Update save-area types and use `initialMetrics` by default 
+
+
+# 4.1.1
+
+- Fix invalid import [#12](https://github.com/retyui/react-native-stylex/issues/12)
+
+# 4.1.0
+
+- Extend a [Media Query API](docs/media-query.md)
+  - `createBreakpointsMatcher(...)` [#8](https://github.com/retyui/react-native-stylex/issues/8)
+  - `createBreakpoints(...)`
+
+# 4.0.0
+
+- Optimize memory usage [#9](https://github.com/retyui/react-native-stylex/issues/9)
+
+```js
+// 4.x.x
+useStyles() === useStyles(); // true
+// 1.x.x - 3.x.x
+useStyles() === useStyles(); // false
+```
+
+- Add [dimensions api](docs/dimensions.md)
+- Improve [typescript support](docs/ts.md)
+- Add tests for types
+- Update dev dependencies
+
+**Breaking changes:**
+
+- Type `MakeUseStylesFn<TTheme>` was removed!
+  Use [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to define type for `Theme`.
+  More info [typescript guide](docs/ts.md)...
+
+# 3.1.0
+
+- Replace custom module [react-native-appearance](https://github.com/expo/react-native-appearance) with core [react-native Appearance](https://reactnative.dev/docs/appearance)
+
+# 3.0.0
+
+- Add support for the latest [react-native-safe-area-context@1.0.0](https://github.com/th3rdwave/react-native-safe-area-context/releases/tag/v1.0.0) API
+- Publish a compatible bundle
+- Update dev deps
+
+# 2.2.0
+
+- Fix expo issue `Unable to resolve module 'module://EmitterSubscription.js'`
+
+# 2.1.0
+
+- Add integrations with [react-native-appearance](docs/appearance.md)
+
+# 2.0.0
+
+Deprecate first argument as object `makeUseStyles({ styles: {color: 'red'}})` now only functions allow `makeUseStyles (() => (({ styles: {color : 'red'}}))`
+
+Improve memoization logic
+
+Add integrations with third party modules\APIs:
+
+- [react-native-safe-area](docs/safe-area.md)
+- [react-native-dark-mode](docs/dark-mode.md)
+- [Media Query](docs/media-query.md)
+- [Orientation](docs/orientation.md)
+- [i18n](docs/i18n.md)
+
+# 1.1.3
+
+- Improve recreating styles
+- Added test
+- Added helper type `MakeUseStylesFn`
+
+# 1.1.1
+
+- Fix a `makeUseStyles` function type definition
+
+# 1.1.0
+
+- Added a new helper hook`useColorTransition((theme: Theme) => string): AnimatedValue`
+
+# 1.0.0
+
+- Release

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 David Narbutovich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,169 @@
+# react-native-stylex
+
+Better styling for react-native
+
+[![react-native-stylex on npm](https://badgen.net/npm/v/react-native-stylex)](http://www.npmjs.com/package/react-native-stylex)
+[![react-native-stylex downloads](https://badgen.net/npm/dm/react-native-stylex)](https://www.npmtrends.com/react-native-stylex)
+[![react-native-stylex install size](https://packagephobia.com/badge?p=react-native-stylex)](https://packagephobia.com/result?p=react-native-stylex)
+[![CI status](https://github.com/retyui/react-native-stylex/workflows/Node.js%20CI/badge.svg)](https://github.com/retyui/react-native-stylex/actions)
+
+<div align="center"><img src="https://raw.githubusercontent.com/retyui/react-native-stylex/master/docs/logo.png" width="333"/></div>
+
+### Module features:
+
+- 📦 Very light and simple;
+- ⚡️ Hooks \ HoC support;
+- 🔋 Theming support;
+- ⛱️ [Typescript support](docs/ts.md);
+- 📝 [Easy integrated with Jest](docs/testting.md).
+
+### Integrations
+
+- 🛡️ [react-native-safe-area-view](docs/safe-area.md);
+- 🗺 [i18n](docs/i18n.md);
+- 🕳️ [Appearance (a.k.a Dark mode)](docs/appearance.md);
+- 📐 [Dimensions](docs/dimensions.md);
+- 📲 [Orientation](docs/orientation.md);
+- 💉 [Media Queries](docs/media-query.md) support.
+
+### Links
+
+- [Documentation](docs/api.md);
+- [Live demo](https://snack.expo.io/@retyui/react-native-stylex);
+- [Example app](example/AppStyleX).
+
+## Install
+
+`react-native-stylex` requires react-native 0.59.0 or later.
+
+#### 1️⃣ Add module
+
+```sh
+yarn add react-native-stylex
+
+# or npm install react-native-stylex
+```
+
+#### 2️⃣ Add theme `<ThemeProvider/>`
+
+Stylex provides component, which makes the theme available to the rest of your app:
+
+```js
+import { ThemeProvider } from "react-native-stylex";
+import {
+  createBreakpointsMatcher,
+  createBreakpoints,
+  maxWidth,
+} from "react-native-stylex/media-query";
+
+const breakpoints = {
+  xs: 360,
+  sm: 600,
+  md: 960,
+  lg: 1280,
+  xl: 1920,
+};
+const { up, down, only, between } = createBreakpoints(breakpoints);
+const applyBreakpoints = createBreakpointsMatcher(breakpoints, maxWidth);
+
+const theme = {
+  palette: { textColor: "black" },
+  breakpoints: { up, down, only, between, apply: applyBreakpoints },
+  utils: {
+    fade: (color, value) => {},
+  },
+};
+
+const Root = () => (
+  <ThemeProvider value={theme}>
+    <App />
+  </ThemeProvider>
+);
+
+export default Root;
+```
+
+#### 3️⃣ Create styles `makeUseStyles(...)`
+
+Stylex provides a helper function to inject styles to your component.
+
+Normally, you’ll use it in this way:
+
+```js
+import { makeUseStyles } from "react-native-stylex";
+import { maxWidth } from "react-native-stylex/media-query";
+
+export const useStyles = makeUseStyles(({ palette, utils, breakpoints }) => ({
+  root: {
+    color: utils.fade(palette.textColor, 0.5),
+    height: 100,
+    // On screens that are 320 or less, set the height to 69
+    ...maxWidth(320, { height: 69 }),
+  },
+
+  text: {
+    fontSize: 16, // default value
+    ...breakpoints.down("lg", { fontSize: 18 }), // if window width 0..1280
+    ...breakpoints.down("sm", { fontSize: 20 }), // if window width 0..600
+  },
+
+  // The same example that you see above but unsing a 'applyBreakpoints'
+  title: {
+    fontSize: breakpoints.apply({
+      sm: 20, //      if window width 0....600
+      lg: 18, //      if window width 601..1280
+      default: 16, // if window width 1281...
+    }),
+  },
+}));
+```
+
+#### 4️⃣ Inject styles `useStyles(...)` & `withStyles(...)`
+
+And finally just use in component:
+
+```js
+import React, { Component } from "react";
+import useStyles from "./styles";
+
+// Functional component (hooks variant)
+const Root = () => {
+  const styles = useStyles();
+
+  return <View style={styles.root} />;
+};
+
+export default Root;
+
+//--------------------------------
+
+// Class component (HOC variant)
+class Root extends Component {
+  render() {
+    const { styles } = this.props;
+
+    return <View style={styles.root} />;
+  }
+}
+
+export default withStyles(useStyles)(Root);
+```
+
+### 5️⃣ Do you use a Typescript ?
+
+- Look at [typescript](docs/ts.md) guide
+
+### Alternative solutions
+
+
+- [@emotion/native
+](https://emotion.sh/docs/@emotion/native) [![react-native-stylex downloads](https://badgen.net/npm/dm/@emotion/native)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [nativewind](https://nativewind.dev/) [![react-native-stylex downloads](https://badgen.net/npm/dm/nativewind)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [@shopify/restyle](https://shopify.github.io/restyle/) [![react-native-stylex downloads](https://badgen.net/npm/dm/@shopify/restyle)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [tamagui](https://tamagui.dev/) [![react-native-stylex downloads](https://badgen.net/npm/dm/tamagui)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [twrnc](https://github.com/jaredh159/tailwind-react-native-classnames) [![react-native-stylex downloads](https://badgen.net/npm/dm/twrnc)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn) [![react-native-stylex downloads](https://badgen.net/npm/dm/tailwind-rn)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [dripsy](https://www.dripsy.xyz/) [![react-native-stylex downloads](https://badgen.net/npm/dm/dripsy)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [react-native-unistyles](https://reactnativeunistyles.vercel.app/) [![react-native-stylex downloads](https://badgen.net/npm/dm/react-native-unistyles)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [react-native-zephyr](https://formidable.com/open-source/react-native-zephyr/) [![react-native-stylex downloads](https://badgen.net/npm/dm/react-native-zephyr)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)
+- [@fast-styles/react](https://fedemartinm.github.io/fast-styles/) [![react-native-stylex downloads](https://badgen.net/npm/dm/@fast-styles/react)](https://npmtrends.com/@emotion/native-vs-@fast-styles/react-vs-@shopify/restyle-vs-dripsy-vs-nativewind-vs-react-native-unistyles-vs-react-native-zephyr-vs-tailwind-rn-vs-tamagui-vs-twrnc)

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["module:@react-native/babel-preset"],
+};

package/docs/api.md

@@ -0,0 +1,103 @@
+# API
+
+Also read:
+
+- [Media query](media-query.md)
+- [Orientation](orientation.md)
+- [I18n](i18n.md)
+- [react-native-safe-area-view](safe-area.md)
+- [react-native-dark-mode](dark-mode.md);
+- [Typescript](ts.md);
+- [Testing with Jest](testting.md).
+
+Use a `makeUseStyles` function to create a hook function that can be used in react components
+
+```js
+import { makeUseStyles } from "react-native-stylex";
+
+export const useStyles = makeUseStyles((theme) => ({
+  root: {
+    color: theme.palette.xColor,
+  },
+}));
+```
+
+## Using styles 🧲
+
+You can use styles in function or class components:
+
+```js
+import React, { Component } from "react";
+import { useStyles } from "./styles";
+
+// Functional component (hooks variant)
+const Root = () => {
+  const styles = useStyles();
+
+  return <View style={styles.root} />;
+};
+
+export default Root;
+
+// ----------------------------
+// Class component (HOC variant)
+class Root extends Component {
+  render() {
+    const { styles } = this.props;
+
+    return <View style={styles.row} />;
+  }
+}
+
+export default withStyles(useStyles)(Root);
+```
+
+## Theming support 🔋
+
+You need wrap you're root component with ThemeProvider and pass theme
+
+```js
+import { ThemeProvider } from "react-native-stylex";
+
+const theme = {
+  palette: {
+    textColor: "black",
+  },
+  utils: {
+    fade(color, value) {
+      /*...*/
+    },
+  },
+};
+
+const App = () => (
+  <ThemeProvider value={theme}>
+    <Root />
+  </ThemeProvider>
+);
+
+export default App;
+```
+
+Then use a `makeUseStyles` function and extract passed theme ⚡️
+
+```js
+import { makeUseStyles } from "react-native-stylex";
+import { minWidth } from "react-native-stylex/media-query";
+
+// Theme-dependent styles
+const useStyles = makeUseStyles(({ palette, utils }) => ({
+  root: {
+    color: palette.textColor,
+    ...minWidth(320, {
+      color: utils.fade(palette.textColor, 0.7),
+    }),
+  },
+}));
+
+const Root = () => {
+  const styles = useStyles();
+
+  return <View style={styles.root} />;
+};
+```

package/docs/appearance.md

@@ -0,0 +1,54 @@
+# Appearance 🕳️
+
+To start using integration with [react-native Appearance](https://reactnative.dev/docs/appearance) module, you need to use react-native [0.62.x](https://reactnative.dev/blog/2020/03/26/version-0.62#new-dark-mode-features).
+
+> ⚠️ If you need to support React Native below `0.62.x`, please see [react-native-dark-mode](docs/dark-mode.md)
+
+After that you can use special API:
+
+- `appearance({ dark, light, default })`
+- `darkAppearance(value)`
+- `lightAppearance(value)`
+- `noPreferenceAppearance(value)`
+
+`dark` - The user prefers a dark color theme.
+`light` - The user prefers a light color theme.
+`default` - The user has not indicated a preferred color theme.
+
+**Example:**
+
+```typescript jsx
+import { makeUseStyles } from "react-native-stylex";
+import {
+  appearance,
+  darkAppearance,
+  lightAppearance,
+  noPreferenceAppearance,
+} from "react-native-stylex/appearance";
+
+export default makeUseStyles(() => ({
+  root: {
+    // you can pass styles
+    ...appearance({
+      dark: { color: "#fff", backgroundColor: "#000" },
+      light: { color: "#000", backgroundColor: "#fff" },
+    }),
+
+    // or string value for property
+    backgroundColor: appearance({ dark: "#000", light: "#fff" }),
+  },
+  cell: {
+    // styles variant
+    ...lightAppearance({ color: "#000" }),
+    // specific value variant
+    backgroundColor: lightAppearance("#fff"),
+  },
+
+  row: {
+    // styles variant
+    ...darkAppearance({ color: "#000" }),
+    // specific value variant
+    backgroundColor: darkAppearance("#fff"),
+  },
+}));
+```

package/docs/dark-mode.md

@@ -0,0 +1,46 @@
+# Dark mode 🕳️
+
+> ⚠️ If you use React Native `0.62.x` and higher, please use [Appearance](docs/appearance.md)
+
+To start using integration with [react-native-dark-mode](https://github.com/codemotionapps/react-native-dark-mode) module
+
+You need just install it using [instructions](https://github.com/codemotionapps/react-native-dark-mode#installation)!
+
+After that you can use special API:
+
+- `uiMode({ dark, light })`
+- `darkUiMode(value)`
+- `lightUiMode(value)`
+
+**Example:**
+
+```typescript jsx
+import { makeUseStyles } from "react-native-stylex";
+import { uiMode, darkUiMode, lightUiMode } from "react-native-stylex/dark-mode";
+
+export const useStyles = makeUseStyles(() => ({
+  root: {
+    // you can pass styles
+    ...uiMode({
+      dark: { color: "#fff", backgroundColor: "#000" },
+      light: { color: "#000", backgroundColor: "#fff" },
+    }),
+
+    // or string value for property
+    backgroundColor: uiMode({ dark: "#000", light: "#fff" }),
+  },
+  cell: {
+    // styles variant
+    ...lightUiMode({ color: "#000" }),
+    // specific value variant
+    backgroundColor: lightUiMode("#fff"),
+  },
+
+  row: {
+    // styles variant
+    ...darkUiMode({ color: "#000" }),
+    // specific value variant
+    backgroundColor: darkUiMode("#fff"),
+  },
+}));
+```

package/docs/dimensions.md

@@ -0,0 +1,29 @@
+# Dimensions 📐
+
+Nothing special just two helper functions that use [Dimensions](https://reactnative.dev/docs/dimensions) API
+
+- `getWindowDimensions`
+- `getScreenDimensions`
+
+These functions return an object with the next properties:
+
+```ts
+width: number;
+height: number;
+scale: number;
+fontScale: number;
+```
+
+**Example:**
+
+```ts
+import { makeUseStyles } from "react-native-stylex";
+import { getWindowDimensions } from "react-native-stylex/dimensions";
+
+export const useStyles = makeUseStyles(() => ({
+  video: {
+    width: getWindowDimensions().width,
+    height: getWindowDimensions().width,
+  },
+}));
+```

package/docs/i18n.md

@@ -0,0 +1,67 @@
+# i18n 🗺
+
+We use [I18nManager](https://github.com/facebook/react-native/blob/e36247030575e93c1d7087cdb04e1498e9577056/Libraries/ReactNative/I18nManager.js) to handler correct direction
+
+**!!! ⚠️ React Native include special mechanism to revert 'left' to 'right' value [`I18nManager.swapLeftAndRightInRTL(true)`](https://reactnative.dev/blog/2017/11/06/react-native-monthly-5#facebook) ⚠️ !!!**
+
+- `i18n({ ltr, ltr })`
+- `rtl(value)`
+- `ltr(value)`
+
+It means that don't need to use this apis above for setting next values:
+
+- Position:
+  - (left|right) → (start|end)
+- Margin:
+  - margin(Left|Right) → margin(Start|End)
+- Padding:
+  - padding(Left|Right) → padding(Start|End)
+- Border:
+  - borderTop(Left|Right)Radius → borderTop(Start|End)Radius
+  - borderBottom(Left|Right)Radius → borderBottom(Start|End)Radius
+  - border(Left|Right)Width → border(Start|End)Width
+  - border(Left|Right)Color → border(Start|End)Color
+
+```js
+import { i18n } from "react-native-stylex/i18n";
+
+// ✅ Good https://reactnative.dev/blog/2017/11/06/react-native-monthly-5#facebook
+good: {
+   start: 20,
+}
+
+// ❌ Bad
+bad: {
+   ...i18n({ ltr: { left: 20 }, rtl: { right: 20 } }),
+}
+```
+
+**Example:**
+
+```js
+import { makeUseStyles } from "react-native-stylex";
+import { i18n, rtl, ltr } from "react-native-stylex/i18n";
+
+export const useStyles = makeUseStyles(() => ({
+  root: {
+    // you can pass styles
+    ...i18n({ ltr: { left: 20 }, rtl: { right: 20 } }),
+
+    // or string value for property
+    textAlign: i18n({ ltr: "left", rtl: "right" }),
+  },
+  cell: {
+    // styles variant
+    ...ltr({ left: 0 }),
+    // specific value variant
+    alignItems: ltr("flex-start"),
+  },
+
+  row: {
+    // styles variant
+    ...rtl({ right: 0 }),
+    // specific value variant
+    alignItems: rtl("flex-end"),
+  },
+}));
+```