Skip to content

Commit

Permalink
Apply review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
sroy3 committed Aug 29, 2024
1 parent a41a2a6 commit ad53247
Show file tree
Hide file tree
Showing 8 changed files with 3,666 additions and 5,109 deletions.
48 changes: 30 additions & 18 deletions packages/k2-alpine/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,42 @@
"tsc": "tsc -p ."
},
"dependencies": {
"dripsy": "^4.3.5",
"expo": "~51.0.28",
"expo-status-bar": "~1.12.1",
"dripsy": "4.3.5",
"expo": "50.0.20",
"expo-status-bar": "1.11.1",
"react": "18.2.0",
"react-native": "0.74.5",
"react-native-reanimated": "^3.15.0"
"react-native": "0.73.7",
"react-native-reanimated": "3.8.0"
},
"peerDependencies": {
"react": "18.2.0",
"react-native": "0.73.7",
"react-native-reanimated": "3.8.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",
"@babel/core": "7.25.2",
"@lavamoat/allow-scripts": "^3.2.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",
"@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"
"react-native-safe-area-context": "4.8.2",
"typescript": "5.2.2"
},
"private": true
"private": true,
"lavamoat": {
"allowScripts": {
"$root$": true,
"@storybook/react-native>@storybook/core-common>esbuild": false
}
}
}
29 changes: 29 additions & 0 deletions packages/k2-alpine/src/components/Primitives.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { styled, Text as DripsyText } from 'dripsy'
import {
TouchableHighlight as RNTouchableHighlight,
TouchableOpacity as RNTouchableOpacity
} from 'react-native'

export const TouchableHighlight = styled(RNTouchableHighlight)()

export const TouchableOpacity = styled(RNTouchableOpacity)()

export const Text = styled(DripsyText, {
themeKey: 'text',
// default variant
defaultVariant: 'body1'
})({
// default color
color: '$primaryText'
})

export {
View,
TextInput,
Image,
ScrollView,
Pressable,
FlatList,
SafeAreaView,
ActivityIndicator
} from 'dripsy'
6 changes: 3 additions & 3 deletions packages/k2-alpine/src/components/button/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { type FC, type PropsWithChildren } from 'react'
import { Text, Pressable, useDripsyTheme } from 'dripsy'
import type { K2AlpineTheme } from '../../theme/theme'
import { useTheme, type K2AlpineTheme } from '../../theme/theme'
import { Pressable, Text } from '../Primitives'

export type Props = {
onPress: () => void
Expand Down Expand Up @@ -40,7 +40,7 @@ export const Button: FC<PropsWithChildren<Props>> = ({
disabled,
children
}) => {
const { theme } = useDripsyTheme()
const { theme } = useTheme()
const colors = getTypeColors(type, theme)

return (
Expand Down
4 changes: 2 additions & 2 deletions packages/k2-alpine/src/theme/ThemeProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { PropsWithChildren, type FC } from 'react'
import { DripsyProvider } from 'dripsy'
import { theme } from './theme'
import { darkTheme } from './theme'

export const K2AlpineThemeProvider: FC<PropsWithChildren> = ({ children }) => (
<DripsyProvider theme={theme}>{children}</DripsyProvider>
<DripsyProvider theme={darkTheme}>{children}</DripsyProvider>
)
10 changes: 6 additions & 4 deletions packages/k2-alpine/src/theme/theme.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { makeTheme } from 'dripsy'
import { makeTheme, useDripsyTheme } from 'dripsy'
import { darkModeColors, lightModeColors } from './tokens/colors'
import { text } from './tokens/text'
import { util } from './tokens/util'

export const theme = makeTheme({
export const darkTheme = makeTheme({
types: {
onlyAllowThemeValues: 'never',
reactNativeTypesOnly: true
Expand All @@ -14,13 +14,15 @@ export const theme = makeTheme({
})

export const lightTheme = {
...theme,
...darkTheme,
colors: lightModeColors
}

export type K2AlpineTheme = typeof theme
export type K2AlpineTheme = typeof darkTheme

declare module 'dripsy' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DripsyCustomTheme extends K2AlpineTheme {}
}

export { useDripsyTheme as useTheme }
153 changes: 1 addition & 152 deletions packages/k2-alpine/src/theme/tokens/text.ts
Original file line number Diff line number Diff line change
@@ -1,154 +1,3 @@
// K2 Foundation - Typography
// https://www.figma.com/file/hDSl4OUgXorDAtqPZtCUhB/K2-Foundation?type=design&node-id=3390-22100

export const text = {
heading1: {
fontFamily: 'Inter-Regular',
fontSize: 60,
lineHeight: 72
},
heading2: {
fontFamily: 'Inter-Regular',
fontSize: 48,
lineHeight: 56
},
heading3: {
fontFamily: 'Inter-Bold',
fontSize: 34,
lineHeight: 44
},
heading4: {
fontFamily: 'Inter-Bold',
fontSize: 24,
lineHeight: 32
},
heading5: {
fontFamily: 'Inter-Bold',
fontSize: 20,
lineHeight: 32
},
heading6: {
fontFamily: 'Inter-Bold',
fontSize: 16,
lineHeight: 24
},
subtitle1: {
fontFamily: 'Inter-SemiBold',
fontSize: 16,
lineHeight: 28
},
subtitle2: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 25
},
body1: {
fontFamily: 'Inter-Regular',
fontSize: 16,
lineHeight: 24
},
body2: {
fontFamily: 'Inter-Regular',
fontSize: 14,
lineHeight: 20
},
caption: {
fontFamily: 'Inter-Regular',
fontSize: 12,
lineHeight: 20
},
overline: {
fontFamily: 'Inter-SemiBold',
fontSize: 10,
lineHeight: 16
},

// component styles
alertTitle: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 16
},
alertDescription: {
fontFamily: 'Inter-Regular',
fontSize: 12,
lineHeight: 20
},
badgeLabel: {
fontFamily: 'Inter-SemiBold',
fontSize: 12,
lineHeight: 20
},
buttonLarge: {
fontFamily: 'Inter-SemiBold',
fontSize: 18,
lineHeight: 24
},
buttonMedium: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 16
},
buttonSmall: {
fontFamily: 'Inter-SemiBold',
fontSize: 12,
lineHeight: 16
},
inputLabel: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 16
},
helperText: {
fontFamily: 'Inter-Regular',
fontSize: 12,
lineHeight: 20
},
inputText: {
fontFamily: 'Inter-Regular',
fontSize: 16,
lineHeight: 24
},
chipLabelLarge: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 20
},
chipLabelSmall: {
fontFamily: 'Inter-SemiBold',
fontSize: 12,
lineHeight: 20
},
tooltipLabel: {
fontFamily: 'Inter-SemiBold',
fontSize: 12,
lineHeight: 16
},
tableHeader: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 20
},
menuItem: {
fontFamily: 'Inter-Regular',
fontSize: 14,
lineHeight: 20
},
listSubHeader: {
fontFamily: 'Inter-SemiBold',
fontSize: 14,
lineHeight: 48
},
bottomNavigationLarge: {
fontFamily: 'Inter-SemiBold',
fontSize: 12,
lineHeight: 16
},
bottomNavigationSmall: {
fontFamily: 'Inter-SemiBold',
fontSize: 10,
lineHeight: 16
}
}
export const text = {}

export type TextVariant = keyof typeof text
3 changes: 3 additions & 0 deletions packages/k2-alpine/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
{
"extends": "@avalabs/tsconfig-mobile/base.json",
"compilerOptions": {
"esModuleInterop": true
},
"include": [
"**/*.ts",
"**/*.tsx",
Expand Down
Loading

0 comments on commit ad53247

Please sign in to comment.