Merge pull request #17 from barajs/build/bara-react-icons

Build/bara react icons

Author: nampdn

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

@types/react-native-vector-icons/index.d.ts

@@ -0,0 +1,11 @@
+declare module 'react-native-vector-icons' {
+  export * from 'react-native-vector-icons'
+}
+
+declare module 'react-native-vector-icons/dist/MaterialIcons' {}
+
+declare module 'react-native-vector-icons/dist/Octicons' {}
+
+declare module 'react-native-vector-icons/Fonts/MaterialIcons.ttf' {}
+
+declare module 'react-native-vector-icons/Fonts/Octicons.ttf' {}

@types/react-native-web/index.d.ts

@@ -0,0 +1,27 @@
+declare module 'react-native-web' {
+  export * from 'react-native'
+}
+
+namespace JSX {
+  import * as ReactNative from 'react-native'
+  interface IntrinsicAttributes extends React.Attributes {
+    accessibilityRole?:
+      | ReactNative.AccessibilityRole
+      | 'article' // article
+      | 'banner' // header
+      | 'button' // button
+      | 'complementary' // aside
+      | 'contentinfo' // footer
+      | 'form' // form
+      | 'heading' // h1, h2, h3, ...
+      | 'label' // label
+      | 'link' // a
+      | 'list' // ul
+      | 'listitem' // li
+      | 'main' // main
+      | 'navigation' // nav
+      | 'region' // section
+    className?: string
+    tabIndex?: number
+  }
+}

@types/react-native/index.d.ts

@@ -0,0 +1,22 @@
+export * from 'react-native'
+
+declare module 'react-native' {
+  export namespace Animated {
+    export type AnimatedComponent<
+      T extends React.ComponentClass
+    > = (T extends React.ComponentClass<infer P>
+      ? React.ComponentClass<P>
+      : React.ComponentClass) & {
+      getNode(): InstanceType<T>
+    }
+
+    export function createAnimatedComponent<
+      T extends React.ComponentClass<any, any>
+    >(component: T): AnimatedComponent<T>
+
+    export const View: AnimatedComponent<typeof View>
+    export const Image: AnimatedComponent<typeof Image>
+    export const Text: AnimatedComponent<typeof Text>
+    export const ScrollView: AnimatedComponent<typeof ScrollView>
+  }
+}

craco.config.js

@@ -0,0 +1,27 @@
+const fs = require('fs')
+const path = require('path')
+
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
+const appIncludes = [resolveApp('src')]
+module.exports = {
+  babel: {
+    plugins: ['@babel/plugin-proposal-class-properties'],
+  },
+  webpack: {
+    configure: (config, { env, paths }) => {
+      config.module.rules[0].include = appIncludes
+      config.module.rules[1] = null
+      config.module.rules[2].oneOf[1].include = appIncludes
+      config.module.rules[2].oneOf[1].options.plugins = [
+        require.resolve('babel-plugin-react-native-web'),
+      ].concat(config.module.rules[2].oneOf[1].options.plugins)
+
+      config.module.rules = config.module.rules.filter(Boolean) // Clear null rules
+
+      config.plugins[9].tsconfig = resolveApp('tsconfig.web.json')
+
+      return config
+    },
+  },
+}

index.js

@@ -9,6 +9,6 @@ import { name as appName } from './app.json'
 import registerBaraFeatures from './src/bara'
 
 register(() => {
-  useReactApp({ name: appName, isNative: true, App })
   registerBaraFeatures()
+  useReactApp({ name: appName, isNative: true, App })
 })

package.json

@@ -6,15 +6,15 @@
   "homepage": "https://example.barajs.dev",
   "scripts": {
     "dev": "run-p start:web start:mobile start:desktop",
-    "start:web": "react-scripts start",
+    "start:web": "craco start --verbose",
     "start:mobile": "node node_modules/react-native/local-cli/cli.js start",
     "start:desktop": "cross-env BROWSER=none concurrently \"yarn compile:desktop -w\" \"wait-on http://localhost:3000 && yarn watch:desktop\"",
     "watch:desktop": "nodemon --watch dist --exec \"electron ./dist\"",
     "do:web": "concurrently --kill-others \"yarn compile -w\" \"yarn start:web\"",
     "do:desktop": "cross-env BROWSER=none concurrently \"yarn dev:web\" \"yarn compile:desktop -w\" \"wait-on http://localhost:3000 && yarn watch:desktop\"",
     "compile": "run-s compile:tsc compile:web compile:desktop",
     "compile:tsc": "tsc -b",
-    "compile:web": "react-scripts build",
+    "compile:web": "craco build",
     "compile:desktop": "tsc -b ./tsconfig.desktop.json",
     "build:desktop": "run-s clean compile:desktop compile:web build:desktop:cpres build:desktop:electron",
     "build:desktop:cpres": "shx cp -R build dist/web",
@@ -26,18 +26,24 @@
   },
   "dependencies": {
     "bara": "2.3.1",
-    "bara-react": "2.0.0",
+    "bara-react": "2.0.1",
+    "bara-react-icons": "1.1.0",
     "electron-store": "3.2.0",
     "electron-updater": "4.0.6",
     "jsonfile": "5.0.0",
     "mkdirp": "0.5.1",
     "react": "16.8.6",
+    "react-app-polyfill": "0.2.2",
     "react-dom": "16.8.6",
-    "react-native": "0.59.4"
+    "react-native": "0.59.4",
+    "react-native-vector-icons": "6.4.2"
   },
   "devDependencies": {
     "@babel/core": "7.4.3",
+    "@babel/plugin-proposal-class-properties": "7.4.0",
+    "@babel/polyfill": "7.4.3",
     "@babel/runtime": "7.4.3",
+    "@craco/craco": "4.1.0",
     "@types/electron-devtools-installer": "2.2.0",
     "@types/electron-store": "1.3.1",
     "@types/jest": "24.0.11",
@@ -46,7 +52,9 @@
     "@types/node": "11.13.4",
     "@types/react": "16.8.13",
     "@types/react-native": "0.57.45",
+    "@types/react-native-vector-icons": "6.4.0",
     "@types/react-test-renderer": "16.8.1",
+    "babel-plugin-react-native-web": "0.11.2",
     "concurrently": "4.1.0",
     "cross-env": "5.2.0",
     "electron": "4.1.4",

src/App.tsx

@@ -12,6 +12,8 @@ import { BaraProvider, TouchableOpacity } from 'bara-react'
 import React, { Component } from 'react'
 import { Platform, StyleSheet, Text, View } from 'react-native'
 
+import { Octicons as Icon } from 'bara-react-icons/es'
+
 import { Sidebar } from './features/sidebar'
 
 const instructions = Platform.select({
@@ -27,6 +29,7 @@ export default class App extends Component<Props> {
     return (
       <BaraProvider>
         <View style={styles.container}>
+          <Icon name="chevron-right" size={30} />
           <Text style={styles.welcome}>Welcome to Bara React Native!</Text>
           <Text style={styles.instructions}>To get started, edit App.tsx</Text>
           <Text style={styles.instructions}>{instructions}</Text>

src/bara.ts

@@ -1,7 +1,9 @@
+import { useInitStream } from 'bara'
 import { useTouchableOpacityStream } from 'bara-react'
 import { useWelcome } from './features/welcome'
 
 export const useStreams = () => {
+  useInitStream()
   useTouchableOpacityStream()
 }
 

src/index.css

@@ -0,0 +1,49 @@
+::-webkit-scrollbar {
+  width: 1px;
+  height: 1px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb
+{
+  background-color: transparent;
+}
+
+*:focus {
+  outline-color: #49d3b4;
+}
+
+*[tabIndex^="-1"]:focus {
+  outline: none;
+}
+
+html, body, #root, #root > div {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: #292C33;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a:hover, a:hover > *:not([class*='touchAction']) {
+  text-decoration: underline;
+}
+
+input:focus {
+  outline: none !important;
+}
+
+/* https://github.com/necolas/react-native-web/issues/1299 */
+.pagingEnabledFix > div > div > div {
+  height: 100%;
+}
+