Added facade for SvgXml, fixed #15

scommons · May 20, 2020 · 541f00a · 541f00a
1 parent dab9ef1
commit 541f00a
Show file tree

Hide file tree

Showing 23 changed files with 442 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -18,11 +18,14 @@ val scommonsReactNativeVer = "1.0.0-SNAPSHOT"
 
 libraryDependencies ++= Seq(
   "org.scommons.react-native" %%% "scommons-react-native-core" % scommonsReactNativeVer,
+  "org.scommons.react-native" %%% "scommons-react-native-community" % scommonsReactNativeVer,
   "org.scommons.react-native" %%% "scommons-react-navigation" % scommonsReactNativeVer,
+  "org.scommons.react-native" %%% "scommons-expo" % scommonsReactNativeVer,
+
   // ui module already includes all above modules
   "org.scommons.react-native" %%% "scommons-react-native-ui" % scommonsReactNativeVer,
-  "org.scommons.react-native" %%% "scommons-expo" % scommonsReactNativeVer,
 
+  // mocks of native Components and APIs
   "org.scommons.react-native" %%% "scommons-react-native-test" % scommonsReactNativeVer % "test"
 )
 ```
@@ -35,11 +38,20 @@ resolvers += "Sonatype Snapshots" at "https://oss.sonatype.org/content/repositor
 
 ### How to use it
 
-Note: Almost all examples are from an excellent book [React Native in Action](https://www.manning.com/books/react-native-in-action) by [Nader Dabit](https://github.com/dabit3)
+Note: Many examples are from an excellent book [React Native in Action](https://www.manning.com/books/react-native-in-action) by [Nader Dabit](https://github.com/dabit3)
 
 #### Demo Application
 
-* [live expo link](https://expo.io/@viktorpodzigun/showcase) => [How to Build and Run](showcase/README.md)
+##### How to Build and Run
+
+See [showcase/README.md](showcase/README.md)
+
+* [live expo link](https://expo.io/@viktorpodzigun/showcase)
+* [mobile browser](https://scommons.org/scommons-react-native/showcase.html)
+* [web emulator](https://scommons.org/scommons-react-native/showcase.browser.html)
+
+##### Demo Ui Components
+
 * [app](showcase/src/main/scala/showcase/app/ShowcaseApp.scala) => [tests](showcase/src/test/scala/showcase/app/ShowcaseAppSpec.scala)
 * [controller](showcase/src/main/scala/showcase/app/ShowcaseController.scala) => [tests](showcase/src/test/scala/showcase/app/ShowcaseControllerSpec.scala)
 * [screen](showcase/src/main/scala/showcase/app/ShowcaseScreen.scala) => [tests](showcase/src/test/scala/showcase/app/ShowcaseScreenSpec.scala)
@@ -83,6 +95,11 @@ Note: Almost all examples are from an excellent book [React Native in Action](ht
   * [TextStyle](showcase/src/main/scala/showcase/TextStyleDemo.scala) => [tests](showcase/src/test/scala/showcase/TextStyleDemoSpec.scala)
   * [ViewStyle](showcase/src/main/scala/showcase/ViewStyleDemo.scala) => [tests](showcase/src/test/scala/showcase/ViewStyleDemoSpec.scala)
 
+#### react-native-community
+
+* [react-native-svg](https://github.com/react-native-community/react-native-svg)
+  * [SvgXml](showcase/src/main/scala/showcase/app/community/SvgXmlDemo.scala) => [tests](showcase/src/test/scala/showcase/app/community/SvgXmlDemoSpec.scala)
+
 #### react-navigation (v5)
 
 * [Components](https://reactnavigation.org/docs/en/hello-react-navigation.html)

diff --git a/build.sbt b/build.sbt
@@ -16,16 +16,18 @@ lazy val `scommons-react-native` = (project in file("."))
   )
   .aggregate(
   `scommons-react-native-core`,
-  `scommons-react-native-ui`,
   `scommons-react-native-test`,
+  `scommons-react-native-community`,
   `scommons-react-navigation`,
   `scommons-expo`,
+  `scommons-react-native-ui`,
   `scommons-react-native-showcase`
 )
 
 lazy val `scommons-react-native-core` = ReactNativeCore.definition
-lazy val `scommons-react-native-ui` = ReactNativeUi.definition
 lazy val `scommons-react-native-test` = ReactNativeTest.definition
+lazy val `scommons-react-native-community` = ReactNativeCommunity.definition
 lazy val `scommons-react-navigation` = ReactNavigation.definition
 lazy val `scommons-expo` = Expo.definition
+lazy val `scommons-react-native-ui` = ReactNativeUi.definition
 lazy val `scommons-react-native-showcase` = ReactNativeShowcase.definition
diff --git a/community/src/main/scala/scommons/reactnative/svg/package.scala b/community/src/main/scala/scommons/reactnative/svg/package.scala
@@ -0,0 +1,19 @@
+package scommons.reactnative
+
+import io.github.shogowada.scalajs.reactjs.VirtualDOM.VirtualDOMElements.ReactClassElementSpec
+import io.github.shogowada.scalajs.reactjs.VirtualDOM._
+import io.github.shogowada.statictags._
+
+/** @see https://github.com/react-native-community/react-native-svg
+  */
+package object svg {
+
+  implicit class SvgVirtualDOMElements(elements: VirtualDOMElements) {
+    lazy val SvgXml: ReactClassElementSpec = elements(svg.raw.SvgXml)
+  }
+
+  implicit class SvgVirtualDOMAttributes(attributes: VirtualDOMAttributes) {
+
+    lazy val xml = StringAttributeSpec("xml")
+  }
+}
diff --git a/community/src/main/scala/scommons/reactnative/svg/raw/package.scala b/community/src/main/scala/scommons/reactnative/svg/raw/package.scala
@@ -0,0 +1,14 @@
+package scommons.reactnative.svg
+
+import scommons.react.ReactClass
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation.JSImport
+
+package object raw {
+
+  @js.native
+  @JSImport("react-native-svg", "SvgXml")
+  object SvgXml extends ReactClass
+
+}
diff --git a/project/src/main/scala/definitions/Expo.scala b/project/src/main/scala/definitions/Expo.scala
@@ -28,9 +28,7 @@ object Expo extends ScalaJsModule {
 
   override val superRepoProjectsDependencies: Seq[(String, String, Option[String])] = Nil
 
-  override val runtimeDependencies: Def.Initialize[Seq[ModuleID]] = Def.setting(Seq(
-    Libs.scommonsReactCore.value
-  ))
+  override val runtimeDependencies: Def.Initialize[Seq[ModuleID]] = Def.setting(Nil)
 
   override val testDependencies: Def.Initialize[Seq[ModuleID]] = Def.setting(Seq(
     TestLibs.scalaTestJs.value,

diff --git a/project/src/main/scala/definitions/ReactNativeCommunity.scala b/project/src/main/scala/definitions/ReactNativeCommunity.scala
@@ -0,0 +1,37 @@
+package definitions
+
+import common.TestLibs
+import sbt.Keys._
+import sbt._
+import scoverage.ScoverageKeys.coverageExcludedPackages
+
+import scalajsbundler.sbtplugin.ScalaJSBundlerPlugin.autoImport._
+
+object ReactNativeCommunity extends ScalaJsModule {
+
+  override val id: String = "scommons-react-native-community"
+
+  override val base: File = file("community")
+
+  override def definition: Project = super.definition
+    .settings(
+      description := "Scala.js facades for react-native-community Components and APIs",
+
+      requireJsDomEnv in Test := false,
+
+      coverageExcludedPackages := "scommons.reactnative.*raw"
+    )
+
+  override val internalDependencies: Seq[ClasspathDep[ProjectReference]] = Seq(
+    ReactNativeCore.definition
+  )
+
+  override val superRepoProjectsDependencies: Seq[(String, String, Option[String])] = Nil
+
+  override val runtimeDependencies: Def.Initialize[Seq[ModuleID]] = Def.setting(Nil)
+
+  override val testDependencies: Def.Initialize[Seq[ModuleID]] = Def.setting(Seq(
+    TestLibs.scalaTestJs.value,
+    TestLibs.scalaMockJs.value
+  ).map(_ % "test"))
+}
diff --git a/project/src/main/scala/definitions/ReactNativeShowcase.scala b/project/src/main/scala/definitions/ReactNativeShowcase.scala
@@ -39,7 +39,6 @@ object ReactNativeShowcase extends ScalaJsModule {
 
   override val internalDependencies: Seq[ClasspathDep[ProjectReference]] = Seq(
     ReactNativeUi.definition,
-    Expo.definition,
     ReactNativeTest.definition % "test"
   )
 

diff --git a/project/src/main/scala/definitions/ReactNativeTest.scala b/project/src/main/scala/definitions/ReactNativeTest.scala
@@ -15,7 +15,7 @@ object ReactNativeTest extends ScalaJsModule {
 
   override def definition: Project = super.definition
     .settings(
-      description := "Core Scala.js, React Native (react-native) testing utilities",
+      description := "Core Scala.js react-native testing utilities and mocks",
       coverageExcludedPackages := "scommons.reactnative.test.raw",
 
       requireJsDomEnv in Test := false,

diff --git a/project/src/main/scala/definitions/ReactNativeUi.scala b/project/src/main/scala/definitions/ReactNativeUi.scala
@@ -27,7 +27,9 @@ object ReactNativeUi extends ScalaJsModule {
 
   override val internalDependencies: Seq[ClasspathDep[ProjectReference]] = Seq(
     ReactNativeCore.definition,
+    ReactNativeCommunity.definition,
     ReactNavigation.definition,
+    Expo.definition,
     ReactNativeTest.definition % "test"
   )
 

diff --git a/showcase/package-lock.json b/showcase/package-lock.json
diff --git a/showcase/package.json b/showcase/package.json
@@ -25,6 +25,7 @@
     "react-native-safe-area-context": "0.6.0",
     "react-native-screens": "2.0.0-alpha.12",
     "react-native-web": "~0.11.7",
+    "react-native-svg": "9.13.3",
     "react-redux": "^5.0.3",
     "redux": "^3.6.0"
   },

diff --git a/showcase/src/main/scala/showcase/app/ShowcaseRoot.scala b/showcase/src/main/scala/showcase/app/ShowcaseRoot.scala
@@ -1,5 +1,6 @@
 package showcase.app
 
+import showcase.app.community._
 import showcase.app.expo._
 import scommons.react._
 import scommons.react.navigation._
@@ -41,6 +42,15 @@ object ShowcaseRoot extends FunctionComponent[Unit] {
             }: js.Function1[TabBarIconParams, ReactElement]
           }
         )(),
+        <(Tab.Screen)(
+          ^.name := "community",
+          ^.component := CommunityDemoScreen.communityStackComp,
+          ^.options := new TabScreenOptions {
+            override val tabBarIcon = { params =>
+              <(ShowcaseIcons.FontAwesome5)(^.name := "reacteurope", ^.rnSize := params.size, ^.color := params.color)()
+            }: js.Function1[TabBarIconParams, ReactElement]
+          }
+        )(),
         <(Tab.Screen)(
           ^.name := "expo",
           ^.component := ExpoDemoScreen.expoStackComp,

diff --git a/showcase/src/main/scala/showcase/app/ShowcaseScreen.scala b/showcase/src/main/scala/showcase/app/ShowcaseScreen.scala
@@ -16,6 +16,7 @@ object ShowcaseScreen extends FunctionComponent[ShowcaseScreenProps] {
     <(ShowcaseListView())(^.wrapped := ShowcaseListViewProps(
       items = List(
         "ReactNative" -> "Demo core components",
+        "Community" -> "Demo community components",
         "Expo" -> "Demo expo components",
         "Styles" -> "Demo different styles",
         "DemoTask" -> "Demo API tasks"

diff --git a/showcase/src/main/scala/showcase/app/community/CommunityDemoController.scala b/showcase/src/main/scala/showcase/app/community/CommunityDemoController.scala
@@ -0,0 +1,23 @@
+package showcase.app.community
+
+import showcase.app.ShowcaseStateDef
+import io.github.shogowada.scalajs.reactjs.redux.Redux.Dispatch
+import scommons.react._
+import scommons.react.navigation._
+import scommons.reactnative.app.BaseStateAndRouteController
+
+object CommunityDemoController
+  extends BaseStateAndRouteController[ShowcaseStateDef, CommunityDemoScreenProps] {
+
+  lazy val uiComponent: UiComponent[CommunityDemoScreenProps] = CommunityDemoScreen
+
+  def mapStateAndRouteToProps(dispatch: Dispatch,
+                              state: ShowcaseStateDef,
+                              nav: Navigation): CommunityDemoScreenProps = {
+    CommunityDemoScreenProps(
+      navigate = { screen =>
+        nav.navigate(screen)
+      }
+    )
+  }
+}