@codeandmoney/soelma 0.0.0-dev.0

package/example/AppStyleX/metro.config.js

@@ -0,0 +1,54 @@
+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,25 @@
+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,32 @@
+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,41 @@
+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,66 @@
+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,69 @@
+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,11 @@
+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"
+}