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

package/.eslintrc.js

@@ -1,10 +1,6 @@
 module.exports = {
   parser: "@typescript-eslint/parser",
-  extends: [
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-  ],
+  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: "module",

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/example/AppStyleX/app.json

@@ -8,21 +8,9 @@
     }
   ],
   "resources": {
-    "android": [
-      "dist/res",
-      "dist/main.android.jsbundle"
-    ],
-    "ios": [
-      "dist/assets",
-      "dist/main.ios.jsbundle"
-    ],
-    "macos": [
-      "dist/assets",
-      "dist/main.macos.jsbundle"
-    ],
-    "windows": [
-      "dist/assets",
-      "dist/main.windows.bundle"
-    ]
+    "android": ["dist/res", "dist/main.android.jsbundle"],
+    "ios": ["dist/assets", "dist/main.ios.jsbundle"],
+    "macos": ["dist/assets", "dist/main.macos.jsbundle"],
+    "windows": ["dist/assets", "dist/main.windows.bundle"]
   }
 }

package/example/AppStyleX/babel.config.js

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

package/example/AppStyleX/index.js

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {App} from './src/App';
-import {name as appName} from './app.json';
+import { AppRegistry } from "react-native";
+import { App } from "./src/App";
+import { name as appName } from "./app.json";
 
 AppRegistry.registerComponent(appName, () => App);

package/example/AppStyleX/metro.config.js

@@ -44,10 +44,7 @@ const config = {
 
 try {
   // Starting with react-native 0.72, we are required to provide a full config.
-  const {
-    getDefaultConfig,
-    mergeConfig,
-  } = require("@react-native/metro-config");
+  const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
   module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 } catch (_) {
   module.exports = config;

package/example/AppStyleX/src/App.tsx

@@ -1,18 +1,15 @@
-import React, {useState} from 'react';
-import {ThemeProvider} from 'react-native-stylex';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
-import {StylexSaveAreaConsumer} from 'react-native-stylex/safe-area';
+import React, { useState } from "react";
+import { ThemeProvider } from "react-native-stylex";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StylexSaveAreaConsumer } from "react-native-stylex/safe-area";
 
-import {darkTheme, lightTheme} from './style-system/theme';
+import { darkTheme, lightTheme } from "./style-system/theme";
 
-import {Root} from './Root';
+import { Root } from "./Root";
 
 export const App = () => {
   const [theme, setTheme] = useState(lightTheme);
-  const toggleTheme = () =>
-    setTheme((currentTheme) =>
-      currentTheme === darkTheme ? lightTheme : darkTheme,
-    );
+  const toggleTheme = () => setTheme((currentTheme) => (currentTheme === darkTheme ? lightTheme : darkTheme));
 
   return (
     <SafeAreaProvider>

package/example/AppStyleX/src/BottomNav/index.tsx

@@ -1,31 +1,25 @@
-import React from 'react';
-import {Animated} from 'react-native';
-import {useColorTransition} from 'react-native-stylex';
+import React from "react";
+import { Animated } from "react-native";
+import { useColorTransition } from "react-native-stylex";
 
-import {useAnimatedBgColor} from '../style-system/hooks/useAnimatedBgColor';
-import {useAnimatedTextColor} from '../style-system/hooks/useAnimatedTextColor';
+import { useAnimatedBgColor } from "../style-system/hooks/useAnimatedBgColor";
+import { useAnimatedTextColor } from "../style-system/hooks/useAnimatedTextColor";
 
-import {useStyles} from './styles';
+import { useStyles } from "./styles";
 
 export const BottomNav = () => {
   const styles = useStyles();
   const bgStyle = useAnimatedBgColor();
   const textStyle = useAnimatedTextColor();
   const skipAnimatedStyle = {
-    color: useColorTransition(({palette, utils}) =>
-      utils.fade(palette.text, 0.5),
-    ),
+    color: useColorTransition(({ palette, utils }) => utils.fade(palette.text, 0.5)),
   };
 
   return (
     <>
-      <Animated.Text style={[styles.skipBtn, skipAnimatedStyle]}>
-        Skip
-      </Animated.Text>
+      <Animated.Text style={[styles.skipBtn, skipAnimatedStyle]}>Skip</Animated.Text>
       <Animated.View style={[styles.nextButton, bgStyle]}>
-        <Animated.Text style={[styles.nextButtonText, textStyle]}>
-          →
-        </Animated.Text>
+        <Animated.Text style={[styles.nextButtonText, textStyle]}>→</Animated.Text>
       </Animated.View>
     </>
   );

package/example/AppStyleX/src/Circle/index.tsx

@@ -1,12 +1,12 @@
-import React, {useEffect, useRef} from 'react';
-import {Animated, View} from 'react-native';
+import React, { useEffect, useRef } from "react";
+import { Animated, View } from "react-native";
 
-import {useIsDark} from '../style-system/hooks/useIsDark';
-import {useAnimatedBgColor} from '../style-system/hooks/useAnimatedBgColor';
+import { useIsDark } from "../style-system/hooks/useIsDark";
+import { useAnimatedBgColor } from "../style-system/hooks/useAnimatedBgColor";
 
-import {useStyles} from './styles';
+import { useStyles } from "./styles";
 
-const {Value, timing} = Animated;
+const { Value, timing } = Animated;
 
 export const Circle = () => {
   const styles = useStyles();

package/example/AppStyleX/src/Circle/styles.ts

@@ -1,8 +1,8 @@
-import {makeUseStyles} from 'react-native-stylex';
+import { makeUseStyles } from "react-native-stylex";
 
-export const useStyles = makeUseStyles(({palette}) => ({
+export const useStyles = makeUseStyles(({ palette }) => ({
   root: {
-    alignSelf: 'center',
+    alignSelf: "center",
   },
   circle: {
     width: 150,
@@ -12,7 +12,7 @@ export const useStyles = makeUseStyles(({palette}) => ({
     marginBottom: 80,
   },
   overlay: {
-    position: 'absolute',
+    position: "absolute",
     right: -20,
     top: -20,
     width: 145,

package/example/AppStyleX/src/Root/index.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import {Animated} from 'react-native';
+import React from "react";
+import { Animated } from "react-native";
 
-import {useAnimatedBgColor} from '../style-system/hooks/useAnimatedBgColor';
-import {useAnimatedTextColor} from '../style-system/hooks/useAnimatedTextColor';
+import { useAnimatedBgColor } from "../style-system/hooks/useAnimatedBgColor";
+import { useAnimatedTextColor } from "../style-system/hooks/useAnimatedTextColor";
 
-import {ToggleButton} from '../ToggleButton';
-import {BottomNav} from '../BottomNav';
-import {Circle} from '../Circle';
+import { ToggleButton } from "../ToggleButton";
+import { BottomNav } from "../BottomNav";
+import { Circle } from "../Circle";
 
-import {useStyles} from './styles';
+import { useStyles } from "./styles";
 
 interface Props {
   toggleTheme: () => void;
 }
 
 // Concept: https://dribbble.com/shots/5846239-Light-dark-toggle-switch-InVision-Studio
-export const Root = ({toggleTheme}: Props) => {
+export const Root = ({ toggleTheme }: Props) => {
   const styles = useStyles();
   const bgStyle = useAnimatedBgColor();
   const textStyle = useAnimatedTextColor();
@@ -24,15 +24,9 @@ export const Root = ({toggleTheme}: Props) => {
     <Animated.View style={[styles.root, bgStyle]}>
       <Circle />
 
-      <Animated.Text style={[styles.title, textStyle]}>
-        Choose a style
-      </Animated.Text>
-      <Animated.Text style={[styles.text, textStyle]}>
-        Pop or subtle. Day or night.
-      </Animated.Text>
-      <Animated.Text style={[styles.text, textStyle]}>
-        Customize your interface.
-      </Animated.Text>
+      <Animated.Text style={[styles.title, textStyle]}>Choose a style</Animated.Text>
+      <Animated.Text style={[styles.text, textStyle]}>Pop or subtle. Day or night.</Animated.Text>
+      <Animated.Text style={[styles.text, textStyle]}>Customize your interface.</Animated.Text>
 
       <ToggleButton onPress={toggleTheme} />
       <BottomNav />

package/example/AppStyleX/src/Root/styles.ts

@@ -1,18 +1,18 @@
-import {makeUseStyles} from 'react-native-stylex';
+import { makeUseStyles } from "react-native-stylex";
 
 export const useStyles = makeUseStyles(() => ({
   root: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   title: {
-    textAlign: 'center',
+    textAlign: "center",
     fontSize: 26,
-    fontWeight: '600',
+    fontWeight: "600",
     marginBottom: 16,
   },
   text: {
-    textAlign: 'center',
+    textAlign: "center",
     fontSize: 20,
   },
 }));

package/example/AppStyleX/src/ToggleButton/index.tsx

@@ -1,23 +1,23 @@
-import React, {useEffect, useRef} from 'react';
-import {Animated, View, Pressable, Text} from 'react-native';
-import {useColorTransition} from 'react-native-stylex';
+import React, { useEffect, useRef } from "react";
+import { Animated, View, Pressable, Text } from "react-native";
+import { useColorTransition } from "react-native-stylex";
 
-import {useIsDark} from '../style-system/hooks/useIsDark';
+import { useIsDark } from "../style-system/hooks/useIsDark";
 
-import {useStyles, ROOT_WIDTH} from './styles';
+import { useStyles, ROOT_WIDTH } from "./styles";
 
-const {Value, spring} = Animated;
+const { Value, spring } = Animated;
 const HALF_ROOT_WIDTH = ROOT_WIDTH / 2;
 
 interface Props {
   onPress: () => void;
 }
 
-export const ToggleButton = ({onPress}: Props) => {
+export const ToggleButton = ({ onPress }: Props) => {
   const styles = useStyles();
   const isDark = useIsDark();
   const bgStyle = {
-    backgroundColor: useColorTransition(({palette}) => palette.bg),
+    backgroundColor: useColorTransition(({ palette }) => palette.bg),
   };
   const animatedOffset = useRef(new Value(0));
   const animatedStyle = {
@@ -43,22 +43,8 @@ export const ToggleButton = ({onPress}: Props) => {
       <View style={styles.root}>
         <Animated.View style={[styles.activeBg, animatedStyle, bgStyle]} />
         <View style={styles.labelsRoot}>
-          <Text
-            style={[
-              styles.labelText,
-              styles.lightLabelText,
-              !isDark && styles.activeLabelText,
-            ]}>
-            Light
-          </Text>
-          <Text
-            style={[
-              styles.labelText,
-              styles.darkLabelText,
-              isDark && styles.activeLabelText,
-            ]}>
-            Dark
-          </Text>
+          <Text style={[styles.labelText, styles.lightLabelText, !isDark && styles.activeLabelText]}>Light</Text>
+          <Text style={[styles.labelText, styles.darkLabelText, isDark && styles.activeLabelText]}>Dark</Text>
         </View>
       </View>
     </Pressable>

package/example/AppStyleX/src/ToggleButton/styles.ts

@@ -1,24 +1,22 @@
-import {makeUseStyles} from 'react-native-stylex';
-import {StyleSheet, Platform} from 'react-native';
+import { makeUseStyles } from "react-native-stylex";
+import { StyleSheet, Platform } from "react-native";
 
 export const ROOT_WIDTH = 280;
 
-export const useStyles = makeUseStyles(({palette, utils}) => ({
+export const useStyles = makeUseStyles(({ palette, utils }) => ({
   root: {
     marginTop: 36,
-    alignSelf: 'center',
+    alignSelf: "center",
     height: 60,
     borderRadius: 60,
     width: ROOT_WIDTH,
-    backgroundColor: utils.isDark(palette.bg)
-      ? utils.lighten(palette.bg, 0.3)
-      : utils.darken(palette.bg, 0.3),
+    backgroundColor: utils.isDark(palette.bg) ? utils.lighten(palette.bg, 0.3) : utils.darken(palette.bg, 0.3),
   },
   activeBg: {
-    width: '50%',
-    height: '100%',
+    width: "50%",
+    height: "100%",
     borderRadius: 60,
-    position: 'absolute',
+    position: "absolute",
     top: 0,
     left: 0,
     backgroundColor: palette.bg,
@@ -39,15 +37,15 @@ export const useStyles = makeUseStyles(({palette, utils}) => ({
     elevation: 5,
   },
   labelText: {
-    position: 'absolute',
-    height: '100%',
-    width: '50%',
+    position: "absolute",
+    height: "100%",
+    width: "50%",
     top: 0,
 
     fontSize: 20,
-    fontWeight: '700',
+    fontWeight: "700",
     color: utils.fade(palette.text, 0.5),
-    textAlign: 'center',
+    textAlign: "center",
     ...Platform.select({
       web: {
         lineHeight: 60,

package/example/AppStyleX/src/style-system/hooks/useAnimatedBgColor.ts

@@ -1,5 +1,5 @@
-import {useColorTransition} from 'react-native-stylex';
+import { useColorTransition } from "react-native-stylex";
 
 export const useAnimatedBgColor = () => ({
-  backgroundColor: useColorTransition(({palette}) => palette.bg),
+  backgroundColor: useColorTransition(({ palette }) => palette.bg),
 });

package/example/AppStyleX/src/style-system/hooks/useAnimatedTextColor.ts

@@ -1,5 +1,5 @@
-import {useColorTransition} from 'react-native-stylex';
+import { useColorTransition } from "react-native-stylex";
 
 export const useAnimatedTextColor = () => ({
-  color: useColorTransition(({palette}) => palette.text),
+  color: useColorTransition(({ palette }) => palette.text),
 });

package/example/AppStyleX/src/style-system/hooks/useIsDark.ts

@@ -1,5 +1,5 @@
-import {useTheme} from 'react-native-stylex';
-import {darkTheme} from '../theme';
+import { useTheme } from "react-native-stylex";
+import { darkTheme } from "../theme";
 
 export const useIsDark = (): boolean => {
   const theme = useTheme();

package/example/AppStyleX/src/style-system/palette.ts

@@ -1,11 +1,11 @@
 export const lightPalette = {
-  text: '#000',
-  bg: '#fff',
-  accent: '#ff643d',
+  text: "#000",
+  bg: "#fff",
+  accent: "#ff643d",
 };
 
 export const darkPalette = {
-  text: '#fff',
-  bg: '#262431',
-  accent: '#8d8aff',
+  text: "#fff",
+  bg: "#262431",
+  accent: "#8d8aff",
 };

package/example/AppStyleX/src/style-system/theme.ts

@@ -1,5 +1,5 @@
-import {lightPalette, darkPalette} from './palette';
-import {utils} from './utils';
+import { lightPalette, darkPalette } from "./palette";
+import { utils } from "./utils";
 
 export const lightTheme = {
   palette: lightPalette,

package/example/AppStyleX/src/style-system/utils.ts

@@ -1,11 +1,8 @@
-import Color from 'color';
+import Color from "color";
 
 export const utils = {
   isDark: (color: string): boolean => Color(color).isDark(),
-  fade: (color: string, alpha: number): string =>
-    Color(color).alpha(alpha).string(),
-  lighten: (color: string, val: number): string =>
-    Color(color).lighten(val).string(),
-  darken: (color: string, val: number): string =>
-    Color(color).darken(val).string(),
+  fade: (color: string, alpha: number): string => Color(color).alpha(alpha).string(),
+  lighten: (color: string, val: number): string => Color(color).lighten(val).string(),
+  darken: (color: string, val: number): string => Color(color).darken(val).string(),
 };

package/example/AppStyleX/src/stylex.d.ts

@@ -1,6 +1,6 @@
-import 'react-native-stylex';
-import type {Theme} from './style-system/theme';
+import "react-native-stylex";
+import type { Theme } from "./style-system/theme";
 
-declare module 'react-native-stylex' {
+declare module "react-native-stylex" {
   export interface DefaultTheme extends Theme {}
 }

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@codeandmoney/soelma",
-  "publishConfig": {"access": "public"},
-  "version": "0.0.0-dev.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0-dev.10",
   "private": false,
   "main": "index.js",
   "types": "index.d.ts",
@@ -10,9 +12,10 @@
   "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}",
+    "build": "tsc -p ./tsconfig.build.json",
+    "postbuild": "mkdir -p lib/make-use-styles && cp src/make-use-styles/* lib/make-use-styles && 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",
+    "pub": "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",
@@ -34,10 +37,11 @@
     }
   },
   "devDependencies": {
+    "@react-native/babel-preset": "^0.83.0",
     "@size-limit/preset-app": "^11.0.1",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.45",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "clean-publish": "^4.2.0",
@@ -47,12 +51,12 @@
     "eslint-plugin-react": "^7.33.2",
     "jest": "^29.7.0",
     "prettier": "^3.1.1",
-    "react": "^18.2.0",
-    "react-native": "^0.73.0",
+    "react": "^19.2.3",
+    "react-native": "^0.83.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",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-test-app": "^5.0.5",
+    "react-test-renderer": "^19.2.3",
     "size-limit": "^11.0.1",
     "typescript": "^5.3.3"
   }

package/src/appearance/index.ts

@@ -2,17 +2,13 @@ import "./init";
 
 import { Appearance } from "react-native";
 
-import { onUse } from "../dependencyUsage";
+import { onUse } from "../dependency-usage";
 
 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 {
+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.
@@ -27,11 +23,8 @@ export function appearance<T>({
   return defaultScheme;
 }
 
-export const darkAppearance = <T>(dark: T): T | undefined =>
-  appearance<T>({ dark });
+export const darkAppearance = <T>(dark: T): T | undefined => appearance<T>({ dark });
 
-export const lightAppearance = <T>(light: T): T | undefined =>
-  appearance<T>({ light });
+export const lightAppearance = <T>(light: T): T | undefined => appearance<T>({ light });
 
-export const noPreferenceAppearance = <T>(defaultScheme: T): T | undefined =>
-  appearance<T>({ default: defaultScheme });
+export const noPreferenceAppearance = <T>(defaultScheme: T): T | undefined => appearance<T>({ default: defaultScheme });

package/src/appearance/init.ts

@@ -1,7 +1,7 @@
 import { Appearance } from "react-native";
 
-import { addDependency } from "../dependencyRegistry";
-import { createEventEmitter } from "../createEventEmitter";
+import { addDependency } from "../dependency-registry";
+import { createEventEmitter } from "../create-event-emitter";
 
 import { UI_MODE_DEPENDENCY_KEY } from "./consts";
 

package/src/context.ts

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