[CP-9073] Add new K2 Alpine package

package.json

@@ -13,7 +13,8 @@
     "tsc": "yarn workspaces foreach -p run tsc",
     "test": "yarn workspaces foreach -p run test",
     "core": "yarn workspace @avalabs/core-mobile",
-    "k2": "yarn workspace @avalabs/k2-mobile"
+    "k2": "yarn workspace @avalabs/k2-mobile",
+    "alpine": "yarn workspace @avalabs/k2-alpine"
   },
   "devDependencies": {
     "husky": "8.0.1",

packages/k2-alpine/.eslintrc.js

@@ -0,0 +1,17 @@
+// workaround for https://github.com/eslint/eslint/issues/3458 and https://github.com/yarnpkg/berry/issues/8
+// this allows our shared eslint config to bring along its own plugins
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname
+  },
+  extends: ['plugin:eslint-plugin-avalabs-mobile/all'],
+  ignorePatterns: [
+    '!.storybook/*.ts',
+    '!.prettierrc.js',
+    '.storybook/storybook.requires.js'
+  ]
+}

packages/k2-alpine/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

packages/k2-alpine/.storybook/index.ts

@@ -0,0 +1,11 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { view } from './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

packages/k2-alpine/.storybook/main.ts

@@ -0,0 +1,11 @@
+import { StorybookConfig } from '@storybook/react-native'
+
+const main: StorybookConfig = {
+  stories: ['./stories/*.stories.?(ts|tsx|js|jsx)'],
+  addons: [
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-actions'
+  ]
+}
+
+export default main

packages/k2-alpine/.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import type { Preview } from '@storybook/react'
+import React from 'react'
+import { K2AlpineThemeProvider } from '../src/theme/ThemeProvider'
+import { View } from 'react-native'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+    Story => (
+      <K2AlpineThemeProvider>
+        <Story />
+      </K2AlpineThemeProvider>
+    )
+  ]
+}
+
+export default preview

packages/k2-alpine/.storybook/stories/Button.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from '../../src/components/button/Button'
+
+const ButtonMeta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    onPress: { action: 'pressed the button' }
+  },
+  args: {
+    onPress: () => {},
+    children: 'Next',
+    type: 'primary'
+  }
+}
+
+export default ButtonMeta
+
+export const Basic: StoryObj<typeof Button> = {}

packages/k2-alpine/.storybook/storybook.requires.ts

@@ -0,0 +1,34 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import { start } from '@storybook/react-native'
+
+import '@storybook/addon-ondevice-controls/register'
+import '@storybook/addon-ondevice-actions/register'
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './stories',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      './stories',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    )
+  }
+]
+
+// @ts-ignore
+global.STORIES = normalizedStories
+
+export const view = start({
+  annotations: [
+    require('./preview'),
+    require('@storybook/react-native/dist/preview'),
+    require('@storybook/addon-actions/preview')
+  ],
+  storyEntries: normalizedStories
+})

packages/k2-alpine/App.tsx

@@ -0,0 +1 @@
+export { default } from './.storybook'

packages/k2-alpine/app.json

@@ -0,0 +1,13 @@
+{
+  "expo": {
+    "name": "k2-alpine",
+    "slug": "k2-alpine",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "light",
+    "ios": {
+      "supportsTablet": true
+    },
+    "platforms": ["ios", "android"]
+  }
+}

packages/k2-alpine/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo']
+  }
+}

packages/k2-alpine/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@avalabs/k2-alpine",
+  "license": "Limited Ecosystem License",
+  "version": "1.0.0",
+  "main": "expo/AppEntry.js",
+  "files": [
+    "./src/index.ts"
+  ],
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "lint": "eslint .",
+    "storybook-generate": "sb-rn-get-stories",
+    "tsc": "tsc -p ."
+  },
+  "dependencies": {
+    "dripsy": "^4.3.5",
+    "expo": "~51.0.28",
+    "expo-status-bar": "~1.12.1",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-reanimated": "^3.15.0"
+  },
+  "devDependencies": {
+    "@avalabs/tsconfig-mobile": "workspace:*",
+    "@babel/core": "^7.20.0",
+    "@react-native-async-storage/async-storage": "^1.24.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/slider": "^4.5.2",
+    "@rushstack/eslint-patch": "1.5.1",
+    "@storybook/addon-ondevice-actions": "^7.6.20",
+    "@storybook/addon-ondevice-controls": "^7.6.20",
+    "@storybook/react-native": "^7.6.20",
+    "@types/react": "~18.2.45",
+    "babel-loader": "^8.3.0",
+    "eslint": "^9.9.1",
+    "eslint-plugin-avalabs-mobile": "workspace:*",
+    "react-dom": "18.2.0",
+    "react-native-safe-area-context": "^4.10.9",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

packages/k2-alpine/src/components/button/Button.tsx

@@ -0,0 +1,58 @@
+import React, { type FC, type PropsWithChildren } from 'react'
+import { Text, Pressable, useDripsyTheme } from 'dripsy'
+import type { K2AlpineTheme } from '../../theme/theme'
+
+export type Props = {
+  onPress: () => void
+  type?: 'primary' | 'secondary' | 'tertiary'
+  size?: 'small' | 'medium' | 'large'
+  disabled?: boolean
+}
+
+const getTypeColors = (
+  type: Props['type'],
+  theme: K2AlpineTheme
+): { background: string; text: string } => {
+  switch (type) {
+    case 'secondary':
+      return {
+        background: theme.colors.$secondaryBackground,
+        text: theme.colors.$secondaryText
+      }
+    case 'tertiary':
+      return {
+        background: theme.colors.$tertiaryBackground,
+        text: theme.colors.$tertiaryText
+      }
+    case 'primary':
+    default:
+      return {
+        background: theme.colors.$primaryBackground,
+        text: theme.colors.$primaryText
+      }
+  }
+}
+
+export const Button: FC<PropsWithChildren<Props>> = ({
+  onPress,
+  type = 'primary',
+  size = 'large',
+  disabled,
+  children
+}) => {
+  const { theme } = useDripsyTheme()
+  const colors = getTypeColors(type, theme)
+
+  return (
+    <Pressable
+      sx={{
+        backgroundColor: colors.background,
+        opacity: disabled ? theme.util.disabledOpacity : 1,
+        borderRadius: theme.util.borderRadius,
+        width: size === 'large' ? '100%' : '50%'
+      }}
+      onPress={onPress}>
+      <Text sx={{ color: colors.text }}>{children}</Text>
+    </Pressable>
+  )
+}

packages/k2-alpine/src/components/index.ts

@@ -0,0 +1 @@
+export * from './button/Button'

packages/k2-alpine/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from './theme/ThemeProvider'

packages/k2-alpine/src/theme/ThemeProvider.tsx

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren, type FC } from 'react'
+import { DripsyProvider } from 'dripsy'
+import { theme } from './theme'
+
+export const K2AlpineThemeProvider: FC<PropsWithChildren> = ({ children }) => (
+  <DripsyProvider theme={theme}>{children}</DripsyProvider>
+)

packages/k2-alpine/src/theme/theme.ts

@@ -0,0 +1,26 @@
+import { makeTheme } from 'dripsy'
+import { darkModeColors, lightModeColors } from './tokens/colors'
+import { text } from './tokens/text'
+import { util } from './tokens/util'
+
+export const theme = makeTheme({
+  types: {
+    onlyAllowThemeValues: 'never',
+    reactNativeTypesOnly: true
+  },
+  colors: darkModeColors,
+  text,
+  util
+})
+
+export const lightTheme = {
+  ...theme,
+  colors: lightModeColors
+}
+
+export type K2AlpineTheme = typeof theme
+
+declare module 'dripsy' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DripsyCustomTheme extends K2AlpineTheme {}
+}