From 23159a32054861444e0e5b2eb47ce1ecb9bdde6c Mon Sep 17 00:00:00 2001 From: JungHwan Jang Date: Thu, 24 Oct 2024 13:23:12 -0400 Subject: [PATCH] K2-Alpine: Setup multiple entries for storybook and package + fix bugs (#2001) --- packages/core-mobile/package.json | 1 + packages/k2-alpine/package.json | 7 +- .../patches/@expo+config+8.5.6.patch | 15 ++ .../src/theme/tokens/Colors.stories.tsx | 143 +++++++++--------- packages/k2-alpine/src/utils/Link.tsx | 10 +- yarn.lock | 1 + 6 files changed, 101 insertions(+), 76 deletions(-) create mode 100644 packages/k2-alpine/patches/@expo+config+8.5.6.patch diff --git a/packages/core-mobile/package.json b/packages/core-mobile/package.json index 47fd90e04b..50aaeb8797 100644 --- a/packages/core-mobile/package.json +++ b/packages/core-mobile/package.json @@ -260,6 +260,7 @@ "@avalabs/core-wallets-sdk>hdkey>secp256k1": false, "@avalabs/evm-module": false, "@avalabs/k2-mobile": false, + "@avalabs/k2-alpine": false, "@datadog/mobile-react-native": false, "@lavamoat/preinstall-always-fail": false, "@sentry/react-native>@sentry/cli": false, diff --git a/packages/k2-alpine/package.json b/packages/k2-alpine/package.json index 8165e9e656..95128e48e5 100644 --- a/packages/k2-alpine/package.json +++ b/packages/k2-alpine/package.json @@ -3,6 +3,9 @@ "license": "Limited Ecosystem License", "version": "1.0.0", "main": "src/index.ts", + "react-native": { + "main": "expo/AppEntry.js" + }, "scripts": { "setup": "yarn allow-scripts", "start": "expo start", @@ -10,7 +13,8 @@ "ios": "expo start --ios", "lint": "eslint .", "storybook-generate": "sb-rn-get-stories", - "tsc": "tsc -p ." + "tsc": "tsc -p .", + "postinstall": "node_modules/.bin/patch-package" }, "dependencies": { "dripsy": "4.3.7", @@ -45,6 +49,7 @@ "eslint": "9.9.1", "eslint-plugin-avalabs-mobile": "workspace:*", "json-stringify-pretty-compact": "4.0.0", + "patch-package": "8.0.0", "react-dom": "18.3.1", "react-native-safe-area-context": "4.11.0", "tinycolor2": "1.6.0", diff --git a/packages/k2-alpine/patches/@expo+config+8.5.6.patch b/packages/k2-alpine/patches/@expo+config+8.5.6.patch new file mode 100644 index 0000000000..df5ebb3036 --- /dev/null +++ b/packages/k2-alpine/patches/@expo+config+8.5.6.patch @@ -0,0 +1,15 @@ +diff --git a/node_modules/@expo/config/build/paths/paths.js b/node_modules/@expo/config/build/paths/paths.js +index c694a3252c3a7375463cb21f12122be1930b24f7..ff081439c8648abbdc47da32826838cc204d999d 100644 +--- a/node_modules/@expo/config/build/paths/paths.js ++++ b/node_modules/@expo/config/build/paths/paths.js +@@ -75,9 +75,7 @@ function resolveEntryPoint(projectRoot, { + const extensions = (0, _extensions().getBareExtensions)(platforms); + + // If the config doesn't define a custom entry then we want to look at the `package.json`s `main` field, and try again. +- const { +- main +- } = pkg; ++ const main = pkg["react-native"]?.main ?? pkg.main + if (main && typeof main === 'string') { + // Testing the main field against all of the provided extensions - for legacy reasons we can't use node module resolution as the package.json allows you to pass in a file without a relative path and expect it as a relative path. + let entry = getFileWithExtensions(projectRoot, main, extensions); diff --git a/packages/k2-alpine/src/theme/tokens/Colors.stories.tsx b/packages/k2-alpine/src/theme/tokens/Colors.stories.tsx index a36c30fc56..fc092c203b 100644 --- a/packages/k2-alpine/src/theme/tokens/Colors.stories.tsx +++ b/packages/k2-alpine/src/theme/tokens/Colors.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import tinycolor from 'tinycolor2' -import { View, Text, ScrollView, FlatList } from '../../components/Primitives' +import { View, Text, FlatList } from '../../components/Primitives' import Link from '../../utils/Link' import { colors, lightModeColors, darkModeColors } from './colors' @@ -24,9 +24,9 @@ const Color = ({ return ( @@ -40,79 +40,84 @@ const Color = ({ ) } -export const Tokens = (): JSX.Element => { +export const LightMode = (): JSX.Element => { return ( - - - Light Mode - ( - - )} - numColumns={2} - /> - Dark Mode - ( - - )} - numColumns={2} - /> - + gap: 12, + padding: 12, + backgroundColor: lightModeColors.$surfacePrimary + }} + data={Object.entries(lightModeColors)} + ListHeaderComponent={ + + + Light Mode + + + + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + renderItem={({ item }: { item: any }) => ( + + )} + /> + ) +} + +export const DarkMode = (): JSX.Element => { + return ( + + Dark Mode + + + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + renderItem={({ item }: { item: any }) => ( + + )} + /> ) } export const Colors = (): JSX.Element => { return ( - - - ( - - )} - /> - + + + + } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + renderItem={({ item }: { item: any }) => ( + + )} + /> ) } diff --git a/packages/k2-alpine/src/utils/Link.tsx b/packages/k2-alpine/src/utils/Link.tsx index 46ecdf7387..40592234c8 100644 --- a/packages/k2-alpine/src/utils/Link.tsx +++ b/packages/k2-alpine/src/utils/Link.tsx @@ -1,11 +1,12 @@ import React from 'react' -import { Linking, StyleProp, ViewStyle } from 'react-native' +import { Linking, StyleProp, TextStyle } from 'react-native' import { Text } from '../components/Primitives' type Props = { title: string url: string - style?: StyleProp + style?: StyleProp + color?: string } const Link = ({ title, url, style }: Props): JSX.Element => { @@ -20,10 +21,7 @@ const Link = ({ title, url, style }: Props): JSX.Element => { { textDecorationLine: 'underline' } - ]} - sx={{ - color: '$textPrimary' - }}> + ]}> {title} ) diff --git a/yarn.lock b/yarn.lock index 3599432c8a..a21ddaadc7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -499,6 +499,7 @@ __metadata: expo-splash-screen: 0.27.6 expo-status-bar: 1.12.1 json-stringify-pretty-compact: 4.0.0 + patch-package: 8.0.0 react: 18.3.1 react-dom: 18.3.1 react-native: 0.73.7