@brightlayer-ui/react-native-template-routing-typescript 2.0.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+## v2.0.0 (Not yet published)
+
+### Changed
+
+-   Changed package namespace from `@pxblue` to `@brightlayer-ui`.
+
+## Package Migration Notice
+
+Previous versions listed after this indicator refer to our deprecated `@pxblue` packages.
+
+---
+
+## v2.0.0 (November 3, 2021)
+
+### Changed
+
+- Updated to use latest APIs from `@pxblue/react-native-components`.
+
+## v1.3.1 (October 1, 2021)
+
+### Fixed
+
+- Added dependency for `@pxblue/react-native-vector-icons`
+
+## v1.3.0 (September 30, 2021)
+
+### Changed
+- Upgrade PX Blue packages
+- Changed default drawer width to 300.
+
+## v1.2.0 (July 26, 2021)
+
+### Changed
+- Updated version of react-native-modal dependency to 12.0.2
+
+## v1.1.0 (March 31, 2021)
+
+### Changed
+-   Updated dependencies to use latest packages.
+
+### Fixed
+-   Jest configuration allows default tests to pass.
+
+## v1.0.0 (March 1, 2021)
+
+### Added
+
+-   Initial routing template for TypeScript projects

package/README.md

@@ -0,0 +1,27 @@
+# Routing Template (TypeScript)
+
+![npm (scoped)](https://img.shields.io/npm/v/@brightlayer-ui/react-native-template-routing-typescript?color=%23007bc1&label=%40brightlayer-ui%2Freact-native-template-routing-typescript)
+
+This is an official Brightlayer UI template used internally by the [Brightlayer UI CLI](https://www.npmjs.com/package/@brightlayer-ui/cli).
+
+This template includes the installation and initial setup of routing using [React Navigation](https://reactnavigation.org/). It includes several placeholder routes/screens and a [Drawer](https://brightlayer-ui-components.github.io/react-native/?path=/info/components-documentation--drawer) navigator from the Brightlayer UI [React Native Component Library](https://www.npmjs.com/package/@brightlayer-ui/react-native-components).
+
+## Usage
+This template can be used with the Brightlayer UI CLI:
+```sh
+npx -p @brightlayer-ui/cli blui new react-native --name=myapp --cli=rnc --language=ts --template=routing
+```
+
+## Project Structure
+Projects created using this template will start out with the following file structure:
+
+```
+|── /ios                              // ios project folder
+|── /android                          // android project folder
+|── /assets                           // fonts and images used by the application
+|── App.tsx                           // app entry point
+|── /pages                            // sample application pages
+└── /router                             
+    |── index.tsx                     // sets up routing
+    └── navigation-drawer.tsx         // sets up Drawer
+```

package/dependencies.json

@@ -0,0 +1,23 @@
+{
+    "dependencies": [
+        "@brightlayer-ui/react-native-themes@^6.0.0",
+        "@brightlayer-ui/colors@^3.0.1",
+        "@brightlayer-ui/react-native-components@^6.0.1",
+        "@brightlayer-ui/react-native-vector-icons@^1.4.0",
+        "react-native-modal@^12.0.2",
+        "react-native-paper@^4.7.2",
+        "@brightlayer-ui/icons-svg@^1.8.0",
+        "react-native-vector-icons@^8.0.0",
+        "react-native-svg@^12.1.0",
+        "react-native-svg-transformer@^0.14.3",
+        "react-native-safe-area-context@^3.2.0",
+        "@react-native-community/masked-view@^0.1.10",
+        "@react-navigation/drawer@^5.12.3",
+        "@react-navigation/native@^5.9.3",
+        "@react-navigation/stack@^5.14.3",
+        "react-native-gesture-handler@^1.10.3",
+        "react-native-reanimated@^1.0.0",
+        "react-native-screens@^3.0.0"
+    ],
+    "devDependencies": ["@types/react-native-vector-icons", "jest-transform-stub"]
+}

package/images/Logo.svg

@@ -0,0 +1,11 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 82 82" width='82' height='82'>
+
+						<ellipse cx="41" cy="41" rx="11.2" ry="11.1"/>
+						<path d="M72.7,33.9c2.4,10.9-0.8,22.1-8.7,30C51.4,76.6,30.8,76.6,18.2,64S5.4,30.8,18,18.1c5-5,11.4-8.2,18.4-9.2
+							c0.3,0.9,0.8,1.8,1.5,2.5c2.3,2.3,6.1,2.3,8.4,0c0.9-0.9,1.5-2.1,1.7-3.5l0,0c0.2-1.8-0.4-3.6-1.7-4.9c-2.3-2.3-6.1-2.3-8.4,0
+							c-0.9,0.9-1.5,2.1-1.7,3.3c-7.6,1-14.6,4.6-20,10C2.6,30,2.7,52.2,16.3,65.8s35.9,13.6,49.5-0.1c8.4-8.5,11.9-20.5,9.4-32.2l0,0
+							c-1.4-6.4-4.8-12.1-9.5-16.8l0,0C65.7,16.7,71.2,23.3,72.7,33.9z M37.4,7.5L37.4,7.5L37.4,7.5L37.4,7.5z M45.5,7.6
+							c-0.1,0.8-0.4,1.5-1,2.1c-1.4,1.4-3.6,1.4-4.9,0c-0.6-0.6-1-1.4-1-2.3l0,0c-0.1-1,0.3-2,1-2.7c1.4-1.4,3.6-1.4,4.9,0
+							C45.3,5.5,45.7,6.6,45.5,7.6z"/>
+					</svg>

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@brightlayer-ui/react-native-template-routing-typescript",
+    "version": "2.0.0-beta.0",
+    "author": "brightlayer-ui <brightlayer-ui@eaton.com>",
+    "keywords": [
+        "react native",
+        "template",
+        "brightlayer-ui",
+        "cli"
+    ],
+    "description": "A template with pre-configured routing for React Native projects created with the Brightlayer UI CLI.",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/brightlayer-ui/react-native-cli-templates.git"
+    },
+    "scripts": {
+        "publish:package": "set npm_config_yes=true && npx -p @brightlayer-ui/publish blui-publish",
+        "tag:package": "set npm_config_yes=true && npx -p @brightlayer-ui/tag blui-tag"
+    },
+    "license": "BSD-3-Clause",
+    "engines": {
+        "node": ">=10"
+    },
+    "bugs": {
+        "url": "https://github.com/brightlayer-ui/react-native-cli-templates/issues"
+    }
+}

package/template/App.tsx

@@ -0,0 +1,22 @@
+/**
+ Copyright (c) 2021-present, Eaton
+
+ All rights reserved.
+
+ This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause.
+ **/
+import React from 'react';
+import { Provider as ThemeProvider } from 'react-native-paper';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
+import { MainRouter } from './src/navigation';
+
+export const App = (): JSX.Element => (
+    <ThemeProvider theme={BLUIThemes.blue}>
+        <SafeAreaProvider>
+            <MainRouter />
+        </SafeAreaProvider>
+    </ThemeProvider>
+);
+
+export default App;

package/template/__mocks__/svgMock.js

@@ -0,0 +1,8 @@
+/**
+ * SVG setup to mock react components transformed into images from SVGs
+ * Place this file in your project's root __mocks__ directory.
+ * https://github.com/kristerkari/react-native-svg-transformer#usage-with-jest
+ */
+
+module.exports = 'SvgMock';
+module.exports.ReactComponent = 'SvgMock';

package/template/jestSetupFile.js

@@ -0,0 +1,15 @@
+import 'react-native-gesture-handler/jestSetup';
+
+jest.useFakeTimers();
+jest.mock('react-native-reanimated', () => {
+    const Reanimated = require('react-native-reanimated/mock');
+
+    // The mock for `call` immediately calls the callback which is incorrect
+    // So we override it with a no-op
+    Reanimated.default.call = () => {};
+
+    return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/template/metro.config.js

@@ -0,0 +1,29 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+    const {
+        resolver: { sourceExts, assetExts },
+    } = await getDefaultConfig();
+    return {
+        transformer: {
+            babelTransformerPath: require.resolve('react-native-svg-transformer'),
+            getTransformOptions: async () => ({
+                transform: {
+                    experimentalImportSupport: false,
+                    inlineRequires: true,
+                },
+            }),
+        },
+        resolver: {
+            assetExts: assetExts.filter((ext) => ext !== 'svg'),
+            sourceExts: [...sourceExts, 'svg'],
+        },
+    };
+})();

package/template/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    assets: ['./assets/fonts/'],
+};

package/template/src/navigation/index.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { View } from 'react-native';
+import { NavDrawerProps, NavigationDrawer } from './navigation-drawer';
+import { createStackNavigator } from '@react-navigation/stack';
+import Home from '../screens/home';
+import PageOne from '../screens/pageOne';
+import PageTwo from '../screens/pageTwo';
+
+const Drawer = createDrawerNavigator();
+
+export type RootStackParamList = {
+    Home: undefined;
+    PageOne: undefined;
+    PageTwo: undefined;
+    NavigationDrawer: undefined;
+};
+
+const RootStack = createStackNavigator<RootStackParamList>();
+
+const CustomDrawerContent = (props: any): any => (
+    <View style={{ height: '100%' }}>
+        <NavigationDrawer {...props} />
+    </View>
+);
+
+export const MainRouter = (): any => (
+    <NavigationContainer>
+        <Drawer.Navigator
+            initialRouteName="Home"
+            drawerStyle={{ backgroundColor: 'transparent', width: 300, maxWidth: '80%' }}
+            drawerContent={(props: NavDrawerProps): ReactNode => <CustomDrawerContent {...props} />}
+        >
+            <RootStack.Screen name="Home" component={Home} />
+            <RootStack.Screen name="PageOne" component={PageOne} />
+            <RootStack.Screen name="PageTwo" component={PageTwo} />
+        </Drawer.Navigator>
+    </NavigationContainer>
+);

package/template/src/navigation/navigation-drawer.tsx

@@ -0,0 +1,55 @@
+import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-native-components';
+import React, { useState, useCallback } from 'react';
+import * as Colors from '@brightlayer-ui/colors';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from './index';
+
+export const navGroupItems: NavItem[] = [
+    {
+        title: 'Home Page',
+        itemID: 'Home',
+        icon: { name: 'home' },
+    },
+    {
+        title: 'Page One',
+        itemID: 'PageOne',
+        icon: { name: 'looks-one' },
+    },
+    {
+        title: 'Page Two',
+        itemID: 'PageTwo',
+        icon: { name: 'looks-two' },
+    },
+];
+
+export type NavDrawerProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'NavigationDrawer'>;
+};
+
+export const NavigationDrawer: React.FC<NavDrawerProps> = ({ navigation }) => {
+    const [selected, setSelected] = useState('Home');
+    const selectItem = useCallback(
+        (id) => {
+            navigation.navigate(id);
+            setSelected(id);
+        },
+        [navigation]
+    );
+
+    return (
+        <Drawer activeItem={selected} onItemSelect={(id: string): void => selectItem(id)}>
+            <DrawerHeader
+                title={'Brightlayer UI'}
+                subtitle={'React Native Project'}
+                fontColor={Colors.white[50]}
+                icon={{ name: 'menu' }}
+                onIconPress={(): void => {
+                    navigation.closeDrawer();
+                }}
+            />
+            <DrawerBody>
+                <DrawerNavGroup items={navGroupItems} hidePadding={false} />
+            </DrawerBody>
+        </Drawer>
+    );
+};

package/template/src/screens/home.tsx

@@ -0,0 +1,161 @@
+import React, { useCallback } from 'react';
+import {
+    SafeAreaView,
+    ScrollView,
+    StyleSheet,
+    Linking,
+    TextStyle,
+    ViewStyle,
+    View,
+    Animated,
+    Easing,
+} from 'react-native';
+import { Button, Divider, useTheme } from 'react-native-paper';
+import { Body1, H4, Header, IconFamily } from '@brightlayer-ui/react-native-components';
+import { Theme } from 'react-native-paper/lib/typescript/types';
+import Logo from '../../assets/images/Logo.svg';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+
+const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
+
+const styles = (
+    theme: Theme
+): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    pxbLogoWrapper: ViewStyle;
+    pxbLogo: ViewStyle;
+    title: TextStyle;
+    subtitle: TextStyle;
+    bold: TextStyle;
+    divider: ViewStyle;
+    openURLButtonText: TextStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+        },
+        pxbLogoWrapper: {
+            justifyContent: 'center',
+            marginTop: 16,
+        },
+        pxbLogo: {
+            alignSelf: 'center',
+            height: 100,
+            width: 100,
+        },
+        title: {
+            textAlign: 'center',
+            marginBottom: 16,
+        },
+        subtitle: {
+            textAlign: 'center',
+        },
+        bold: {
+            fontWeight: 'bold',
+        },
+        divider: {
+            marginVertical: 24,
+        },
+        openURLButtonText: {
+            color: theme.colors.text,
+            padding: 8,
+        },
+    });
+
+const OpenURLButton = (props: any): JSX.Element => {
+    const { url, title } = props;
+    const theme = useTheme();
+    const defaultStyles = styles(theme);
+
+    const handlePress = useCallback(async () => {
+        await Linking.openURL(url);
+    }, [url]);
+
+    return (
+        <Button
+            onPress={(): Promise<void> => handlePress()}
+            labelStyle={defaultStyles.openURLButtonText}
+            uppercase={false}
+        >
+            {title}
+        </Button>
+    );
+};
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'Home'>;
+};
+
+const Home: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const theme = useTheme();
+    const defaultStyles = styles(theme);
+    const spinValue = new Animated.Value(0);
+
+    Animated.loop(
+        Animated.timing(spinValue, {
+            toValue: 1,
+            duration: 2500,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        })
+    ).start();
+
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+
+    return (
+        <>
+            <Header
+                title={'Home Page'}
+                icon={MenuIcon}
+                onIconPress={(): void => {
+                    navigation.openDrawer();
+                }}
+            />
+            <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>
+                    <H4 style={defaultStyles.title}>
+                        Welcome to Brightlayer <H4 color={'primary'}>UI</H4>.
+                    </H4>
+                    <Body1 style={defaultStyles.subtitle}>
+                        Edit <Body1 style={defaultStyles.bold}>screens/home.tsx</Body1> and save to reload.
+                    </Body1>
+                    <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/brightlayer-ui'} />
+                    <OpenURLButton
+                        title={'Design Pattern Source on GitHub'}
+                        url={'https://github.com/brightlayer-ui/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'}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default Home;

package/template/src/screens/index.tsx

@@ -0,0 +1,3 @@
+export * from './home';
+export * from './pageOne';
+export * from './pageTwo';

package/template/src/screens/pageOne.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import { EmptyState, Header, IconFamily } from '@brightlayer-ui/react-native-components';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+const Event: IconFamily = { name: 'event', direction: 'rtl' };
+const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
+
+const styles = (): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    scrollViewContent: ViewStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+        },
+        scrollViewContent: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'PageOne'>;
+};
+
+const PageOne: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const defaultStyles = styles();
+
+    return (
+        <>
+            <Header
+                title={'Page One'}
+                icon={MenuIcon}
+                onIconPress={(): void => {
+                    navigation.openDrawer();
+                }}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
+                    <EmptyState
+                        icon={Event}
+                        title={'Coming Soon'}
+                        description={'Replace this page with your own content'}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default PageOne;

package/template/src/screens/pageTwo.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet, ViewStyle } from 'react-native';
+import { EmptyState, Header, IconFamily } from '@brightlayer-ui/react-native-components';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../navigation';
+const Event: IconFamily = { name: 'event', direction: 'rtl' };
+const MenuIcon: IconFamily = { name: 'menu', direction: 'ltr' };
+
+const styles = (): StyleSheet.NamedStyles<{
+    content: ViewStyle;
+    scrollViewContent: ViewStyle;
+}> =>
+    StyleSheet.create({
+        content: {
+            flex: 1,
+        },
+        scrollViewContent: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+
+type AppProps = {
+    navigation: StackNavigationProp<RootStackParamList, 'PageTwo'>;
+};
+
+const PageTwo: React.FC<AppProps> = ({ navigation }): JSX.Element => {
+    const defaultStyles = styles();
+
+    return (
+        <>
+            <Header
+                title={'Page Two'}
+                icon={MenuIcon}
+                onIconPress={(): void => {
+                    navigation.openDrawer();
+                }}
+            />
+            <SafeAreaView style={defaultStyles.content}>
+                <ScrollView contentContainerStyle={defaultStyles.scrollViewContent}>
+                    <EmptyState
+                        icon={Event}
+                        title={'Coming Soon'}
+                        description={'Replace this page with your own content'}
+                    />
+                </ScrollView>
+            </SafeAreaView>
+        </>
+    );
+};
+
+export default PageTwo;