Skip to content

Commit 3927d18

Browse files
codinsonncodinsonn
committed
fix: Deprecated fields 'editable' & 'nativeID'
1 parent b8ae2a9 commit 3927d18

16 files changed

+762
-141
lines changed

‎apps/expo/app.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
],
99
"web": {
1010
"bundler": "metro"
11-
}
11+
},
12+
"userInterfaceStyle": "automatic"
1213
}
1314
}

‎features/@app-core/components/styled.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import {
55
Text as RNText,
66
View as RNView,
77
Pressable as RNPressable,
8+
ScrollView as RNScrollView,
89
} from 'react-native'
910
import { Link as UniversalLink } from '@green-stack/navigation/Link'
1011
import { UniversalLinkProps } from '@green-stack/navigation/Link.types'
1112
import { Image as UniversalImage } from '@green-stack/components/Image'
1213
import { styled, cn } from '@green-stack/core/styles'
14+
import { remapProps } from 'nativewind'
1315

1416
/* --- Reexports ------------------------------------------------------------------------------- */
1517

@@ -26,6 +28,12 @@ export const Text = styled(RNText, '')
2628
export const Image = styled(UniversalImage, '')
2729
export const Pressable = styled(RNPressable, '')
2830

31+
/* --- React-Native ---------------------------------------------------------------------------- */
32+
33+
export const ScrollView = remapProps(styled(RNScrollView), {
34+
contentContainerClassName: 'contentContainerStyle',
35+
})
36+
2937
/* --- Typography ------------------------------------------------------------------------------ */
3038

3139
export const H1 = styled(RNText, 'font-bold text-2xl')

‎features/@app-core/forms/CheckList.styled.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const CheckListOption = (props: CheckListOptionProps) => {
4949
checked={checked}
5050
onCheckedChange={() => toggleValue(value)}
5151
label={label || value}
52-
nativeID={nativeID}
52+
id={nativeID}
5353
{...restProps}
5454
className={className}
5555
checkboxClassName={checkboxClassName}

‎features/@app-core/forms/Checkbox.styled.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,11 @@ export const Checkbox = forwardRef<
2727
>((rawProps, ref) => {
2828
// Props
2929
const props = CheckboxProps.applyDefaults(rawProps)
30-
const { checked, label, hasError, nativeID, onCheckedChange } = props
31-
const labelledByFallback = props.nativeID ? `${props.nativeID}-label` : undefined
30+
const { checked, label, hasError, onCheckedChange } = props
31+
32+
// Vars
33+
const nativeID = props.id || props.nativeID
34+
const labelledByFallback = nativeID ? `${nativeID}-label` : undefined
3235
const labelledByID = props['aria-labelledby'] || labelledByFallback
3336

3437
// -- Render --
@@ -41,7 +44,7 @@ export const Checkbox = forwardRef<
4144
>
4245
<CheckboxRoot
4346
ref={ref}
44-
nativeID={nativeID}
47+
id={nativeID}
4548
aria-labelledby={labelledByID}
4649
{...props}
4750
className={cn(
@@ -88,7 +91,7 @@ export const Checkbox = forwardRef<
8891
props.labelClassName,
8992
)}
9093
role="checkbox"
91-
nativeID={labelledByID}
94+
id={labelledByID}
9295
onPress={() => onCheckedChange(!checked)}
9396
>
9497
{label}

‎features/@app-core/forms/RadioGroup.styled.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const RadioButton = forwardRef<
5050
const { value, label, disabled, hasError } = props
5151

5252
// Vars
53-
const nativeID = props.nativeID || `radio-option-${value}`
53+
const nativeID = props.id || props.nativeID || `radio-option-${value}`
5454
const labelledByID = `${nativeID}-label`
5555

5656
// Context
@@ -67,10 +67,10 @@ export const RadioButton = forwardRef<
6767
>
6868
<RadioGroupItem
6969
ref={ref}
70-
hitSlop={props.hitSlop}
71-
onPress={() => setValue(value)}
72-
nativeID={nativeID}
70+
id={nativeID}
7371
aria-labelledby={labelledByID}
72+
onPress={() => setValue(value)}
73+
hitSlop={props.hitSlop}
7474
{...rawProps}
7575
className={cn(
7676
'aspect-square h-4 w-4 rounded-full justify-centeritems-center border border-primary text-primary ',
@@ -106,12 +106,12 @@ export const RadioButton = forwardRef<
106106
</RadioGroupItem>
107107
{!!label && (
108108
<Text
109+
id={labelledByID}
110+
role="checkbox"
109111
className={cn(
110112
'flex items-center ml-2 web:select-none',
111113
props.labelClassName,
112114
)}
113-
role="checkbox"
114-
nativeID={labelledByID}
115115
onPress={() => setValue(value)}
116116
>
117117
{label}

‎features/@app-core/forms/TextInput.styled.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const TextInputProps = schema('TextInputProps', {
1111
className: z.string().optional(),
1212
placeholderClassName: z.string().optional(),
1313
hasError: z.boolean().default(false),
14-
editable: z.boolean().default(true),
14+
readOnly: z.boolean().default(true),
1515
})
1616

1717
export type TextInputProps = PropsOf<typeof BaseTextInput, typeof TextInputProps>
@@ -38,8 +38,8 @@ export const TextInput = forwardRef<
3838
'web:flex web:w-full web:py-2 web:ring-offset-background',
3939
'web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
4040
'file:border-0 file:bg-transparent file:font-medium',
41-
props.editable === false && 'opacity-50 eb:cursor-not-allowed',
42-
!!props.hasError && 'border border-error border-red-500',
41+
props.readOnly === false && 'opacity-50 eb:cursor-not-allowed',
42+
!!props.hasError && 'border border-error',
4343
)}
4444
placeholderClassName={cn('text--muted-foreground', props.placeholderClassName)}
4545
{...props}

‎features/@app-core/screens/FormsScreen.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from 'react'
2-
import { ScrollView } from 'react-native'
3-
import { View, Text, H1, H2, H3, Link } from '../components/styled'
2+
import { StatusBar } from 'expo-status-bar'
3+
import { View, Text, H1, H2, H3, Link, ScrollView } from '../components/styled'
44
import BackButton from '../components/BackButton'
55
import { TextInput } from '../forms/TextInput.styled'
66
import { Checkbox } from '../forms/Checkbox.styled'
@@ -58,7 +58,11 @@ const FormsScreen = (props: TestForm) => {
5858

5959
return (
6060
<>
61-
<ScrollView>
61+
<StatusBar style="dark" />
62+
<ScrollView
63+
className="flex flex-1 min-h-screen bg-white"
64+
contentContainerClassName="min-h-screen"
65+
>
6266
<View className="flex flex-1 justify-center items-center pt-28 pb-16">
6367
<View className="flex flex-col w-full max-w-[500px] px-8">
6468

@@ -98,13 +102,16 @@ const FormsScreen = (props: TestForm) => {
98102
{/* -- Radiogroup -- */}
99103

100104
<H2 className="text-black">
101-
How do you identify the most?
105+
What role describes you best?
102106
</H2>
103107

104108
<View className="h-4" />
105109

106110
<RadioGroup
107-
options={{ fullproduct: 'Full-stack web Developer' }}
111+
options={{
112+
'full-product-dev': 'Full-stack web or mobile dev',
113+
'freelance-app-dev': 'Freelance App Developer',
114+
}}
108115
{...formState.getInputProps('identifiesWith')}
109116
>
110117
<RadioGroup.Option value="startup-founder" label="Startup Founder" />
@@ -117,29 +124,30 @@ const FormsScreen = (props: TestForm) => {
117124
{/* -- CheckList -- */}
118125

119126
<H2 className="text-black">
120-
Which features excite you?
127+
Which DX features excite you?
121128
</H2>
122129

123130
<View className="h-4" />
124131

125132
<CheckList
126133
options={{
127134
'universal-starter': 'Start + Deploy for Web, iOS and Android',
128-
'git-plugins': 'Git plugin branches to choose my own stack',
135+
'git-plugins': 'Git based plugin branches & PRs',
129136
}}
130137
{...formState.getInputProps('excitingFeatures')}
131138
>
132-
<CheckList.Option value="zod-toolkit" label="Toolkit + Way of Working for Zod + react-query" />
139+
<CheckList.Option value="stack-freedom" label="Pick and choose my own Auth / DB / Mail / ..." />
140+
<CheckList.Option value="zod-query-toolkit" label="Toolkit built for zod & react-query" />
133141
<CheckList.Option value="generators-scripts" label="Scripts and Generators to save more time" />
134-
<CheckList.Option value="universal-fs-routing" label="Universal fs based routing in Expo and Next.js" />
135142
<CheckList.Option value="designed-for-copypaste" label="Portable structure designed for copy-paste" />
143+
<CheckList.Option value="universal-fs-routing" label="Universal fs based routing in Expo and Next.js" />
136144
</CheckList>
137145

138146
<View className="h-1 w-12 my-6 bg-slate-300" />
139147

140148
{/* -- useFormstate -- */}
141149

142-
<H3 className="text-black">
150+
<H3>
143151
<Link
144152
className="text-black no-underline"
145153
href="https://universal-base-starter-docs.vercel.app/quickstart"

‎features/@app-core/screens/HomeScreen.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { ScrollView } from 'react-native'
3+
import { StatusBar } from 'expo-status-bar'
34
import { HydratedRouteProps, createQueryBridge } from '@green-stack/navigation'
45
import { Pressable, View, Link, Image, P, H1, H3, Text, H2, cn } from '../components/styled'
56
import { healthCheckFetcher } from '../resolvers/healthCheck.query'
@@ -34,6 +35,7 @@ const HomeScreen = (props: HomeScreenProps) => {
3435

3536
return (
3637
<>
38+
<StatusBar style="light" />
3739
<ScrollView
3840
contentContainerStyle={{ position: 'relative', minWidth: '100%', minHeight: '100%' }}
3941
style={{ backgroundColor: '#1e293b' }}

‎features/@app-core/screens/ImagesScreen.tsx

Lines changed: 55 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
2-
import { View, Text, Image } from '../components/styled'
2+
import { StatusBar } from 'expo-status-bar'
3+
import { View, Text, Image, ScrollView } from '../components/styled'
34
import BackButton from '../components/BackButton'
45

56
/* --- Images ---------------------------------------------------------------------------------- */
@@ -9,52 +10,60 @@ const greenStackLogo = require('../assets/green-stack-logo.png')
910
/* --- <ImagesScreen/> ------------------------------------------------------------------------- */
1011

1112
const ImagesScreen = () => (
12-
<View className="flex flex-1 justify-center items-center bg-slate-800">
13+
<>
14+
<StatusBar style="light" />
15+
<ScrollView
16+
className="flex flex-1 min-h-screen bg-slate-800"
17+
contentContainerClassName="min-h-screen"
18+
>
19+
<View className="flex flex-1 min-h-screen py-16 justify-center items-center bg-slate-800">
20+
{/* - Example 1 - */}
21+
<Image
22+
src={greenStackLogo}
23+
alt="Example Green Stack Logo"
24+
width={60}
25+
height={60}
26+
/>
27+
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
28+
<Text className="font-bold">src=static-require</Text>
29+
<Text> | width: 60 | height: 60</Text>
30+
</Text>
31+
{/* - Example 2 - */}
32+
<Image
33+
src="https://codinsonn.dev/_next/image?url=%2Fimg%2FCodelyFansLogoPic160x160.jpeg&w=256&q=75"
34+
alt="Example Profile picture"
35+
width={60}
36+
height={60}
37+
/>
38+
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
39+
<Text className="font-bold">src=external-url</Text>
40+
<Text> | width: 60 | height: 60</Text>
41+
</Text>
42+
{/* - Example 3 - */}
43+
<View className="w-[60px] h-[80px] relative border-[1px] border-dashed border-gray-200">
44+
<Image src={greenStackLogo} alt="Example Green Stack Logo" fill />
45+
</View>
46+
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
47+
<Text>wrapper=50x80, </Text>
48+
<Text className="font-bold">relative | fill=true</Text>
49+
</Text>
50+
{/* - Example 4 - */}
51+
<View className="w-[80px] h-[60px] relative border-[1px] border-dashed border-gray-200">
52+
<Image
53+
src={greenStackLogo}
54+
alt="Example Green Stack Logo"
55+
contentFit="contain"
56+
fill
57+
/>
58+
</View>
59+
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
60+
<Text>wrapper=80x60, </Text>
61+
<Text className="font-bold">relative | fill | contentFit=contain</Text>
62+
</Text>
63+
</View>
64+
</ScrollView>
1365
<BackButton backLink="/subpages/Universal%20Nav" />
14-
{/* - Example 1 - */}
15-
<Image
16-
src={greenStackLogo}
17-
alt="Example Green Stack Logo"
18-
width={60}
19-
height={60}
20-
/>
21-
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
22-
<Text className="font-bold">src=static-require</Text>
23-
<Text> | width: 60 | height: 60</Text>
24-
</Text>
25-
{/* - Example 2 - */}
26-
<Image
27-
src="https://codinsonn.dev/_next/image?url=%2Fimg%2FCodelyFansLogoPic160x160.jpeg&w=256&q=75"
28-
alt="Example Profile picture"
29-
width={60}
30-
height={60}
31-
/>
32-
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
33-
<Text className="font-bold">src=external-url</Text>
34-
<Text> | width: 60 | height: 60</Text>
35-
</Text>
36-
{/* - Example 3 - */}
37-
<View className="w-[60px] h-[80px] relative border-[1px] border-dashed border-gray-200">
38-
<Image src={greenStackLogo} alt="Example Green Stack Logo" fill />
39-
</View>
40-
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
41-
<Text>wrapper=50x80, </Text>
42-
<Text className="font-bold">relative | fill=true</Text>
43-
</Text>
44-
{/* - Example 4 - */}
45-
<View className="w-[80px] h-[60px] relative border-[1px] border-dashed border-gray-200">
46-
<Image
47-
src={greenStackLogo}
48-
alt="Example Green Stack Logo"
49-
contentFit="contain"
50-
fill
51-
/>
52-
</View>
53-
<Text className="mt-2 mb-4 text-gray-200 text-center text-base">
54-
<Text>wrapper=80x60, </Text>
55-
<Text className="font-bold">relative | fill | contentFit=contain</Text>
56-
</Text>
57-
</View>
66+
</>
5867
)
5968

6069
/* --- Exports --------------------------------------------------------------------------------- */

0 commit comments

Comments
 (0)