@admin-layout/gluestack-ui-mobile 6.5.1-alpha.0

package/src/utils/routeConfigKeyReplace.test.ts

@@ -0,0 +1,114 @@
+import { Feature, IRouteData, getNavigation, getSortedNavigations } from '@common-stack/client-react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import routeConfigKeyReplace from './routeConfigKeyReplace';
+import {
+    appDrawerFeature,
+    appBottomTabFeature,
+    appDrawerBottomTabFeature,
+    appBottomTabDrawerFeature,
+    appHostBottomTabFeature,
+} from '../components/Layout/compute.test';
+
+const MyComponent = () => {};
+
+describe('route config key replace', () => {
+    const routerConfig = {
+        ['/']: {
+            exact: false,
+            container: createStackNavigator(),
+            name: 'MainStack',
+            props: {
+                initialRouteName: 'MainStack.MainBottomTab',
+                screenOptions: {
+                    headerShown: false,
+                },
+            },
+        },
+        // ['//:orgName']: {
+        //     exact: false,
+        //    // container: createStackNavigator(),
+        //     name: 'OrgNameStack',
+        //     props: {
+        //         initialRouteName: 'MainStack.OrgNameStack.MainDrawer',
+        //         component: MyComponent,
+        //         screenOptions: {
+        //             headerShown: false,
+        //         },
+        //     },
+        // },
+        ['//sample']: {
+            name: 'Sample',
+            props: {
+                priority: 1,
+                initialParams: { orgName: 'test' },
+                component: MyComponent,
+                options: {
+                    headerShown: true,
+                },
+            },
+        },
+        ['//:orgName/l/home']: {
+            name: 'Home',
+            props: {
+                priority: 1,
+                initialParams: { orgName: 'test' },
+                component: MyComponent,
+                options: {
+                    headerShown: true,
+                    tabBarLabel: 'Home',
+                    headerTitle: 'Home',
+                    // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
+                },
+            },
+        },
+        ['//:orgName/l/home/:about']: {
+            exact: false,
+            name: 'About',
+            props: {
+                priority: 2,
+                initialParams: {},
+                component: MyComponent,
+                options: {
+                    headerShown: true,
+                    tabBarLabel: 'About',
+                    headerTitle: 'About',
+                },
+            },
+        },
+        ['//:orgName/l/account']: {
+            name: 'Account',
+            props: {
+                priority: 3,
+                initialParams: {},
+                component: MyComponent,
+                options: {
+                    headerShown: true,
+                    tabBarLabel: 'Account',
+                    headerTitle: 'Account',
+                    // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
+                },
+            },
+        },
+    };
+
+    it('getSortedNavigations with routeConfigKeyReplace ', () => {
+        //******************Layout Settings for test*************************/
+        // For layout 'side', keyReplaceWith='/main_drawer/',appLayout=appDrawerFeature()
+        // For layout 'mixSide', keyReplaceWith='/main_drawer/bottom_tab/',appLayout=appDrawerBottomTabFeature()
+        // For layout 'bottom', keyReplaceWith='/bottom_tab/',appLayout=appBottomTabFeature
+        // For layout 'host-bottom', keyReplaceWith='/host_tab/',appLayout=appHostBottomTabFeature
+        //*******************************************************************/
+        const routeConfigFeature = new Feature({ routeConfig: routerConfig });
+
+        let keyReplacedWith = '/bottom_tab/';
+        const appLayout = appBottomTabFeature;
+
+        const {appFeatures} = routeConfigKeyReplace(keyReplacedWith, routeConfigFeature,appLayout);
+        // const appFeatures = new Feature(appLayoutConfig, appLayoutFeatures);
+         const Render = appFeatures.getRoutes2('/', 'MainStack');
+        const configuredRoute = appFeatures.getConfiguredRoutes2('/');
+        expect(Render).toMatchSnapshot();
+    });
+});

package/src/utils/routeConfigKeyReplace.ts

@@ -0,0 +1,74 @@
+import { Feature } from '@common-stack/client-react';
+const routeConfigKeyReplace = (keyReplacedWith: any, features: any,appLayout=null as any,intialRouteName='MainStack.Layout' as any) => {
+    let appLayoutFeatures = { ...features };
+    appLayoutFeatures.routeConfig = appLayoutFeatures?.routeConfig?.map((obj: any) => {
+        let rObj: any = { ...obj };
+        if (rObj.hasOwnProperty('/')) rObj['/'].props.initialRouteName = intialRouteName;
+        let objectEntries = Object.entries(rObj).map(([key, val]: any) => {
+            let objVal: any = Object.assign({}, val);
+            let initialParams = objVal?.props?.initialParams ?? {};
+            if (objVal?.props?.options) {
+                initialParams.menu_position = objVal?.menu_position ?? 'bottom';
+                initialParams.priority = objVal?.props?.options?.priority ?? 0;
+                initialParams.options = objVal.props.options ? JSON.stringify(objVal?.props?.options) : null;
+                objVal.props.initialParams = initialParams;
+            }
+            let objKey: any;
+            
+            if(keyReplacedWith=='//host_tab/'){
+                objKey = key.startsWith('//:orgName/h/') 
+                         ?key.replace('//:orgName/h/', '//:orgName'+keyReplacedWith?.replace('//','/')) 
+                         :key.startsWith('//h/') 
+                         ?key.replace('//h/', keyReplacedWith) 
+                         :key.startsWith('//:orgName/l/')?null
+                         :key.startsWith('//l/') ? null 
+                         :key;
+            }
+            else{
+                objKey = key.startsWith('//:orgName/l/') ? key.replace('//:orgName/l/', '//:orgName'+keyReplacedWith?.replace('//','/')) 
+                         : key.startsWith('//l/') ? key.replace('//l/', keyReplacedWith)
+                         : key.startsWith('//:orgName/h/') ? null 
+                         : key.startsWith('//h/') ? null
+                         : key;
+            }
+           
+            return [objKey, objVal];
+        });
+        return Object.fromEntries(objectEntries);
+    });
+
+    let appLayoutConfig:any=null;
+    if(appLayout) {
+        let layoutFeatures = [...features?.routeConfig]
+        //const intialRoutename = layoutFeatures?.map((obj:any)=>obj.hasOwnProperty('/') && obj['/'].props.initialRouteName)?.filter((obj:any)=>obj)[0]??'MainStack.MainDrawer';
+        const isOrgName = layoutFeatures?.map((obj: any)=>{
+            return Object.entries(obj).map(([key, val]: any) => {
+                if(keyReplacedWith=='//host_tab/'){
+                    if(key.startsWith('//:orgName/h/')) return true;
+                    else return null;
+                }
+                else{
+                    if(key.startsWith('//:orgName/l/')) return true;
+                    else null;
+                }
+            })
+        })?.flat(1)?.filter((obj:any)=>obj)??[];
+        appLayoutConfig = {...appLayout};
+        appLayoutConfig.routeConfig = appLayoutConfig?.routeConfig?.map((obj:any)=>{
+            let rObj: any = { ...obj };
+            //if (rObj.hasOwnProperty('/')) rObj['/'].props.initialRouteName = intialRoutename;
+            let objectEntries = Object.entries(rObj).map(([key, val]: any) => {
+                let objVal: any = Object.assign({}, val);
+                
+                let objKey: any;
+                objKey = isOrgName?.length > 0 ? key.startsWith('//')? key.replace('//', '//:orgName/') : key : key;
+                return [objKey, objVal];
+           });
+           return Object.fromEntries(objectEntries);
+        })
+    }
+    const appFeatures =  new Feature(appLayoutConfig, appLayoutFeatures);
+    return {appFeatures,appLayoutConfig,appLayoutFeatures};
+};
+
+export default routeConfigKeyReplace;

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "ES2015",
+        "lib": [
+            "dom",
+            "esnext"
+        ],
+        "moduleResolution": "node",
+        "jsx": "react",
+        "rootDir": "src",
+        "outDir": "lib",
+        "sourceMap": true,
+        "declaration": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "skipLibCheck": true,
+        "types": [
+            "@types/node",
+            "@types/jest",
+            "../../../typings",
+            // "../../../node_modules/@gluestack-ui",
+            //  "../../../node_modules/@gluestack-style",
+            "./types"
+        ],
+    },
+    "include": [
+        "src",
+        "./types.d.ts",
+    ],
+    "exclude": [
+        "node_modules",
+        "lib",
+        "webpack.config.js",
+        "rollup.config.mjs"
+    ]
+}

package/types.d.ts

@@ -0,0 +1,11 @@
+// import { Theme } from 'native-base';
+// import { LayoutTheme  } from '@admin-layout/client'
+
+// 2. Get the type of the CustomTheme
+//type CustomThemeType = Theme & LayoutTheme;
+
+// 3. Extend the internal NativeBase Theme
+// declare module 'native-base' {
+
+//   interface ICustomTheme extends CustomThemeType {}
+// }

package/webpack.config.js

@@ -0,0 +1,104 @@
+var nodeExternals = require("webpack-node-externals");
+var webpack = require("webpack");
+var path = require("path");
+var fs = require("fs");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const lessToJs = require('less-vars-to-js');
+// const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './ant-theme-vars.less'), 'utf8'));
+
+var webpack_opts = {
+  mode: "development",
+  entry: {
+    index: './src/index.ts'
+  },
+  target: "node",
+  output: {
+    path: path.join(__dirname, "lib"),
+    filename: '[name].js',
+    libraryTarget: "commonjs2"
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".css"]
+  },
+  plugins: [
+    new ExtractTextPlugin("styles.css"),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        test: /\.tsx?$/,
+        ts: {
+          compiler: "typescript",
+          configFile: "tsconfig.json"
+        },
+        tslint: {
+          emitErrors: true,
+          failOnHint: true
+        }
+      }
+    })
+  ],
+  devtool: "source-map",
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader"
+      },
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        // query: {
+        //   cacheDirectory: true,
+        //   presets: [
+        //     require.resolve('@babel/preset-env'),
+        //     require.resolve('@babel/preset-react'),
+        //   ],
+        //   plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
+        // }
+      },
+      {
+        test: /\.(pdf|jpg|png|gif|svg|ico)$/,
+        use: [
+          {
+            loader: "url-loader"
+          }
+        ]
+      },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: "graphql-tag/loader"
+      },
+      { test: /\.svg$/, loader: "url-loader?limit=10000" },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: "style-loader",
+          use: [
+            { loader: "css-loader", options: { importLoaders: 1 } },
+            {
+              loader: "postcss-loader",
+              options: {
+                plugins: () => [
+                  require("autoprefixer")({
+                    browsers: ["> 1%", "last 2 versions"]
+                  })
+                ],
+                config: { path: "./src/postcss.config.js" }
+              }
+            }
+          ]
+        })
+      }
+    ]
+  },
+  externals: [
+    nodeExternals({
+      allowlist: [/.*\.css$/],
+      modulesDir: "../../node_modules"
+    }),
+    nodeExternals()
+  ]
+};
+
+module.exports = webpack_opts;