martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 10:05:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

making code pretty

Browse Source
This commit is contained in:
balzack 2024-08-03 10:34:12 +02:00
parent 90367a5068
commit 7e2d80daec
20 changed files with 497 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/web/.prettierignore Normal file
View File

@ -0,0 +1,2 @@
node_modules
dist

6
app/client/web/.prettierrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}

16
app/client/web/package-lock.json generated
View File

@ -36,6 +36,7 @@
"eslint": "9.x",
"eslint-plugin-react": "^7.35.0",
"globals": "^15.9.0",
"prettier": "3.3.3",
"typescript-eslint": "^8.0.0"
}
},
@ -5506,6 +5507,21 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-format": {
"version": "29.7.0",
"license": "MIT",

2
app/client/web/package.json
View File

@ -8,6 +8,7 @@
"test": "jest",
"test:watch": "yarn test --watch",
"lint": "eslint .",
"format": "prettier --write src",
"lint:fix": "yarn lint --fix",
"type-check": "tsc --project tsconfig.json --pretty --noEmit",
"prepare": "husky install",
@ -42,6 +43,7 @@
"eslint": "9.x",
"eslint-plugin-react": "^7.35.0",
"globals": "^15.9.0",
"prettier": "3.3.3",
"typescript-eslint": "^8.0.0"
}
}

1
app/client/web/src/App.css
View File

@ -40,4 +40,3 @@
button {
font-size: calc(10px + 2vmin);
}

6
app/client/web/src/App.module.css
View File

@ -6,9 +6,9 @@
}
}
&:focus-within {
border-color: red;
}
&:focus-within {
border-color: red;
}
/* Use `&:focus-visible` when you want focus ring to be visible
only when user navigates with keyboard, for example by pressing Tab key */

57
app/client/web/src/App.tsx
View File

@ -1,40 +1,73 @@
import React from 'react'
import { Root } from './root/Root'
import { Access } from './access/Access'
import { Session } from './session/Session'
import { useColorScheme } from '@mantine/hooks';
import { useColorScheme } from '@mantine/hooks'
import { createTheme, MantineProvider, virtualColor } from '@mantine/core'
import './App.css'
import '@mantine/core/styles.css';
import '@mantine/core/styles.css'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
const theme = createTheme({
primaryColor: 'databag-green',
primaryShade: { light: 6, dark: 7 },
colors: {
'databag-green': ['#eef6f2', '#cce5d9', '#aad4bf', '#88c3a6', '#66b28c', '#4d9973', '#3c7759', '#2b5540', '#1a3326', '#09110d'],
'dark-surface': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
'light-surface': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#777777', '#666666'],
'databag-green': [
'#eef6f2',
'#cce5d9',
'#aad4bf',
'#88c3a6',
'#66b28c',
'#4d9973',
'#3c7759',
'#2b5540',
'#1a3326',
'#09110d',
],
'dark-surface': [
'#000000',
'#111111',
'#222222',
'#333333',
'#444444',
'#555555',
'#666666',
'#777777',
'#888888',
'#999999',
],
'light-surface': [
'#ffffff',
'#eeeeee',
'#dddddd',
'#cccccc',
'#bbbbbb',
'#aaaaaa',
'#999999',
'#888888',
'#777777',
'#666666',
],
surface: virtualColor({
name: 'surface',
dark: 'dark-surface',
light: 'light-surface',
}),
},
});
})
const router = createBrowserRouter([
{ path: '/', element: <Root /> },
{ path: 'access', element: <Access /> },
{ path: 'session', element: <Session /> },
]);
])
export function App () {
export function App() {
const selectedScheme = localStorage.getItem('scheme')
const defaultScheme = useColorScheme('light', { getInitialValueInEffect: false });
const scheme = selectedScheme ? selectedScheme : defaultScheme;
const defaultScheme = useColorScheme('light', {
getInitialValueInEffect: false,
})
const scheme = selectedScheme ? selectedScheme : defaultScheme
return (
<MantineProvider forceColorScheme={scheme} theme={theme}>

9
app/client/web/src/SessionStore.ts
View File

@ -1,9 +1,8 @@
import { WebStore } from 'databag-client-sdk'
export class SessionStore implements WebStore {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public async getValue (key: string): Promise<any> {
public async getValue(key: string): Promise<any> {
console.log('web store get: ', key)
const value = localStorage.getItem(key)
if (!value) {
@ -13,15 +12,15 @@ export class SessionStore implements WebStore {
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public async setValue (key: string, value: any): Promise<void> {
public async setValue(key: string, value: any): Promise<void> {
localStorage.setItem(key, JSON.stringify(value))
}
public async clearValue (key: string): Promise<void> {
public async clearValue(key: string): Promise<void> {
localStorage.removeItem(key)
}
public async clearAll (): Promise<void> {
public async clearAll(): Promise<void> {
localStorage.clear()
}
}

10
app/client/web/src/access/Access.tsx
View File

@ -1,3 +1,9 @@
export function Access () {
return <div><span>Access</span></div>
import React from 'react'
export function Access() {
return (
<div>
<span>Access</span>
</div>
)
}

45
app/client/web/src/constants/Strings.ts
View File

@ -101,7 +101,8 @@ export const en = {
create: 'Create',
createAccount: 'Create Account',
accountLogin: 'Account Login',
toCreate: 'Accounts are created through a link generated from the admin dashboard.',
toCreate:
'Accounts are created through a link generated from the admin dashboard.',
admin: 'Admin',
loginError: 'Login Error',
loginMessage: 'Please confirm your username and password.',
@ -310,10 +311,12 @@ export const fr = {
create: 'Créer',
createAccount: 'Créer un Compte',
accountLogin: 'Connexion au Compte',
toCreate: "Les comptes sont créés via un lien généré depuis le tableau de bord d'administration.",
toCreate:
"Les comptes sont créés via un lien généré depuis le tableau de bord d'administration.",
admin: 'Administrateur',
loginError: 'Erreur de connexion',
loginMessage: "Veuillez confirmer votre nom d'utilisateur et votre mot de passe.",
loginMessage:
"Veuillez confirmer votre nom d'utilisateur et votre mot de passe.",
createError: 'Erreur de création de compte',
createMessage: 'Veuillez vérifier auprès de votre administrateur.',
adminError: "Erreur d'Accès",
@ -409,12 +412,13 @@ export const fr = {
mfaDisabled: 'vérification temporairement désactivée',
mfaConfirm: 'Confirmer',
enableMultifactor: 'Activer l\'authentification multifacteur',
disableMultifactor: 'Désactiver l\'authentification multifacteur',
enableMultifactor: "Activer l'authentification multifacteur",
disableMultifactor: "Désactiver l'authentification multifacteur",
disable: 'Désactiver',
confirmDisable: 'Désactivation de l\'authentification multi-facteurs',
disablePrompt: 'Êtes-vous sûr de vouloir désactiver l\'authentification multi-facteurs',
confirmDisable: "Désactivation de l'authentification multi-facteurs",
disablePrompt:
"Êtes-vous sûr de vouloir désactiver l'authentification multi-facteurs",
}
export const sp = {
@ -520,7 +524,8 @@ export const sp = {
create: 'Crear',
createAccount: 'Crear cuenta',
accountLogin: 'Inicio de sesión en la cuenta',
toCreate: 'Las cuentas se crean a través de un enlace generado desde el panel de administración.',
toCreate:
'Las cuentas se crean a través de un enlace generado desde el panel de administración.',
admin: 'Administrador',
loginError: 'Error de inicio de sesión',
loginMessage: 'Por favor, confirme su nombre de usuario y contraseña.',
@ -623,7 +628,8 @@ export const sp = {
disable: 'Desactivar',
confirmDisable: 'Desactivación de la autenticación de dos factores',
disablePrompt: '¿Estás seguro de que quieres desactivar la autenticación de dos factores?',
disablePrompt:
'¿Estás seguro de que quieres desactivar la autenticación de dos factores?',
}
export const pt = {
@ -729,7 +735,8 @@ export const pt = {
create: 'Criar',
createAccount: 'Criar uma conta',
accountLogin: 'Login da conta',
toCreate: 'As contas são criadas através de um link gerado no painel de administração.',
toCreate:
'As contas são criadas através de um link gerado no painel de administração.',
admin: 'Administrador',
loginError: 'Erro de login',
loginMessage: 'Por favor, confirme seu nome de usuário e senha.',
@ -832,7 +839,8 @@ export const pt = {
disable: 'Desativar',
confirmDisable: 'Desativando Autenticação de Dois Fatores',
disablePrompt: 'Tem certeza de que deseja desativar a autenticação de dois fatores?',
disablePrompt:
'Tem certeza de que deseja desativar a autenticação de dois fatores?',
}
export const de = {
@ -938,7 +946,8 @@ export const de = {
create: 'Erstellen',
createAccount: 'Konto erstellen',
accountLogin: 'Kontoanmeldung',
toCreate: 'Konten werden über einen Link erstellt, der im Administrations-Dashboard generiert wird.',
toCreate:
'Konten werden über einen Link erstellt, der im Administrations-Dashboard generiert wird.',
admin: 'Administrator',
loginError: 'Anmeldefehler',
loginMessage: 'Bitte bestätigen Sie Ihren Benutzernamen und Ihr Passwort.',
@ -1030,7 +1039,8 @@ export const de = {
sealedMessage: 'Gesicherte Nachricht',
mfaTitle: 'Zwei-Faktor-Authentifizierung',
mfaSteps: 'Speichern Sie das Geheimnis und bestätigen Sie den Bestätigungscode',
mfaSteps:
'Speichern Sie das Geheimnis und bestätigen Sie den Bestätigungscode',
mfaEnter: 'Geben Sie Ihren Bestätigungs-Code ein',
mfaError: 'Verifizierungscodefehler',
mfaDisabled: 'Verifizierung vorübergehend deaktiviert',
@ -1041,7 +1051,8 @@ export const de = {
disable: 'Deaktivieren',
confirmDisable: 'Deaktivierung der Zwei-Faktor-Authentifizierung',
disablePrompt: 'Sind Sie sicher, dass Sie die Zwei-Faktor-Authentifizierung deaktivieren möchten?',
disablePrompt:
'Sind Sie sicher, dass Sie die Zwei-Faktor-Authentifizierung deaktivieren möchten?',
}
export const ru = {
@ -1147,7 +1158,8 @@ export const ru = {
create: 'Создать',
createAccount: 'Создать аккаунт',
accountLogin: 'Вход в аккаунт',
toCreate: 'Учетные записи создаются через ссылку, сгенерированную в панели администратора.',
toCreate:
'Учетные записи создаются через ссылку, сгенерированную в панели администратора.',
admin: 'Администратор',
loginError: 'Ошибка входа',
loginMessage: 'Пожалуйста, подтвердите свое имя пользователя и пароль.',
@ -1250,5 +1262,6 @@ export const ru = {
disable: 'Отключить',
confirmDisable: 'Отключение двухфакторной аутентификации',
disablePrompt: 'Вы уверены, что хотите отключить двухфакторную аутентификацию?',
disablePrompt:
'Вы уверены, что хотите отключить двухфакторную аутентификацию?',
}

2
app/client/web/src/context/AppContext.tsx
View File

@ -3,7 +3,7 @@ import { useAppContext } from './useAppContext.hook'
export const AppContext = createContext({})
export function AppContextProvider ({ children }: { children: ReactNode }) {
export function AppContextProvider({ children }: { children: ReactNode }) {
const { state, actions } = useAppContext()
return (
<AppContext.Provider value={{ state, actions }}>

2
app/client/web/src/context/ContextType.ts
View File

@ -1,6 +1,6 @@
export interface ContextType {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
state: any,
state: any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
actions: any
}

2
app/client/web/src/context/SettingsContext.tsx
View File

@ -3,7 +3,7 @@ import { useSettingsContext } from './useSettingsContext.hook'
export const SettingsContext = createContext({})
export function SettingsContextProvider ({ children }: { children: ReactNode }) {
export function SettingsContextProvider({ children }: { children: ReactNode }) {
const { state, actions } = useSettingsContext()
return (
<SettingsContext.Provider value={{ state, actions }}>

14
app/client/web/src/context/useAppContext.hook.ts
View File

@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
import { DatabagSDK, Session } from 'databag-client-sdk'
import { SessionStore } from '../SessionStore'
export function useAppContext () {
export function useAppContext() {
const [state, setState] = useState({})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -34,14 +34,20 @@ export function useAppContext () {
appName: 'databag',
}
console.log('-----> SDK LOGIN')
const login = await sdk.login('asdf', 'asdf', 'balzack.coredb.org', true, null, params)
const login = await sdk.login(
'asdf',
'asdf',
'balzack.coredb.org',
true,
null,
params
)
console.log(login)
updateState({ sdk, session: login })
}
}
const actions = {
}
const actions = {}
return { state, actions }
}

376
app/client/web/src/context/useSettingsContext.hook.ts
View File

@ -2,15 +2,25 @@ import { useEffect, useState } from 'react'
import { LightTheme, DarkTheme } from '../constants/Colors'
import { en, fr, sp, pt, de, ru } from '../constants/Strings'
export function useSettingsContext () {
export function useSettingsContext() {
const [state, setState] = useState({
display: null,
themes: [{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }],
themes: [
{ value: 'dark', label: 'Dark' },
{ value: 'light', label: 'Light' },
],
theme: null,
scheme: null,
colors: {},
menuStyle: {},
languages: [{ value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }, { value: 'sp', label: 'Español' }, { value: 'pt', label: 'Português' }, { value: 'de', label: 'Deutsch' }, { value: 'ru', label: 'Русский' }],
languages: [
{ value: 'en', label: 'English' },
{ value: 'fr', label: 'Français' },
{ value: 'sp', label: 'Español' },
{ value: 'pt', label: 'Português' },
{ value: 'de', label: 'Deutsch' },
{ value: 'ru', label: 'Русский' },
],
language: null,
strings: en,
dateFormat: 'mm/dd',
@ -31,11 +41,23 @@ export function useSettingsContext () {
const handleResize = () => {
if (window.innerWidth < SMALL_MEDIUM) {
updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight })
updateState({
display: 'small',
width: window.innerWidth,
height: window.innerHeight,
})
} else if (window.innerWidth < MEDIUM_LARGE) {
updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight })
updateState({
display: 'medium',
width: window.innerWidth,
height: window.innerHeight,
})
} else {
updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight })
updateState({
display: 'large',
width: window.innerWidth,
height: window.innerHeight,
})
}
}
@ -47,27 +69,35 @@ export function useSettingsContext () {
const filtered = new Map()
const devices = await navigator.mediaDevices.enumerateDevices()
devices.filter(item => item.kind === type + 'input').forEach(item => {
if (item) {
const label = item.label ? item.label : state.strings.integrated
const entry = filtered.get(item.groupId)
if (entry) {
if (item.label && label.length < entry.label.length) {
filtered.set(item.groupId, { value: item.deviceId, label })
devices
.filter((item) => item.kind === type + 'input')
.forEach((item) => {
if (item) {
const label = item.label ? item.label : state.strings.integrated
const entry = filtered.get(item.groupId)
if (entry) {
if (item.label && label.length < entry.label.length) {
filtered.set(item.groupId, {
value: item.deviceId,
label,
})
}
} else {
filtered.set(item.groupId, {
value: item.deviceId,
label,
})
}
} else {
filtered.set(item.groupId, { value: item.deviceId, label })
}
}
})
})
return Array.from(filtered.values())
}
useEffect(() => {
getDevices('audio').then(audio => {
getDevices('audio').then((audio) => {
updateState({ audioInputs: audio })
})
getDevices('video').then(video => {
getDevices('video').then((video) => {
updateState({ videoInputs: video })
})
}, [state.strings])
@ -82,14 +112,49 @@ export function useSettingsContext () {
const scheme = localStorage.getItem('color_scheme')
if (scheme === 'dark') {
updateState({ theme: scheme, scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
updateState({
theme: scheme,
scheme: 'dark',
colors: DarkTheme,
menuStyle: {
backgroundColor: DarkTheme.modalArea,
color: DarkTheme.mainText,
},
})
} else if (scheme === 'light') {
updateState({ theme: scheme, scheme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
updateState({
theme: scheme,
scheme: 'light',
colors: LightTheme,
menuStyle: {
backgroundColor: LightTheme.modalArea,
color: LightTheme.mainText,
},
})
} else {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
updateState({ theme: null, scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
updateState({
theme: null,
scheme: 'dark',
colors: DarkTheme,
menuStyle: {
backgroundColor: DarkTheme.modalArea,
color: DarkTheme.mainText,
},
})
} else {
updateState({ theme: null, scheme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
updateState({
theme: null,
scheme: 'light',
colors: LightTheme,
menuStyle: {
backgroundColor: LightTheme.modalArea,
color: LightTheme.mainText,
},
})
}
}
@ -109,31 +174,115 @@ export function useSettingsContext () {
const language = localStorage.getItem('language')
if (language && language.startsWith('fr')) {
updateState({ language: 'fr', strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
updateState({
language: 'fr',
strings: fr,
themes: [
{ value: 'dark', label: fr.dark },
{ value: 'light', label: fr.light },
],
})
} else if (language && language.startsWith('sp')) {
updateState({ language: 'sp', strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
updateState({
language: 'sp',
strings: sp,
themes: [
{ value: 'dark', label: sp.dark },
{ value: 'light', label: sp.light },
],
})
} else if (language && language.startsWith('en')) {
updateState({ language: 'en', strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
updateState({
language: 'en',
strings: en,
themes: [
{ value: 'dark', label: en.dark },
{ value: 'light', label: en.light },
],
})
} else if (language && language.startsWith('pt')) {
updateState({ language: 'pt', strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
updateState({
language: 'pt',
strings: pt,
themes: [
{ value: 'dark', label: pt.dark },
{ value: 'light', label: pt.light },
],
})
} else if (language && language.startsWith('de')) {
updateState({ language: 'de', strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
updateState({
language: 'de',
strings: de,
themes: [
{ value: 'dark', label: de.dark },
{ value: 'light', label: de.light },
],
})
} else if (language && language.startsWith('ru')) {
updateState({ language: 'ru', strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
updateState({
language: 'ru',
strings: ru,
themes: [
{ value: 'dark', label: ru.dark },
{ value: 'light', label: ru.light },
],
})
} else {
const browser = navigator.language
if (browser && browser.startsWith('fr')) {
updateState({ language: null, strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
updateState({
language: null,
strings: fr,
themes: [
{ value: 'dark', label: fr.dark },
{ value: 'light', label: fr.light },
],
})
} else if (browser && browser.startsWith('sp')) {
updateState({ language: null, strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
updateState({
language: null,
strings: sp,
themes: [
{ value: 'dark', label: sp.dark },
{ value: 'light', label: sp.light },
],
})
} else if (browser && browser.startsWith('pt')) {
updateState({ language: null, strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
updateState({
language: null,
strings: pt,
themes: [
{ value: 'dark', label: pt.dark },
{ value: 'light', label: pt.light },
],
})
} else if (browser && browser.startsWith('de')) {
updateState({ language: null, strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
updateState({
language: null,
strings: de,
themes: [
{ value: 'dark', label: de.dark },
{ value: 'light', label: de.light },
],
})
} else if (browser && browser.startsWith('ru')) {
updateState({ language: null, strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
updateState({
language: null,
strings: ru,
themes: [
{ value: 'dark', label: ru.dark },
{ value: 'light', label: ru.light },
],
})
} else {
updateState({ language: null, strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
updateState({
language: null,
strings: en,
themes: [
{ value: 'dark', label: en.dark },
{ value: 'light', label: en.light },
],
})
}
}
@ -145,59 +294,178 @@ export function useSettingsContext () {
window.removeEventListener('resize', handleResize)
window.removeEventListener('orientationchange', handleResize)
}
}, []);
}, [])
const actions = {
setTheme: (theme: string) => {
if (theme === 'dark') {
localStorage.setItem('color_scheme', 'dark')
updateState({ theme: 'dark', scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
updateState({
theme: 'dark',
scheme: 'dark',
colors: DarkTheme,
menuStyle: {
backgroundColor: DarkTheme.modalArea,
color: DarkTheme.mainText,
},
})
} else if (theme === 'light') {
localStorage.setItem('color_scheme', 'light')
updateState({ theme: 'light', scheme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
updateState({
theme: 'light',
scheme: 'light',
colors: LightTheme,
menuStyle: {
backgroundColor: LightTheme.modalArea,
color: LightTheme.mainText,
},
})
} else {
localStorage.removeItem('color_scheme')
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
updateState({ theme: null, scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
if (
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
) {
updateState({
theme: null,
scheme: 'dark',
colors: DarkTheme,
menuStyle: {
backgroundColor: DarkTheme.modalArea,
color: DarkTheme.mainText,
},
})
} else {
updateState({ theme: null, scheme: 'ligth', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
updateState({
theme: null,
scheme: 'ligth',
colors: LightTheme,
menuStyle: {
backgroundColor: LightTheme.modalArea,
color: LightTheme.mainText,
},
})
}
}
},
setLanguage: (code: string) => {
if (code && code.startsWith('fr')) {
localStorage.setItem('language', 'fr')
updateState({ language: 'fr', strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
updateState({
language: 'fr',
strings: fr,
themes: [
{ value: 'dark', label: fr.dark },
{ value: 'light', label: fr.light },
],
})
} else if (code && code.startsWith('sp')) {
localStorage.setItem('language', 'sp')
updateState({ language: 'sp', strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
updateState({
language: 'sp',
strings: sp,
themes: [
{ value: 'dark', label: sp.dark },
{ value: 'light', label: sp.light },
],
})
} else if (code && code.startsWith('en')) {
localStorage.setItem('language', 'en')
updateState({ language: 'en', strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
updateState({
language: 'en',
strings: en,
themes: [
{ value: 'dark', label: en.dark },
{ value: 'light', label: en.light },
],
})
} else if (code && code.startsWith('pt')) {
localStorage.setItem('language', 'pt')
updateState({ language: 'pt', strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
updateState({
language: 'pt',
strings: pt,
themes: [
{ value: 'dark', label: pt.dark },
{ value: 'light', label: pt.light },
],
})
} else if (code && code.startsWith('de')) {
localStorage.setItem('language', 'de')
updateState({ language: 'de', strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
updateState({
language: 'de',
strings: de,
themes: [
{ value: 'dark', label: de.dark },
{ value: 'light', label: de.light },
],
})
} else if (code && code.startsWith('ru')) {
localStorage.setItem('language', 'ru')
updateState({ language: 'ru', strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
updateState({
language: 'ru',
strings: ru,
themes: [
{ value: 'dark', label: ru.dark },
{ value: 'light', label: ru.light },
],
})
} else {
localStorage.removeItem('language')
const browser = navigator.language
if (browser && browser.startsWith('fr')) {
updateState({ language: null, strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
updateState({
language: null,
strings: fr,
themes: [
{ value: 'dark', label: fr.dark },
{ value: 'light', label: fr.light },
],
})
} else if (browser && browser.startsWith('sp')) {
updateState({ language: null, strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
updateState({
language: null,
strings: sp,
themes: [
{ value: 'dark', label: sp.dark },
{ value: 'light', label: sp.light },
],
})
} else if (browser && browser.startsWith('pt')) {
updateState({ language: null, strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
updateState({
language: null,
strings: pt,
themes: [
{ value: 'dark', label: pt.dark },
{ value: 'light', label: pt.light },
],
})
} else if (browser && browser.startsWith('de')) {
updateState({ language: null, strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
updateState({
language: null,
strings: de,
themes: [
{ value: 'dark', label: de.dark },
{ value: 'light', label: de.light },
],
})
} else if (browser && browser.startsWith('ru')) {
updateState({ language: null, strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
updateState({
language: null,
strings: ru,
themes: [
{ value: 'dark', label: ru.dark },
{ value: 'light', label: ru.light },
],
})
} else {
updateState({ language: null, strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
updateState({
language: null,
strings: en,
themes: [
{ value: 'dark', label: en.dark },
{ value: 'light', label: en.light },
],
})
}
}
},

2
app/client/web/src/main.tsx
View File

@ -19,5 +19,5 @@ root.render(
<App />
</StrictMode>
</AppContextProvider>
</SettingsContextProvider>,
</SettingsContextProvider>
)

6
app/client/web/src/root/Root.module.css
View File

@ -4,9 +4,9 @@
}
}
&:focus-within {
border-color: red;
}
&:focus-within {
border-color: red;
}
/* Use `&:focus-visible` when you want focus ring to be visible
only when user navigates with keyboard, for example by pressing Tab key */

44
app/client/web/src/root/Root.tsx
View File

@ -1,27 +1,33 @@
import React, { useContext } from 'react'
import { SettingsContext } from '../context/SettingsContext'
import { ContextType } from '../context/ContextType'
import React from 'react'
import { TextInput, Button } from '@mantine/core'
import { useMantineTheme } from '@mantine/core';
import { useMantineTheme } from '@mantine/core'
export function Root () {
const theme = useMantineTheme();
const settings = useContext(SettingsContext);
export function Root() {
const theme = useMantineTheme()
const press = () => {
console.log("PRESSED");
console.log('PRESSED')
}
return <div><span>ROOT</span>
<Button
variant="danger"
onClick={press}>Download</Button>
<TextInput
color="lime.4"
label="Input label"
description="Input description"
placeholder="Input placeholder"
/>
<div style={{ width: 100, height: 100, backgroundColor: theme.colors.surface[8], }} />
return (
<div>
<span>ROOT</span>
<Button variant="danger" onClick={press}>
Download
</Button>
<TextInput
color="lime.4"
label="Input label"
description="Input description"
placeholder="Input placeholder"
/>
<div
style={{
width: 100,
height: 100,
backgroundColor: theme.colors.surface[8],
}}
/>
</div>
)
}

10
app/client/web/src/session/Session.tsx
View File

@ -1,3 +1,9 @@
export function Session () {
return <div><span>Session</span></div>
import React from 'react'
export function Session() {
return (
<div>
<span>Session</span>
</div>
)
}

10
app/client/web/yarn.lock
View File

@ -2658,6 +2658,7 @@ __metadata:
globals: ^15.9.0
husky: 8.0.1
jest: 29.1.1
prettier: 3.3.3
react: 18.3.1
react-dom: 18.2.0
react-router-dom: ^6.26.0
@ -5769,6 +5770,15 @@ __metadata:
languageName: node
linkType: hard
"prettier@npm:3.3.3":
version: 3.3.3
resolution: "prettier@npm:3.3.3"
bin:
prettier: bin/prettier.cjs
checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
languageName: node
linkType: hard
"pretty-format@npm:^27.0.2":
version: 27.5.1
resolution: "pretty-format@npm:27.5.1"