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

package/example/AppStyleX/metro.config.js

@@ -1,54 +0,0 @@
-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

@@ -1,43 +0,0 @@
-{
-  "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

@@ -1,23 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

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

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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