Move primitives

This commit is contained in:
Zoe Roux 2025-02-02 22:00:09 +01:00
parent 4a3d033562
commit c1e3a67a4e
No known key found for this signature in database
74 changed files with 122 additions and 321 deletions

View File

@ -1,3 +1,4 @@
import { HydrationBoundary } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Slot } from "one"; import { Slot } from "one";
import { useServerHeadInsertion } from "one"; import { useServerHeadInsertion } from "one";
@ -79,10 +80,12 @@ export default function Layout() {
<body className="hoverEnabled"> <body className="hoverEnabled">
<StyleRegistryProvider registry={registry}> <StyleRegistryProvider registry={registry}>
<HydrationBoundary state={queryState}>
<Providers> <Providers>
<Slot /> <Slot />
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</Providers> </Providers>
</HydrationBoundary>
</StyleRegistryProvider> </StyleRegistryProvider>
</body> </body>
</html> </html>

View File

@ -3,6 +3,7 @@
"workspaces": { "workspaces": {
"": { "": {
"dependencies": { "dependencies": {
"@expo/html-elements": "^0.11.2",
"@tanstack/react-query": "^5.66.0", "@tanstack/react-query": "^5.66.0",
"caniuse-api": "^3.0.0", "caniuse-api": "^3.0.0",
"expo": "~52.0.28", "expo": "~52.0.28",
@ -406,6 +407,8 @@
"@expo/fingerprint": ["@expo/fingerprint@0.11.7", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "arg": "^5.0.2", "chalk": "^4.1.2", "debug": "^4.3.4", "find-up": "^5.0.0", "getenv": "^1.0.0", "minimatch": "^3.0.4", "p-limit": "^3.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0" }, "bin": { "fingerprint": "bin/cli.js" } }, "sha512-2rfYVS4nqWmOPQk+AL5GPfPSawbqqmI5mL++bxAhWADt+d+fjoQYfIrGtjZxQ30f9o/a1PrRPVSuh2j09+diVg=="], "@expo/fingerprint": ["@expo/fingerprint@0.11.7", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "arg": "^5.0.2", "chalk": "^4.1.2", "debug": "^4.3.4", "find-up": "^5.0.0", "getenv": "^1.0.0", "minimatch": "^3.0.4", "p-limit": "^3.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0" }, "bin": { "fingerprint": "bin/cli.js" } }, "sha512-2rfYVS4nqWmOPQk+AL5GPfPSawbqqmI5mL++bxAhWADt+d+fjoQYfIrGtjZxQ30f9o/a1PrRPVSuh2j09+diVg=="],
"@expo/html-elements": ["@expo/html-elements@0.11.2", "", {}, "sha512-OC98eZ4mMzpFQq/KF9t+CGC4Vcg4RnoOxWAzSmNVd3VZ2dFFi64QCoHlT719wDmuccemn1VPXu1/rFvOGmJgOg=="],
"@expo/image-utils": ["@expo/image-utils@0.6.4", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.0.0", "fs-extra": "9.0.0", "getenv": "^1.0.0", "jimp-compact": "0.16.1", "parse-png": "^2.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0", "temp-dir": "~2.0.0", "unique-string": "~2.0.0" } }, "sha512-L++1PBzSvf5iYc6UHJ8Db8GcYNkfLDw+a+zqEFBQ3xqRXP/muxb/O7wuiMFlXrj/cfkx4e0U+z1a4ceV0A7S7Q=="], "@expo/image-utils": ["@expo/image-utils@0.6.4", "", { "dependencies": { "@expo/spawn-async": "^1.7.2", "chalk": "^4.0.0", "fs-extra": "9.0.0", "getenv": "^1.0.0", "jimp-compact": "0.16.1", "parse-png": "^2.1.0", "resolve-from": "^5.0.0", "semver": "^7.6.0", "temp-dir": "~2.0.0", "unique-string": "~2.0.0" } }, "sha512-L++1PBzSvf5iYc6UHJ8Db8GcYNkfLDw+a+zqEFBQ3xqRXP/muxb/O7wuiMFlXrj/cfkx4e0U+z1a4ceV0A7S7Q=="],
"@expo/json-file": ["@expo/json-file@9.0.1", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "json5": "^2.2.3", "write-file-atomic": "^2.3.0" } }, "sha512-ZVPhbbEBEwafPCJ0+kI25O2Iivt3XKHEKAADCml1q2cmOIbQnKgLyn8DpOJXqWEyRQr/VWS+hflBh8DU2YFSqg=="], "@expo/json-file": ["@expo/json-file@9.0.1", "", { "dependencies": { "@babel/code-frame": "~7.10.4", "json5": "^2.2.3", "write-file-atomic": "^2.3.0" } }, "sha512-ZVPhbbEBEwafPCJ0+kI25O2Iivt3XKHEKAADCml1q2cmOIbQnKgLyn8DpOJXqWEyRQr/VWS+hflBh8DU2YFSqg=="],

View File

@ -13,6 +13,7 @@
"format:fix": "biome format . --write" "format:fix": "biome format . --write"
}, },
"dependencies": { "dependencies": {
"@expo/html-elements": "^0.11.2",
"@tanstack/react-query": "^5.66.0", "@tanstack/react-query": "^5.66.0",
"caniuse-api": "^3.0.0", "caniuse-api": "^3.0.0",
"expo": "~52.0.28", "expo": "~52.0.28",

View File

@ -1,66 +0,0 @@
{
"name": "@kyoo/primitives",
"main": "src/index.ts",
"types": "src/index.ts",
"sideEffects": false,
"packageManager": "yarn@3.2.4",
"devDependencies": {
"@gorhom/portal": "^1.0.14",
"typescript": "^5.5.4"
},
"peerDependencies": {
"@gorhom/portal": "*",
"@material-symbols/svg-400": "*",
"@radix-ui/react-dropdown-menu": "*",
"@radix-ui/react-select": "*",
"blurhash": "*",
"expo-linear-gradient": "*",
"moti": "*",
"react": "*",
"react-native": "*",
"react-native-blurhash": "*",
"react-native-fast-image": "*",
"react-native-reanimated": "*",
"react-native-safe-area-context": "*",
"react-native-svg": "*",
"yoshiki": "*"
},
"peerDependenciesMeta": {
"@gorhom/portal": {
"optional": true
},
"@radix-ui/react-dropdown-menu": {
"optional": true
},
"@radix-ui/react-select": {
"optional": true
},
"blurhash": {
"optional": true
},
"react-native-blurhash": {
"optional": true
},
"react-native-fast-image": {
"optional": true
},
"react-native-safe-area-context": {
"optional": true
},
"react-native-web": {
"optional": true
}
},
"dependencies": {
"@expo/html-elements": "^0.10.1",
"@tanstack/react-query": "^5.51.23",
"solito": "^4.2.2"
},
"optionalDependencies": {
"@radix-ui/react-select": "^2.1.1",
"blurhash": "^2.0.5",
"react-native-blurhash": "^2.0.3",
"react-native-fast-image": "^8.6.3",
"react-native-safe-area-context": "4.10.8"
}
}

View File

@ -1,21 +0,0 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
export const imageBorderRadius = 10;

View File

@ -1,44 +0,0 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
// export { Header, Main, Nav, Footer, UL } from "@expo/html-elements";
// export * from "./text";
export * from "./themes";
// export * from "./icons";
// export * from "./links";
// export * from "./avatar";
// export * from "./image";
// export * from "./skeleton";
// export * from "./tooltip";
// export * from "./container";
// export * from "./divider";
// export * from "./progress";
// export * from "./slider";
// export * from "./snackbar";
// export * from "./alert";
// export * from "./menu";
// export * from "./popup";
// export * from "./select";
// export * from "./input";
// export * from "./button";
// export * from "./chip";
//
// export * from "./utils";
// export * from "./constants";

View File

@ -1,26 +0,0 @@
{
"compilerOptions": {
"target": "es6",
"lib": ["dom", "dom.iterable", "esnext"],
"declaration": true,
"sourceMap": true,
"noEmit": true,
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"baseUrl": ".",
"paths": {
"~/*": ["src/*"]
}
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

View File

@ -24,7 +24,7 @@ import { useTranslation } from "react-i18next";
import { View } from "react-native"; import { View } from "react-native";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { z } from "zod"; import { z } from "zod";
import { ErrorView } from "../errors"; import { ErrorView } from "../../../../src/ui/errors";
import { SettingsContainer } from "../settings/base"; import { SettingsContainer } from "../settings/base";
import Info from "@material-symbols/svg-400/outlined/info.svg"; import Info from "@material-symbols/svg-400/outlined/info.svg";

View File

@ -37,7 +37,7 @@ import {
} from "@kyoo/primitives"; } from "@kyoo/primitives";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { type Theme, useYoshiki } from "yoshiki/native"; import { type Theme, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../errors"; import { ErrorView } from "../../../../src/ui/errors";
export const PartOf = ({ export const PartOf = ({
name, name,

View File

@ -1,24 +0,0 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
export * from "./error";
export * from "./unauthorized";
export * from "./connection";
export * from "./setup";

View File

@ -29,7 +29,7 @@ import {
useRef, useRef,
} from "react"; } from "react";
import { FlatList, View, type ViewStyle } from "react-native"; import { FlatList, View, type ViewStyle } from "react-native";
import { ErrorView } from "./errors"; import { ErrorView } from "../../../src/ui/errors";
import { EmptyView, type Layout, OfflineView, addHeader } from "./fetch"; import { EmptyView, type Layout, OfflineView, addHeader } from "./fetch";
const emulateGap = ( const emulateGap = (

View File

@ -32,7 +32,7 @@ import {
useRef, useRef,
} from "react"; } from "react";
import { type Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki"; import { type Stylable, nativeStyleToCss, useYoshiki, ysMap } from "yoshiki";
import { ErrorView } from "./errors"; import { ErrorView } from "../../../src/ui/errors";
import { EmptyView, type Layout, addHeader } from "./fetch"; import { EmptyView, type Layout, addHeader } from "./fetch";
const InfiniteScroll = <Props,>({ const InfiniteScroll = <Props,>({

View File

@ -29,4 +29,4 @@ export { ServerUrlPage, LoginPage, RegisterPage, OidcCallbackPage } from "./logi
export { DownloadPage, DownloadProvider } from "./downloads"; export { DownloadPage, DownloadProvider } from "./downloads";
export { SettingsPage } from "./settings"; export { SettingsPage } from "./settings";
export { AdminPage } from "./admin"; export { AdminPage } from "./admin";
export * from "./errors"; export * from "../../../src/ui/errors";

View File

@ -32,7 +32,7 @@ import { useTranslation } from "react-i18next";
import { ImageBackground, View } from "react-native"; import { ImageBackground, View } from "react-native";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { percent, rem, useYoshiki } from "yoshiki/native"; import { percent, rem, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../errors"; import { ErrorView } from "../../../../src/ui/errors";
export const OidcLogin = ({ apiUrl, hideOr }: { apiUrl?: string; hideOr?: boolean }) => { export const OidcLogin = ({ apiUrl, hideOr }: { apiUrl?: string; hideOr?: boolean }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();

View File

@ -24,7 +24,7 @@ import { useAtomValue } from "jotai";
import { useMemo } from "react"; import { useMemo } from "react";
import { Platform, View } from "react-native"; import { Platform, View } from "react-native";
import { type Theme, percent, px, useForceRerender, useYoshiki } from "yoshiki/native"; import { type Theme, percent, px, useForceRerender, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../../errors"; import { ErrorView } from "../../../../../src/ui/errors";
import { durationAtom } from "../state"; import { durationAtom } from "../state";
import { seekProgressAtom } from "./hover"; import { seekProgressAtom } from "./hover";
import { toTimerString } from "./left-buttons"; import { toTimerString } from "./left-buttons";

View File

@ -36,7 +36,7 @@ import { Platform, StyleSheet, View } from "react-native";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { episodeDisplayNumber } from "../details/episode"; import { episodeDisplayNumber } from "../details/episode";
import { ErrorView } from "../errors"; import { ErrorView } from "../../../../src/ui/errors";
import { Back, Hover, LoadingIndicator } from "./components/hover"; import { Back, Hover, LoadingIndicator } from "./components/hover";
import { useVideoKeyboard } from "./keyboard"; import { useVideoKeyboard } from "./keyboard";
import { Video, durationAtom, fullscreenAtom } from "./state"; import { Video, durationAtom, fullscreenAtom } from "./state";

View File

@ -30,7 +30,7 @@ import { Button, IconButton, Link, Skeleton, tooltip, ts } from "@kyoo/primitive
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ImageBackground } from "react-native"; import { ImageBackground } from "react-native";
import { rem, useYoshiki } from "yoshiki/native"; import { rem, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../errors"; import { ErrorView } from "../../../../src/ui/errors";
import { Preference, SettingsContainer } from "./base"; import { Preference, SettingsContainer } from "./base";
import Badge from "@material-symbols/svg-400/outlined/badge.svg"; import Badge from "@material-symbols/svg-400/outlined/badge.svg";

View File

@ -1,3 +1,4 @@
export * from "./page"; export * from "./page";
export * from "./kyoo-error"; export * from "./kyoo-error";
export * from "./resources"; export * from "./resources";
export * from "./traits";

View File

@ -0,0 +1 @@
export const imageBorderRadius = 10;

View File

@ -18,10 +18,10 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import type { KyooImage } from "@kyoo/models";
import type { ReactElement } from "react"; import type { ReactElement } from "react";
import type { ImageStyle } from "react-native"; import type { ImageStyle } from "react-native";
import type { YoshikiStyle } from "yoshiki/src/type"; import type { YoshikiStyle } from "yoshiki/src/type";
import type { KyooImage } from "~/models";
export type YoshikiEnhanced<Style> = Style extends any export type YoshikiEnhanced<Style> = Style extends any
? { ? {

View File

@ -18,25 +18,27 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { P } from "@kyoo/primitives"; export { Header, Main, Nav, Footer, UL } from "@expo/html-elements";
import { useTranslation } from "react-i18next"; export * from "./text";
import { View } from "react-native"; export * from "./themes";
import { useYoshiki } from "yoshiki/native"; export * from "./icons";
export * from "./links";
export * from "./avatar";
export * from "./image";
export * from "./skeleton";
export * from "./tooltip";
export * from "./container";
export * from "./divider";
export * from "./progress";
export * from "./slider";
export * from "./snackbar";
export * from "./alert";
export * from "./menu";
export * from "./popup";
export * from "./select";
export * from "./input";
export * from "./button";
export * from "./chip";
export const Unauthorized = ({ missing }: { missing: string[] }) => { export * from "./utils";
const { t } = useTranslation(); export * from "./constants";
const { css } = useYoshiki();
return (
<View
{...css({
flexGrow: 1,
flexShrink: 1,
justifyContent: "center",
alignItems: "center",
})}
>
<P>{t("errors.unauthorized", { permission: missing?.join(", ") })}</P>
</View>
);
};

View File

@ -1,23 +1,3 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { import {
H1 as EH1, H1 as EH1,
H2 as EH2, H2 as EH2,

View File

@ -1,9 +1,5 @@
import { type ComponentType, type ReactElement, isValidElement } from "react"; import type { ReactElement } from "react";
import { useTranslation } from "react-i18next"; import { ErrorView, OfflineView } from "~/ui/errors";
import { View } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { P } from "~/primitives";
import { ErrorView } from "./errors";
import { type QueryIdentifier, useFetch } from "./query"; import { type QueryIdentifier, useFetch } from "./query";
export const Fetch = <Data,>({ export const Fetch = <Data,>({
@ -22,37 +18,3 @@ export const Fetch = <Data,>({
if (!data) return <Loader />; if (!data) return <Loader />;
return <Render {...data} />; return <Render {...data} />;
}; };
export const OfflineView = () => {
const { css } = useYoshiki();
const { t } = useTranslation();
return (
<View
{...css({
flexGrow: 1,
flexShrink: 1,
justifyContent: "center",
alignItems: "center",
})}
>
<P {...css({ color: (theme) => theme.colors.white })}>{t("errors.offline")}</P>
</View>
);
};
export const EmptyView = ({ message }: { message: string }) => {
const { css } = useYoshiki();
return (
<View
{...css({
flexGrow: 1,
justifyContent: "center",
alignItems: "center",
})}
>
<P {...css({ color: (theme) => theme.heading })}>{message}</P>
</View>
);
};

View File

@ -1,23 +1,3 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { ConnectionErrorContext, useAccount } from "@kyoo/models"; import { ConnectionErrorContext, useAccount } from "@kyoo/models";
import { Button, H1, Icon, Link, P, ts } from "@kyoo/primitives"; import { Button, H1, Icon, Link, P, ts } from "@kyoo/primitives";
import Register from "@material-symbols/svg-400/rounded/app_registration.svg"; import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
@ -26,7 +6,7 @@ import { useTranslation } from "react-i18next";
import { View } from "react-native"; import { View } from "react-native";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { DefaultLayout } from "../layout"; import { DefaultLayout } from "../../../packages/ui/src/layout";
export const ConnectionError = () => { export const ConnectionError = () => {
const { css } = useYoshiki(); const { css } = useYoshiki();

View File

@ -0,0 +1,19 @@
import { View } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { P } from "~/primitives";
export const EmptyView = ({ message }: { message: string }) => {
const { css } = useYoshiki();
return (
<View
{...css({
flexGrow: 1,
justifyContent: "center",
alignItems: "center",
})}
>
<P {...css({ color: (theme) => theme.heading })}>{message}</P>
</View>
);
};

View File

@ -1,28 +1,8 @@
/*
* Kyoo - A portable and vast media library solution.
* Copyright (c) Kyoo.
*
* See AUTHORS.md and LICENSE file in the project root for full license information.
*
* Kyoo is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* Kyoo is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { ConnectionErrorContext, type KyooErrors } from "@kyoo/models";
import { P } from "@kyoo/primitives";
import { useContext, useLayoutEffect } from "react"; import { useContext, useLayoutEffect } from "react";
import { View } from "react-native"; import { View } from "react-native";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { ConnectionErrorContext, type KyooErrors } from "~/models";
import { P } from "~/primitives";
export const ErrorView = ({ export const ErrorView = ({
error, error,

View File

@ -0,0 +1,6 @@
export * from "./error";
export * from "./unauthorized";
export * from "./connection";
export * from "./setup";
export * from "./empty";
export * from "./offline";

View File

@ -0,0 +1,22 @@
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { P } from "~/primitives";
export const OfflineView = () => {
const { css } = useYoshiki();
const { t } = useTranslation();
return (
<View
{...css({
flexGrow: 1,
flexShrink: 1,
justifyContent: "center",
alignItems: "center",
})}
>
<P {...css({ color: (theme) => theme.colors.white })}>{t("errors.offline")}</P>
</View>
);
};

View File

@ -6,8 +6,8 @@ import { useEffect } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { useYoshiki } from "yoshiki/native"; import { useYoshiki } from "yoshiki/native";
import { Navbar, NavbarProfile } from "../navbar"; import { Navbar, NavbarProfile } from "../../../packages/ui/src/navbar";
import { KyooLongLogo } from "../navbar/icon"; import { KyooLongLogo } from "../../../packages/ui/src/navbar/icon";
export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => { export const SetupPage: QueryPage<{ step: SetupStep }> = ({ step }) => {
const { css } = useYoshiki(); const { css } = useYoshiki();

View File

@ -0,0 +1,22 @@
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { P } from "~/primitives";
export const Unauthorized = ({ missing }: { missing: string[] }) => {
const { t } = useTranslation();
const { css } = useYoshiki();
return (
<View
{...css({
flexGrow: 1,
flexShrink: 1,
justifyContent: "center",
alignItems: "center",
})}
>
<P>{t("errors.unauthorized", { permission: missing?.join(", ") })}</P>
</View>
);
};