chore: working on this, probably will abandon

.circleci/config.yml

@@ -0,0 +1,36 @@
+version: 2.1
+jobs:
+  build_windows:
+    docker:
+      - image: electronuserland/builder:wine
+    steps:
+      - checkout
+      - run: yarn
+      - run: yarn build-electron-win
+      - run: mkdir /tmp/artifacts
+      - run: mv -t /tmp/artifacts dist/*.exe
+      - store_artifacts:
+          path: /tmp/artifacts
+  build_linux:
+    docker:
+      - image: node:lts
+    steps:
+      - checkout
+      - run: yarn
+      - run: yarn build-electron-linux
+      - run: mkdir /tmp/artifacts
+      - run: mv -t /tmp/artifacts dist/*.snap dist/*.AppImage
+      - store_artifacts:
+          path: /tmp/artifacts
+
+workflows:
+  build:
+    jobs:
+      - hold:
+          type: approval
+      - build_windows:
+          requires:
+            - hold
+      - build_linux:
+          requires:
+            - hold

.github/workflows/publish.yml

@@ -1,63 +0,0 @@
-name: Build/release
-
-on: push
-
-jobs:
-  release:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [macos-latest, ubuntu-latest, windows-latest]
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v1
-
-      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1
-        with:
-          node-version: 20
-
-      - name: Install packages
-        run: yarn install --network-timeout 1000000
-
-      - name: Build electron index.ts file
-        run: yarn electron-build
-
-      - name: Build/release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
-        with:
-          # GitHub token, automatically provided to the action
-          # (No need to define this secret in the repo settings)
-          github_token: ${{ secrets.github_token }}
-
-          # If the commit is tagged with a version (e.g. "v1.0.0"),
-          # release the app after building
-          release: ${{ startsWith(github.ref, 'refs/tags/v') }}
-
-      # - name: Send POST request to update server
-      #   if: startsWith(github.ref, 'refs/tags/v')
-      #   run: |
-      #     curl -X POST -H "Content-Type: application/json" -d '{"version": "${{ github.ref }}" }' https://automata.sern.dev/gui/newVersion
-      
-      - name: Move artifacts
-        shell: bash
-        run: |
-          if [ "${{ matrix.os }}" == "windows-latest" ]; then
-            mkdir d:\\tmp\\artifacts
-            mv dist/*.exe d:\\tmp\\artifacts
-          else
-            mkdir -p /tmp/artifacts
-            if [ "${{ matrix.os }}" == "macos-latest" ]; then
-              mv dist/*.dmg /tmp/artifacts
-            else
-              mv dist/*.AppImage /tmp/artifacts
-            fi
-          fi
-        
-      - name: Upload artifacts
-        uses: actions/upload-artifact@v1
-        with:
-          name: application
-          path: /tmp/artifacts

electron/index.ts

@@ -1,19 +1,17 @@
 import * as path from 'node:path'
-import { app, BrowserWindow, dialog, ipcMain, ipcRenderer } from 'electron';
+import { app, BrowserWindow, dialog, ipcMain } from 'electron';
 import * as colorette from 'colorette';
 import * as fs from 'node:fs'
 import * as os from 'node:os'
 import { exec, spawn } from 'node:child_process';
-import getPlatform from './utils/getPlatform.js';
-import updateChecker from './updateChecker.js';
 
-async function createWindow() {
+function createWindow() {
 	const mainWindow = new BrowserWindow({
 		width: 800,
 		height: 600,
 		webPreferences: {
 			nodeIntegration: true,
-			contextIsolation: false,
+			contextIsolation: false
 		},
 		icon: './icons/icon.png',
 		show: false,
@@ -26,16 +24,8 @@ async function createWindow() {
 		mainWindow.loadURL('http://localhost:5173');
 	}
 
-	mainWindow.on('ready-to-show', async () => {
+	mainWindow.on('ready-to-show', () => {
 		mainWindow.show();
-
-		ipcMain.on('updateAvailable', async (event) => {
-			const checkUpdates = await updateChecker()
-			if (checkUpdates) {
-				event.reply('updateAvailableResponse', checkUpdates)
-			}
-		})
-		
 	});
 
 	mainWindow.on('page-title-updated', function (e) {
@@ -132,7 +122,22 @@ app.on('activate', () => {
 	}
 });
 
-const currentOS = getPlatform()
+let currentOS: string
+switch (process.platform) {
+	case 'linux':
+		currentOS = 'linux'
+		break;
+	case 'win32':
+		currentOS = 'windows'
+		break;
+	case 'darwin':
+		currentOS = 'macOS'
+		break;
+	default:
+		// defaulting for linux (most probable command syntax)
+		currentOS = 'linux'
+		break;
+}
 
 const asciiart = `         .:-=-:.         
 .:=+++++++++=-.     

electron/updateChecker.ts

@@ -1,12 +0,0 @@
-import { app } from "electron"
-
-export default async function updateChecker() {
-    const getLatest = await fetch('https://api.github.com/repos/sern-handler/gui/releases/latest')
-        .then(res => res.json())
-
-    if (`v${app.getVersion()}` !== getLatest.tag_name) {
-        return { version: getLatest.tag_name as string, url: getLatest.html_url as string }
-    } else {
-        return false
-    }
-}

electron/utils/getPlatform.ts

@@ -1,13 +0,0 @@
-export default function getPlatform() {
-    switch (process.platform) {
-        case 'linux':
-            return 'linux'
-        case 'win32':
-            return 'windows'
-        case 'darwin':
-            return 'macOS'
-        default:
-            // defaulting for linux (most probable command syntax)
-            return 'linux'
-    }
-}

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>sern</title>
+    <title>Vite + React + TS</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">

locales/en.json

@@ -29,9 +29,8 @@
       "COMMENT_FOR_TRANSLATOR_2": "the next string is used to change the text 'with' in the sentence 'with <package manager>'",
       "with": "with"
     },
-    "updateChecker": {
+    "settings": {
-      "updateAvailable": "Update {{version}} is available!",
+      "componentLoadTimes": "Component load times (some of them)"
-      "viewRelease": "View release"
     },
     "footer": {
       "COMMENT_FOR_TRANSLATOR": "Keep all the strings here as lowercase. It kinda gives a good vibe to the text :D",

locales/es.json

@@ -29,10 +29,6 @@
       "COMMENT_FOR_TRANSLATOR_2": "El texto de abajo sirve para reemplazar 'with' en las opciones de plantilla con lo de abajo. No cambiar.",
       "with": "con"
     },
-    "updateChecker": {
-      "updateAvailable": "La versión {{version}} está disponible!",
-      "viewRelease": "Ver actualización"
-    },
     "footer": {
       "COMMENT_FOR_TRANSLATOR": "Mantén todos los textos aquí en minúsculas. Le dan un buen vibe al texto :D",
       "web": "web",

locales/tr.json

@@ -1,40 +0,0 @@
-{
-    "credits": {
-      "propsTo": "@xxDeveloper (translation)",
-      "btw": "All COMMENT_FOR_TRANSLATOR keys are comments that help you how to write translations. Follow these so you get approved faster."
-    },
-    "translation": {
-      "functionalityCard": {
-        "init": {
-          "description": "Yeni bir proje oluşturun"
-        },
-        "plugins": {
-          "description": "Proje eklentilerini yönetin"
-        }
-      },
-      "initModal": {
-        "openModalButton": "Başla",
-        "projectName": "Proje ismi",
-        "selectTemplate": "Şablon seç",
-        "couldntFetchTemplates": "Şablonlar yüklenemedi, yenilemeyi deneyin (CTRL+R) ve online oludğunuzdan emin olun",
-        "installPackagesCheckbox": "Paketleri ben devam ederken yükle",
-        "selectPackageManager": "Paket yöneticisini seçin",
-        "chooseDirectoryButton": "Klasör seçin",
-        "selectedDirectory": "Seçili klasör:",
-        "goButton": "Gidelim!",
-        "commandSuccessful": "Komut başarılı!",
-        "commandFailed": "Komut başarsız oldu!",
-        "COMMENT_FOR_TRANSLATOR": "burada büyük harf kullan",
-        "openLogFile": "LOG dosyasını aç",
-        "COMMENT_FOR_TRANSLATOR_2": "sonraki dize, 'with <paket yöneticisi>' cümlesinde 'with'i değiştirmek için kullanılır'",
-        "with": "ile birlikte"
-      },
-      "footer": {
-        "COMMENT_FOR_TRANSLATOR": "Burada yazılarında küçük harf kullan. İyi vibe veriyor :D",
-        "COMMENT_FOR_TRANSLATOR_2": "Onları şu anki halleriyle tut. Sonuçta onlar marka, dilimizde markalar pek farklı şekilde anılmıyor",
-        "web": "ön sayfa",
-        "github": "github",
-        "discord": "discord"
-      }
-    }
-}

package.json

@@ -1,17 +1,16 @@
 {
   "name": "sern-gui",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.1.0-alpha",
   "main": "./dist/index.js",
   "homepage": "./",
   "scripts": {
+    "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "start": "vite",
+    "electron": "nodemon --watch electron/ --exec \"swc ./electron/index.ts -d ./dist && npx electron .\" electron/index.ts",
-    "electron": "nodemon --watch electron/ --exec \"swc ./electron/ -d ./dist && npx electron .\" electron/index.ts",
+    "electron-build": "swc ./electron/index.ts -d ./dist",
-    "dev": "concurrently \"yarn start\" \"yarn electron\"",
-    "electron-build": "swc ./electron/ -d ./dist",
     "build-electron": "yarn build && yarn electron-build && electron-builder --linux --windows",
     "build-electron-linux": "yarn build && yarn electron-build && electron-builder --linux",
     "build-electron-win": "yarn build && yarn electron-build && electron-builder --windows",
@@ -31,19 +30,19 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.1.2",
-    "react-snowfall": "^1.2.1"
+    "to-boolean": "^1.0.0"
   },
   "devDependencies": {
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.70",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+    "@types/to-boolean": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "concurrently": "^8.2.2",
+    "electron": "^26.2.1",
-    "electron": "^28.1.0",
+    "electron-builder": "^24.4.0",
-    "electron-builder": "^24.13.3",
     "eslint": "^8.44.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
@@ -52,11 +51,9 @@
     "vite": "^4.4.0"
   },
   "build": {
-    "appId": "dev.sern.gui",
-    "productName": "sern GUI",
     "files": [
       "./build/**/*",
-      "./dist/**/*"
+      "./dist/index.js"
     ],
     "directories": {
       "buildResources": "assets"
@@ -64,32 +61,6 @@
     "win": {
       "icon": "./icons/icon.ico",
       "publisherName": "sern"
-    },
-    "mac": {
-      "icon": "./icons/icon.icns",
-      "category": "public.app-category.developer-tools",
-      "target": [
-        "dmg",
-        "zip"
-      ]
-    },
-    "dmg": {
-      "background": "./icons/dmgbg.png",
-      "icon": "./icons/icon.icns",
-      "title": "sern GUI",
-      "contents": [
-        {
-          "x": 423,
-          "y": 203,
-          "type": "link",
-          "path": "/Applications"
-        },
-        {
-          "x": 117,
-          "y": 203,
-          "type": "file"
-        }
-      ]
     }
   }
 }

src/App.tsx

@@ -4,6 +4,7 @@ import './FunctionalityCard.js';
 import FunctionalityCard from './FunctionalityCard.js';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import LanguageSelector from './LanguageSelector';
+import Settings from './Settings';
 
 const darkTheme = createTheme({
 	palette: {
@@ -18,6 +19,7 @@ function App() {
 	return (
 		<div className="App">
 			<ThemeProvider theme={darkTheme}>
+				<Settings />
 				<LanguageSelector />
 				<h1 className="titleHeader">~$ sern</h1>
 				<div className="functionalityCards">

src/ComponentLoadTimeWidget.tsx

@@ -0,0 +1,7 @@
+import './ComponentLoadTimeWidget.css'
+
+export default function ComponentLoadTimeWidget(props: { state: { show: boolean, ad: number, bd: number } }) {
+	return (
+		<p>hi from the widget</p>
+	)
+}

src/LanguageSelector.tsx

@@ -32,7 +32,6 @@ export default function LanguageSelector() {
 				>
 					<MenuItem value={'en'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇺🇸</MenuItem>
 					<MenuItem value={'es'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇪🇸</MenuItem>
-					<MenuItem value={'tr'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇹🇷</MenuItem>
 				</Select>
 			</FormControl>
 		</div>

src/NewUpdate.tsx

@@ -1,60 +0,0 @@
-import { useEffect, useState } from 'react';
-const { shell, ipcRenderer } = window.require('electron');
-import { useTranslation } from 'react-i18next';
-import React from 'react';
-import { Snackbar, Alert, Button, IconButton } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-
-const NewUpdate = () => {
-    const { t } = useTranslation('translation', { keyPrefix: 'updateChecker' });
-    const [updateArgs, setUpdateArgs] = useState<null | NewUpdateArgs>(null);
-    const [snackbarOpen, setSnackbarOpen] = React.useState(true);
-    const handleSnackbarClose = () => setSnackbarOpen(false);
-
-    useEffect(() => {
-        ipcRenderer.send('updateAvailable');
-
-        ipcRenderer.on('updateAvailableResponse', (_event, args) => {
-            setUpdateArgs(args);
-            console.log('0gsafga')
-            ipcRenderer.removeAllListeners('updateAvailableResponse');
-        });
-    }, []);
-
-    const snackbarAction = (
-        <React.Fragment>
-          <Button color="secondary" size="small" onClick={() => shell.openExternal(updateArgs!.url!)}>
-            {t('viewRelease')}
-          </Button>
-          <IconButton
-            size="small"
-            aria-label="close"
-            color="inherit"
-            onClick={handleSnackbarClose}
-          >
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        </React.Fragment>
-    );
-
-    return (
-        <div>
-            {updateArgs && (
-                <div>
-                    <Snackbar open={snackbarOpen} autoHideDuration={5000} onClose={handleSnackbarClose} action={snackbarAction}>
-                        <Alert onClose={handleSnackbarClose} severity="success" sx={{ width: '100%' }} action={snackbarAction}>
-                            {t('updateAvailable', { version: updateArgs.version })}
-                        </Alert>
-                    </Snackbar>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default NewUpdate;
-
-interface NewUpdateArgs {
-    version: string;
-    url: string;
-}

src/Settings.css

@@ -0,0 +1,13 @@
+.boxStyle {
+    /* background-color: 'background.paper'; set in sx property of Box tag */
+    transform: translate(-50%, -50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 74.6vw;
+    height: 74.6vh;
+    border: 2px solid #FFF;
+    box-shadow: 24px;
+    padding: 40px;
+    color: white;
+}

src/Settings.tsx

@@ -0,0 +1,73 @@
+import './Settings.css';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from 'react-i18next';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import { Profiler } from 'react';
+import ComponentLoadTimeWidget from './ComponentLoadTimeWidget';
+
+export default function Settings() {
+	const [CLTW, setCLTW] = React.useState({ show: false, ad: 0, bd: 0 })
+	const onRender = (_id: string, _phase: string, actualDuration: number, baseDuration: number, _startTime: EpochTimeStamp, _commitTime: EpochTimeStamp) => {
+		if (!!window.localStorage.getItem('componentLoadTimes')) {
+			setCLTW({
+				show: true,
+				ad: actualDuration,
+				bd: baseDuration
+			})
+		}
+	}
+
+	const { t } = useTranslation('translation', { keyPrefix: 'settings' });
+	const [state, setState] = React.useState({
+		componentLoadTimes: !!window.localStorage.getItem('componentLoadTimes')
+	});
+	const { componentLoadTimes } = state;
+
+	const [open, setOpen] = React.useState(false);
+	const handleModalOpen = () => setOpen(true);
+	const handleModalClose = () => setOpen(false);
+
+	const handleButtonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setState({ ...state, [event.target.name]: event.target.checked });
+		switch (event.target.name) {
+			case 'componentLoadTimes':
+				return window.localStorage.setItem('componentLoadTimes', event.target.checked.toString())
+		}
+		console.log(state)
+	}
+
+	return (
+		<div>
+			<SettingsIcon onClick={handleModalOpen} color={'primary'} />
+			<Profiler onRender={onRender} id={'settings-modal'}>
+				<ComponentLoadTimeWidget state={CLTW} />
+				<Modal
+					open={open}
+					onClose={handleModalClose}
+					aria-labelledby="settings-modal-title"
+					aria-describedby="settings-modal-description"
+				>
+					<Box className={'boxStyle'} sx={{ bgcolor: 'background.paper' }}>
+						<FormGroup>
+							<Typography variant="h5" gutterBottom>
+								Debugging
+							</Typography>
+							<FormControlLabel
+								control={
+									<Checkbox checked={componentLoadTimes} onChange={handleButtonChange} name="componentLoadTimes" />
+								}
+								label={t('componentLoadTimes')}
+							/>
+						</FormGroup>
+					</Box>
+				</Modal>
+			</Profiler>
+		</div>
+	)
+}

src/SnowfallDecember.tsx

@@ -1,6 +0,0 @@
-import Snowfall from "react-snowfall";
-
-export default function SnowfallDecember() {
-    const time = new Date();
-    return (time.getMonth() === 11 || (time.getMonth() === 0 && time.getDate() <= 7)) && <Snowfall speed={[1.0, 2.0]} snowflakeCount={100} />;
-}

src/main.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import './main.css';
 import App from './App';
@@ -5,20 +6,17 @@ import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import enLocale from '../locales/en.json' assert { type: "json" };
 import esLocale from '../locales/es.json' assert { type: "json" };
-import trLocale from '../locales/tr.json' assert { type: "json" };
-import SnowfallDecember from './SnowfallDecember.js';
-import NewUpdate from './NewUpdate.js';
 
 i18n
-  .use(initReactI18next)
+  .use(initReactI18next) // passes i18n down to react-i18next
   .init({
     resources: {
       en: enLocale,
-      es: esLocale,
+      es: esLocale
-      tr: trLocale
     },
     lng: window.localStorage.getItem('lang') || 'en',
     fallbackLng: "en",
+
     interpolation: {
       escapeValue: false
     }
@@ -26,9 +24,12 @@ i18n
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(
-  <div>
+  <React.StrictMode>
-    <SnowfallDecember />
+      <App />
-    <NewUpdate />
+  </React.StrictMode>
-    <App />
+);
-  </div>
+
-);
+// 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();