Added CheckBox examples, fixed typo

amalgamaco · Sep 13, 2022 · 62bb72e · 62bb72e
1 parent 74f60a9
commit 62bb72e
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 36 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -10,6 +10,7 @@ import BoxExamples from './components/BoxExamples';
 import ButtonExamples from './components/ButtonExamples';
 import IconExamples from './components/IconExamples';
 import IconButtonExamples from './components/IconButtonExamples';
+import CheckboxExamples from './components/CheckboxExamples';
 
 const styles = StyleSheet.create( {
 	container: {
@@ -85,6 +86,7 @@ export default function App() {
 						<ButtonExamples />
 						<IconExamples />
 						<IconButtonExamples />
+						<CheckboxExamples />
 					</VStack>
 				</ScrollView>
 			</SafeAreaView>

diff --git a/example/src/components/CheckboxExamples.tsx b/example/src/components/CheckboxExamples.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { StyleSheet, View } from 'react-native';
+import {
+	Checkbox, VStack, Text, HStack
+} from '@amalgama/react-native-ui-kit';
+
+const styles = StyleSheet.create( {
+	container: {
+		width: '100%',
+		marginBottom: 20
+	},
+	separator: {
+		height: 1,
+		minWidth: '100%',
+		marginTop: 2,
+		marginBottom: 6,
+		backgroundColor: 'black'
+	},
+	vspace: {
+		height: 10,
+		minWidth: '100%'
+	}
+} );
+
+const TextExamples = () => (
+	<VStack style={styles.container}>
+		<Text variant="h1" bgColor="primary.200">Checkbox Component</Text>
+		<View style={styles.vspace} />
+		<Text variant="sh1" color="primary.800">Enabled</Text>
+		<View style={styles.separator} />
+
+		<HStack>
+			<Checkbox></Checkbox>
+			<Checkbox isSelected></Checkbox>
+			<Checkbox isIndeterminated></Checkbox>
+		</HStack>
+
+		<View style={styles.vspace} />
+		<Text variant="sh1" color="primary.800">Disabled</Text>
+		<View style={styles.separator} />
+
+		<HStack>
+			<Checkbox disabled></Checkbox>
+			<Checkbox disabled isSelected></Checkbox>
+			<Checkbox disabled isIndeterminated></Checkbox>
+		</HStack>
+
+		<View style={styles.vspace} />
+		<Text variant="sh1" color="primary.800">Sizes and colors</Text>
+		<View style={styles.separator} />
+
+		<HStack space={'3'} marginX={'3'}>
+			<Checkbox __icon={{ size: 'xl' }} __unselected={{ __icon: { color: 'error.700' } }}></Checkbox>
+			<Checkbox isSelected __icon={{ size: 'lg' }} __selected={{ __icon: { color: 'success.500' } }}></Checkbox>
+			<Checkbox isIndeterminated __icon={{ size: 'md' }} __indeterminate={{ __icon: { color: 'warning.400' } }}></Checkbox>
+		</HStack>
+
+		<View style={styles.vspace} />
+
+	</VStack>
+);
+
+export default TextExamples;
diff --git a/example/src/components/TextExamples.tsx b/example/src/components/TextExamples.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { StyleSheet, View } from 'react-native';
-import { CheckBox, Text, VStack } from '@amalgama/react-native-ui-kit';
+import { Text, VStack } from '@amalgama/react-native-ui-kit';
 
 const styles = StyleSheet.create( {
 	container: {
@@ -23,7 +23,6 @@ const styles = StyleSheet.create( {
 
 const TextExamples = () => (
 	<VStack style={styles.container}>
-		<CheckBox style={{ marginVertical: 10 }}></CheckBox>
 		<Text variant="h1" bgColor="primary.200">Text Component</Text>
 		<View style={styles.vspace} />
 		<Text variant="sh1" color="primary.800">Variants</Text>

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -5,4 +5,4 @@ export { HStack, VStack } from './main/Stack';
 export { default as Text } from './main/Text';
 export { default as Icon } from './main/Icon';
 export { default as IconButton } from './main/IconButton';
-export { default as CheckBox } from './main/CheckBox';
+export { default as Checkbox } from './main/Checkbox';
diff --git a/src/components/main/CheckBox/hooks.ts b/src/components/main/CheckBox/hooks.ts
@@ -2,12 +2,12 @@ import { useMemo } from 'react';
 import useIsPressed from '../../hooks/useIsPressed';
 import { useComponentPropsResolver } from '../../../hooks';
 import useIsSelected from '../../hooks/useIsSelected';
-import type { ICheckBoxProps } from './types';
+import type { ICheckboxProps } from './types';
+import type { IIconProps } from '../Icon/types';
 
-interface IUseCheckBoxPropsResolverReturnType {
-	iconProps: ICheckBoxProps['__icon'],
-    containerProps: Omit<ICheckBoxProps, '__icon'>
-	icon: string
+interface IUseCheckboxPropsResolverReturnType {
+	iconProps: IIconProps,
+    containerProps: Omit<ICheckboxProps, '__icon'>
 }
 
 // Poner esto en otro lado
@@ -17,12 +17,12 @@ const selectIcon = ( isIndeterminated: boolean, isSelected: boolean ): string =>
 	return 'customuncheckedbox';
 };
 
-export const useCheckBoxPropsResolver = ( {
+export const useCheckboxPropsResolver = ( {
 	isSelected: isSelectedProp = false,
 	isIndeterminated: isIndeterminatedProp = false,
 	...props
-} : ICheckBoxProps
-): IUseCheckBoxPropsResolverReturnType => {
+} : ICheckboxProps
+): IUseCheckboxPropsResolverReturnType => {
 	const { disabled } = props;
 
 	const {
@@ -41,16 +41,16 @@ export const useCheckBoxPropsResolver = ( {
 		isPressed
 	} ), [ isSelected, isIndeterminated, disabled, isPressed ] );
 
-	const icon = selectIcon( isIndeterminated, isSelected );
+	const name = selectIcon( isIndeterminated, isSelected );
 
 	const {
 		__icon: iconProps,
 		...containerProps
-	} = useComponentPropsResolver( 'CheckBox', props, state ) as ICheckBoxProps;
+	} = useComponentPropsResolver( 'Checkbox', props, state ) as ICheckboxProps;
 
 	containerProps.onPress = onPress;
 	containerProps.onPressIn = onPressIn;
 	containerProps.onPressOut = onPressOut;
 
-	return { icon, iconProps, containerProps };
+	return { iconProps: { ...iconProps, name }, containerProps };
 };
diff --git a/src/components/main/CheckBox/index.tsx b/src/components/main/CheckBox/index.tsx
@@ -1,23 +1,23 @@
 import React from 'react';
 import Icon from '../Icon';
 import Pressable from '../Pressable';
-import { useCheckBoxPropsResolver } from './hooks';
-import type { ICheckBoxProps } from './types';
+import { useCheckboxPropsResolver } from './hooks';
+import type { ICheckboxProps } from './types';
 
-const CheckBox = ( {
+const Checkbox = ( {
 	isSelected = false,
 	isIndeterminated = false,
 	...props
-}: ICheckBoxProps ) => {
-	const { icon, iconProps, containerProps } = useCheckBoxPropsResolver( {
+}: ICheckboxProps ) => {
+	const { iconProps, containerProps } = useCheckboxPropsResolver( {
 		isIndeterminated, isSelected, ...props
 	} );
 
 	return (
 		<Pressable {...containerProps}>
-			<Icon name={icon} {...containerProps} {...iconProps}></Icon>
+			<Icon {...iconProps}></Icon>
 		</Pressable>
 	);
 };
 
-export default CheckBox;
+export default Checkbox;
diff --git a/src/components/main/CheckBox/types.ts b/src/components/main/CheckBox/types.ts
@@ -1,9 +1,9 @@
 import type { ComponentStyledProps } from '../../../core/components/types';
 import type { IPressableProps } from '../Pressable/types';
 
-export interface ICheckBoxProps extends Omit<IPressableProps, 'children' | 'size'>,
-ComponentStyledProps<'CheckBox'>
+export interface ICheckboxProps extends Omit<IPressableProps, 'children' | 'size'>,
+ComponentStyledProps<'Checkbox'>
 {
     isSelected?: boolean,
-    isIndeterminated?:boolean,
+    isIndeterminated?:boolean
 }
diff --git a/src/core/components/types/common.ts b/src/core/components/types/common.ts
@@ -1,6 +1,6 @@
 import type { StyledProps } from '../../theme/types';
 
-export type ComponentName = 'Text' | 'Box' | 'Stack' | 'Button' | 'Pressable' | 'Icon' | 'IconButton' | 'CheckBox';
+export type ComponentName = 'Text' | 'Box' | 'Stack' | 'Button' | 'Pressable' | 'Icon' | 'IconButton' | 'Checkbox';
 
 export type VariantName = string;
 

diff --git a/src/core/theme/defaultTheme/components/CheckBox.ts b/src/core/theme/defaultTheme/components/CheckBox.ts
@@ -5,18 +5,16 @@ export default {
 		justifyContent: 'center',
 		alignItems: 'center',
 		rounded: 'full',
-		__icon: {
-		},
 		__selected: {
-			color: 'secondary.900',
+			__icon: { color: 'secondary.900' },
 			borderColor: 'secondary.900'
 		},
 		__unselected: {
-			color: 'neutral.800',
+			__icon: { color: 'neutral.800' },
 			borderColor: 'neutral.800'
 		},
 		__indeterminate: {
-			color: 'secondary.900',
+			__icon: { color: 'secondary.900' },
 			borderColor: 'secondary.900'
 		},
 		__disabled: {
@@ -31,6 +29,7 @@ export default {
 		__focus: {
 			bg: 'secondary.10',
 			borderWidth: '1'
-		}
+		},
+		__icon: { }
 	}
 };
diff --git a/src/core/theme/defaultTheme/components/index.ts b/src/core/theme/defaultTheme/components/index.ts
@@ -3,13 +3,13 @@ import Button from './Button';
 import Icon from './Icon';
 import IconButton from './IconButton';
 import Stack from './Stack';
-import CheckBox from './CheckBox';
+import Checkbox from './Checkbox';
 
 export default {
 	Text,
 	Icon,
 	IconButton,
 	Button,
 	Stack,
-	CheckBox
+	Checkbox
 };
diff --git a/src/index.tsx b/src/index.tsx
@@ -11,5 +11,5 @@ export {
 	IconButton,
 	VStack,
 	Text,
-	CheckBox
+	Checkbox
 } from './components';
diff --git a/web_example/src/components/TextExamples.tsx b/web_example/src/components/TextExamples.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { StyleSheet, View } from 'react-native';
-import { Text, VStack, CheckBox } from '@amalgama/react-native-ui-kit';
+import { Text, VStack, Checkbox } from '@amalgama/react-native-ui-kit';
 
 const styles = StyleSheet.create( {
 	container: {
@@ -23,7 +23,7 @@ const styles = StyleSheet.create( {
 
 const TextExamples = () => (
 	<VStack style={styles.container}>
-		<CheckBox></CheckBox>
+		<Checkbox></Checkbox>
 		<Text variant="h1" bgColor="primary.200">Text Component</Text>
 		<View style={styles.vspace} />
 		<Text variant="sh1" color="primary.800">Variants</Text>