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

package/example/AppStyleX/metro.config.js

@@ -0,0 +1,51 @@
+const path = require("path");
+
+const exclusionList = (() => {
+  try {
+    return require("metro-config/src/defaults/exclusionList");
+  } catch (_) {
+    // `blacklist` was renamed to `exclusionList` in 0.60
+    return require("metro-config/src/defaults/blacklist");
+  }
+})();
+
+const blockList = exclusionList([
+  /node_modules\/.*\/node_modules\/react-native\/.*/,
+
+  // This stops "react-native run-windows" from causing the metro server to
+  // crash if its already running
+  new RegExp(`${path.join(__dirname, "windows").replace(/[/\\]+/g, "/")}.*`),
+
+  // Workaround for `EPERM: operation not permitted, lstat '~\midl-MIDLRT-cl.read.1.tlog'`
+  /.*\.tlog/,
+
+  // Prevent Metro from watching temporary files generated by Visual Studio
+  // otherwise it may crash when they are removed when closing a project.
+  /.*\/.vs\/.*/,
+
+  // Workaround for `EBUSY: resource busy or locked, open '~\msbuild.ProjectImports.zip'`
+  /.*\.ProjectImports\.zip/,
+]);
+
+const config = {
+  resolver: {
+    blacklistRE: blockList,
+    blockList,
+  },
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+};
+
+try {
+  // Starting with react-native 0.72, we are required to provide a full config.
+  const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+  module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+} catch (_) {
+  module.exports = config;
+}

package/example/AppStyleX/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "AppStyleX",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "build:android": "mkdirp dist/res && react-native bundle --entry-file index.js --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist/res",
+    "build:ios": "mkdirp dist && react-native bundle --entry-file index.js --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist",
+    "ios": "react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "color": "^4.2.3",
+    "react": "18.2.0",
+    "react-native": "0.73.1",
+    "react-native-safe-area-context": "^4.8.1",
+    "react-native-stylex": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native/babel-preset": "^0.73.18",
+    "@react-native/eslint-config": "^0.73.1",
+    "@react-native/metro-config": "^0.73.2",
+    "@react-native/typescript-config": "^0.73.1",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "mkdirp": "^1.0.0",
+    "prettier": "2.8.8",
+    "react-native-test-app": "^2.5.34",
+    "react-test-renderer": "18.2.0",
+    "typescript": "5.0.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/example/AppStyleX/react-native.config.js

@@ -0,0 +1,23 @@
+const project = (() => {
+  try {
+    const { configureProjects } = require("react-native-test-app");
+    return configureProjects({
+      android: {
+        sourceDir: "android",
+      },
+      ios: {
+        sourceDir: "ios",
+      },
+      windows: {
+        sourceDir: "windows",
+        solutionFile: "windows/AppStyleX.sln",
+      },
+    });
+  } catch (_) {
+    return undefined;
+  }
+})();
+
+module.exports = {
+  ...(project ? { project } : undefined),
+};

package/example/AppStyleX/src/App.tsx

@@ -0,0 +1,22 @@
+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 { Root } from "./Root";
+
+export const App = () => {
+  const [theme, setTheme] = useState(lightTheme);
+  const toggleTheme = () => setTheme((currentTheme) => (currentTheme === darkTheme ? lightTheme : darkTheme));
+
+  return (
+    <SafeAreaProvider>
+      <ThemeProvider value={theme}>
+        <Root toggleTheme={toggleTheme} />
+      </ThemeProvider>
+      <StylexSaveAreaConsumer />
+    </SafeAreaProvider>
+  );
+};

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

@@ -0,0 +1,26 @@
+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 { 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)),
+  };
+
+  return (
+    <>
+      <Animated.Text style={[styles.skipBtn, skipAnimatedStyle]}>Skip</Animated.Text>
+      <Animated.View style={[styles.nextButton, bgStyle]}>
+        <Animated.Text style={[styles.nextButtonText, textStyle]}>→</Animated.Text>
+      </Animated.View>
+    </>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { Platform } from "react-native";
+import { makeUseStyles } from "react-native-stylex";
+import { getSafeArea } from "react-native-stylex/safe-area";
+
+export const useStyles = makeUseStyles(() => ({
+  skipBtn: {
+    position: "absolute",
+    left: 20,
+    bottom: 30 + getSafeArea().bottom,
+    fontSize: 20,
+  },
+  nextButton: {
+    position: "absolute",
+    right: 20,
+    bottom: 20 + getSafeArea().bottom,
+    width: 48,
+    height: 48,
+    borderRadius: 48,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4,
+  },
+  nextButtonText: {
+    textAlign: "center",
+    ...Platform.select({
+      ios: {
+        fontSize: 26,
+        lineHeight: 48,
+      },
+      android: {
+        textAlignVertical: "center",
+        fontSize: 36,
+      },
+      web: {
+        fontSize: 36,
+        lineHeight: 40,
+      },
+    }),
+  },
+}));

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

@@ -0,0 +1,53 @@
+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 { useStyles } from "./styles";
+
+const { Value, timing } = Animated;
+
+export const Circle = () => {
+  const styles = useStyles();
+  const bgStyle = useAnimatedBgColor();
+  const isDarkTheme = useIsDark();
+  const animatedCircle = useRef(new Value(0));
+  const animatedStyle = {
+    transform: [
+      {
+        translateX: animatedCircle.current.interpolate({
+          inputRange: [0, 1],
+          outputRange: [100, 0],
+        }),
+      },
+      {
+        translateY: animatedCircle.current.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-100, 0],
+        }),
+      },
+      {
+        scale: animatedCircle.current.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.01, 1],
+        }),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    timing(animatedCircle.current, {
+      useNativeDriver: false,
+      toValue: isDarkTheme ? 1 : 0,
+      duration: 250,
+    }).start();
+  }, [isDarkTheme]);
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.circle} />
+      <Animated.View style={[styles.overlay, animatedStyle, bgStyle]} />
+    </View>
+  );
+};

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

@@ -0,0 +1,22 @@
+import { makeUseStyles } from "react-native-stylex";
+
+export const useStyles = makeUseStyles(({ palette }) => ({
+  root: {
+    alignSelf: "center",
+  },
+  circle: {
+    width: 150,
+    height: 150,
+    borderRadius: 150,
+    backgroundColor: palette.accent,
+    marginBottom: 80,
+  },
+  overlay: {
+    position: "absolute",
+    right: -20,
+    top: -20,
+    width: 145,
+    height: 145,
+    borderRadius: 150,
+  },
+}));

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { Animated } from "react-native";
+
+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 { useStyles } from "./styles";
+
+interface Props {
+  toggleTheme: () => void;
+}
+
+// Concept: https://dribbble.com/shots/5846239-Light-dark-toggle-switch-InVision-Studio
+export const Root = ({ toggleTheme }: Props) => {
+  const styles = useStyles();
+  const bgStyle = useAnimatedBgColor();
+  const textStyle = useAnimatedTextColor();
+
+  return (
+    <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>
+
+      <ToggleButton onPress={toggleTheme} />
+      <BottomNav />
+    </Animated.View>
+  );
+};

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

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

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

@@ -0,0 +1,52 @@
+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 { useStyles, ROOT_WIDTH } from "./styles";
+
+const { Value, spring } = Animated;
+const HALF_ROOT_WIDTH = ROOT_WIDTH / 2;
+
+interface Props {
+  onPress: () => void;
+}
+
+export const ToggleButton = ({ onPress }: Props) => {
+  const styles = useStyles();
+  const isDark = useIsDark();
+  const bgStyle = {
+    backgroundColor: useColorTransition(({ palette }) => palette.bg),
+  };
+  const animatedOffset = useRef(new Value(0));
+  const animatedStyle = {
+    transform: [
+      {
+        translateX: animatedOffset.current.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, HALF_ROOT_WIDTH],
+        }),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    spring(animatedOffset.current, {
+      useNativeDriver: false,
+      toValue: isDark ? 1 : 0,
+    }).start();
+  }, [isDark]);
+
+  return (
+    <Pressable onPress={onPress}>
+      <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>
+        </View>
+      </View>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1,67 @@
+import { makeUseStyles } from "react-native-stylex";
+import { StyleSheet, Platform } from "react-native";
+
+export const ROOT_WIDTH = 280;
+
+export const useStyles = makeUseStyles(({ palette, utils }) => ({
+  root: {
+    marginTop: 36,
+    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),
+  },
+  activeBg: {
+    width: "50%",
+    height: "100%",
+    borderRadius: 60,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    backgroundColor: palette.bg,
+
+    shadowColor: palette.text,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+
+    elevation: 4,
+  },
+  labelsRoot: {
+    ...StyleSheet.absoluteFillObject,
+    // Hack for Android
+    elevation: 5,
+  },
+  labelText: {
+    position: "absolute",
+    height: "100%",
+    width: "50%",
+    top: 0,
+
+    fontSize: 20,
+    fontWeight: "700",
+    color: utils.fade(palette.text, 0.5),
+    textAlign: "center",
+    ...Platform.select({
+      web: {
+        lineHeight: 60,
+      },
+      default: {
+        lineHeight: 55,
+      },
+    }),
+  },
+  lightLabelText: {
+    left: 0,
+  },
+  darkLabelText: {
+    right: 0,
+  },
+  activeLabelText: {
+    color: palette.text,
+  },
+}));

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { lightPalette, darkPalette } from "./palette";
+import { utils } from "./utils";
+
+export const lightTheme = {
+  palette: lightPalette,
+  utils,
+};
+
+export type Theme = typeof lightTheme;
+
+export const darkTheme: Theme = {
+  palette: darkPalette,
+  utils,
+};

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

@@ -0,0 +1,8 @@
+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(),
+};

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

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

package/example/AppStyleX/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json"
+}