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

package/.eslintignore

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

package/.eslintrc.js

@@ -0,0 +1,27 @@
+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/babel.config.js

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

package/biome.jsonc

@@ -0,0 +1,73 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "maxSize": 1001048576
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 160,
+    "includes": ["**", "!**/*/routeTree.gen.ts"],
+    "formatWithErrors": true
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noVoid": "off",
+        "noArguments": "error",
+        "noBannedTypes": "error",
+        "noCommaOperator": "error",
+        "noEmptyTypeParameters": "error",
+        "noExtraBooleanCast": "off",
+        "noFlatMapIdentity": "error",
+        "noForEach": "error",
+        "noImplicitCoercions": "error",
+        "noStaticOnlyClass": "error",
+        "noUselessCatch": "error",
+        "noUselessConstructor": "error",
+        "noUselessContinue": "error",
+        "noUselessFragments": "error",
+        "noUselessLabel": "error",
+        "useArrowFunction": "off",
+        "useOptionalChain": "error",
+        "useSimpleNumberKeys": "error",
+        "useWhile": "error"
+      },
+      "suspicious": {
+        "noVar": "error",
+        "useAwait": "error",
+        "useDefaultSwitchClauseLast": "error"
+      },
+      "correctness": {
+        "noUnusedVariables": "off",
+        "noVoidTypeReturn": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

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