Merge pull request #3106 from abpframework/feat/react-native/create-t…

…emplate

Created react-native app template

templates/app/react-native/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "parser": "babel-eslint",
+  "env": {
+    "jest": true
+  },
+  "rules": {
+    "no-use-before-define": 0,
+    "react/jsx-filename-extension": 0,
+    "react/prop-types": ["error", { "ignore": ["navigation", "children"] }],
+    "react/require-default-props": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/forbid-prop-types": 0,
+    "import/prefer-default-export": 0,
+    "comma-dangle": 0,
+    "no-underscore-dangle": 1,
+    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
+    "no-param-reassign": 0,
+    "operator-linebreak": 0,
+    "global-require": 0
+  },
+  "globals": {
+    "fetch": false
+  }
+}

templates/app/react-native/.gitignore

@@ -0,0 +1,14 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store

templates/app/react-native/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "semi": true,
+  "jsxBracketSameLine": true
+}

templates/app/react-native/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
+}

templates/app/react-native/App.js

@@ -0,0 +1,25 @@
+import { StyleProvider } from 'native-base';
+import React from 'react';
+import { enableScreens } from 'react-native-screens';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import AppContainer from './src/components/AppContainer/AppContainer';
+import { store, persistor } from './src/store';
+import getTheme from './src/theme/components';
+import { activeTheme } from './src/theme/variables';
+import { initAPIInterceptor } from './src/interceptors/APIInterceptor';
+
+enableScreens();
+initAPIInterceptor(store);
+
+export default function App() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <StyleProvider style={getTheme(activeTheme)}>
+          <AppContainer />
+        </StyleProvider>
+      </PersistGate>
+    </Provider>
+  );
+}

templates/app/react-native/Environment.js

@@ -0,0 +1,31 @@
+const ENV = {
+  dev: {
+    apiUrl: 'http://localhost:44305',
+    oAuthConfig: {
+      issuer: 'http://localhost:44305',
+      clientId: 'MyProjectName_App',
+      clientSecret: '1q2w3e*',
+      scope: 'MyProjectName',
+    },
+    localization: {
+      defaultResourceName: 'MyProjectName',
+    },
+  },
+  prod: {
+    apiUrl: 'http://localhost:44305',
+    oAuthConfig: {
+      issuer: 'http://localhost:44305',
+      clientId: 'MyProjectName_App',
+      clientSecret: '1q2w3e*',
+      scope: 'MyProjectName',
+    },
+    localization: {
+      defaultResourceName: 'MyProjectName',
+    },
+  },
+};
+
+export const getEnvVars = () => {
+  // eslint-disable-next-line no-undef
+  return __DEV__ ? ENV.dev : ENV.prod;
+};

templates/app/react-native/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "MyProjectName",
+    "slug": "MyProjectName",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": ["ios", "android", "web"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "cover",
+      "backgroundColor": "#38003c"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.MyCompanyName.MyProjectName",
+      "buildNumber": "1.0.0"
+    },
+    "android": {
+      "package": "com.MyCompanyName.MyProjectName",
+      "versionCode": 1
+    }
+  }
+}

templates/app/react-native/babel.config.js

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

templates/app/react-native/package.json

@@ -0,0 +1,62 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject",
+    "lint": "eslint *.js **/*.js",
+    "lint:fix": "yarn lint --fix"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^10.0.6",
+    "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/drawer": "^5.1.1",
+    "@react-navigation/native": "^5.0.9",
+    "@react-navigation/stack": "^5.1.1",
+    "@reduxjs/toolkit": "^1.2.3",
+    "axios": "^0.19.2",
+    "color": "^3.1.2",
+    "expo": "~36.0.0",
+    "expo-constants": "~8.0.0",
+    "expo-font": "~8.0.0",
+    "formik": "^2.1.2",
+    "i18n-js": "^3.5.1",
+    "lodash": "^4.17.15",
+    "native-base": "^2.13.8",
+    "prop-types": "^15.7.2",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-safe-area-view": "^1.0.0",
+    "react-native-screens": "2.0.0-alpha.12",
+    "react-native-web": "~0.11.7",
+    "react-redux": "^7.1.3",
+    "redux-persist": "^6.0.0",
+    "redux-saga": "^1.1.3",
+    "reselect": "^4.0.0",
+    "yup": "^0.28.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@types/i18n-js": "^3.0.1",
+    "@types/react": "~16.9.0",
+    "@types/react-native": "~0.60.23",
+    "@types/react-redux": "^7.1.7",
+    "@types/yup": "^0.26.29",
+    "babel-eslint": "^10.0.3",
+    "babel-preset-expo": "~8.0.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.18.3",
+    "prettier": "^1.19.1"
+  },
+  "private": true
+}

templates/app/react-native/src/api/API.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+import { getEnvVars } from '../../Environment';
+
+const { apiUrl } = getEnvVars();
+
+const axiosInstance = axios.create({
+  baseURL: apiUrl,
+});
+
+export default axiosInstance;

templates/app/react-native/src/api/AccountAPI.js

@@ -0,0 +1,41 @@
+import api from './API';
+import { getEnvVars } from '../../Environment';
+
+const { oAuthConfig } = getEnvVars();
+
+export const login = ({ username, password }) => {
+  // eslint-disable-next-line no-undef
+  const formData = new FormData();
+  formData.append('username', username);
+  formData.append('password', password);
+  formData.append('grant_type', 'password');
+  formData.append('scope', `${oAuthConfig.scope} offline_access`);
+  formData.append('client_id', oAuthConfig.clientId);
+  formData.append('client_secret', oAuthConfig.clientSecret);
+
+  return api({
+    method: 'POST',
+    url: '/connect/token',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: formData,
+    baseURL: oAuthConfig.issuer,
+  }).then(({ data }) => data);
+};
+
+export const logout = () =>
+  api({
+    method: 'GET',
+    url: '/api/account/logout',
+  }).then(({ data }) => data);
+
+export const getTenant = tenantName =>
+  api({
+    method: 'GET',
+    url: `/api/abp/multi-tenancy/tenants/by-name/${tenantName}`,
+  }).then(({ data }) => data);
+
+export const getTenantById = tenantId =>
+  api({
+    method: 'GET',
+    url: `/api/abp/multi-tenancy/tenants/by-id/${tenantId}`,
+  }).then(({ data }) => data);

templates/app/react-native/src/api/ApplicationConfigurationAPI.js

@@ -0,0 +1,30 @@
+import i18n from 'i18n-js';
+import api from './API';
+
+export const getApplicationConfiguration = () =>
+  api
+    .get('/api/abp/application-configuration')
+    .then(({ data }) => data)
+    .then(async config => {
+      const { cultureName } = config.localization.currentCulture;
+      i18n.locale = cultureName;
+
+      Object.keys(config.localization.values).forEach(key => {
+        const resource = config.localization.values[key];
+
+        if (typeof resource !== 'object') return;
+
+        Object.keys(resource).forEach(key2 => {
+          if (/'{|{/g.test(resource[key2])) {
+            resource[key2] = resource[key2].replace(/'{|{/g, '{{').replace(/}'|}/g, '}}');
+          }
+        });
+      });
+
+      i18n.translations[cultureName] = {
+        ...config.localization.values,
+        ...(i18n.translations[cultureName] || {}),
+      };
+
+      return config;
+    });

templates/app/react-native/src/api/IdentityAPI.js

@@ -0,0 +1,26 @@
+import api from './API';
+
+export const getProfileDetail = () => api.get('/api/identity/my-profile').then(({ data }) => data);
+
+export const getAllRoles = () => api.get('/api/identity/roles/all').then(({ data }) => data.items);
+
+export const getUserRoles = id =>
+  api.get(`/api/identity/users/${id}/roles`).then(({ data }) => data.items);
+
+export const getUsers = (params = { maxResultCount: 10, skipCount: 0 }) =>
+  api.get('/api/identity/users', { params }).then(({ data }) => data);
+
+export const getUserById = id => api.get(`/api/identity/users/${id}`).then(({ data }) => data);
+
+export const createUser = body => api.post('/api/identity/users', body).then(({ data }) => data);
+
+export const updateUser = (body, id) =>
+  api.put(`/api/identity/users/${id}`, body).then(({ data }) => data);
+
+export const removeUser = id => api.delete(`/api/identity/users/${id}`);
+
+export const updateProfileDetail = body =>
+  api.put('/api/identity/my-profile', body).then(({ data }) => data);
+
+export const changePassword = body =>
+  api.post('/api/identity/my-profile/change-password', body).then(({ data }) => data);

templates/app/react-native/src/api/TenantManagementAPI.js

@@ -0,0 +1,21 @@
+import api from './API';
+
+export function getTenants(params = {}) {
+  return api.get('/api/multi-tenancy/tenants', { params }).then(({ data }) => data);
+}
+
+export function createTenant(body) {
+  return api.post('/api/multi-tenancy/tenants', body).then(({ data }) => data);
+}
+
+export function getTenantById(id) {
+  return api.get(`/api/multi-tenancy/tenants/${id}`).then(({ data }) => data);
+}
+
+export function updateTenant(body, id) {
+  return api.put(`/api/multi-tenancy/tenants/${id}`, body).then(({ data }) => data);
+}
+
+export function removeTenant(id) {
+  return api.delete(`/api/multi-tenancy/tenants/${id}`).then(({ data }) => data);
+}