@hero-design/rn 7.3.0 → 7.4.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "types": "types/src/index.d.ts",
+  "react-native": "src/index.ts",
+  "types": "types/index.d.ts",
   "scripts": {
-    "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
     "test": "jest --runInBand",
@@ -15,12 +16,16 @@
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "build": "yarn build:js && yarn build:types",
-    "publish:npm": "yarn publish --access public"
+    "build:watch": "yarn build:js -w & yarn build:types -w",
+    "publish:npm": "yarn publish --access public",
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   },
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.3.0"
+    "@hero-design/colors": "7.4.0"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -34,9 +39,8 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.17.12",
+    "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@react-navigation/native": "^6.0.10",
-    "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -58,14 +62,12 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "expo": "^44.0.6",
     "jest": "^27.3.1",
     "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
-    "react-native-screens": "^3.13.1",
     "react-native-vector-icons": "^9.1.0",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",

package/playground/.detoxrc.json

@@ -0,0 +1,49 @@
+{
+  "testRunner": "jest",
+  "runnerConfig": "e2e/config.json",
+  "skipLegacyWorkersInjection": true,
+  "apps": {
+    "ios": {
+      "type": "ios.app",
+      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
+    },
+    "android": {
+      "type": "android.apk",
+      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
+    }
+  },
+  "devices": {
+    "simulator": {
+      "type": "ios.simulator",
+      "device": {
+        "type": "iPhone 11"
+      }
+    },
+    "emulator": {
+      "type": "android.emulator",
+      "device": {
+        "avdName": "Pixel_3a_API_30_x86"
+      }
+    }
+  },
+  "configurations": {
+    "ios.sim.debug": {
+      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/MobileHeroDesignPlayground.app",
+      "build": "E2E_TEST=true xcodebuild -workspace ios/MobileHeroDesignPlayground.xcworkspace -configuration Debug -scheme MobileHeroDesignPlayground -derivedDataPath ios/build -sdk iphonesimulator  -verbose",
+      "type": "ios.simulator",
+      "device": {
+        "type": "iPhone 13",
+        "os": "iOS 15.4"
+      }
+    },
+    "ios.sim.release": {
+      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/MobileHeroDesignPlayground.app",
+      "build": "E2E_TEST=true xcodebuild -workspace ios/MobileHeroDesignPlayground.xcworkspace -configuration Release -scheme MobileHeroDesignPlayground -derivedDataPath ios/build -sdk iphonesimulator  -verbose",
+      "type": "ios.simulator",
+      "device": {
+        "type": "iPhone 13",
+        "os": "iOS 15.4"
+      }
+    }
+  }
+}

package/playground/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid"
+}
+

package/playground/app.json

@@ -0,0 +1,9 @@
+{
+  "name": "Mobile Hero Design Playground",
+  "entryPoint": "expoEntry.js",
+  "owner": "thinkei",
+  "slug": "Mobile-Hero-Design-Playground",
+  "ios": {
+    "bundleIdentifier": "com.thinkei.Mobile-Hero-Design-Playground"
+  }
+}

package/playground/babel.config.js

@@ -0,0 +1,63 @@
+const path = require('path');
+
+function isE2ETest() {
+  return process.env.E2E_TEST === 'true';
+}
+
+module.exports = api => {
+  const babelEnv = api.env();
+  const plugins = [];
+  const presets = [];
+
+  // resolve issue TypeError: Class constructor DetoxCircusEnvironment cannot be invoked without 'new'
+  if (babelEnv === 'test') {
+    presets.push(['@babel/preset-env']);
+    plugins.push(['@babel/plugin-transform-runtime']);
+  } else {
+    presets.push(['module:metro-react-native-babel-preset']);
+    presets.push(['babel-preset-expo']);
+  }
+  return {
+    presets: ['@babel/preset-typescript', ...presets],
+    plugins: [
+      ...plugins,
+      [
+        'module-resolver',
+        {
+          alias: {
+            '^react$': require.resolve('react', {
+              paths: [path.join(__dirname, './')],
+            }),
+            '^react-native$': require.resolve('react-native', {
+              paths: [path.join(__dirname, './')],
+            }),
+            '^react-native/(.+)': ([, name]) =>
+              require.resolve(`react-native/${name}`, {
+                paths: [path.join(__dirname, './')],
+              }),
+            'react-native-safe-area-context': require.resolve(
+              'react-native-safe-area-context',
+              {
+                paths: [path.join(__dirname, './')],
+              }
+            ),
+          },
+          extensions: [
+            '.ios.js',
+            '.ios.ts',
+            '.ios.tsx',
+            '.android.js',
+            '.android.ts',
+            '.android.tsx',
+            '.native.js',
+            '.native.ts',
+            '.native.tsx',
+            '.js',
+            '.ts',
+            '.tsx',
+          ],
+        },
+      ],
+    ],
+  };
+};

package/playground/e2e/config.json

@@ -0,0 +1,9 @@
+{
+    "maxWorkers": 1,
+    "testEnvironment": "./environment",
+    "testRunner": "jest-circus/runner",
+    "testTimeout": 120000,
+    "testRegex": "\\.e2e\\.js$",
+    "reporters": ["detox/runners/jest/streamlineReporter"],
+    "verbose": true
+}

package/playground/e2e/environment.js

@@ -0,0 +1,23 @@
+const {
+  DetoxCircusEnvironment,
+  SpecReporter,
+  WorkerAssignReporter,
+} = require('detox/runners/jest-circus');
+
+class CustomDetoxEnvironment extends DetoxCircusEnvironment {
+  constructor(config, context) {
+    super(config, context);
+
+    // Can be safely removed, if you are content with the default value (=300000ms)
+    this.initTimeout = 300000;
+
+    // This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
+    // This is strictly optional.
+    this.registerListeners({
+      SpecReporter,
+      WorkerAssignReporter,
+    });
+  }
+}
+
+module.exports = CustomDetoxEnvironment;

package/playground/e2e/firstTest.e2e.js

@@ -0,0 +1,16 @@
+describe('Example', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should go to Badge screen', async () => {
+    await waitFor(element(by.label('Badge')))
+      .toExist()
+      .withTimeout(60000);
+    await element(by.label('Badge')).tap();
+  });
+});

package/{expoEntry.js → playground/expoEntry.js}

@@ -1,5 +1,5 @@
 import { registerRootComponent } from 'expo';
 
-import App from './playground';
+import App from './src/App';
 
 registerRootComponent(App);

package/playground/index.js

@@ -0,0 +1,7 @@
+/**
+ * @format
+ */
+import { AppRegistry } from 'react-native';
+import App from './src/App';
+
+AppRegistry.registerComponent('main', () => App);

package/playground/ios/MobileHeroDesignPlayground/AppDelegate.h

@@ -0,0 +1,9 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTBridgeDelegate.h>
+#import <UIKit/UIKit.h>
+
+#import <Expo/Expo.h>
+
+@interface AppDelegate : EXAppDelegateWrapper <RCTBridgeDelegate>
+
+@end

package/playground/ios/MobileHeroDesignPlayground/AppDelegate.m

@@ -0,0 +1,75 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBridge.h>
+#import <React/RCTBundleURLProvider.h>
+#import <React/RCTRootView.h>
+#import <React/RCTLinkingManager.h>
+#import <React/RCTConvert.h>
+
+#if defined(FB_SONARKIT_ENABLED) && __has_include(<FlipperKit/FlipperClient.h>)
+#import <FlipperKit/FlipperClient.h>
+#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
+
+static void InitializeFlipper(UIApplication *application) {
+  FlipperClient *client = [FlipperClient sharedClient];
+  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
+  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
+  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
+  [client addPlugin:[FlipperKitReactPlugin new]];
+  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
+  [client start];
+}
+#endif
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+#if defined(FB_SONARKIT_ENABLED) && __has_include(<FlipperKit/FlipperClient.h>)
+  InitializeFlipper(application);
+#endif
+  
+  RCTBridge *bridge = [self.reactDelegate createBridgeWithDelegate:self launchOptions:launchOptions];
+  RCTRootView *rootView = [self.reactDelegate createRootViewWithBridge:bridge moduleName:@"main" initialProperties:nil];
+  rootView.backgroundColor = [UIColor whiteColor];
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [self.reactDelegate createRootViewController];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+
+  [super application:application didFinishLaunchingWithOptions:launchOptions];
+
+  return YES;
+ }
+
+- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
+{
+  // If you'd like to export some custom RCTBridgeModules, add them here!
+  return @[];
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
+ #ifdef DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+ #else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+ #endif
+}
+
+// Linking API
+- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
+  return [super application:application openURL:url options:options] || [RCTLinkingManager application:application openURL:url options:options];
+}
+
+// Universal Links
+- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
+  BOOL result = [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
+  return [super application:application continueUserActivity:userActivity restorationHandler:restorationHandler] || result;
+}
+
+@end

package/playground/ios/MobileHeroDesignPlayground/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "expo"
+  }
+}

package/playground/ios/MobileHeroDesignPlayground/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "expo"
+  }
+}

package/playground/ios/MobileHeroDesignPlayground/Images.xcassets/SplashScreenBackground.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "image.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "expo"
+  }
+}

package/playground/ios/MobileHeroDesignPlayground/Info.plist

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>$(DEVELOPMENT_LANGUAGE)</string>
+	<key>CFBundleDisplayName</key>
+	<string>Mobile Hero Design Playground</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
+	<key>CFBundleShortVersionString</key>
+	<string>7.2.2</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>com.thinkei.Mobile-Hero-Design-Playground</string>
+			</array>
+		</dict>
+	</array>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>be-vietnam-pro-light.ttf</string>
+		<string>be-vietnam-pro-regular.ttf</string>
+		<string>be-vietnam-pro-semibold.ttf</string>
+		<string>hero-icons.ttf</string>
+	</array>
+	<key>UILaunchStoryboardName</key>
+	<string>SplashScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UIRequiresFullScreen</key>
+	<false/>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleDefault</string>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIUserInterfaceStyle</key>
+	<string>Light</string>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>

package/playground/ios/MobileHeroDesignPlayground/MobileHeroDesignPlayground-Bridging-Header.h

@@ -0,0 +1,3 @@
+//
+//  Use this file to import your target's public headers that you would like to expose to Swift.
+//

package/playground/ios/MobileHeroDesignPlayground/MobileHeroDesignPlayground.entitlements

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>aps-environment</key>
+    <string>development</string>
+  </dict>
+</plist>

package/playground/ios/MobileHeroDesignPlayground/SplashScreen.storyboard

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="EXPO-VIEWCONTROLLER-1">
+    <device id="retina5_5" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <scene sceneID="EXPO-SCENE-1">
+            <objects>
+                <viewController storyboardIdentifier="SplashScreenViewController" id="EXPO-VIEWCONTROLLER-1" sceneMemberID="viewController">
+                    <view key="view" userInteractionEnabled="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="EXPO-ContainerView" userLabel="ContainerView">
+                        <rect key="frame" x="0.0" y="0.0" width="414" height="736"/>
+                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                        <subviews>
+                            <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" insetsLayoutMarginsFromSafeArea="NO" image="SplashScreenBackground" translatesAutoresizingMaskIntoConstraints="NO" id="EXPO-SplashScreenBackground" userLabel="SplashScreenBackground">
+                                <rect key="frame" x="0.0" y="0.0" width="414" height="736"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                        <constraints>
+                            <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="top" secondItem="EXPO-ContainerView" secondAttribute="top" id="1gX-mQ-vu6"/>
+                            <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="leading" secondItem="EXPO-ContainerView" secondAttribute="leading" id="6tX-OG-Sck"/>
+                            <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="trailing" secondItem="EXPO-ContainerView" secondAttribute="trailing" id="ABX-8g-7v4"/>
+                            <constraint firstItem="EXPO-SplashScreenBackground" firstAttribute="bottom" secondItem="EXPO-ContainerView" secondAttribute="bottom" id="jkI-2V-eW5"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="Rmq-lb-GrQ"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="EXPO-PLACEHOLDER-1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="140.625" y="129.4921875"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="SplashScreenBackground" width="1" height="1"/>
+    </resources>
+</document>

package/playground/ios/MobileHeroDesignPlayground/Supporting/Expo.plist

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>EXUpdatesCheckOnLaunch</key>
+    <string>ALWAYS</string>
+    <key>EXUpdatesEnabled</key>
+    <true/>
+    <key>EXUpdatesLaunchWaitMs</key>
+    <integer>0</integer>
+    <key>EXUpdatesSDKVersion</key>
+    <string>44.0.0</string>
+    <key>EXUpdatesURL</key>
+    <string>https://exp.host/@thinkei/Mobile-Hero-Design-Playground</string>
+  </dict>
+</plist>

package/playground/ios/MobileHeroDesignPlayground/main.m

@@ -0,0 +1,10 @@
+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char * argv[]) {
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}
+

package/playground/ios/MobileHeroDesignPlayground/noop-file.swift

@@ -0,0 +1,4 @@
+//
+// @generated
+// A blank Swift file must be created for native modules with Swift files to work correctly.
+//