diff --git a/front/apps/mobile/app/_layout.tsx b/front/apps/mobile/app/_layout.tsx index 1664cbbd..4297dfdb 100644 --- a/front/apps/mobile/app/_layout.tsx +++ b/front/apps/mobile/app/_layout.tsx @@ -19,9 +19,9 @@ */ import { Stack } from "expo-router"; -import { Avatar, ThemeSelector } from "@kyoo/primitives"; +import { ThemeSelector } from "@kyoo/primitives"; import { useTheme } from "yoshiki/native"; -import { NavbarTitle } from "@kyoo/ui"; +import { LoginAvatar, NavbarTitle } from "@kyoo/ui"; import { useState } from "react"; import { QueryClientProvider } from "@tanstack/react-query"; import { createQueryClient } from "@kyoo/models"; @@ -53,7 +53,7 @@ const ThemedStack = () => { , - headerRight: () => , + headerRight: () => , headerStyle: { backgroundColor: theme.appbar, }, diff --git a/front/apps/mobile/metro.config.js b/front/apps/mobile/metro.config.js index 33d774e3..9a3594b0 100644 --- a/front/apps/mobile/metro.config.js +++ b/front/apps/mobile/metro.config.js @@ -21,21 +21,40 @@ const { getDefaultConfig } = require("expo/metro-config"); const path = require("path"); -// Find the project and workspace directories const projectRoot = __dirname; -// This can be replaced with `find-yarn-workspace-root` -const workspaceRoot = path.resolve(projectRoot, "../.."); +const defaultConfig = getDefaultConfig(projectRoot); -const config = getDefaultConfig(projectRoot); +function addMonorepoSupport(config) { + const workspaceRoot = path.resolve(projectRoot, "../.."); -// 1. Watch all files within the monorepo -config.watchFolders = [workspaceRoot]; -// 2. Let Metro know where to resolve packages and in what order -config.resolver.nodeModulesPaths = [ - path.resolve(projectRoot, "node_modules"), - path.resolve(workspaceRoot, "node_modules"), -]; -// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths` -config.resolver.disableHierarchicalLookup = true; + return { + ...config, + watchFolders: [...config.watchFolders, workspaceRoot], + resolver: { + ...config.resolver, + nodeModulesPaths: [ + ...config.resolver.nodeModulesPaths, + path.resolve(projectRoot, "node_modules"), + path.resolve(workspaceRoot, "node_modules"), + ], + disableHierarchicalLookup: true, + }, + }; +} -module.exports = config; +function addSvgTransformer(config) { + return { + ...config, + transformer: { + ...config.transformer, + babelTransformerPath: require.resolve("react-native-svg-transformer"), + }, + resolver: { + ...config.resolver, + assetExts: config.resolver.assetExts.filter((ext) => ext !== "svg"), + sourceExts: [...config.resolver.sourceExts, "svg"], + }, + }; +} + +module.exports = addMonorepoSupport(addSvgTransformer(defaultConfig)); diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json index bae2835f..7c4edb93 100644 --- a/front/apps/mobile/package.json +++ b/front/apps/mobile/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@kyoo/ui": "workspace:^", + "@material-symbols/svg-400": "^0.4.2", "@shopify/flash-list": "1.3.1", "@tanstack/react-query": "^4.19.1", "babel-plugin-transform-inline-environment-variables": "^0.4.4", @@ -37,6 +38,7 @@ "@babel/core": "^7.19.3", "@types/react": "~18.0.24", "@types/react-native": "~0.70.6", + "react-native-svg-transformer": "^1.0.0", "typescript": "^4.6.3" }, "private": true diff --git a/front/apps/web/next.config.js b/front/apps/web/next.config.js index f64b3bde..24d9b6f0 100755 --- a/front/apps/web/next.config.js +++ b/front/apps/web/next.config.js @@ -61,6 +61,27 @@ const nextConfig = { __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"), }), ); + + config.module.rules.push({ + test: /\.svg$/i, + issuer: /\.[jt]sx?$/, + use: [ + { + loader: "@svgr/webpack", + options: { + native: true, + svgoConfig: { + plugins: [ + { + name: "removeViewBox", + active: false, + }, + ], + }, + }, + }, + ], + }); return config; }, async redirects() { diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 6a42a0b6..3a4fe4b0 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -17,6 +17,7 @@ "@kyoo/models": "workspace:^", "@kyoo/primitives": "workspace:^", "@kyoo/ui": "workspace:^", + "@material-symbols/svg-400": "^0.4.2", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.8.7", "@mui/system": "^5.10.10", @@ -36,6 +37,7 @@ "react-dom": "18.2.0", "react-i18next": "^12.0.0", "react-native-reanimated": "^2.13.0", + "react-native-svg": "13.4.0", "react-native-web": "^0.18.10", "solito": "^2.0.5", "superjson": "^1.11.0", @@ -43,6 +45,7 @@ "zod": "^3.19.1" }, "devDependencies": { + "@svgr/webpack": "^6.5.1", "@types/node": "18.11.9", "@types/react": "18.0.25", "@types/react-dom": "18.0.9", diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json index 6aea699a..4f6e0249 100644 --- a/front/packages/primitives/package.json +++ b/front/packages/primitives/package.json @@ -8,11 +8,13 @@ "typescript": "^4.9.3" }, "peerDependencies": { + "@material-symbols/svg-400": "*", "expo-linear-gradient": "*", "moti": "*", "react": "*", "react-native": "*", "react-native-reanimated": "*", + "react-native-svg": "*", "yoshiki": "*" }, "peerDependenciesMeta": { @@ -22,7 +24,6 @@ }, "dependencies": { "@expo/html-elements": "^0.2.2", - "@expo/vector-icons": "AnonymusRaccoon/expo-vector-icons#no-prepare", "@tanstack/react-query": "^4.18.0", "solito": "^2.0.5" } diff --git a/front/packages/primitives/src/avatar.tsx b/front/packages/primitives/src/avatar.tsx index ca00a86a..d3c59849 100644 --- a/front/packages/primitives/src/avatar.tsx +++ b/front/packages/primitives/src/avatar.tsx @@ -22,29 +22,33 @@ import { View } from "react-native"; import { Image } from "./image"; import { useYoshiki, px, Stylable } from "yoshiki/native"; import { Icon } from "./icons"; -import { Skeleton } from "./skeleton"; +import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg"; export const Avatar = ({ src, alt, size = px(24), + color, isLoading = false, ...props }: { src?: string | null; alt?: string; size?: number; + color?: string; isLoading?: boolean; } & Stylable) => { const { css, theme } = useYoshiki(); - if (isLoading) return ; + console.log(color) return ( - - {src ? ( + + {src || isLoading ? ( {alt} ) : ( - + )} ); diff --git a/front/packages/primitives/src/icons.tsx b/front/packages/primitives/src/icons.tsx index f384768a..07863e67 100644 --- a/front/packages/primitives/src/icons.tsx +++ b/front/packages/primitives/src/icons.tsx @@ -18,27 +18,22 @@ * along with Kyoo. If not, see . */ -import MIcon from "@expo/vector-icons/MaterialIcons"; import { ComponentProps, ComponentType } from "react"; -import { PressableProps } from "react-native"; +import { PressableProps, ViewStyle } from "react-native"; +import { SvgProps } from "react-native-svg"; +import { YoshikiStyle } from "yoshiki/dist/type"; import { Pressable, px, useYoshiki } from "yoshiki/native"; -import { Breakpoint, ts } from "./utils"; +import { ts } from "./utils"; -export type IconProps = { - icon: ComponentProps["name"]; - size?: number; - color?: Breakpoint; +type IconProps = { + icon: ComponentType; + color: YoshikiStyle; + size?: number | string; }; -export const Icon = ({ icon, size = 24, color }: IconProps) => { - const { css, theme } = useYoshiki(); - return ( - - ); +export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => { + const { css } = useYoshiki(); + return ; }; export const IconButton = ({ diff --git a/front/packages/primitives/src/links.tsx b/front/packages/primitives/src/links.tsx index 34a2c3f4..44c39b16 100644 --- a/front/packages/primitives/src/links.tsx +++ b/front/packages/primitives/src/links.tsx @@ -74,7 +74,7 @@ export const Link = ({ const focusProps = { onBlur, onFocus, onPressIn, onPressOut }; const radiusStyle = Platform.select({ android: { - style: { borderRadius: StyleSheet.flatten(props?.style).borderRadius, overflow: "hidden" }, + style: { borderRadius: StyleSheet.flatten(props?.style)?.borderRadius, overflow: "hidden" }, }, default: {}, }); diff --git a/front/packages/primitives/src/svg.d.ts b/front/packages/primitives/src/svg.d.ts new file mode 100644 index 00000000..9ad5a8a1 --- /dev/null +++ b/front/packages/primitives/src/svg.d.ts @@ -0,0 +1,26 @@ +/* + * 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 . + */ + +declare module "*.svg" { + import React from "react"; + import { SvgProps } from "react-native-svg"; + const content: React.FC; + export default content; +} diff --git a/front/packages/ui/package.json b/front/packages/ui/package.json index 50a27de2..d583ea20 100644 --- a/front/packages/ui/package.json +++ b/front/packages/ui/package.json @@ -5,8 +5,7 @@ "packageManager": "yarn@3.2.4", "dependencies": { "@kyoo/models": "workspace:^", - "@kyoo/primitives": "workspace:^", - "react-native-svg": "^13.6.0" + "@kyoo/primitives": "workspace:^" }, "devDependencies": { "@shopify/flash-list": "^1.4.0", @@ -14,6 +13,7 @@ "typescript": "^4.9.3" }, "peerDependencies": { + "@material-symbols/svg-400": "*", "@shopify/flash-list": "^1.4.0", "@tanstack/react-query": "*", "expo-linear-gradient": "*", @@ -23,6 +23,7 @@ "react-i18next": "*", "react-native": "*", "react-native-reanimated": "*", + "react-native-svg": "*", "yoshiki": "*" }, "peerDependenciesMeta": { diff --git a/front/packages/ui/src/details/header.tsx b/front/packages/ui/src/details/header.tsx index 2c805393..e281b503 100644 --- a/front/packages/ui/src/details/header.tsx +++ b/front/packages/ui/src/details/header.tsx @@ -55,6 +55,8 @@ import { Stylable, } from "yoshiki/native"; import { Fetch } from "../fetch"; +import PlayArrow from "@material-symbols/svg-400/rounded/play_arrow-fill.svg" +import Theaters from "@material-symbols/svg-400/rounded/theaters-fill.svg" const TitleLine = ({ isLoading, @@ -150,7 +152,7 @@ const TitleLine = ({ )} diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx index 3443caf9..d32977df 100644 --- a/front/packages/ui/src/navbar/index.tsx +++ b/front/packages/ui/src/navbar/index.tsx @@ -22,7 +22,8 @@ import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models"; import { IconButton, Header, Avatar, A, Skeleton, tooltip, ts } from "@kyoo/primitives"; import { View } from "react-native"; import { useTranslation } from "react-i18next"; -import { rem, Stylable, useYoshiki } from "yoshiki/native"; +import { rem, Stylable, useTheme, useYoshiki } from "yoshiki/native"; +import Menu from "@material-symbols/svg-400/rounded/menu-fill.svg"; import { Fetch } from "../fetch"; import { KyooLongLogo } from "./icon"; @@ -36,10 +37,20 @@ export const NavbarTitle = (props: Stylable) => { ); }; -export const Navbar = (props: Stylable) => { - const { css } = useYoshiki(); +export const LoginAvatar = (props: Stylable) => { + const theme = useTheme(); const { t } = useTranslation(); + return ( + + + + ); +}; + +export const Navbar = (props: Stylable) => { + const { css, theme } = useYoshiki(); + return (
{ )} > @@ -101,9 +112,7 @@ export const Navbar = (props: Stylable) => { } - - - +
); }; diff --git a/front/packages/ui/src/svg.d.ts b/front/packages/ui/src/svg.d.ts new file mode 100644 index 00000000..9ad5a8a1 --- /dev/null +++ b/front/packages/ui/src/svg.d.ts @@ -0,0 +1,26 @@ +/* + * 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 . + */ + +declare module "*.svg" { + import React from "react"; + import { SvgProps } from "react-native-svg"; + const content: React.FC; + export default content; +} diff --git a/front/yarn.lock b/front/yarn.lock index 0b9fb41f..70fa2853 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -40,7 +40,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:*, @babel/core@npm:^7.13.16, @babel/core@npm:^7.14.0, @babel/core@npm:^7.19.3": +"@babel/core@npm:*, @babel/core@npm:^7.13.16, @babel/core@npm:^7.14.0, @babel/core@npm:^7.19.3, @babel/core@npm:^7.19.6": version: 7.20.5 resolution: "@babel/core@npm:7.20.5" dependencies: @@ -1114,7 +1114,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-display-name@npm:^7.0.0": +"@babel/plugin-transform-react-constant-elements@npm:^7.18.12": + version: 7.20.2 + resolution: "@babel/plugin-transform-react-constant-elements@npm:7.20.2" + dependencies: + "@babel/helper-plugin-utils": ^7.20.2 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 7b041b726e7c14b8c26a0dd240defac5f93a1f449371c6bdc5e6b46d581211300cc1a79da4140bdf20347f49e175dcb4f469812399206864024d1fdc81171193 + languageName: node + linkType: hard + +"@babel/plugin-transform-react-display-name@npm:^7.0.0, @babel/plugin-transform-react-display-name@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-transform-react-display-name@npm:7.18.6" dependencies: @@ -1125,6 +1136,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-development@npm:^7.18.6": + version: 7.18.6 + resolution: "@babel/plugin-transform-react-jsx-development@npm:7.18.6" + dependencies: + "@babel/plugin-transform-react-jsx": ^7.18.6 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: ec9fa65db66f938b75c45e99584367779ac3e0af8afc589187262e1337c7c4205ea312877813ae4df9fb93d766627b8968d74ac2ba702e4883b1dbbe4953ecee + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-self@npm:^7.0.0": version: 7.18.6 resolution: "@babel/plugin-transform-react-jsx-self@npm:7.18.6" @@ -1147,7 +1169,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.17": +"@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.17, @babel/plugin-transform-react-jsx@npm:^7.18.6": version: 7.19.0 resolution: "@babel/plugin-transform-react-jsx@npm:7.19.0" dependencies: @@ -1162,6 +1184,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-pure-annotations@npm:^7.18.6": + version: 7.18.6 + resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.18.6" + dependencies: + "@babel/helper-annotate-as-pure": ^7.18.6 + "@babel/helper-plugin-utils": ^7.18.6 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 97c4873d409088f437f9084d084615948198dd87fc6723ada0e7e29c5a03623c2f3e03df3f52e7e7d4d23be32a08ea00818bff302812e48713c706713bd06219 + languageName: node + linkType: hard + "@babel/plugin-transform-regenerator@npm:^7.18.6": version: 7.20.5 resolution: "@babel/plugin-transform-regenerator@npm:7.20.5" @@ -1293,7 +1327,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:^7.12.9": +"@babel/preset-env@npm:^7.12.9, @babel/preset-env@npm:^7.19.4": version: 7.20.2 resolution: "@babel/preset-env@npm:7.20.2" dependencies: @@ -1406,7 +1440,23 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7": +"@babel/preset-react@npm:^7.18.6": + version: 7.18.6 + resolution: "@babel/preset-react@npm:7.18.6" + dependencies: + "@babel/helper-plugin-utils": ^7.18.6 + "@babel/helper-validator-option": ^7.18.6 + "@babel/plugin-transform-react-display-name": ^7.18.6 + "@babel/plugin-transform-react-jsx": ^7.18.6 + "@babel/plugin-transform-react-jsx-development": ^7.18.6 + "@babel/plugin-transform-react-pure-annotations": ^7.18.6 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 540d9cf0a0cc0bb07e6879994e6fb7152f87dafbac880b56b65e2f528134c7ba33e0cd140b58700c77b2ebf4c81fa6468fed0ba391462d75efc7f8c1699bb4c3 + languageName: node + linkType: hard + +"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.18.6": version: 7.18.6 resolution: "@babel/preset-typescript@npm:7.18.6" dependencies: @@ -2064,13 +2114,6 @@ __metadata: languageName: node linkType: hard -"@expo/vector-icons@AnonymusRaccoon/expo-vector-icons#no-prepare": - version: 13.0.0 - resolution: "@expo/vector-icons@https://github.com/AnonymusRaccoon/expo-vector-icons.git#commit=6e616bf82a31bdf87cc721a346239e8a66fc9f6d" - checksum: e67c30103414716dcdf257d66ceaa60b661a0f08780d680e8a941af2261cd7474f4083ecc8dd9f0f2ef56359379b322dc9bceaf0f3244770595d94d136a5e1c9 - languageName: node - linkType: hard - "@expo/vector-icons@npm:^13.0.0": version: 13.0.0 resolution: "@expo/vector-icons@npm:13.0.0" @@ -2298,17 +2341,18 @@ __metadata: resolution: "@kyoo/primitives@workspace:packages/primitives" dependencies: "@expo/html-elements": ^0.2.2 - "@expo/vector-icons": "AnonymusRaccoon/expo-vector-icons#no-prepare" "@tanstack/react-query": ^4.18.0 "@types/react": ^18.0.25 solito: ^2.0.5 typescript: ^4.9.3 peerDependencies: + "@material-symbols/svg-400": "*" expo-linear-gradient: "*" moti: "*" react: "*" react-native: "*" react-native-reanimated: "*" + react-native-svg: "*" yoshiki: "*" peerDependenciesMeta: react-native-web: @@ -2324,9 +2368,9 @@ __metadata: "@kyoo/primitives": "workspace:^" "@shopify/flash-list": ^1.4.0 "@types/react": ^18.0.25 - react-native-svg: ^13.6.0 typescript: ^4.9.3 peerDependencies: + "@material-symbols/svg-400": "*" "@shopify/flash-list": ^1.4.0 "@tanstack/react-query": "*" expo-linear-gradient: "*" @@ -2336,6 +2380,7 @@ __metadata: react-i18next: "*" react-native: "*" react-native-reanimated: "*" + react-native-svg: "*" yoshiki: "*" peerDependenciesMeta: react-native: @@ -2343,6 +2388,13 @@ __metadata: languageName: unknown linkType: soft +"@material-symbols/svg-400@npm:^0.4.2": + version: 0.4.2 + resolution: "@material-symbols/svg-400@npm:0.4.2" + checksum: c776ec99235f6ecad6ab49cf6139da963c9d215ae732e934a453cc4f67c792a451d1085e612aa9245ee84936cd1d4bcc3ce8af4d22f96b3e757ed72f66712e1c + languageName: node + linkType: hard + "@motionone/animation@npm:^10.12.0": version: 10.14.0 resolution: "@motionone/animation@npm:10.14.0" @@ -3201,6 +3253,162 @@ __metadata: languageName: node linkType: hard +"@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: cab83832830a57735329ed68f67c03b57ca21fa037b0134847b0c5c0ef4beca89956d7dacfbf7b2a10fd901e7009e877512086db2ee918b8c69aee7742ae32c0 + languageName: node + linkType: hard + +"@svgr/babel-plugin-remove-jsx-attribute@npm:*": + version: 6.5.0 + resolution: "@svgr/babel-plugin-remove-jsx-attribute@npm:6.5.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 7a4dfc1345f5855b010684e9c5301731842bf91d72b82ce5cc4c82c80b94de1036e447a8a00fb306a6dd575cb4c640d8ce3cfee6607ddbb804796a77284c7f22 + languageName: node + linkType: hard + +"@svgr/babel-plugin-remove-jsx-empty-expression@npm:*": + version: 6.5.0 + resolution: "@svgr/babel-plugin-remove-jsx-empty-expression@npm:6.5.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 3e173f720d530f9f71f8506f3eb78583eec3d87d66e385efe1ef3b3ebfc4e3680ec30f36414726de6a163e99ca69f54886022967e49476dea522267e1986936e + languageName: node + linkType: hard + +"@svgr/babel-plugin-replace-jsx-attribute-value@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-plugin-replace-jsx-attribute-value@npm:6.5.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: b7d2125758e766e1ebd14b92216b800bdc976959bc696dbfa1e28682919147c1df4bb8b1b5fd037d7a83026e27e681fea3b8d3741af8d3cf4c9dfa3d412125df + languageName: node + linkType: hard + +"@svgr/babel-plugin-svg-dynamic-title@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-plugin-svg-dynamic-title@npm:6.5.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 0fd42ebf127ae9163ef341e84972daa99bdcb9e6ed3f83aabd95ee173fddc43e40e02fa847fbc0a1058cf5549f72b7960a2c5e22c3e4ac18f7e3ac81277852ae + languageName: node + linkType: hard + +"@svgr/babel-plugin-svg-em-dimensions@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-plugin-svg-em-dimensions@npm:6.5.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: c1550ee9f548526fa66fd171e3ffb5696bfc4e4cd108a631d39db492c7410dc10bba4eb5a190e9df824bf806130ccc586ae7d2e43c547e6a4f93bbb29a18f344 + languageName: node + linkType: hard + +"@svgr/babel-plugin-transform-react-native-svg@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-plugin-transform-react-native-svg@npm:6.5.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 4c924af22b948b812629e80efb90ad1ec8faae26a232d8ca8a06b46b53e966a2c415a57806a3ff0ea806a622612e546422719b69ec6839717a7755dac19171d9 + languageName: node + linkType: hard + +"@svgr/babel-plugin-transform-svg-component@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-plugin-transform-svg-component@npm:6.5.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: e496bb5ee871feb6bcab250b6e067322da7dd5c9c2b530b41e5586fe090f86611339b49d0a909c334d9b24cbca0fa755c949a2526c6ad03c6b5885666874cf5f + languageName: node + linkType: hard + +"@svgr/babel-preset@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/babel-preset@npm:6.5.1" + dependencies: + "@svgr/babel-plugin-add-jsx-attribute": ^6.5.1 + "@svgr/babel-plugin-remove-jsx-attribute": "*" + "@svgr/babel-plugin-remove-jsx-empty-expression": "*" + "@svgr/babel-plugin-replace-jsx-attribute-value": ^6.5.1 + "@svgr/babel-plugin-svg-dynamic-title": ^6.5.1 + "@svgr/babel-plugin-svg-em-dimensions": ^6.5.1 + "@svgr/babel-plugin-transform-react-native-svg": ^6.5.1 + "@svgr/babel-plugin-transform-svg-component": ^6.5.1 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 9f124be39a8e64f909162f925b3a63ddaa5a342a5e24fc0b7f7d9d4d7f7e3b916596c754fb557dc259928399cad5366a27cb231627a0d2dcc4b13ac521cf05af + languageName: node + linkType: hard + +"@svgr/core@npm:^6.1.2, @svgr/core@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/core@npm:6.5.1" + dependencies: + "@babel/core": ^7.19.6 + "@svgr/babel-preset": ^6.5.1 + "@svgr/plugin-jsx": ^6.5.1 + camelcase: ^6.2.0 + cosmiconfig: ^7.0.1 + checksum: fd6d6d5da5aeb956703310480b626c1fb3e3973ad9fe8025efc1dcf3d895f857b70d100c63cf32cebb20eb83c9607bafa464c9436e18fe6fe4fafdc73ed6b1a5 + languageName: node + linkType: hard + +"@svgr/hast-util-to-babel-ast@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/hast-util-to-babel-ast@npm:6.5.1" + dependencies: + "@babel/types": ^7.20.0 + entities: ^4.4.0 + checksum: 37923cce1b3f4e2039077b0c570b6edbabe37d1cf1a6ee35e71e0fe00f9cffac450eec45e9720b1010418131a999cb0047331ba1b6d1d2c69af1b92ac785aacf + languageName: node + linkType: hard + +"@svgr/plugin-jsx@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/plugin-jsx@npm:6.5.1" + dependencies: + "@babel/core": ^7.19.6 + "@svgr/babel-preset": ^6.5.1 + "@svgr/hast-util-to-babel-ast": ^6.5.1 + svg-parser: ^2.0.4 + peerDependencies: + "@svgr/core": ^6.0.0 + checksum: 42f22847a6bdf930514d7bedd3c5e1fd8d53eb3594779f9db16cb94c762425907c375cd8ec789114e100a4d38068aca6c7ab5efea4c612fba63f0630c44cc859 + languageName: node + linkType: hard + +"@svgr/plugin-svgo@npm:^6.1.2, @svgr/plugin-svgo@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/plugin-svgo@npm:6.5.1" + dependencies: + cosmiconfig: ^7.0.1 + deepmerge: ^4.2.2 + svgo: ^2.8.0 + peerDependencies: + "@svgr/core": "*" + checksum: cd2833530ac0485221adc2146fd992ab20d79f4b12eebcd45fa859721dd779483158e11dfd9a534858fe468416b9412416e25cbe07ac7932c44ed5fa2021c72e + languageName: node + linkType: hard + +"@svgr/webpack@npm:^6.5.1": + version: 6.5.1 + resolution: "@svgr/webpack@npm:6.5.1" + dependencies: + "@babel/core": ^7.19.6 + "@babel/plugin-transform-react-constant-elements": ^7.18.12 + "@babel/preset-env": ^7.19.4 + "@babel/preset-react": ^7.18.6 + "@babel/preset-typescript": ^7.18.6 + "@svgr/core": ^6.5.1 + "@svgr/plugin-jsx": ^6.5.1 + "@svgr/plugin-svgo": ^6.5.1 + checksum: d10582eb4fa82a5b6d314cb49f2c640af4fd3a60f5b76095d2b14e383ef6a43a6f4674b68774a21787dbde69dec0a251cfcfc3f9a96c82754ba5d5c6daf785f0 + languageName: node + linkType: hard + "@swc/helpers@npm:0.4.14": version: 0.4.14 resolution: "@swc/helpers@npm:0.4.14" @@ -3243,6 +3451,13 @@ __metadata: languageName: node linkType: hard +"@trysound/sax@npm:0.2.0": + version: 0.2.0 + resolution: "@trysound/sax@npm:0.2.0" + checksum: 11226c39b52b391719a2a92e10183e4260d9651f86edced166da1d95f39a0a1eaa470e44d14ac685ccd6d3df7e2002433782872c0feeb260d61e80f21250e65c + languageName: node + linkType: hard + "@types/debug@npm:^4.0.0": version: 4.1.7 resolution: "@types/debug@npm:4.1.7" @@ -4738,7 +4953,7 @@ __metadata: languageName: node linkType: hard -"camelcase@npm:^6.0.0": +"camelcase@npm:^6.0.0, camelcase@npm:^6.2.0": version: 6.3.0 resolution: "camelcase@npm:6.3.0" checksum: 8c96818a9076434998511251dcb2761a94817ea17dbdc37f47ac080bd088fc62c7369429a19e2178b993497132c8cbcf5cc1f44ba963e76782ba469c0474938d @@ -5211,7 +5426,7 @@ __metadata: languageName: node linkType: hard -"cosmiconfig@npm:^7.0.0": +"cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1": version: 7.1.0 resolution: "cosmiconfig@npm:7.1.0" dependencies: @@ -5297,6 +5512,19 @@ __metadata: languageName: node linkType: hard +"css-select@npm:^4.1.3": + version: 4.3.0 + resolution: "css-select@npm:4.3.0" + dependencies: + boolbase: ^1.0.0 + css-what: ^6.0.1 + domhandler: ^4.3.1 + domutils: ^2.8.0 + nth-check: ^2.0.1 + checksum: d6202736839194dd7f910320032e7cfc40372f025e4bf21ca5bf6eb0a33264f322f50ba9c0adc35dadd342d3d6fae5ca244779a4873afbfa76561e343f2058e0 + languageName: node + linkType: hard + "css-select@npm:^5.1.0": version: 5.1.0 resolution: "css-select@npm:5.1.0" @@ -5310,7 +5538,7 @@ __metadata: languageName: node linkType: hard -"css-tree@npm:^1.1.3": +"css-tree@npm:^1.1.2, css-tree@npm:^1.1.3": version: 1.1.3 resolution: "css-tree@npm:1.1.3" dependencies: @@ -5320,13 +5548,22 @@ __metadata: languageName: node linkType: hard -"css-what@npm:^6.1.0": +"css-what@npm:^6.0.1, css-what@npm:^6.1.0": version: 6.1.0 resolution: "css-what@npm:6.1.0" checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe languageName: node linkType: hard +"csso@npm:^4.2.0": + version: 4.2.0 + resolution: "csso@npm:4.2.0" + dependencies: + css-tree: ^1.1.2 + checksum: 380ba9663da3bcea58dee358a0d8c4468bb6539be3c439dc266ac41c047217f52fd698fb7e4b6b6ccdfb8cf53ef4ceed8cc8ceccb8dfca2aa628319826b5b998 + languageName: node + linkType: hard + "csstype@npm:^3.0.2, csstype@npm:^3.1.1": version: 3.1.1 resolution: "csstype@npm:3.1.1" @@ -5429,6 +5666,13 @@ __metadata: languageName: node linkType: hard +"deepmerge@npm:^4.2.2": + version: 4.2.2 + resolution: "deepmerge@npm:4.2.2" + checksum: a8c43a1ed8d6d1ed2b5bf569fa4c8eb9f0924034baf75d5d406e47e157a451075c4db353efea7b6bcc56ec48116a8ce72fccf867b6e078e7c561904b5897530b + languageName: node + linkType: hard + "default-gateway@npm:^4.2.0": version: 4.2.0 resolution: "default-gateway@npm:4.2.0" @@ -5602,6 +5846,17 @@ __metadata: languageName: node linkType: hard +"dom-serializer@npm:^1.0.1": + version: 1.4.1 + resolution: "dom-serializer@npm:1.4.1" + dependencies: + domelementtype: ^2.0.1 + domhandler: ^4.2.0 + entities: ^2.0.0 + checksum: fbb0b01f87a8a2d18e6e5a388ad0f7ec4a5c05c06d219377da1abc7bb0f674d804f4a8a94e3f71ff15f6cb7dcfc75704a54b261db672b9b3ab03da6b758b0b22 + languageName: node + linkType: hard + "dom-serializer@npm:^2.0.0": version: 2.0.0 resolution: "dom-serializer@npm:2.0.0" @@ -5613,13 +5868,22 @@ __metadata: languageName: node linkType: hard -"domelementtype@npm:^2.3.0": +"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0": version: 2.3.0 resolution: "domelementtype@npm:2.3.0" checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6 languageName: node linkType: hard +"domhandler@npm:^4.2.0, domhandler@npm:^4.3.1": + version: 4.3.1 + resolution: "domhandler@npm:4.3.1" + dependencies: + domelementtype: ^2.2.0 + checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa + languageName: node + linkType: hard + "domhandler@npm:^5.0.1, domhandler@npm:^5.0.2": version: 5.0.3 resolution: "domhandler@npm:5.0.3" @@ -5629,6 +5893,17 @@ __metadata: languageName: node linkType: hard +"domutils@npm:^2.8.0": + version: 2.8.0 + resolution: "domutils@npm:2.8.0" + dependencies: + dom-serializer: ^1.0.1 + domelementtype: ^2.2.0 + domhandler: ^4.2.0 + checksum: abf7434315283e9aadc2a24bac0e00eab07ae4313b40cc239f89d84d7315ebdfd2fb1b5bf750a96bc1b4403d7237c7b2ebf60459be394d625ead4ca89b934391 + languageName: node + linkType: hard + "domutils@npm:^3.0.1": version: 3.0.1 resolution: "domutils@npm:3.0.1" @@ -5710,7 +5985,14 @@ __metadata: languageName: node linkType: hard -"entities@npm:^4.2.0": +"entities@npm:^2.0.0": + version: 2.2.0 + resolution: "entities@npm:2.2.0" + checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3 + languageName: node + linkType: hard + +"entities@npm:^4.2.0, entities@npm:^4.4.0": version: 4.4.0 resolution: "entities@npm:4.4.0" checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2 @@ -9673,6 +9955,7 @@ __metadata: dependencies: "@babel/core": ^7.19.3 "@kyoo/ui": "workspace:^" + "@material-symbols/svg-400": ^0.4.2 "@shopify/flash-list": 1.3.1 "@tanstack/react-query": ^4.19.1 "@types/react": ~18.0.24 @@ -9696,6 +9979,7 @@ __metadata: react-native-safe-area-context: 4.4.1 react-native-screens: ~3.18.0 react-native-svg: 13.4.0 + react-native-svg-transformer: ^1.0.0 typescript: ^4.6.3 yoshiki: 0.3.1 languageName: unknown @@ -10468,6 +10752,13 @@ __metadata: languageName: node linkType: hard +"path-dirname@npm:^1.0.2": + version: 1.0.2 + resolution: "path-dirname@npm:1.0.2" + checksum: 0d2f6604ae05a252a0025318685f290e2764ecf9c5436f203cdacfc8c0b17c24cdedaa449d766beb94ab88cc7fc70a09ec21e7933f31abc2b719180883e5e33f + languageName: node + linkType: hard + "path-exists@npm:^3.0.0": version: 3.0.0 resolution: "path-exists@npm:3.0.0" @@ -11030,6 +11321,20 @@ __metadata: languageName: node linkType: hard +"react-native-svg-transformer@npm:^1.0.0": + version: 1.0.0 + resolution: "react-native-svg-transformer@npm:1.0.0" + dependencies: + "@svgr/core": ^6.1.2 + "@svgr/plugin-svgo": ^6.1.2 + path-dirname: ^1.0.2 + peerDependencies: + react-native: ">=0.59.0" + react-native-svg: ">=12.0.0" + checksum: 649ab64a646a9ce288c81cb63bb7f070e3b81dc2b952c1aced1d223160db62311a79d5ccd67784956973bdbf7e60be9c9ea157f1532f9a425c5c3de580122ca9 + languageName: node + linkType: hard + "react-native-svg@npm:13.4.0": version: 13.4.0 resolution: "react-native-svg@npm:13.4.0" @@ -11043,19 +11348,6 @@ __metadata: languageName: node linkType: hard -"react-native-svg@npm:^13.6.0": - version: 13.6.0 - resolution: "react-native-svg@npm:13.6.0" - dependencies: - css-select: ^5.1.0 - css-tree: ^1.1.3 - peerDependencies: - react: "*" - react-native: "*" - checksum: 6d9b43d12c885982e69fe81d0bccc9b417d977782d4f66ef6964eb33d87ebc79c0a7b7b2dcae60be2857a9ce9178efe35e28de1bc9da92a69bc736177d507770 - languageName: node - linkType: hard - "react-native-web@npm:^0.18.10": version: 0.18.10 resolution: "react-native-web@npm:0.18.10" @@ -12155,6 +12447,13 @@ __metadata: languageName: node linkType: hard +"stable@npm:^0.1.8": + version: 0.1.8 + resolution: "stable@npm:0.1.8" + checksum: 2ff482bb100285d16dd75cd8f7c60ab652570e8952c0bfa91828a2b5f646a0ff533f14596ea4eabd48bb7f4aeea408dce8f8515812b975d958a4cc4fa6b9dfeb + languageName: node + linkType: hard + "stackframe@npm:^1.3.4": version: 1.3.4 resolution: "stackframe@npm:1.3.4" @@ -12467,6 +12766,30 @@ __metadata: languageName: node linkType: hard +"svg-parser@npm:^2.0.4": + version: 2.0.4 + resolution: "svg-parser@npm:2.0.4" + checksum: b3de6653048212f2ae7afe4a423e04a76ec6d2d06e1bf7eacc618a7c5f7df7faa5105561c57b94579ec831fbbdbf5f190ba56a9205ff39ed13eabdf8ab086ddf + languageName: node + linkType: hard + +"svgo@npm:^2.8.0": + version: 2.8.0 + resolution: "svgo@npm:2.8.0" + dependencies: + "@trysound/sax": 0.2.0 + commander: ^7.2.0 + css-select: ^4.1.3 + css-tree: ^1.1.3 + csso: ^4.2.0 + picocolors: ^1.0.0 + stable: ^0.1.8 + bin: + svgo: bin/svgo + checksum: b92f71a8541468ffd0b81b8cdb36b1e242eea320bf3c1a9b2c8809945853e9d8c80c19744267eb91cabf06ae9d5fff3592d677df85a31be4ed59ff78534fa420 + languageName: node + linkType: hard + "synckit@npm:^0.8.4": version: 0.8.4 resolution: "synckit@npm:0.8.4" @@ -13289,9 +13612,11 @@ __metadata: "@kyoo/models": "workspace:^" "@kyoo/primitives": "workspace:^" "@kyoo/ui": "workspace:^" + "@material-symbols/svg-400": ^0.4.2 "@mui/icons-material": ^5.8.4 "@mui/material": ^5.8.7 "@mui/system": ^5.10.10 + "@svgr/webpack": ^6.5.1 "@tanstack/react-query": ^4.19.1 "@types/node": 18.11.9 "@types/react": 18.0.25 @@ -13314,6 +13639,7 @@ __metadata: react-dom: 18.2.0 react-i18next: ^12.0.0 react-native-reanimated: ^2.13.0 + react-native-svg: 13.4.0 react-native-web: ^0.18.10 solito: ^2.0.5 superjson: ^1.11.0