fluent-styles 1.0.0

package/src/package/form/index.jsx

@@ -0,0 +1,145 @@
+import React, { forwardRef } from 'react';
+import { TextInput } from 'react-native';
+import { YStack } from '../stack';
+import { StyledText } from '../text';
+import { StyledSpacer } from '../spacer';
+import { theme } from '../theme';
+import { styled } from '../styled';
+import { isValidColor, isValidNumber, isValidString } from '../utils';
+
+const StyledInputText = styled(TextInput, {
+    base: {
+        borderColor: theme.colors.gray[800],
+        borderWidth: 1,
+        borderRadius: 30,
+        backgroundColor: theme.fontWeight.normal[1],
+        width: '100%',
+        color: theme.colors.gray[800],
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        fontSize: theme.fontSize.normal,
+        placeholderTextColor: theme.colors.gray[1],
+    },
+    variants : {
+    fontWeight: (size = theme.fontWeight.normal) => {
+        if (!isValidString(size)) {
+            throw new Error('Invalid fontWeight value');
+        }
+        return { fontWeight: size };
+    },
+    color: (color = theme.colors.gray[800]) => {
+        if (!isValidColor(color)) {
+            throw new Error('Invalid color value');
+        }
+        return { color: color };
+    },
+    fontSize: (size = theme.fontSize.normal) => {
+        if (!isValidNumber(size)) {
+            throw new Error('Invalid fontSize value');
+        }
+        return { fontSize: size };
+    },
+    fontFamily: font => {
+      if (!font) return
+      return {
+        fontFamily: font
+      }
+    },
+    textAlign: (align = 'left') => {
+        const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];
+        if (!validAlignments.includes(align)) {
+            throw new Error('Invalid textAlign value');
+        }
+        return { textAlign: align };
+    },
+    borderRadius: (value = 16) => {
+        if (!isValidNumber(value)) {
+            throw new Error('Invalid borderRadius value');
+        }
+        return { borderRadius: value };
+    },
+    borderColor: (value  = theme.colors.gray[100]) => {
+        if (!isValidColor(value)) {
+            throw new Error('Invalid borderColor value');
+        }
+        return { borderColor: value };
+    },
+    backgroundColor: (value = theme.colors.gray[1]) => {
+        if (!isValidColor(value)) {
+            throw new Error('Invalid backgroundColor value');
+        }
+        return { backgroundColor: value };
+    },
+    noBorder: {
+        true: { borderWidth: 0 }
+    },
+    placeholderTextColor: (value = theme.colors.gray[800]) => {
+        if (!isValidColor(value)) {
+            throw new Error('Invalid placeholderTextColor value');
+        }
+        return { placeholderTextColor: value };
+    },
+}
+});
+
+const StyledInput = forwardRef(({ label, flex = 0, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {
+    return (
+        <YStack width={'100%'}>
+            {
+                label && (
+                    <>
+                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>
+                            {label}
+                        </StyledText>
+                        <StyledSpacer marginVertical={4} />
+                    </>
+                )
+            }
+            <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />
+            {
+                errorMessage && (
+                    <>
+                        <StyledSpacer marginVertical={1} />
+                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>
+                            {errorMessage}
+                        </StyledText>
+                    </>
+                )
+            }
+        </YStack>
+    )
+})
+
+const StyledMultiInput = ({ label, errorMessage, borderColor, error, errorProps, labelProps, ...rest }) => {
+    return (
+        <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start'>
+            {
+                label && (
+                    <>
+                        <StyledSpacer marginVertical={4} />
+                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>
+                            {label}
+                        </StyledText>
+                        <StyledSpacer marginVertical={4} />
+                    </>
+
+                )
+            }
+            <StyledInputText borderRadius={16} textAlignVertical='top' multiline numberOfLines={5} inputMode='text' {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />
+            {
+                errorMessage && (
+                    <>
+                        <StyledSpacer marginVertical={1} />
+                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>
+                            {errorMessage}
+                        </StyledText>
+                    </>
+                )
+            }
+
+        </YStack>
+    )
+}
+
+export { StyledInput, StyledMultiInput }
+export default StyledInputText

package/src/package/header/index.jsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View } from 'react-native'
+import { StatusBar } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import { theme } from '../theme'
+import { YStack, XStack } from '../stack'
+import { styled } from '../styled'
+import { StyledCycle } from '../cycle'
+import { StyledText } from '../text'
+import { StyledSpacer } from '../spacer'
+import { isValidNumber } from '../utils'
+
+const Headers = styled(View, {
+  base: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start'
+  },
+  variants: {
+    marginTop: size => {
+
+      if (!isValidNumber(size)) {
+        throw new Error('Invalid marginTop value')
+      }
+      return { marginTop: size }
+    }
+  }
+})
+
+const StyledHeader = ({ statusProps, ...rest }) => {
+  return (
+    <YStack>
+      <StatusBar
+        translucent
+        backgroundColor={theme.colors.gray[1]}
+        barStyle={'dark-content'}
+        {...statusProps}
+      />
+      <Headers {...rest} />
+    </YStack>
+  )
+}
+
+const Title = ({ navigator, title, icon = false, cycleProps, reload = false, screen, ...rest }) => {
+
+  return (
+    <XStack justifyContent='flex-start' alignItems='center' flex={1} paddingHorizontal={8}
+      paddingVertical={8} {...rest}>
+      {
+        icon && (
+          <StyledCycle  {...cycleProps}>
+            <>
+              <Icon
+                name={'arrow-back'}
+                size={30}
+                color={theme.colors.gray[700]}
+                onPress={() => {
+                  if (reload && screen && navigator) {
+                    navigator.replace(screen)
+                  } else {
+                    navigator.goBack()
+                  }
+                }}
+              />
+              <StyledSpacer marginHorizontal={4} />
+            </>
+          </StyledCycle>
+        )
+      }
+      {title &&
+        <StyledText
+          color={theme.colors.gray[800]}
+          fontWeight={theme.fontWeight.normal}
+          fontSize={theme.fontSize.normal}
+        >
+          {title}
+        </StyledText>}
+    </XStack>
+  )
+}
+
+const Full = ({ children }) => {
+  return (
+    <>{children}</>
+  )
+}
+
+StyledHeader.Title = Title
+StyledHeader.Full = Full
+
+export { StyledHeader }

package/src/package/image/index.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { Image as SourceImage, ImageBackground as ImageBg } from 'react-native'
+import { styled } from '../styled'
+import { isValidColor, isValidNumber } from '../utils'
+
+const base = {
+  borderRadius: 8,
+  resizeMode: 'cover',
+  position: 'relative'
+}
+
+const variants = {
+  borderRadius: (size = 32) => {
+    if (!isValidNumber(size)) {
+      throw new Error('Invalid borderRadius value')
+    }
+    return { borderRadius: size }
+  },
+  flex: size => {
+    if (!isValidNumber(size)) {
+      throw new Error('Invalid flex value')
+    }
+    return { flex: size }
+  },
+  width: size => {
+    if (!size) return
+    return { width: size }
+  },
+  height: size => {
+    if (!size) return
+    return { height: size }
+  },
+  borderWidth: size => {
+    if (!isValidNumber(size)) {
+      throw new Error('Invalid borderWidth value')
+    }
+    return { borderWidth: size }
+  },
+  borderColor: color => {
+    if (!isValidColor(color)) {
+      throw new Error('Invalid color value')
+    }
+    return { borderColor: color }
+  },
+  resizeMode: mode => {
+    const validModes = ['cover', 'contain', 'stretch', 'repeat', 'center']
+    if (!validModes.includes(mode)) {
+      throw new Error('Invalid mode value')
+    }
+    return { resizeMode: mode }
+  },
+  right: (size = 0) => {
+    if (!isValidNumber(size)) {
+      throw new Error('Invalid right value')
+    }
+    return { right: size }
+  }
+}
+
+const Image = styled(SourceImage, {
+  base: { ...base },
+  variants: {
+    ...variants
+  }
+})
+
+const ImageBackground = styled(ImageBg, {
+  base: { ...base },
+  variants: {
+    ...variants
+  }
+})
+
+const StyledImage = ({ imageUrl, local = false, ...rest }) => {
+  const url = imageUrl
+		? {
+  uri: imageUrl
+}
+		: require('../../assets/img/doctor.png')
+  return <Image source={local ? imageUrl : url} {...rest} />
+}
+
+const StyledBackgroundImage = ({ imageUrl, local = false, ...rest }) => {
+  const url = imageUrl
+		? {
+  uri: imageUrl
+}
+		: require('../../assets/img/doctor.png')
+
+  return <ImageBackground source={local ? imageUrl : url} {...rest} />
+}
+
+export { StyledImage, StyledBackgroundImage }

package/src/package/radioButton/index.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { styled } from '../styled'
+import { TouchableOpacity } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import { theme } from '../theme'
+import { isValidColor, isValidNumber, isValidString } from '../utils'
+
+const RadioButton = styled(TouchableOpacity, {
+  base: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: 100,
+    borderColor: theme.colors.gray[500],
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  variants: {
+    width: size => {
+      if (!size) return
+      return { width: size }
+    },
+    height: size => {
+      if (!size) return
+      return { height: size }
+    },
+    disabled: {
+      true: {
+        backgroundColor: theme.colors.gray[500]
+      }
+    },
+    checked: {
+      true: {
+        backgroundColor: theme.colors.gray[1]
+      }
+    },
+    checkedColor: color => {
+      if (!color) return
+      return {
+        backgroundColor: color,
+        borderColor: color
+      }
+    }
+  }
+})
+
+const StyledRadioButton = ({
+	onPress,
+	disabled = false,
+	checkedColor,
+	iconProps,
+	...rest
+}) => {
+  const [checked, setChecked] = useState(false)
+
+  const toggleCheckbox = () => {
+    setChecked(!checked)
+    onPress && onPress(!checked)
+  }
+
+  return (
+    <RadioButton
+      disabled={disabled}
+      checked={checked}
+      checkedColor={checked && checkedColor && checkedColor}
+      onPress={() => toggleCheckbox()}
+      {...rest}
+		>
+      {checked &&
+      <Icon
+        name='circle'
+        color={theme.colors.gray[700]}
+        size={15}
+        {...iconProps}
+				/>}
+    </RadioButton>
+  )
+}
+
+export { StyledRadioButton }

package/src/package/safeAreaView/index.jsx

@@ -0,0 +1,12 @@
+import { SafeAreaView } from "react-native";
+import { styled } from "../styled";
+
+const StyledSafeAreaView = styled(SafeAreaView, {   
+    variants : {
+        backgroundColor: (color) => ({
+            backgroundColor: color
+        }),
+    }
+})
+
+export { StyledSafeAreaView }

package/src/package/scrollView/index.jsx

@@ -0,0 +1,12 @@
+import { ScrollView } from 'react-native'
+import { styled } from '../styled'
+
+const StyledScrollView = styled(ScrollView, {  
+  variants: {
+    backgroundColor: color => ({
+      backgroundColor: color
+    })
+  }
+})
+
+export { StyledScrollView }

package/src/package/separator/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { XStack } from '../stack'
+import { theme } from '../theme'
+
+const StyledSeparator = ({ left, right, line, lineProps, ...rest }) => {
+    if (line) {
+        return <XStack borderTopWidth={1} borderTopColor={theme.colors.gray[800]} {...lineProps} />
+    }
+
+    return (
+        <XStack justifyContent='space-between' paddingVertical={8} paddingHorizontal={8} alignItems='center' {...rest}>
+            {
+                left && (
+                    <>{left}</>
+                )
+            }
+            {
+                right && (
+                    <>{right}</>
+                )
+            }
+        </XStack>
+    )
+}
+
+export { StyledSeparator }

package/src/package/spacer/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { View } from "react-native";
+import { styled } from "../styled";
+
+const Spacer = styled(View)
+
+const StyledSpacer = ({ ...rest }) => {
+    return (
+        <Spacer {...rest} />
+    )
+}
+
+export {StyledSpacer}

package/src/package/spinner/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { ActivityIndicator, StyleSheet } from 'react-native'
+import { styled } from '../styled'
+import { theme } from '../theme'
+
+const Spinner = styled(ActivityIndicator, {
+  base: {
+    color: theme.colors.gray[400]
+  },
+  variants: {
+    overlay: {
+      true: {
+        ...StyleSheet.absoluteFillObject,
+        position: 'absolute',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1
+      }
+    }
+  }
+})
+
+const StyledSpinner = ({
+	size = 120,
+	color = theme.colors.gray[400],
+	overlay = true,
+	...rest
+}) => {
+  return <Spinner size={size} overlay={overlay} color={color} {...rest} />
+}
+
+export { StyledSpinner }

package/src/package/stack/__test__/index.test.js

@@ -0,0 +1,68 @@
+import { expect, jest } from '@jest/globals';
+import { render } from '@testing-library/react-native'
+import { Stack, XStack, YStack } from '..'
+import { palettes, theme } from '../../theme';
+import { Platform } from 'react-native';
+
+describe("Stack", () => {
+    it("Should render correctly with base style", () => {
+        const { getByTestId } = render(<Stack testID='test-stack-id' />)
+
+        const stack = getByTestId('test-stack-id')
+        expect(stack).toHaveStyle({
+            position: 'relative'
+        })
+    })
+
+    it("Should render correctly when transparent variant is set to true", () => {
+        const { getByTestId } = render(<Stack transparent testID='test-stack-id' />)
+
+        const stack = getByTestId('test-stack-id')
+        expect(stack).toHaveStyle({
+            position: 'relative',
+            backgroundColor: palettes.transparent
+        })
+    })
+
+    it("XStack should render flexDirection to row correctly", () => {
+        const { getByTestId } = render(<XStack testID='test-stack-id' />)
+
+        const stack = getByTestId('test-stack-id')
+        expect(stack).toHaveStyle({
+            flexDirection: 'row'          
+        })
+    })
+    it("XStack should render correctly when transparent variant is set to true", () => {
+        const { getByTestId } = render(<XStack transparent testID='test-stack-id' />)
+
+        const stack = getByTestId('test-stack-id')
+        expect(stack).toHaveStyle({
+            position: 'relative',
+            backgroundColor: palettes.transparent
+        })
+    })
+
+    it("YStack should render flexDirection to column correctly", () => {
+        const { getByTestId } = render(<YStack testID='test-stack-id' />)
+
+        const stack = getByTestId('test-stack-id')
+        expect(stack).toHaveStyle({
+            flexDirection: 'column'
+        })
+    })
+
+    it("Should render shadow on stack correctly when shadow variant is set to light on ios", () => {
+        jest.spyOn(Platform, 'select').mockImplementation((obj)=>obj.ios)
+        const { getByTestId } = render(<Stack shadow='light' transparent testID='test-stack-id' />)
+
+        const stack = getByTestId('test-stack-id')
+        expect(stack).toHaveStyle({
+            position: 'relative',
+            backgroundColor: palettes.transparent,
+            shadowColor: theme.colors.gray[900],
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.22,
+            shadowRadius: 2.22,
+        })
+    })
+})

package/src/package/stack/index.jsx

@@ -0,0 +1,37 @@
+import { View } from "react-native";
+import { styled } from "../styled";
+import { theme } from "../theme";
+
+const YStack = styled(View, {
+    base: {
+        flexDirection: 'column',
+        position: 'relative'  
+    },
+    variants: {
+        transparent: {
+            true: {
+                backgroundColor: theme.colors.transparent,
+            }
+        }
+    }   
+})
+const XStack = styled(View, {
+    base: {
+        flexDirection: 'row',  
+        position:'relative'  
+    },
+    variants: {
+        transparent: {
+            true: {
+                backgroundColor: theme.colors.transparent,
+            }
+        }
+    },
+    position: {
+        true: {
+            position: 'absolute'
+        }
+    },
+})
+
+export { XStack, YStack }