Improve example apps examples

amalgamaco · Sep 28, 2022 · d3eb288 · d3eb288
1 parent b453a2a
commit d3eb288
Show file tree

Hide file tree

Showing 22 changed files with 477 additions and 305 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -14,6 +14,7 @@ import CheckboxExamples from './components/CheckboxExamples';
 import RadioExamples from './components/RadioExamples';
 import FormControlExamples from './components/FormControlExamples';
 import TextInputExamples from './components/TextInputExamples';
+import PaletteColorGrid from './components/PaletteColorGrid';
 
 const styles = StyleSheet.create( {
 	container: {
@@ -46,6 +47,25 @@ const customTheme = extendThemeConfig( {
 		}
 	},
 	components: {
+		Text: {
+			variants: {
+				'headline': {
+					font: 'Epilogue',
+					fontSize: '3xl',
+					fontWeight: 'bold',
+					lineHeight: '3xl',
+					letterSpacing: 'md',
+					bg: 'secondary.100'
+				},
+				'subtitle': {
+					font: 'Epilogue',
+					fontSize: 'md',
+					lineHeight: 'md',
+					letterSpacing: 'md',
+					color: 'primary.800'
+				}
+			}
+		},
 		Button: {
 			variants: {
 				custom: {
@@ -84,6 +104,7 @@ export default function App() {
 			<SafeAreaView style={styles.container}>
 				<ScrollView contentContainerStyle={styles.scroll}>
 					<VStack>
+						<PaletteColorGrid />
 						<TextExamples />
 						<BoxExamples />
 						<ButtonExamples />

diff --git a/example/src/components/BoxExamples.tsx b/example/src/components/BoxExamples.tsx
@@ -27,9 +27,9 @@ const styles = StyleSheet.create( {
 
 const BoxExamples = () => (
 	<VStack style={styles.container}>
-		<Text variant="h1" bgColor="primary.200">Box Component</Text>
+		<Text variant="headline">Box Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Border radius</Text>
+		<Text variant="subtitle">Border radius</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box rounded="3xl" backgroundColor="error.400" padding="2.5">
@@ -54,7 +54,7 @@ const BoxExamples = () => (
 			</HStack>
 		</VStack>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Padding</Text>
+		<Text variant="subtitle">Padding</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box backgroundColor="error.400" padding="0.5">
@@ -68,7 +68,7 @@ const BoxExamples = () => (
 			</Box>
 		</VStack>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Margin</Text>
+		<Text variant="subtitle">Margin</Text>
 		<View style={styles.separator} />
 		<VStack style={styles.vstack} space="3">
 			<Box backgroundColor="error.400" margin="0.5">

diff --git a/example/src/components/ButtonExamples.tsx b/example/src/components/ButtonExamples.tsx
@@ -26,15 +26,16 @@ const onButtonPressed = () => Alert.alert( 'Pressed!' );
 
 const ButtonExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">Button Component</Text>
+		<Text variant="headline">Button Component</Text>
 		<View style={styles.vspace} />
-		<Text variant="sh1" color="primary.800">Variants</Text>
+		<Text variant="subtitle">Variants</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" onPress={onButtonPressed}>Primary</Button>
 		<Button variant="secondary" onPress={onButtonPressed}>Secondary</Button>
 		<Button variant="priority" onPress={onButtonPressed}>Priority</Button>
+		<Button variant="success" onPress={onButtonPressed}>Success</Button>
 		<Button variant="custom" onPress={onButtonPressed}>Custom</Button>
-		<Text variant="sh1" color="primary.800">Icons</Text>
+		<Text variant="subtitle">Icons</Text>
 		<View style={styles.separator} />
 		<Button
 			variant="primary"
@@ -67,10 +68,12 @@ const ButtonExamples = () => (
 		>
 			Custom
 		</Button>
-		<Text variant="sh1" color="primary.800">Disabled</Text>
+		<Text variant="subtitle">Disabled</Text>
 		<View style={styles.separator} />
 		<Button variant="primary" disabled onPress={onButtonPressed}>Primary Disabled</Button>
 		<Button variant="secondary" disabled onPress={onButtonPressed}>Secondary Disabled</Button>
+		<Button variant="priority" disabled onPress={onButtonPressed}>Priority Disabled</Button>
+		<Button variant="success" disabled onPress={onButtonPressed}>Success Disabled</Button>
 		<Button
 			variant="primary"
 			__disabled={{ bg: 'error.100', borderColor: 'error.100' }}
@@ -79,7 +82,7 @@ const ButtonExamples = () => (
 		>
 			Primary with custom disabled bg
 		</Button>
-		<Text variant="sh1" color="primary.800">Horizontal group</Text>
+		<Text variant="subtitle">Horizontal group</Text>
 		<View style={styles.separator} />
 		<HStack space="10">
 			<Button variant="secondary" onPress={onButtonPressed}>Cancel</Button>

diff --git a/example/src/components/CheckboxExamples.tsx b/example/src/components/CheckboxExamples.tsx
@@ -43,9 +43,9 @@ const CheckboxExamples = () => {
 
 	return (
 		<VStack style={styles.container}>
-			<Text variant="h1" bgColor="primary.200">Checkbox Component</Text>
+			<Text variant="headline">Checkbox Component</Text>
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Enabled</Text>
+			<Text variant="subtitle">Enabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -55,7 +55,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -65,7 +65,7 @@ const CheckboxExamples = () => {
 			</HStack>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">On Change</Text>
+			<Text variant="subtitle">On Change</Text>
 			<View style={styles.separator} />
 
 			<HStack>
@@ -74,7 +74,7 @@ const CheckboxExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">With Label</Text>
+			<Text variant="subtitle">With Label</Text>
 			<View style={styles.separator} />
 
 			<VStack alignItems="flex-start" justifyContent="flex-start" alignContent="flex-start" space="0">
@@ -87,10 +87,10 @@ const CheckboxExamples = () => {
 
 			<View style={styles.vspace} />
 
-			<Text variant="h1" bgColor="primary.200">Checkbox Group Component</Text>
+			<Text variant="headline">Checkbox Group Component</Text>
 			<View style={styles.vspace} />
 
-			<Text variant="sh1" color="primary.800">Select multiple options</Text>
+			<Text variant="subtitle">Select multiple options</Text>
 			<View style={styles.separator} />
 
 			<Checkbox.Group
@@ -103,7 +103,7 @@ const CheckboxExamples = () => {
 			</Checkbox.Group>
 
 			<View style={styles.vspace} />
-			<Text variant="sh1" color="primary.800">Disabled</Text>
+			<Text variant="subtitle">Disabled</Text>
 			<View style={styles.separator} />
 
 			<Checkbox.Group

diff --git a/example/src/components/FormControlExamples.tsx b/example/src/components/FormControlExamples.tsx
@@ -24,9 +24,9 @@ const styles = StyleSheet.create( {
 
 const FormControlExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">FormControl Component</Text>
+		<Text variant="headline">FormControl Component</Text>
 
-		<Text variant="sh1" color="primary.800">With label</Text>
+		<Text variant="subtitle">With label</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -39,7 +39,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Not required</Text>
+		<Text variant="subtitle">Not required</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -50,7 +50,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">With hint</Text>
+		<Text variant="subtitle">With hint</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -64,7 +64,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">Without label</Text>
+		<Text variant="subtitle">Without label</Text>
 		<View style={styles.separator} />
 
 		<FormControl
@@ -75,7 +75,7 @@ const FormControlExamples = () => (
 
 		<View style={styles.vspace} />
 
-		<Text variant="sh1" color="primary.800">With error</Text>
+		<Text variant="subtitle">With error</Text>
 		<View style={styles.separator} />
 
 		<FormControl

diff --git a/example/src/components/IconButtonExamples.tsx b/example/src/components/IconButtonExamples.tsx
@@ -19,15 +19,15 @@ const onPressed = () => Alert.alert( 'Pressed!' );
 
 const IconButtonExamples = () => (
 	<VStack style={styles.container} space="2">
-		<Text variant="h1" bgColor="primary.200">IconButton Component</Text>
+		<Text variant="headline">IconButton Component</Text>
 		<HStack space={2}>
+			<IconButton name="heart" onPress={onPressed} color="error.700" size="2xs" />
 			<IconButton name="heart" onPress={onPressed} color="information.100" size="xs" />
 			<IconButton name="heart" onPress={onPressed} color="success.200" size="sm" />
 			<IconButton name="heart" onPress={onPressed} color="success.300" size="md" />
 			<IconButton name="heart" onPress={onPressed} color="accent.400" size="lg" />
 			<IconButton name="heart" onPress={onPressed} color="error.500" size="xl" />
 			<IconButton name="heart" onPress={onPressed} color="success.600" size="2xl" />
-			<IconButton name="heart" onPress={onPressed} color="error.700" size="3xl" />
 		</HStack>
 	</VStack>
 );