Feature/5100 workflow card instructions

login-workflow/example/package.json

@@ -47,6 +47,7 @@
         "@babel/runtime": "^7.20.0",
         "@brightlayer-ui/eslint-config": "^3.0.1",
         "@brightlayer-ui/prettier-config": "^1.0.3",
+        "@brightlayer-ui/react-native-auth-workflow": "^6.0.0",
         "@react-native/babel-preset": "0.74.0",
         "@react-native/eslint-config": "0.74.0",
         "@react-native/metro-config": "0.74.0",

login-workflow/example/src/navigation/index.tsx

@@ -7,13 +7,16 @@ import { createStackNavigator } from '@react-navigation/stack';
 import Home from '../screens/home';
 import PageOne from '../screens/pageOne';
 import PageTwo from '../screens/pageTwo';
+import { WorkflowCardInstructions } from '@brightlayer-ui/react-native-auth-workflow';
+import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
 
 const Drawer = createDrawerNavigator();
 
 export type RootStackParamList = {
     Home: undefined;
     PageOne: undefined;
     PageTwo: undefined;
+    WorkflowCardInstructions: undefined;
     NavigationDrawer: undefined;
 };
 
@@ -25,6 +28,16 @@ const CustomDrawerContent = (props: any): any => (
     </View>
 );
 
+const WorkflowCardInstructionsRenderer = (): JSX.Element => {
+    const theme = useExtendedTheme();
+    // marginTop has been added as instructions was going about the safe area view
+    return (
+        <View style={{ backgroundColor: theme.colors.background, flex: 1 }}>
+            <WorkflowCardInstructions style={{ marginTop: 80 }} instructions={'Test Instructions'} />
+        </View>
+    );
+};
+
 export const MainRouter = (): any => (
     <NavigationContainer>
         <Drawer.Navigator
@@ -37,6 +50,7 @@ export const MainRouter = (): any => (
             <RootStack.Screen name="Home" component={Home} />
             <RootStack.Screen name="PageOne" component={PageOne} />
             <RootStack.Screen name="PageTwo" component={PageTwo} />
+            <RootStack.Screen name="WorkflowCardInstructions" component={WorkflowCardInstructionsRenderer} />
         </Drawer.Navigator>
     </NavigationContainer>
 );

login-workflow/example/src/screens/home.tsx

@@ -1,17 +1,15 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
     SafeAreaView,
     ScrollView,
     StyleSheet,
-    Linking,
     TextStyle,
     ViewStyle,
-    View,
     Animated,
     Easing,
     I18nManager,
 } from 'react-native';
-import { Button, Divider, Text } from 'react-native-paper';
+import { Button } from 'react-native-paper';
 import { Header } from '@brightlayer-ui/react-native-components';
 import RNRestart from 'react-native-restart';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -66,22 +64,6 @@ const styles = (
         },
     });
 
-const OpenURLButton = (props: any): JSX.Element => {
-    const { url, title } = props;
-    const theme = useExtendedTheme();
-    const defaultStyles = styles(theme);
-
-    const handlePress = useCallback(async () => {
-        await Linking.openURL(url);
-    }, [url]);
-
-    return (
-        <Button onPress={(): void => handlePress()} labelStyle={defaultStyles.openURLButtonText} uppercase={false}>
-            {title}
-        </Button>
-    );
-};
-
 type AppProps = {
     navigation: StackNavigationProp<RootStackParamList, 'Home'>;
 };
@@ -110,11 +92,6 @@ const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
         })
     ).start();
 
-    const spin = spinValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '360deg'],
-    });
-
     return (
         <>
             <Header
@@ -138,41 +115,9 @@ const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
             />
             <SafeAreaView style={defaultStyles.content}>
                 <ScrollView>
-                    <View style={defaultStyles.pxbLogoWrapper}>
-                        <Animated.View style={[defaultStyles.pxbLogo, { transform: [{ rotate: spin }] }]}>
-                            {/* <Logo height={100} width={100} fill={'#007bc1'} /> */}
-                        </Animated.View>
-                    </View>
-                    <Text style={defaultStyles.title} variant="headlineSmall">
-                        Welcome to Brightlayer UI
-                    </Text>
-                    <Text style={defaultStyles.subtitle} variant="titleLarge">
-                        Edit <Text style={defaultStyles.bold}>screens/home.tsx</Text> and save to reload
-                    </Text>
-                    <Divider style={defaultStyles.divider} />
-                    <OpenURLButton title={'Brightlayer UI Documentation'} url={'https://brightlayer-ui.github.io/'} />
-                    <OpenURLButton
-                        title={'React Native Getting Started Guide'}
-                        url={'https://brightlayer-ui.github.io/development/frameworks-mobile/react-native'}
-                    />
-                    <OpenURLButton
-                        title={'Design Pattern Descriptions'}
-                        url={'https://brightlayer-ui.github.io/patterns'}
-                    />
-                    <OpenURLButton
-                        title={'React Native Component Library'}
-                        url={'https://brightlayer-ui-components.github.io/react-native/'}
-                    />
-                    <OpenURLButton title={'Visit Us on GitHub'} url={'https://github.com/etn-ccis?q=blui'} />
-                    <OpenURLButton
-                        title={'Design Pattern Source on GitHub'}
-                        url={'https://github.com/etn-ccis/blui-react-native-design-patterns'}
-                    />
-                    <OpenURLButton title={'Release Roadmap'} url={'https://brightlayer-ui.github.io/roadmap'} />
-                    <OpenURLButton
-                        title={'Send Feedback or Suggestions'}
-                        url={'https://brightlayer-ui.github.io/community/contactus'}
-                    />
+                    <Button onPress={() => navigation.navigate('WorkflowCardInstructions')}>
+                        Workflow Card Instructions
+                    </Button>
                 </ScrollView>
             </SafeAreaView>
         </>