From 9dc11be0fffd18c7ca9381461a2ac68e93df3b8e Mon Sep 17 00:00:00 2001 From: kmmiio99o <164557248+kmmiio99o@users.noreply.github.com> Date: Sat, 22 Nov 2025 00:46:14 +0100 Subject: [PATCH] feat: Update settings icon and fonts Ui - Updated `@shopify/react-native-skia` to version 2.4.2. - Updated `react-reconciler` to version 0.31.0. - Updated settings icon. --- bun.lock | 9 +- package.json | 2 +- src/core/ui/settings/index.ts | 2 +- src/core/ui/settings/pages/Fonts/FontCard.tsx | 91 +++---------------- 4 files changed, 19 insertions(+), 85 deletions(-) diff --git a/bun.lock b/bun.lock index 14821a2..24d75f7 100644 --- a/bun.lock +++ b/bun.lock @@ -1,11 +1,12 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "ShiggyCord", "dependencies": { "@gullerya/object-observer": "^6.1.4", - "@shopify/react-native-skia": "^1.12.4", + "@shopify/react-native-skia": "^2.4.2", "@tanstack/react-query": "^5.83.0", "@types/chroma-js": "~2.4.5", "@types/lodash": "~4.17.20", @@ -473,7 +474,7 @@ "@semantic-release/release-notes-generator": ["@semantic-release/release-notes-generator@14.0.3", "", { "dependencies": { "conventional-changelog-angular": "^8.0.0", "conventional-changelog-writer": "^8.0.0", "conventional-commits-filter": "^5.0.0", "conventional-commits-parser": "^6.0.0", "debug": "^4.0.0", "get-stream": "^7.0.0", "import-from-esm": "^2.0.0", "into-stream": "^7.0.0", "lodash-es": "^4.17.21", "read-package-up": "^11.0.0" }, "peerDependencies": { "semantic-release": ">=20.1.0" } }, "sha512-XxAZRPWGwO5JwJtS83bRdoIhCiYIx8Vhr+u231pQAsdFIAbm19rSVJLdnBN+Avvk7CKvNQE/nJ4y7uqKH6WTiw=="], - "@shopify/react-native-skia": ["@shopify/react-native-skia@1.12.4", "", { "dependencies": { "canvaskit-wasm": "0.40.0", "react-reconciler": "0.27.0" }, "peerDependencies": { "react": ">=18.0 <19.0.0", "react-native": ">=0.64 <0.78.0", "react-native-reanimated": ">=2.0.0" }, "optionalPeers": ["react-native", "react-native-reanimated"], "bin": { "setup-skia-web": "scripts/setup-canvaskit.js" } }, "sha512-8QDIBKSU7XB3Lc1kAv4jSFddTQK8AE+1AEoJnQLNllsiex1gufLQ8kN7rs9zii+iboSY8tYKT7ocV+5cE2Exdw=="], + "@shopify/react-native-skia": ["@shopify/react-native-skia@2.4.2", "", { "dependencies": { "canvaskit-wasm": "0.40.0", "react-reconciler": "0.31.0" }, "peerDependencies": { "react": ">=19.0", "react-native": ">=0.78", "react-native-reanimated": ">=3.19.1" }, "optionalPeers": ["react-native", "react-native-reanimated"], "bin": { "setup-skia-web": "scripts/setup-canvaskit.js" } }, "sha512-W+boV6E/hvRPcA8L7QRKnLs+05/iMEDbhVRLIx0UpW7NOQ8EbWCnu16mCU9BYJ/4s/y3NyYNk+wfP45Gf0LARQ=="], "@sinclair/typebox": ["@sinclair/typebox@0.27.8", "", {}, "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="], @@ -1415,7 +1416,7 @@ "react-native-worklets": ["react-native-worklets@0.6.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-class-properties": "^7.0.0-0", "@babel/plugin-transform-classes": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", "@babel/plugin-transform-optional-chaining": "^7.0.0-0", "@babel/plugin-transform-shorthand-properties": "^7.0.0-0", "@babel/plugin-transform-template-literals": "^7.0.0-0", "@babel/plugin-transform-unicode-regex": "^7.0.0-0", "@babel/preset-typescript": "^7.16.7", "convert-source-map": "^2.0.0", "semver": "7.7.2" }, "peerDependencies": { "@babel/core": "^7.0.0-0", "react": "*", "react-native": "*" } }, "sha512-URca8l7c7Uog7gv4mcg9KILdJlnbvwdS5yfXQYf5TDkD2W1VY1sduEKrD+sA3lUPXH/TG1vmXAvNxCNwPMYgGg=="], - "react-reconciler": ["react-reconciler@0.27.0", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.21.0" }, "peerDependencies": { "react": "^18.0.0" } }, "sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA=="], + "react-reconciler": ["react-reconciler@0.31.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ=="], "react-refresh": ["react-refresh@0.14.2", "", {}, "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="], @@ -2221,8 +2222,6 @@ "react-native/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="], - "react-reconciler/scheduler": ["scheduler@0.21.0", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ=="], - "read-pkg/parse-json": ["parse-json@8.3.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "index-to-position": "^1.1.0", "type-fest": "^4.39.1" } }, "sha512-ybiGyvspI+fAoRQbIPRddCcSTV9/LsJbf0e/S85VLowVGzRmokfneg2kwVW/KU5rOXrPSbF1qAKPMgNTqqROQQ=="], "read-pkg/unicorn-magic": ["unicorn-magic@0.1.0", "", {}, "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ=="], diff --git a/package.json b/package.json index 99f528a..c261670 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ }, "dependencies": { "@gullerya/object-observer": "^6.1.4", - "@shopify/react-native-skia": "^1.12.4", + "@shopify/react-native-skia": "^2.4.2", "@tanstack/react-query": "^5.83.0", "@types/chroma-js": "~2.4.5", "@types/lodash": "~4.17.20", diff --git a/src/core/ui/settings/index.ts b/src/core/ui/settings/index.ts index 91ebb38..c090a7e 100644 --- a/src/core/ui/settings/index.ts +++ b/src/core/ui/settings/index.ts @@ -45,7 +45,7 @@ export default function initSettings() { { key: "BUNNY_FONTS", title: () => Strings.FONTS, - icon: findAssetId("ic_add_text"), + icon: findAssetId("LettersIcon"), render: () => import("@core/ui/settings/pages/Fonts"), usePredicate: () => isFontSupported(), }, diff --git a/src/core/ui/settings/pages/Fonts/FontCard.tsx b/src/core/ui/settings/pages/Fonts/FontCard.tsx index 08aff33..478fd7a 100644 --- a/src/core/ui/settings/pages/Fonts/FontCard.tsx +++ b/src/core/ui/settings/pages/Fonts/FontCard.tsx @@ -5,74 +5,12 @@ import { useProxy } from "@core/vendetta/storage"; import { FontDefinition, fonts, selectFont } from "@lib/addons/fonts"; import { findAssetId } from "@lib/api/assets"; import { BundleUpdaterManager } from "@lib/api/native/modules"; -import { lazyDestructure } from "@lib/utils/lazy"; -import { findByProps } from "@metro"; -import { NavigationNative, tokens } from "@metro/common"; -import { - Button, - Card, - IconButton, - Stack, - Text, -} from "@metro/common/components"; -// import * as Skia from "@shopify/react-native-skia"; // Commented out due to preview crashes -// import { TextStyleSheet } from "@ui/styles"; // Commented out due to preview crashes -// import { useMemo } from "react"; // Commented out due to preview crashes +import { NavigationNative } from "@metro/common"; +import { Button, Card, IconButton, Text } from "@metro/common/components"; import { View } from "react-native"; import FontEditor from "./FontEditor"; -const { useToken } = lazyDestructure(() => findByProps("useToken")); // Commented out due to preview crashes - -// FontPreview component commented out due to crashes -// tho, who even used this? Lol -/* -function FontPreview({ font }: { font: FontDefinition }) { - const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL); - const { fontFamily: fontFamilyList, fontSize } = - TextStyleSheet["text-md/medium"]; - const fontFamily = fontFamilyList!.split(/,/g)[0]; - - const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface(); - - const paragraph = useMemo(() => { - if (!typeface) return null; - - const fMgr = SkiaApi.TypefaceFontProvider.Make(); - fMgr.registerFont(typeface, fontFamily); - - return SkiaApi.ParagraphBuilder.Make({}, fMgr) - .pushStyle({ - color: SkiaApi.Color(TEXT_NORMAL), - fontFamilies: [fontFamily], - fontSize, - }) - .addText( - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", - ) - .pop() - .build(); - }, [typeface]); - - return ( - // This does not work, actually :woeis: - - {typeface ? ( - - - - ) : ( - - - Loading... - - - )} - - ); -} -*/ - export default function FontCard({ item: font }: CardWrapper) { useProxy(fonts); @@ -81,21 +19,18 @@ export default function FontCard({ item: font }: CardWrapper) { return ( - - - - {font.name} - - {/* FontPreview commented out due to crashes */} - - - Preview unavailable - - + + + {font.name} - + +