K2-Alpine: Setup multiple entries for storybook and package + fix bugs (

#2001)
ava-labs · Oct 24, 2024 · 23159a3 · 23159a3
1 parent 458c55f
commit 23159a3
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 76 deletions.
diff --git 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
@@ -3,14 +3,18 @@
   "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",
     "android": "expo start --android",
     "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
@@ -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
@@ -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 (
     <View
       style={{
+        padding: 12,
         flex: 1,
         backgroundColor: value,
-        height: 75,
         alignItems: 'center',
         justifyContent: 'center'
       }}>
@@ -40,79 +40,84 @@ const Color = ({
   )
 }
 
-export const Tokens = (): JSX.Element => {
+export const LightMode = (): JSX.Element => {
   return (
-    <ScrollView
-      style={{ width: '100%' }}
+    <FlatList
+      style={{ flex: 1, width: '100%' }}
       contentContainerStyle={{
-        top: '5%',
-        alignItems: 'center',
-        paddingBottom: '15%'
-      }}>
-      <Link
-        title="Figma Source"
-        url={FIGMA_LINK}
-        style={{ marginVertical: 20 }}
-      />
-      <Text variant="heading6">Light Mode</Text>
-      <FlatList
-        style={{
-          width: '100%',
-          paddingVertical: 10,
-          marginVertical: 20
-        }}
-        contentContainerStyle={{ gap: 10, marginHorizontal: 10 }}
-        columnWrapperStyle={{ gap: 10 }}
-        data={Object.entries(lightModeColors)}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        renderItem={({ item }: { item: any }) => (
-          <Color key={item[0]} name={item[0]} value={item[1]} />
-        )}
-        numColumns={2}
-      />
-      <Text variant="heading6">Dark Mode</Text>
-      <FlatList
-        style={{
-          width: '100%',
-          paddingVertical: 10,
-          marginVertical: 20
-        }}
-        contentContainerStyle={{ gap: 10, marginHorizontal: 10 }}
-        columnWrapperStyle={{ gap: 10 }}
-        data={Object.entries(darkModeColors)}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        renderItem={({ item }: { item: any }) => (
-          <Color key={item[0]} name={item[0]} value={item[1]} />
-        )}
-        numColumns={2}
-      />
-    </ScrollView>
+        gap: 12,
+        padding: 12,
+        backgroundColor: lightModeColors.$surfacePrimary
+      }}
+      data={Object.entries(lightModeColors)}
+      ListHeaderComponent={
+        <View style={{ alignItems: 'center' }}>
+          <Text
+            variant="heading3"
+            style={{ color: lightModeColors.$textPrimary }}>
+            Light Mode
+          </Text>
+          <Link
+            title="Figma Source"
+            url={FIGMA_LINK}
+            style={{
+              marginVertical: 20,
+              color: lightModeColors.$textPrimary
+            }}
+          />
+        </View>
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      renderItem={({ item }: { item: any }) => (
+        <Color key={item[0]} name={item[0]} value={item[1]} />
+      )}
+    />
+  )
+}
+
+export const DarkMode = (): JSX.Element => {
+  return (
+    <FlatList
+      style={{ flex: 1, width: '100%' }}
+      contentContainerStyle={{ gap: 12, padding: 12 }}
+      data={Object.entries(darkModeColors)}
+      ListHeaderComponent={
+        <View style={{ alignItems: 'center' }}>
+          <Text variant="heading3">Dark Mode</Text>
+          <Link
+            title="Figma Source"
+            url={FIGMA_LINK}
+            style={{ marginVertical: 20 }}
+          />
+        </View>
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      renderItem={({ item }: { item: any }) => (
+        <Color key={item[0]} name={item[0]} value={item[1]} />
+      )}
+    />
   )
 }
 
 export const Colors = (): JSX.Element => {
   return (
-    <ScrollView
-      style={{ width: '100%' }}
-      contentContainerStyle={{
-        top: '5%',
-        alignItems: 'center',
-        paddingBottom: '15%'
-      }}>
-      <Link
-        title="Figma Source"
-        url={FIGMA_LINK}
-        style={{ marginVertical: 20 }}
-      />
-      <FlatList
-        style={{ width: '100%', marginTop: 20 }}
-        contentContainerStyle={{ gap: 10, marginHorizontal: 10 }}
-        data={Object.entries(colors)}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        renderItem={({ item }: { item: any }) => (
-          <Color key={item[0]} name={item[0]} value={item[1]} />
-        )}
-      />
-    </ScrollView>
+    <FlatList
+      style={{ flex: 1, width: '100%' }}
+      contentContainerStyle={{ gap: 12, padding: 12 }}
+      data={Object.entries(colors)}
+      ListHeaderComponent={
+        <View style={{ alignItems: 'center' }}>
+          <Link
+            title="Figma Source"
+            url={FIGMA_LINK}
+            style={{ marginVertical: 20 }}
+          />
+        </View>
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      renderItem={({ item }: { item: any }) => (
+        <Color key={item[0]} name={item[0]} value={item[1]} />
+      )}
+    />
   )
 }
diff --git 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<ViewStyle>
+  style?: StyleProp<TextStyle>
+  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}
     </Text>
   )

diff --git 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