Merge branch 'main' into button-component

Author: hayanisaid

.github/workflows/publish.yml

@@ -0,0 +1,52 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - 'main'
+
+jobs:
+  publish:
+    if: "contains(github.event.head_commit.message, '[publish]')"
+
+    runs-on: macos-latest
+
+    env:
+      DEFAULT_PYTHON: 3.8
+      PIPELINE_CONTEXT: DEV
+      PIPELINE_LIBRARY_PATH: ${{ github.workspace }}/.github/library
+
+    steps:
+      # Checkout your source repo (must do this before the library)
+      - name: Checkout source Git repo
+        uses: actions/checkout@v3
+
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run prepublish (tests and build)
+        run: yarn ci
+
+      - name: Publish React Ape package
+        run: cd ./packages/react-ape && yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/tests.yml

@@ -1,6 +1,6 @@
 name: Run Tests
 
-on: push
+on: [push, pull_request]
 
 jobs:
   build:

README.md

@@ -6,6 +6,8 @@
 
 ## [Check the Docs (raphamorim.io/react-ape)](https://raphamorim.io/react-ape)
 
+## [Join our Discord](https://discord.gg/njHHfRzJ42)
+
 ### DISCLAIMER: In experimental stage
 
 React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional [React-TV](https://github.com/raphamorim/react-tv) renderer. It's mainly a renderer focused on creating things for TV, PS5, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices.
@@ -69,7 +71,11 @@ class ReactApeComponent extends Component {
 
 ## Demo on PS Vita
 
-<img alt='Demo PS Vita' src='assets/demo-ps-vita.jpg' height='330px' />
+![Demo on PS Vita](assets/demo-ps-vita.jpg)
+
+## Demo on TV
+
+![Demo on TV](assets/demo-tv.png)
 
 ## Testing it
 

assets/demo-ps-vita.jpg

@@ -34,22 +34,21 @@
     "@babel/preset-react": "7.16.7",
     "@babel/register": "7.17.7",
     "babel-jest": "27.5.1",
-    "babel-loader": "8.0.5",
     "babel-polyfill": "6.26.0",
     "canvas": "2.9.0",
     "chalk": "2.4.1",
     "docusaurus": "2.0.0-alpha.66",
-    "flow-bin": "0.174.1",
-    "flow-typed": "3.7.0",
+    "flow-bin": "0.182.0",
+    "flow-typed": "3.8.0",
     "glob": "7.1.2",
     "google-closure-compiler": "20220301.0.0",
     "jest": "27.5.1",
     "jsdom": "19.0.0",
     "lerna": "4.0.0",
-    "prettier": "1.5.3",
-    "react": "18.1.0",
-    "react-reconciler": "0.28.0",
-    "react-test-renderer": "18.1.0",
+    "prettier": "2.7.1",
+    "react": "18.2.0",
+    "react-reconciler": "0.29.0",
+    "react-test-renderer": "18.2.0",
     "rollup": "0.62.0",
     "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-commonjs": "9.1.3",

assets/demo-tv.png

@@ -16,6 +16,7 @@
     "webpack": "5.70.0",
     "webpack-cli": "4.9.2",
     "webpack-dev-server": "4.7.4",
+    "babel-loader": "8.2.5",
     "html-webpack-plugin": "5.5.0"
   }
 }

package.json

@@ -51,13 +51,7 @@ class Clock extends React.Component {
         <Text style={styles.time}>
           {this.state.time}
         </Text>
-
-        {/*<Text style={styles.time}>
-          {this.state.time}
-        </Text>
-        <Text style={styles.time}>
-          {this.state.time}
-        </Text>*/}
+   
       </View>
     );
   }

packages/app/package.json

@@ -40,7 +40,8 @@ class Item extends React.Component {
           style={{
             color: focused ? '#331A00' : 'white',
             fontSize: 24,
-          }}>
+          }}
+        >
           {text}
         </Text>
       </View>

packages/app/src/Clock.js

@@ -40,21 +40,18 @@ function Slideshow() {
     }
   }
 
-  React.useEffect(
-    () => {
-      resetTimeout();
-      timeoutRef.current = setTimeout(
-        () =>
-          setCurrentSlide(prev => (prev === slides.length - 1 ? 0 : prev + 1)),
-        delay
-      );
+  React.useEffect(() => {
+    resetTimeout();
+    timeoutRef.current = setTimeout(
+      () =>
+        setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1)),
+      delay
+    );
 
-      return () => {
-        resetTimeout();
-      };
-    },
-    [currentSlide]
-  );
+    return () => {
+      resetTimeout();
+    };
+  }, [currentSlide]);
 
   return (
     <View style={{...styles.slideshow}}>