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

package/CHANGELOG.md

@@ -0,0 +1,48 @@
+# 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
+
+## 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 blank template for TypeScript projects

package/README.md

@@ -0,0 +1,23 @@
+# Blank Template (TypeScript)
+
+![npm (scoped)](https://img.shields.io/npm/v/@brightlayer-ui/react-native-template-blank-typescript?color=%23007bc1&label=%40brightlayer-ui%2Freact-native-template-blank-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 installs the basic Brightlayer UI libraries for themes and components and configures the application to use them. It includes a simple placeholder screen that you can replace with your own application content.
+
+## 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=blank
+```
+
+## 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                                // sample landing page
+```

package/dependencies.json

@@ -0,0 +1,17 @@
+{
+    "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-gesture-handler@^1.10.2",
+        "react-native-svg-transformer@^0.14.3",
+        "react-native-safe-area-context@^3.2.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,28 @@
+{
+    "name": "@brightlayer-ui/react-native-template-blank-typescript",
+    "version": "2.0.0-beta.0",
+    "author": "brightlayer-ui <brightlayer-ui@eaton.com>",
+    "keywords": [
+        "react native",
+        "template",
+        "brightlayer-ui",
+        "Brightlayer UI",
+        "cli"
+    ],
+    "description": "The base template 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,161 @@
+/**
+ 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, { useCallback } from 'react';
+import {
+    SafeAreaView,
+    ScrollView,
+    StyleSheet,
+    Linking,
+    TextStyle,
+    ViewStyle,
+    View,
+    Animated,
+    Easing,
+} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Button, Divider, Provider as ThemeProvider, useTheme } from 'react-native-paper';
+import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
+import { Body1, Header, H4 } from '@brightlayer-ui/react-native-components';
+import { Theme } from 'react-native-paper/lib/typescript/types';
+import Logo from './assets/images/Logo.svg';
+
+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>
+    );
+};
+
+const App = (): 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 (
+        <ThemeProvider theme={BLUIThemes.blue}>
+            <SafeAreaProvider>
+                <Header title={'Brightlayer UI React Native'} />
+                <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}>App.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>
+            </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,2 @@
+jest.useFakeTimers();
+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/'],
+};