added type definition for autocompletion in theme declaration + doc (#115)

Author: heloise-gllm

apps/docs/pages/docs/customization.en-US.mdx

@@ -82,12 +82,13 @@ const ComponentStyle: ComponentStyleConfig = {
 }
 ```
 
-Example of default Input theme :
+Example of default Input theme with type-safe props.
+Using `InputProps` allows autocompletion in defineStyle.
 
 ```js
-import { defineStyle, defineStyleConfig } from 'react-native-ficus-ui';
+import { defineStyle, defineStyleConfig, InputProps } from 'react-native-ficus-ui';
 
-const baseStyle = defineStyle({
+const baseStyle = defineStyle<InputProps>({
   borderRadius: 'md',
   alignSelf: 'flex-start',
   fontWeight: 'bold',

packages/react-native-ficus-ui/src/components/input/index.tsx

@@ -23,12 +23,14 @@ import {
   forwardRef,
   useStyleConfig,
 } from '../system';
+import { TextProps } from '../text';
 import { useInput } from './input.service';
 import { InputOptions } from './input.types';
 
 export interface InputProps
   extends NativeFicusProps<'TextInput'>,
     PrefixSuffixProps,
+    Omit<TextProps, 'textAlign' | 'textAlignVertical' | 'as'>,
     InputOptions,
     ThemingProps<'Input'> {}
 

packages/react-native-ficus-ui/src/components/input/textarea.tsx

@@ -21,13 +21,15 @@ import {
   forwardRef,
   useStyleConfig,
 } from '../system';
+import { TextProps } from '../text';
 import { useInput } from './input.service';
 import { InputOptions } from './input.types';
 
 export interface TextareaProps
   extends NativeFicusProps<'TextInput'>,
     PrefixSuffixProps,
     InputOptions,
+    Omit<TextProps, 'as' | 'textAlign' | 'textAlignVertical'>,
     ThemingProps<'Textarea'> {}
 
 export const Textarea = forwardRef<TextareaProps, 'TextInput'>((props, ref) => {

packages/react-native-ficus-ui/src/components/select/index.tsx

@@ -10,10 +10,12 @@ import {
   toStyleSheetObject,
   useStyleConfig,
 } from '../system';
+import { TextProps } from '../text';
 import { useSelect } from './select.service';
 
 export interface SelectProps
   extends NativeFicusProps<'PickerSelect'>,
+    Partial<Omit<TextProps, 'as' | 'style'>>,
     ThemingProps<'Select'> {}
 
 export const Select = forwardRef<SelectProps, 'PickerSelect'>((props, ref) => {

packages/react-native-ficus-ui/src/theme/components/avatar.ts

@@ -1,3 +1,4 @@
+import { AvatarBadgeProps } from '../../components/avatar/avatar-badge';
 import { createMultiStyleConfigHelpers, defineStyle } from '../../style-system';
 import { darkenColor, lightenColor, randomColorFromString } from '../utils';
 
@@ -12,7 +13,7 @@ const avatarParts = [
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(avatarParts);
 
-const baseStyleBagde = defineStyle({
+const baseStyleBagde = defineStyle<AvatarBadgeProps>({
   bg: 'green.400',
   borderRadius: '100%',
   borderWidth: 2,
@@ -23,8 +24,8 @@ const baseStyleBagde = defineStyle({
 const baseStyleExcessLabel = defineStyle({
   bg: 'gray.300',
   fontSize: 'sm',
-  width: 30,
-  height: 30,
+  w: 30,
+  h: 30,
 });
 
 const baseStyleContainer = defineStyle((props) => {
@@ -39,8 +40,8 @@ const baseStyleContainer = defineStyle((props) => {
     bg,
     borderColor: 'white',
     verticalAlign: 'center',
-    width: 30,
-    height: 30,
+    w: 30,
+    h: 30,
   };
 });
 
@@ -71,20 +72,20 @@ const AVATAR_BADGE_RATIO = 3;
 function getSize(size: number) {
   return definePartsStyle({
     container: {
-      width: size,
-      height: size,
+      w: size,
+      h: size,
     },
     excessLabel: {
-      width: size,
-      height: size,
+      w: size,
+      h: size,
       fontSize: size / 4,
     },
     label: {
       fontSize: size / 3,
     },
     badge: {
-      width: size / AVATAR_BADGE_RATIO,
-      height: size / AVATAR_BADGE_RATIO,
+      w: size / AVATAR_BADGE_RATIO,
+      h: size / AVATAR_BADGE_RATIO,
       top: size - size / AVATAR_BADGE_RATIO,
       right: 0,
     },

packages/react-native-ficus-ui/src/theme/components/badge.ts

@@ -1,6 +1,7 @@
+import { BadgeProps } from '../../components';
 import { defineStyle, defineStyleConfig } from '../../style-system';
 
-const baseStyle = defineStyle({
+const baseStyle = defineStyle<BadgeProps>({
   px: 4,
   py: 2,
   textTransform: 'uppercase',

packages/react-native-ficus-ui/src/theme/components/button.ts

@@ -1,7 +1,8 @@
+import { ButtonProps } from '../../components';
 import { defineStyle, defineStyleConfig } from '../../style-system';
 import { runIfFn } from '../utils/run-if-fn';
 
-const baseStyle = defineStyle({
+const baseStyle = defineStyle<ButtonProps>({
   borderRadius: 'md',
   alignSelf: 'flex-start',
   fontWeight: 'bold',
@@ -107,7 +108,7 @@ const variantSolid = defineStyle((props) => {
 const variantLink = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    padding: 0,
+    p: 0,
     lineHeight: 18,
     textDecorationLine: 'underline',
     textDecorationColor: `${c}.500`,
@@ -131,32 +132,32 @@ const sizes = {
   xs: defineStyle({
     px: 6,
     fontSize: 12,
-    height: 25,
+    h: 25,
   }),
   sm: defineStyle({
     px: 10,
     fontSize: 13,
-    height: 30,
+    h: 30,
   }),
   md: defineStyle({
     px: 14,
     fontSize: 15,
-    height: 35,
+    h: 35,
   }),
   lg: defineStyle({
     px: 16,
     fontSize: 17,
-    height: 40,
+    h: 40,
   }),
   xl: defineStyle({
     px: 18,
     fontSize: 19,
-    height: 45,
+    h: 45,
   }),
   '2xl': defineStyle({
     px: 20,
     fontSize: 21,
-    height: 47,
+    h: 47,
   }),
 };
 

packages/react-native-ficus-ui/src/theme/components/icon-button.ts

@@ -107,7 +107,7 @@ const variantSolid = defineStyle((props) => {
 const variantLink = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    padding: 0,
+    p: 0,
     lineHeight: 18,
     textDecorationLine: 'underline',
     textDecorationColor: `${c}.500`,
@@ -130,33 +130,33 @@ const variants = {
 const sizes = {
   xs: defineStyle({
     fontSize: 12,
-    height: 25,
-    width: 25,
+    h: 25,
+    w: 25,
   }),
   sm: defineStyle({
     fontSize: 13,
-    height: 30,
-    width: 30,
+    h: 30,
+    w: 30,
   }),
   md: defineStyle({
     fontSize: 15,
-    height: 35,
-    width: 35,
+    h: 35,
+    w: 35,
   }),
   lg: defineStyle({
     fontSize: 17,
-    height: 40,
-    width: 40,
+    h: 40,
+    w: 40,
   }),
   xl: defineStyle({
     fontSize: 19,
-    height: 45,
-    width: 45,
+    h: 45,
+    w: 45,
   }),
   '2xl': defineStyle({
     fontSize: 21,
-    height: 47,
-    width: 47,
+    h: 47,
+    w: 47,
   }),
 };
 

packages/react-native-ficus-ui/src/theme/components/input.ts

@@ -1,6 +1,7 @@
+import { InputProps } from '../../components';
 import { defineStyle, defineStyleConfig } from '../../style-system';
 
-const baseStyle = defineStyle({
+const baseStyle = defineStyle<InputProps>({
   borderRadius: 'md',
   alignSelf: 'flex-start',
   fontWeight: 'bold',
@@ -9,7 +10,7 @@ const baseStyle = defineStyle({
   fontSize: 'md',
   bg: 'white',
   color: 'gray.800',
-  shadow: 0,
+  shadow: 'none',
   _disabled: {
     opacity: 0.6,
   },
@@ -42,7 +43,7 @@ const variants = {
 
 const sizes = {
   xs: defineStyle({
-    height: 24,
+    h: 24,
     px: 'sm',
     py: 0,
     fontSize: 'xs',
@@ -52,7 +53,7 @@ const sizes = {
     },
   }),
   sm: defineStyle({
-    height: 32,
+    h: 32,
     px: 'md',
     py: 'md',
     fontSize: 'sm',
@@ -62,7 +63,7 @@ const sizes = {
     },
   }),
   md: defineStyle({
-    height: 40,
+    h: 40,
     px: 'lg',
     py: 'lg',
     fontSize: 'md',
@@ -72,7 +73,7 @@ const sizes = {
     },
   }),
   lg: defineStyle({
-    height: 48,
+    h: 48,
     px: 'lg',
     py: 'lg',
     fontSize: 'md',

packages/react-native-ficus-ui/src/theme/components/pin-input.ts

@@ -1,6 +1,7 @@
+import { PinInputProps } from '../../components/pin-input';
 import { defineStyle, defineStyleConfig } from '../../style-system';
 
-const baseStyle = defineStyle({
+const baseStyle = defineStyle<PinInputProps>({
   alignSelf: 'flex-start',
   justifyContent: 'flex-start',
 });