Merge pull request #108 from TRA-Tech/example-project

docs: add example project

.yarnrc

@@ -0,0 +1 @@
+yarn-path "scripts/bootstrap.js"

example/.gitignore

@@ -0,0 +1,76 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @generated expo-cli sync-b5df6a44d8735348b729920a7406b633cfb74d4c
+# The following patterns were generated by expo-cli
+
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+# @end expo-cli

example/App.js

@@ -0,0 +1,110 @@
+import React, { useEffect } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as SplashScreen from 'expo-splash-screen';
+import * as Font from 'expo-font';
+import { KitraProvider } from '@tra-tech/react-native-kitra';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Home from './src/screens/Home';
+import TextInputScreen from './src/screens/TextInput';
+import CheckBoxScreen from './src/screens/CheckBox';
+import ButtonScreen from './src/screens/Button';
+import ProgressBarScreen from './src/screens/ProgressBar';
+import BadgeScreen from './src/screens/Badge';
+import IconButtonScreen from './src/screens/IconButton';
+import AccordionListScreen from './src/screens/AccordionList';
+import RadioButtonScreen from './src/screens/RadioButton';
+import ToggleButtonScreen from './src/screens/ToggleButton';
+import MenuScreen from './src/screens/Menu';
+import DropdownScreen from './src/screens/Dropdown';
+import SwipeScreen from './src/screens/Swipe';
+import DividerScreen from './src/screens/Divider';
+import SpeedDialScreen from './src/screens/SpeedDial';
+import AvatarScreen from './src/screens/Avatar';
+import AvatarGroupScreen from './src/screens/AvatarGroup';
+import ChipScreen from './src/screens/Chip';
+import SearchBarScreen from './src/screens/SearchBar';
+import SwitchScreen from './src/screens/Switch';
+import SliderScreen from './src/screens/Slider';
+import ModalScreen from './src/screens/Modal';
+import PagerViewScreen from './src/screens/PagerView';
+import ActivityIndicatorScreen from './src/screens/ActivityIndicator';
+import IconScreen from './src/screens/Icon';
+
+// Import your screens here
+// ...
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  const [isReady, setIsReady] = React.useState(false);
+
+  useEffect(() => {
+    const prepareResources = async () => {
+      try {
+        await SplashScreen.preventAutoHideAsync();
+        await loadFonts();
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        setIsReady(true);
+        SplashScreen.hideAsync();
+      }
+    };
+
+    prepareResources();
+  }, []);
+
+  const loadFonts = async () => {
+    await Font.loadAsync({
+      Poppins: require('./assets/fonts/Poppins-Black.ttf'),
+      'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
+      'Poppins-ExtraBold': require('./assets/fonts/Poppins-ExtraBold.ttf'),
+      'Poppins-ExtraLight': require('./assets/fonts/Poppins-ExtraLight.ttf'),
+      'Poppins-Light': require('./assets/fonts/Poppins-Light.ttf'),
+      'Poppins-Medium': require('./assets/fonts/Poppins-Medium.ttf'),
+      'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
+      'Poppins-SemiBold': require('./assets/fonts/Poppins-SemiBold.ttf'),
+      'Poppins-Thin': require('./assets/fonts/Poppins-Thin.ttf'),
+    });
+  };
+
+  if (!isReady) {
+    return null;
+  }
+
+  return (
+    <SafeAreaView edges={['bottom']} style={{ flex: 1 }}>
+      <KitraProvider>
+        <NavigationContainer>
+          <Stack.Navigator>
+            <Stack.Screen name="Home" component={Home} />
+            <Stack.Screen name="TextInput" component={TextInputScreen} />
+            <Stack.Screen name="CheckBox" component={CheckBoxScreen} />
+            <Stack.Screen name="ProgressBar" component={ProgressBarScreen} />
+            <Stack.Screen name="Badge" component={BadgeScreen} />
+            <Stack.Screen name="IconButton" component={IconButtonScreen} />
+            <Stack.Screen name="AccordionList" component={AccordionListScreen} />
+            <Stack.Screen name="RadioButton" component={RadioButtonScreen} />
+            <Stack.Screen name="ToggleButton" component={ToggleButtonScreen} />
+            <Stack.Screen name="Menu" component={MenuScreen} />
+            <Stack.Screen name="Dropdown" component={DropdownScreen} />
+            <Stack.Screen name="Swipe" component={SwipeScreen} />
+            <Stack.Screen name="Divider" component={DividerScreen} />
+            <Stack.Screen name="SpeedDial" component={SpeedDialScreen} />
+            <Stack.Screen name="Avatar" component={AvatarScreen} />
+            <Stack.Screen name="AvatarGroup" component={AvatarGroupScreen} />
+            <Stack.Screen name="Chip" component={ChipScreen} />
+            <Stack.Screen name="SearchBar" component={SearchBarScreen} />
+            <Stack.Screen name="Switch" component={SwitchScreen} />
+            <Stack.Screen name="Slider" component={SliderScreen} />
+            <Stack.Screen name="Modal" component={ModalScreen} />
+            <Stack.Screen name="PagerView" component={PagerViewScreen} />
+            <Stack.Screen name="ActivityIndicator" component={ActivityIndicatorScreen} />
+            <Stack.Screen name="Icon" component={IconScreen} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </KitraProvider>
+    </SafeAreaView>
+  );
+}

example/app.json

@@ -0,0 +1,36 @@
+{
+  "expo": {
+    "name": "kitra-example",
+    "slug": "kitra-example",
+    "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,
+      "bundleIdentifier": "com.tratechkitra.kitraexample"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.tratechkitra.kitraexample"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "runtimeVersion": {
+      "policy": "sdkVersion"
+    }
+
+  }
+}

example/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

example/metro.config.js

@@ -0,0 +1,39 @@
+const { getDefaultConfig } = require('@expo/metro-config');
+const escape = require('escape-string-regexp');
+const blacklist = require('metro-config/src/defaults/exclusionList');
+const path = require('path');
+
+const pak = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+const modules = [
+  '@expo/vector-icons',
+  'expo-modules-core',
+  ...Object.keys(pak.peerDependencies),
+];
+
+module.exports = {
+  ...defaultConfig,
+
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  resolver: {
+    ...defaultConfig.resolver,
+    blacklistRE: blacklist(
+      modules.map(
+        m =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
+      ),
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+
+};

example/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "kitra-example",
+  "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/config": "~8.1.1",
+    "@expo/metro-config": "^0.10.0",
+    "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
+    "@shopify/flash-list": "1.4.3",
+    "expo": "~49.0.21",
+    "expo-font": "~11.4.0",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-pager-view": "6.2.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

example/src/components/Divider.jsx

@@ -0,0 +1,20 @@
+import { View } from "react-native"
+import Text from "./Text"
+import { useTheme } from "@tra-tech/react-native-kitra"
+
+const Divider = ({ label ,style,header}) => {
+    const {theme}= useTheme()
+    if (label)
+        return (
+            <View style={[{ flexDirection: 'row', alignItems: 'center', columnGap: 10, marginTop: 30, marginBottom: 15 },style]}>
+                <View style={{ flex: 0.05, height: 1, backgroundColor: "lightgray" }} />
+                <Text style={{ fontSize:header?16: 11,fontWeight:header?'900':'500', color:theme.primary}} >{label}</Text>
+                <View style={{ flex: 1, height: 1, backgroundColor: "lightgray" }} />
+            </View>
+        )
+    return (
+        <View style={[{ width: "100%", height: 1, backgroundColor: "lightgray" },style]} />
+    )
+}
+
+export default Divider;

example/src/components/Layout.jsx

@@ -0,0 +1,19 @@
+import { ScrollView, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const Layout = ({ children, scroll, style }) => {
+    const insets=useSafeAreaInsets();
+    return(
+    scroll ? <ScrollView bounces={false} contentContainerStyle={{paddingBottom:insets.bottom+40}} style={[styles.container]}>{children}</ScrollView> : <View style={[styles.container, style]}>{children}</View>
+)}
+
+export default Layout;
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 20,
+        flex: 1,
+        backgroundColor:'red',
+        backgroundColor: "#fff"
+    }
+})

example/src/components/Text.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text as RNText, StyleSheet } from 'react-native';
+
+const Text = (props) => (
+  <RNText {...props} style={[styles.text, props.style]}>
+    {props.children}
+  </RNText>
+);
+
+const styles = StyleSheet.create({
+  text: {
+    fontFamily: 'Poppins-Light'
+  },
+});
+export default Text;