Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-07 18:24:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Zoe Roux 2025-01-23 20:03:52 +01:00
parent 9b89b00b9f
commit 0e01b7c564
No known key found for this signature in database
10 changed files with 871 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
front/app/_layout.tsx
View File

@ -1,25 +1,92 @@
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Slot } from "one"; import { Slot } from "one";
import { Providers } from "~/providers"; // import { Providers } from "~/providers";
import { createStyleRegistry, StyleRegistryProvider, useTheme } from "yoshiki/web";
// import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
// import { HiddenIfNoJs, SkeletonCss, TouchOnlyCss } from "@kyoo/primitives";
import { useServerHeadInsertion } from "one";
export default function Layout() { const GlobalCssTheme = () => {
const theme = useTheme();
// TODO: add fonts here
// body {font-family: ${font.style.fontFamily};}
return ( return (
<> <>
{typeof document !== "undefined" && ( <style jsx global>{`
<> body {
margin: 0px;
padding: 0px;
overflow: "hidden";
background-color: ${theme.background};
}
*::-webkit-scrollbar {
height: 6px;
width: 6px;
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 90px;
}
*:hover::-webkit-scrollbar-thumb {
background-color: rgb(134, 127, 127);
}
#__next {
height: 100vh;
}
.infinite-scroll-component__outerdiv {
width: 100%;
height: 100%;
}
::cue {
background-color: transparent;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
`}</style>
{/* <WebTooltip theme={theme} /> */}
{/* <SkeletonCss /> */}
{/* <TouchOnlyCss /> */}
{/* <HiddenIfNoJs /> */}
</>
);
};
export default function Layout() {
const registry = createStyleRegistry();
useServerHeadInsertion(() => registry.flushToComponent());
// TODO: change this lang attr
return (
<StyleRegistryProvider registry={registry}>
<html lang="en-US">
<head>
<title>Kyoo</title> <title>Kyoo</title>
<meta charSet="utf-8" />
<meta name="description" content="A portable and vast media library solution." /> <meta name="description" content="A portable and vast media library solution." />
<link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/icon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32x32.png" />
<link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" /> <link rel="icon" type="image/png" sizes="64x64" href="/icon-64x64.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" /> <link rel="icon" type="image/png" sizes="128x128" href="/icon-128x128.png" />
<link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" /> <link rel="icon" type="image/png" sizes="256x256" href="/icon-256x256.png" />
</> <GlobalCssTheme />
)} </head>
<Providers>
<Slot /> <body className="hoverEnabled">
<ReactQueryDevtools initialIsOpen={false} /> {/* <Providers> */}
</Providers> <Slot />
</> <ReactQueryDevtools initialIsOpen={false} />
{/* </Providers> */}
</body>
</html>
</StyleRegistryProvider>
); );
} }

53
front/apps/web/src/pages/_app.tsx
View File

@ -63,59 +63,6 @@ import { withTranslations } from "../i18n";
const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" }); const font = Poppins({ weight: ["300", "400", "900"], subsets: ["latin"], display: "swap" });
const GlobalCssTheme = () => {
const theme = useTheme();
return (
<>
<style jsx global>{`
body {
margin: 0px;
padding: 0px;
overflow: "hidden";
background-color: ${theme.background};
font-family: ${font.style.fontFamily};
}
*::-webkit-scrollbar {
height: 6px;
width: 6px;
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 90px;
}
*:hover::-webkit-scrollbar-thumb {
background-color: rgb(134, 127, 127);
}
#__next {
height: 100vh;
}
.infinite-scroll-component__outerdiv {
width: 100%;
height: 100%;
}
::cue {
background-color: transparent;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
`}</style>
<WebTooltip theme={theme} />
<SkeletonCss />
<TouchOnlyCss />
<HiddenIfNoJs />
</>
);
};
const YoshikiDebug = ({ children }: { children: JSX.Element }) => { const YoshikiDebug = ({ children }: { children: JSX.Element }) => {
if (typeof window === "undefined") return children; if (typeof window === "undefined") return children;
const registry = useStyleRegistry(); const registry = useStyleRegistry();

890
front/bun.lock
View File

File diff suppressed because it is too large Load Diff

36
front/package.json
View File

@ -12,25 +12,29 @@
"format": "biome format .", "format": "biome format .",
"format:fix": "biome format . --write" "format:fix": "biome format . --write"
}, },
"workspaces": ["packages/*"],
"dependencies": { "dependencies": {
"@tanstack/react-query": "^5.62.15", "@kyoo/models": "workspace:*",
"expo": "~52.0.17", "@kyoo/primitives": "workspace:*",
"expo-build-properties": "^0.13.1", "@tanstack/react-query": "^5.64.2",
"expo-localization": "^16.0.0", "expo": "~52.0.27",
"one": "1.1.385", "expo-build-properties": "^0.13.2",
"react": "^18.3.1", "expo-localization": "^16.0.1",
"react-native": "0.76.4", "jotai": "^2.11.1",
"react-native-reanimated": "~3.16.5", "one": "1.1.406",
"react-native-safe-area-context": "4.10.5", "react": "^19.0.0",
"react-native-screens": "4.4.0", "react-native": "0.77.0",
"react-native-web": "^0.19.12" "react-native-reanimated": "~3.16.7",
"react-native-safe-area-context": "5.1.0",
"react-native-screens": "4.5.0",
"react-native-web": "^0.19.13"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "1.9.4", "@biomejs/biome": "1.9.4",
"@tanstack/react-query-devtools": "^5.62.15", "@tanstack/react-query-devtools": "^5.64.2",
"@types/react": "^19.0.2", "@types/react": "^19.0.8",
"@types/react-dom": "^19.0.2", "@types/react-dom": "^19.0.3",
"typescript": "5.7.2", "typescript": "5.7.3",
"vite": "^6" "vite": "^6.0.11"
} }
} }

46
front/packages/primitives/src/index.ts
View File

@ -18,27 +18,27 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
export { Header, Main, Nav, Footer, UL } from "@expo/html-elements"; // export { Header, Main, Nav, Footer, UL } from "@expo/html-elements";
export * from "./text"; // export * from "./text";
export * from "./themes"; export * from "./themes";
export * from "./icons"; // export * from "./icons";
export * from "./links"; // export * from "./links";
export * from "./avatar"; // export * from "./avatar";
export * from "./image"; // export * from "./image";
export * from "./skeleton"; // export * from "./skeleton";
export * from "./tooltip"; // export * from "./tooltip";
export * from "./container"; // export * from "./container";
export * from "./divider"; // export * from "./divider";
export * from "./progress"; // export * from "./progress";
export * from "./slider"; // export * from "./slider";
export * from "./snackbar"; // export * from "./snackbar";
export * from "./alert"; // export * from "./alert";
export * from "./menu"; // export * from "./menu";
export * from "./popup"; // export * from "./popup";
export * from "./select"; // export * from "./select";
export * from "./input"; // export * from "./input";
export * from "./button"; // export * from "./button";
export * from "./chip"; // export * from "./chip";
//
export * from "./utils"; // export * from "./utils";
export * from "./constants"; // export * from "./constants";

6
front/packages/primitives/src/skeleton.tsx
View File

@ -19,12 +19,10 @@
*/ */
import { LinearGradient as LG } from "expo-linear-gradient"; import { LinearGradient as LG } from "expo-linear-gradient";
import { memo, useEffect } from "react"; import { useEffect } from "react";
import { Platform, StyleSheet, View, type ViewProps } from "react-native"; import { StyleSheet, View, type ViewProps } from "react-native";
import Animated, { import Animated, {
SharedValue,
useAnimatedStyle, useAnimatedStyle,
useDerivedValue,
useSharedValue, useSharedValue,
withDelay, withDelay,
withRepeat, withRepeat,

1
front/packages/primitives/src/utils/touchonly.tsx
View File

@ -18,7 +18,6 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { useEffect } from "react";
import { Platform, type ViewProps } from "react-native"; import { Platform, type ViewProps } from "react-native";
export const TouchOnlyCss = () => { export const TouchOnlyCss = () => {

3
front/routes.d.ts vendored
View File

@ -1,3 +1,6 @@
// deno-lint-ignore-file
/* eslint-disable */
// biome-ignore: needed import
import type { OneRouter } from 'one' import type { OneRouter } from 'one'
declare module 'one' { declare module 'one' {

20
front/src/providers.tsx
View File

@ -1,3 +1,5 @@
// import { useUserTheme } from "@kyoo/models";
import { ThemeSelector } from "@kyoo/primitives";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ComponentType, ReactNode, useState } from "react"; import { ComponentType, ReactNode, useState } from "react";
@ -7,6 +9,17 @@ const QueryProvider = ({ children }: { children: ReactNode }) => {
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>; return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}; };
const ThemeProvider = ({ children }: { children: ReactNode }) => {
// TODO: change "auto" and use the user's theme cookie
const userTheme = "auto"; //useUserTheme("auto");
return (
<ThemeSelector theme={userTheme} font={{ normal: "inherit" }}>
{children}
</ThemeSelector>
);
};
type ProviderComponent<P = {}> = ComponentType<{ children: ReactNode } & P>; type ProviderComponent<P = {}> = ComponentType<{ children: ReactNode } & P>;
type Provider = ProviderComponent; type Provider = ProviderComponent;
@ -16,7 +29,10 @@ const withProviders = (
children: ReactNode; children: ReactNode;
}> => { }> => {
const ProviderImpl = ({ children }: { children: ReactNode }) => { const ProviderImpl = ({ children }: { children: ReactNode }) => {
return providers.reduceRight((acc, Prov) => <Prov>{acc}</Prov>, children); return providers.reduceRight(
(acc, Prov) => <Prov key={Prov.displayName}>{acc}</Prov>,
children,
);
}; };
return ProviderImpl; return ProviderImpl;
}; };
@ -25,7 +41,7 @@ export const Providers = withProviders([
QueryProvider, QueryProvider,
// AccountProvider, // AccountProvider,
// HydratationBoundary, // HydratationBoundary,
// [ThemeSelector, }], ThemeProvider,
// PortalProvider, // PortalProvider,
// SnackbarProvider // SnackbarProvider
// ConnectionErrorVerifier // ConnectionErrorVerifier

12
front/vite.config.ts
View File

@ -7,5 +7,15 @@ export default {
// needed to fix ssr error of react-query // needed to fix ssr error of react-query
noExternal: true, noExternal: true,
}, },
plugins: [one()], plugins: [
one({
deps: {
"@expo/html-elements": {
"**/*.js": ["jsx"],
},
"inline-style-prefixer": "interop",
"inline-style-prefixer/**": "interop",
},
}),
],
} satisfies UserConfig; } satisfies UserConfig;