react-native-boxes 1.2.12 → 1.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-boxes",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "description": "A react native library for rapid development of UI using boxes",
   "main": "src/index.js",
   "scripts": {
@@ -23,15 +23,14 @@
     "url": "https://github.com/shiveshnavin/react-native-boxes/issues"
   },
   "homepage": "https://github.com/shiveshnavin/react-native-boxes#readme",
-  "dependencies": {},
   "devDependencies": {
     "@expo/vector-icons": "^13.0.0",
-    "react": "^18.2.0",
-    "react-native": "^0.73.6",
-    "react-native-safe-area-context": "^4.9.0",
     "@tsconfig/react-native": "^3.0.4",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.71",
+    "react": "^18.2.0",
+    "react-native": "^0.73.6",
+    "react-native-safe-area-context": "^4.9.0",
     "typescript": "^5.4.3"
   }
 }

package/sample-app/App.tsx

@@ -0,0 +1,24 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { DemoScreen, Theme, ThemeContext } from './react-native-boxes'
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+2
+export default function App() {
+  const theme = new Theme()
+  return (
+    <ThemeContext.Provider value={theme}>
+      <SafeAreaProvider>
+        <DemoScreen />
+      </SafeAreaProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/sample-app/Styles.tsx

@@ -0,0 +1,127 @@
+import { StyleSheet } from "react-native";
+
+export const Dimens = {
+    space: {
+        xs: 1,
+        sm: 5,
+        md: 10,
+        lg: 20,
+        xl: 50,
+    },
+    font: {
+        sm: 12,
+        md: 14,
+        lg: 16,
+        xl: 24,
+    },
+    icon: {
+        sm: 12,
+        md: 20,
+        lg: 30,
+        xl: 50,
+        xxl: 80,
+    }
+}
+
+export const Fonts = {
+    Regular: 'Regular',
+    Bold: 'Bold',
+    Styled: 'Styled',
+}
+
+export const Colors = {
+    accent: '#1976D2',
+    accentLight: '#2196F3',
+    text: '#444444',
+    caption: '#A9A9A9',
+    heading: '#222222',
+    background: '#E6E6E6',
+    forground: '#fff',
+    transparent: 'transparent',
+    semitransparent: '#111a1a1c',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFA726',
+    critical: '#F44336',
+    invert: {
+        text: '#fff',
+        caption: '#fff',
+        heading: '#fff',
+        background: '#1a1a1c'
+    }
+}
+
+export const LightColors = Colors
+
+export const DarkColors = {
+    accent: '#1976D2',
+    accentLight: '#2196F3',
+    text: '#f2f2f2',
+    caption: '#565656',
+    heading: '#dddddd',
+    background: '#212121',
+    forground: '#191919',
+    transparent: 'transparent',
+    semitransparent: '#111a1a1c',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFA726',
+    critical: '#F44336',
+    invert: {
+        text: '#fff',
+        caption: '#fff',
+        heading: '#fff',
+        background: '#E6E6E6'
+    }
+}
+
+export function extendValues(
+    dimens: typeof Dimens,
+    colors: typeof Colors,
+    fonts: typeof Fonts): {
+        dimens: typeof Dimens,
+        colors: typeof Colors,
+        fonts: typeof Fonts
+    } {
+    return {
+        dimens: Object.assign(dimens || {}, Dimens),
+        colors: Object.assign(colors || {}, Colors),
+        fonts: Object.assign(fonts || {}, Fonts),
+    }
+}
+
+export function createStyle(
+    dimens: typeof Dimens,
+    colors: typeof Colors,
+    fonts: typeof Fonts) {
+
+    const Styles = StyleSheet.create({
+        safeAreaInset: {
+            top: dimens.space.md,
+            left: 0,
+            right: 0,
+            bottom: dimens.space.md,
+        },
+        full: {
+            height: '100%',
+            width: '100%'
+        },
+        container: {
+            marginTop: dimens.space.xl,
+            backgroundColor: colors.background,
+        },
+        center: {
+            alignContent: 'center',
+            justifyContent: 'center'
+        },
+        textHead: {
+            color: colors.text,
+            fontSize: dimens.font.xl,
+        },
+        text: {
+            fontFamily: fonts.Regular,
+            fontSize: dimens.font.md,
+        }
+    });
+    return Styles
+}

package/sample-app/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "sample-app",
+    "slug": "sample-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/sample-app/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package/sample-app/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "sample-app",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~3.1.3",
+    "@expo/vector-icons": "^13.0.0",
+    "expo": "~50.0.14",
+    "expo-status-bar": "~1.11.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-web": "~0.19.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

package/sample-app/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}