From 116f59d5a66a3e12b67362d09f478e211c5e8083 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alb=C3=A9rico=20Dias=20Barreto=20Filho?= Date: Tue, 3 May 2022 14:13:51 -0300 Subject: [PATCH] feat(upgrade react 18) --- .../Report-remaining-open-issues.yml | 29 ------- package.json | 2 +- template.json | 80 +++++++++---------- template/README.md | 24 +++--- template/create-opk.js | 17 ++-- template/create-production-overwolf-build.js | 28 +++---- template/public/app/manifest.json | 10 +-- template/src/components/Feed/Feed.tsx | 8 +- template/src/components/Feed/FeedItem.tsx | 4 +- .../src/components/Feed/feedInterface.d.ts | 10 +-- template/src/components/Title/Title.tsx | 10 ++- .../src/components/Title/titleInterface.d.ts | 4 +- .../features/desktopWindow/DesktopHeader.tsx | 79 +++++++++--------- template/src/index.tsx | 49 ++++++------ 14 files changed, 165 insertions(+), 189 deletions(-) delete mode 100644 .github/workflows/Report-remaining-open-issues.yml diff --git a/.github/workflows/Report-remaining-open-issues.yml b/.github/workflows/Report-remaining-open-issues.yml deleted file mode 100644 index 2f23776..0000000 --- a/.github/workflows/Report-remaining-open-issues.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: Report remaining open issues -on: - schedule: - # Daily at 8:20 UTC - - cron: '20 8 * * *' -jobs: - track_pr: - runs-on: ubuntu-latest - steps: - - run: | - numOpenIssues="$(gh api graphql -F owner=$OWNER -F name=$REPO -f query=' - query($name: String!, $owner: String!) { - repository(owner: $owner, name: $name) { - issues(states:OPEN){ - totalCount - } - } - } - ' --jq '.data.repository.issues.totalCount')" - - echo 'NUM_OPEN_ISSUES='$numOpenIssues >> $GITHUB_ENV - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - OWNER: ${{ github.repository_owner }} - REPO: overwolf-modern-react-boilerplate - - run: | - gh issue create --title "Issue report" --body "$NUM_OPEN_ISSUES issues remaining" --repo $GITHUB_REPOSITORY - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/package.json b/package.json index ec16a83..5ba565d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cra-template-overwolf-typescript-redux", - "version": "2.2.11", + "version": "3.0.0", "description": "This is the official [Overwolf TypeScript Redux](https://github.com/AlbericoD/overwolf-modern-react-boilerplate) template for [Create React App](https://github.com/facebook/create-react-app).", "main": "template.json", "scripts": { diff --git a/template.json b/template.json index 5f5863a..aedba8e 100644 --- a/template.json +++ b/template.json @@ -1,41 +1,41 @@ { - "package": { - "dependencies": { - "@reduxjs/toolkit": "^1.2.5", - "@testing-library/jest-dom": "^5.11.4", - "@testing-library/react": "^12.0.0", - "@testing-library/user-event": "^13.2.1", - "@types/jest": "^27.0.1", - "@types/node": "^16.7.11", - "@types/react": "^17.0.20", - "@types/react-dom": "^17.0.9", - "@types/react-redux": "^7.1.9", - "i18next": "^20.6.0", - "overwolf-hooks": "^2.0.0", - "react-i18next": "^11.7.3", - "react-redux": "^7.2.1", - "typescript": "^4.0.3", - "web-vitals": "^2.1.0" - }, - "devDependencies": { - "@types/remote-redux-devtools": "^0.5.4", - "remote-redux-devtools": "^0.5.16", - "remotedev-server": "^0.3.1", - "@overwolf/types": "^3.12.0" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "scripts": { - "pack-overwolf": "node create-production-overwolf-build", - "dist-overwolf": "tar -a -c -f dist.zip -C build *", - "start-remote-devtools": "node remote-dev-redux-devtools", - "build:overwolf": "npm run build && npm run pack-overwolf && npm run dist-overwolf", - "create-opk": "tar -a -c -f dist-opk.zip -C build/app * && node create-opk" - }, - "homepage": "." - } -} \ No newline at end of file + "package": { + "dependencies": { + "@reduxjs/toolkit": "^1.2.5", + "@testing-library/jest-dom": "^5.16.4", + "@testing-library/react": "^13.1.1", + "@testing-library/user-event": "^14.1.1", + "@types/jest": "^27.0.1", + "@types/node": "^17.0.31", + "@types/react": "^18.0.8", + "@types/react-dom": "^18.0.3", + "@types/react-redux": "^7.1.9", + "i18next": "^21.6.16", + "overwolf-hooks": "^3.0.1", + "react-i18next": "^11.7.3", + "react-redux": "^8.0.1", + "typescript": "^4.0.3", + "web-vitals": "^2.1.0", + "prettier": "^2.5.1" + }, + "devDependencies": { + "@types/remote-redux-devtools": "^0.5.4", + "remote-redux-devtools": "^0.5.16", + "remotedev-server": "^0.3.1", + "@overwolf/types": "^3.12.0" + }, + "eslintConfig": { + "extends": ["react-app", "react-app/jest"] + }, + "scripts": { + "start-remote-server": "node remotedev-server", + "format": "prettier --write src/**/*.ts{,x}", + "lint": "tsc --noEmit && eslint src/**/*.ts{,x}", + "pack-overwolf": "node create-production-overwolf-build", + "dist-overwolf": "cd build && tar -acf ../dist.v$npm_package_version.zip * && cd -", + "create-opk": "cd build/app && tar -acf ../../dist-opk.v$npm_package_version.zip * && cd - && node create-opk", + "build:overwolf": "npm run build && npm run pack-overwolf && npm run dist-overwolf && npm run create-opk" + }, + "homepage": "." + } +} diff --git a/template/README.md b/template/README.md index 2bad4aa..469ec9f 100644 --- a/template/README.md +++ b/template/README.md @@ -219,7 +219,7 @@ you need to create an optimized version of your code and the correct structure b - just send your .zip code to the overwolf test team. 4. **Edit Changelog** -> To make it easier for users, contributors and overwolf team to see precisely what notable changes have been made between each release (or version) of the project. + > To make it easier for users, contributors and overwolf team to see precisely what notable changes have been made between each release (or version) of the project. ```shell $ vi project-root/CHANGELOG.md @@ -233,16 +233,16 @@ About [ CI/CD File.yml](https://raw.githubusercontent.com/AlbericoD/overwolf-mod check out some screenshots of what github actions looks like: -![Overview](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview.png) --- -![Overview Details-1](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-details-1.png) --- -![Overview Details-2](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-details-2.png) --- -![Overview Release-1](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-release-1.png) --- -![Overview Release-2](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-release-2.png) --- +## ![Overview](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview.png) + +## ![Overview Details-1](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-details-1.png) + +## ![Overview Details-2](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-details-2.png) + +## ![Overview Release-1](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-release-1.png) + +## ![Overview Release-2](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-release-2.png) + ![Overview Release-3](https://raw.githubusercontent.com/AlbericoD/overwolf-modern-react-boilerplate/master/doc/ci-overview-release-3.png) -**in the near future the overwolf team will make available an API to publish an application, so just add a few lines of code at the end of the github actions and the build will be complete +\*\*in the near future the overwolf team will make available an API to publish an application, so just add a few lines of code at the end of the github actions and the build will be complete diff --git a/template/create-opk.js b/template/create-opk.js index f55a3ae..fe584db 100644 --- a/template/create-opk.js +++ b/template/create-opk.js @@ -1,13 +1,14 @@ -const fs = require('fs'); -const path = require('path'); +const fs = require("fs"); +const path = require("path"); +//import metadata from './package.json'; +const { version } = require("./package.json"); -console.log("Init overwolf opk packaging") +console.log("Init overwolf opk packaging"); const currentDir = __dirname; -const distFile = path.join(currentDir, 'dist-opk.zip') -const opkFile = path.join(currentDir, 'dist-opk.opk') +const distFile = path.join(currentDir, `dist-opk.v${version}.zip`); +const opkFile = path.join(currentDir, `dist-opk.v${version}.opk`); -fs.copyFileSync(distFile, opkFile) +fs.copyFileSync(distFile, opkFile); - -console.log("opk created successfully!") \ No newline at end of file +console.log("opk created successfully!"); diff --git a/template/create-production-overwolf-build.js b/template/create-production-overwolf-build.js index 232791c..3513a64 100644 --- a/template/create-production-overwolf-build.js +++ b/template/create-production-overwolf-build.js @@ -1,30 +1,30 @@ -const fs = require('fs'); -const path = require('path'); +const fs = require("fs"); +const path = require("path"); const { existsSync, mkdirSync, renameSync } = fs; -console.log("Init overwolf build") +console.log("Init overwolf build"); const currentDir = __dirname; -const fileDir = path.join(currentDir, 'build') -const buildDir = path.join(fileDir, 'app', 'Files'); +const fileDir = path.join(currentDir, "build"); +const buildDir = path.join(fileDir, "app", "Files"); // Creating Files directory if doesn't exists -if (!existsSync(buildDir)){ - mkdirSync(buildDir); +if (!existsSync(buildDir)) { + mkdirSync(buildDir); } // Moving index.html and static folder -const index = 'index.html' -const static = 'static' +const index = "index.html"; +const static = "static"; const customRename = (name) => { - const oldPath = path.join(fileDir, name) - const newPath = path.join(buildDir, name) - renameSync(oldPath, newPath) -} + const oldPath = path.join(fileDir, name); + const newPath = path.join(buildDir, name); + renameSync(oldPath, newPath); +}; customRename(index); customRename(static); -console.log("Compiled successfully!"); \ No newline at end of file +console.log("Compiled successfully!"); diff --git a/template/public/app/manifest.json b/template/public/app/manifest.json index 59a8a57..85c149c 100644 --- a/template/public/app/manifest.json +++ b/template/public/app/manifest.json @@ -2,8 +2,8 @@ "manifest_version": 1, "type": "WebApp", "meta": { - "name": "Overwolf Modern React Boilerplate-v2", - "version": "2.0.0", + "name": "Overwolf Modern React Boilerplate-v3", + "version": "3.0.0", "minimum-overwolf-version": "0.120.0", "author": "Albérico Dias Barreto Filho", "icon": "IconMouseOver.png", @@ -39,7 +39,7 @@ "file": "Files/index.html", "native_window": true, "transparent": true, - "resizable": false, + "resizable": true, "size": { "width": 1212, "height": 699 @@ -49,8 +49,8 @@ "height": 699 }, "max_size": { - "width": 1212, - "height": 699 + "width": 1920, + "height": 1080 }, "desktop_only": true }, diff --git a/template/src/components/Feed/Feed.tsx b/template/src/components/Feed/Feed.tsx index 0ad883b..5efee1c 100644 --- a/template/src/components/Feed/Feed.tsx +++ b/template/src/components/Feed/Feed.tsx @@ -1,7 +1,7 @@ -import { FeedItem } from './FeedItem' -import './Feed.css' +import { FeedItem } from "./FeedItem"; +import "./Feed.css"; -export function Feed({ title, data }: IFeedProps) { +export function Feed({ title, data }: FeedProps) { return (

{title}

@@ -9,5 +9,5 @@ export function Feed({ title, data }: IFeedProps) {
- ) + ); } diff --git a/template/src/components/Feed/FeedItem.tsx b/template/src/components/Feed/FeedItem.tsx index 216090f..b5f02b8 100644 --- a/template/src/components/Feed/FeedItem.tsx +++ b/template/src/components/Feed/FeedItem.tsx @@ -1,3 +1,3 @@ -export function FeedItem({ content }: IFeedItemProps) { - return
  • {content}
    • +export function FeedItem({ content }: FeedItemProps) { + return
  • {content}
    • ; } diff --git a/template/src/components/Feed/feedInterface.d.ts b/template/src/components/Feed/feedInterface.d.ts index 1ef2348..b3c8568 100644 --- a/template/src/components/Feed/feedInterface.d.ts +++ b/template/src/components/Feed/feedInterface.d.ts @@ -1,8 +1,8 @@ -interface IFeedProps { - title: string - data: Record +interface FeedProps { + title: string; + data: Record; } -interface IFeedItemProps { - content: string +interface FeedItemProps { + content: string; } diff --git a/template/src/components/Title/Title.tsx b/template/src/components/Title/Title.tsx index 4f293c8..31654ec 100644 --- a/template/src/components/Title/Title.tsx +++ b/template/src/components/Title/Title.tsx @@ -1,5 +1,9 @@ -import { FC } from 'react' +import { ReactNode } from "react"; -export const Title: FC = ({ color, children }) => { - return

    {children}

    +interface Props extends TitleProps { + children: ReactNode; } + +export const Title = ({ color, children }: Props) => { + return

    {children}

    ; +}; diff --git a/template/src/components/Title/titleInterface.d.ts b/template/src/components/Title/titleInterface.d.ts index cdf5b91..7b9497f 100644 --- a/template/src/components/Title/titleInterface.d.ts +++ b/template/src/components/Title/titleInterface.d.ts @@ -1,3 +1,3 @@ -interface ITitle { - color: 'red' | 'blue' | 'green' | 'white' +interface TitleProps { + color: "red" | "blue" | "green" | "white"; } diff --git a/template/src/features/desktopWindow/DesktopHeader.tsx b/template/src/features/desktopWindow/DesktopHeader.tsx index 91ec8c3..2228456 100644 --- a/template/src/features/desktopWindow/DesktopHeader.tsx +++ b/template/src/features/desktopWindow/DesktopHeader.tsx @@ -1,35 +1,32 @@ -import { useState, useCallback, useEffect } from 'react' -import { WINDOW_NAMES, OVERWOLF_HOOKS_OPTIONS } from 'app/constants' -import { useWindow, useDrag } from 'overwolf-hooks' -import { SVGComponent } from './DesktopHeaderSVG' -import style from './DesktopHeader.module.css' +import { useState, useCallback, useEffect } from "react"; +import { WINDOW_NAMES, OVERWOLF_HOOKS_OPTIONS } from "app/constants"; +import { useWindow, useDrag } from "overwolf-hooks"; +import { SVGComponent } from "./DesktopHeaderSVG"; +import style from "./DesktopHeader.module.css"; -const { DESKTOP, BACKGROUND } = WINDOW_NAMES +const { DESKTOP, BACKGROUND } = WINDOW_NAMES; export const DesktopHeader = () => { - const [maximized, setMaximize] = useState(false) - const [desktopWindow] = useWindow(DESKTOP, OVERWOLF_HOOKS_OPTIONS) - const [backgroundWindow] = useWindow(BACKGROUND, OVERWOLF_HOOKS_OPTIONS) + const [maximized, setMaximize] = useState(false); + const [desktopWindow] = useWindow(DESKTOP, OVERWOLF_HOOKS_OPTIONS); + const [backgroundWindow] = useWindow(BACKGROUND, OVERWOLF_HOOKS_OPTIONS); const { onDragStart, onMouseMove, setCurrentWindowID } = useDrag( null, - OVERWOLF_HOOKS_OPTIONS, - ) + OVERWOLF_HOOKS_OPTIONS + ); const toggleIcon = useCallback(() => { - setMaximize((value) => { - if (value) desktopWindow?.restore() - else desktopWindow?.maximize() - return !value - }) - }, [desktopWindow]) + if (!desktopWindow) return; + if (!maximized) desktopWindow.maximize(); + else desktopWindow.restore(); + setMaximize(!maximized); + }, [desktopWindow, maximized]); const updateDragWindow = useCallback(() => { - if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id) - }, [desktopWindow, setCurrentWindowID]) + if (desktopWindow?.id) setCurrentWindowID(desktopWindow.id); + }, [desktopWindow, setCurrentWindowID]); - useEffect(() => { - updateDragWindow() - }, [updateDragWindow]) + useEffect(updateDragWindow, [updateDragWindow]); return ( <> @@ -39,15 +36,15 @@ export const DesktopHeader = () => { onMouseDown={onDragStart} onMouseMove={onMouseMove} > -

    - {' '} - 🐺 ICON - OVERWOLF-MODERN-REACT-BOILERPLATE-V2 +

    + {" "} + 🐺 ICON - OVERWOLF-MODERN-REACT-BOILERPLATE-V3

    -
    +
    -
    - ) -} + ); +}; diff --git a/template/src/index.tsx b/template/src/index.tsx index e1ecc84..2354940 100644 --- a/template/src/index.tsx +++ b/template/src/index.tsx @@ -1,13 +1,21 @@ -import './overwolf.dev.mock' -import store from 'app/store' -import i18next from 'i18next' -import { resources } from 'locales' -import ReactDOM from 'react-dom' -import { initReactI18next } from 'react-i18next' -import { Provider } from 'react-redux' -import { App } from './app/App' -import reportWebVitals from './reportWebVitals' +import "./overwolf.dev.mock"; +import store from "app/store"; +import i18next from "i18next"; +import { resources } from "locales"; +import { createRoot } from "react-dom/client"; +import { initReactI18next } from "react-i18next"; +import { Provider } from "react-redux"; +import { App } from "./app/App"; +import reportWebVitals from "./reportWebVitals"; +const container = document.getElementById("root"); +const root = createRoot(container!); + +const OverwolfApp = () => ( + + + +); /* * before render app, get overwolf language * then load resources, default to en if not detected @@ -18,32 +26,27 @@ overwolf.settings.language.get(({ language }) => { { resources, lng: language, - fallbackLng: 'en', + fallbackLng: "en", interpolation: { escapeValue: false, }, }, () => { - ReactDOM.render( - - - , - document.getElementById('root'), - ) - }, - ) -}) + root.render(); + } + ); +}); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals() +reportWebVitals(); // detect change overwolf language and set i18next language // then load resources const changeLanguage = ({ language, }: overwolf.settings.language.LanguageChangedEvent) => - i18next.changeLanguage(language) + i18next.changeLanguage(language); -overwolf.settings.language.onLanguageChanged.removeListener(changeLanguage) -overwolf.settings.language.onLanguageChanged.addListener(changeLanguage) +overwolf.settings.language.onLanguageChanged.removeListener(changeLanguage); +overwolf.settings.language.onLanguageChanged.addListener(changeLanguage);