feature/tamagui round2

hackathon/ui-tier-list/Dripsy/.eslintrc

@@ -0,0 +1,3 @@
+{
+ "extends": "react-native-wcandillon",
+}

hackathon/ui-tier-list/Dripsy/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

hackathon/ui-tier-list/Dripsy/App.tsx

@@ -0,0 +1,27 @@
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, View } from "react-native";
+import { DripsyProvider } from "dripsy";
+
+import { LoginScreen } from "./LoginScreen";
+import { theme } from "./theme";
+
+// eslint-disable-next-line import/no-default-export
+export default function App() {
+ return (
+ <DripsyProvider theme={theme}>
+ <SafeAreaProvider>
+ <StatusBar style="auto" />
+ <View style={styles.container}>
+ <LoginScreen />
+ </View>
+ </SafeAreaProvider>
+ </DripsyProvider>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+});

hackathon/ui-tier-list/Dripsy/LoginScreen.tsx

@@ -0,0 +1,35 @@
+import { View, Text, H2, P } from "dripsy";
+import React from "react";
+
+interface Props {}
+
+export const LoginScreen = (props: Props) => {
+ return (
+ <View sx={{ flex: 1 }}>
+ <View
+ sx={{
+ backgroundColor: "$primary",
+ padding: ["$5", "$8"],
+ }}
+ >
+ <H2>LoginScreen</H2>
+ <P>LoginScreen</P>
+ </View>
+ <View
+ sx={{
+ padding: ["$1", "$3"],
+ }}
+ >
+ {/* <Button label="Sign In" onPress={() => Alert.alert("Pressed")} />
+ <Button
+ mt="xl"
+ borderRadius="m"
+ backgroundColor="cardPrimaryBackground"
+ padding="m"
+ label="Don't have an account? Create"
+ onPress={() => Alert.alert("Pressed")}
+ /> */}
+ </View>
+ </View>
+ );
+};

hackathon/ui-tier-list/Dripsy/README.md

@@ -0,0 +1,6 @@
+# Getting started
+
+```bash
+yarn
+yarn ios
+```

hackathon/ui-tier-list/Dripsy/app.json

@@ -0,0 +1,33 @@
+{
+ "expo": {
+ "name": "template",
+ "slug": "template",
+ "version": "1.0.0",
+ "orientation": "portrait",
+ "icon": "./assets/icon.png",
+ "userInterfaceStyle": "light",
+ "splash": {
+ "image": "./assets/splash.png",
+ "resizeMode": "contain",
+ "backgroundColor": "#ffffff"
+ },
+ "updates": {
+ "fallbackToCacheTimeout": 0
+ },
+ "assetBundlePatterns": [
+ "**/*"
+ ],
+ "ios": {
+ "supportsTablet": true
+ },
+ "android": {
+ "adaptiveIcon": {
+ "foregroundImage": "./assets/adaptive-icon.png",
+ "backgroundColor": "#FFFFFF"
+ }
+ },
+ "web": {
+ "favicon": "./assets/favicon.png"
+ }
+ }
+}

hackathon/ui-tier-list/Dripsy/babel.config.js

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

hackathon/ui-tier-list/Dripsy/package.json

@@ -0,0 +1,30 @@
+{
+ "name": "template",
+ "version": "1.0.0",
+ "main": "node_modules/expo/AppEntry.js",
+ "scripts": {
+ "start": "expo start",
+ "android": "expo start --android",
+ "ios": "expo start --ios",
+ "web": "expo start --web"
+ },
+ "dependencies": {
+ "dripsy": "^3.9.0",
+ "expo": "~47.0.6",
+ "expo-status-bar": "~1.4.2",
+ "react": "18.1.0",
+ "react-dom": "18.1.0",
+ "react-native": "0.70.5",
+ "react-native-safe-area-context": "^4.4.1",
+ "react-native-web": "~0.18.9"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.12.9",
+ "@types/react": "~18.0.14",
+ "@types/react-native": "~0.70.6",
+ "eslint": "^8.27.0",
+ "eslint-config-react-native-wcandillon": "^3.9.0",
+ "typescript": "^4.6.3"
+ },
+ "private": true
+}

hackathon/ui-tier-list/Dripsy/theme.tsx

@@ -0,0 +1,74 @@
+import { makeTheme } from "dripsy";
+
+const palette = {
+ blueLight: "#93C5FD",
+ bluePrimary: "#3B82F6",
+ blueDark: "#1D4ED8",
+
+ greenLight: "#56DCBA",
+ greenPrimary: "#0ECD9D",
+ greenDark: "#0A906E",
+
+ black: "#0B0B0B",
+ pink: "#EC4899",
+ white: "#F0F2F3",
+};
+
+export const theme = makeTheme({
+ colors: {
+ $text: palette.black,
+ $background: palette.white,
+ $primary: palette.blueLight,
+ },
+ space: {
+ $0: 0,
+ $1: 4,
+ $2: 8,
+ $3: 12,
+ $4: 16,
+ $5: 20,
+ },
+ fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
+ fontWeights: {
+ body: "400",
+ heading: "700",
+ bold: "700",
+ },
+ lineHeights: {
+ body: 1.5,
+ heading: 1.125,
+ },
+ letterSpacings: {
+ body: "normal",
+ caps: "0.2em",
+ },
+ text: {
+ h1: {
+ fontWeight: "bold",
+ fontSize: 34,
+ lineHeight: 42.5,
+ color: "text",
+ },
+ h2: {
+ fontWeight: "600",
+ fontSize: 28,
+ lineHeight: 36,
+ color: "text",
+ },
+ p1: {
+ fontSize: 16,
+ lineHeight: 24,
+ color: "text",
+ },
+ buttonLabel: {
+ fontSize: 16,
+ lineHeight: 24,
+ color: "text",
+ },
+ defaults: {
+ fontSize: 16,
+ lineHeight: 24,
+ color: "pink",
+ },
+ },
+});

hackathon/ui-tier-list/Dripsy/tsconfig.json

@@ -0,0 +1,6 @@
+{
+ "extends": "eslint-config-react-native-wcandillon/tsconfig.base",
+ "compilerOptions": {
+ "strict": true
+ }
+}

hackathon/ui-tier-list/tamaguitierlist/apps/next/pages/password.tsx

@@ -0,0 +1,3 @@
+import { PasswordScreen } from 'app/features/auth/password-screen'
+
+export default PasswordScreen

hackathon/ui-tier-list/tamaguitierlist/package.json

@@ -26,7 +26,8 @@
  "react-native-web": "0.18.6"
  },
  "dependencies": {
- "@babel/runtime": "^7.18.9"
+ "@babel/runtime": "^7.18.9",
+ "react-native-safe-area-context": "^4.4.1"
  },
  "devDependencies": {
  "@manypkg/cli": "^0.19.1",

hackathon/ui-tier-list/tamaguitierlist/packages/app/features/auth/password-screen.tsx

@@ -0,0 +1,14 @@
+import { Button, H1, H3, Paragraph, YStack } from '@my/ui'
+import React from 'react'
+
+export function PasswordScreen() {
+ return (
+ <YStack f={1} jc="center" ai="center" space>
+ <Paragraph ta="center" fow="800">
+ Reset Password
+ </Paragraph>
+ <H1>Hello</H1>
+ <H3>Hello</H3>
+ </YStack>
+ )
+}

hackathon/ui-tier-list/tamaguitierlist/packages/app/features/home/screen.tsx

@@ -1,28 +1,58 @@
-import { Anchor, Button, H1, Input, Paragraph, Separator, Sheet, XStack, YStack } from '@my/ui'
+import { Button, H1, Input, Paragraph, ScrollView, useTheme, XStack, YStack } from '@my/ui'
 import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
 import React, { useState } from 'react'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { useLink } from 'solito/link'
 
 export function HomeScreen() {
- const linkProps = useLink({
+ const linkUserProps = useLink({
  href: '/user/nate',
  })
+ const linkPassordProps = useLink({
+ href: '/password',
+ })
+
+ const theme = useTheme()
 
  return (
- <YStack f={1} jc="center" ai="center" p="$4" space>
- <YStack space="$4" maw={600}>
- <H1 ta="center">Welcome</H1>
- <Paragraph ta="center">
- Here's a basic starter to show navigating from one screen to another. This screen uses the
- same code on Next.js and React Native.
- </Paragraph>
- <Input size="$4" borderWidth={2} />
- <Input placeholder="Password" secureTextEntry={true} borderWidth={2} returnKeyType="done" />
+ <ScrollView>
+ <YStack space="$6" padding="$4" backgroundColor={'#3B82F6'}>
+ <SafeAreaView>
+ <H1 ta="center" color={'#ffffff'}>
+ Hello
+ </H1>
+ <Paragraph ta="center">Sign in to your account</Paragraph>
+ </SafeAreaView>
  </YStack>
+ <YStack f={1} p="$4" space>
+ <YStack space="$4">
+ <Input
+ placeholder="Email"
+ keyboardType="email-address"
+ textContentType="emailAddress"
+ autoCapitalize="none"
+ autoCorrect={false}
+ autoComplete="email"
+ size="$4"
+ borderWidth={2}
+ />
+ <Input
+ placeholder="Password"
+ secureTextEntry={true}
+ borderWidth={2}
+ returnKeyType="done"
+ />
+ </YStack>
 
- <XStack>
- <Button {...linkProps}>Link to user</Button>
- </XStack>
- </YStack>
+ <YStack>
+ <Button {...linkUserProps} size="$4" theme="blue_Button" f={1}>
+ Sign In
+ </Button>
+ <Button {...linkPassordProps} size="$4" chromeless mt="$4" f={1}>
+ Don't have an account? Create
+ </Button>
+ </YStack>
+ </YStack>
+ </ScrollView>
  )
 }

hackathon/ui-tier-list/tamaguitierlist/packages/app/navigation/native/index.tsx

@@ -3,12 +3,14 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
 import { HomeScreen } from '../../features/home/screen'
 import { UserDetailScreen } from '../../features/user/detail-screen'
+import { PasswordScreen } from '../../features/auth/password-screen'
 
 const Stack = createNativeStackNavigator<{
  home: undefined
  'user-detail': {
  id: string
  }
+ password: undefined
 }>()
 
 export function NativeNavigation() {
@@ -19,6 +21,7 @@ export function NativeNavigation() {
  component={HomeScreen}
  options={{
  title: 'Home',
+ headerShown: false,
  }}
  />
  <Stack.Screen
@@ -28,6 +31,13 @@ export function NativeNavigation() {
  title: 'User',
  }}
  />
+ <Stack.Screen
+ name="password"
+ component={PasswordScreen}
+ options={{
+ title: 'Reset Password',
+ }}
+ />
  </Stack.Navigator>
  )
 }

hackathon/ui-tier-list/tamaguitierlist/packages/app/provider/index.tsx

@@ -1,11 +1,14 @@
 import config from '../tamagui.config'
 import { NavigationProvider } from './navigation'
 import { TamaguiProvider, TamaguiProviderProps } from '@my/ui'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 export function Provider({ children, ...rest }: Omit<TamaguiProviderProps, 'config'>) {
  return (
  <TamaguiProvider config={config} disableInjectCSS defaultTheme="light" {...rest}>
- <NavigationProvider>{children}</NavigationProvider>
+ <SafeAreaProvider>
+ <NavigationProvider>{children}</NavigationProvider>
+ </SafeAreaProvider>
  </TamaguiProvider>
  )
 }