fluent-styles 1.53.0 → 1.55.0

package/src/package/image/index.jsx

@@ -1,300 +0,0 @@
-import React, { useState } from 'react'
-import { Image as SourceImage, ImageBackground as ImageBg } from 'react-native'
-import { styled } from '../styled'
-import { isValidColor, isValidNumber } from '../utils'
-
-const base = {
-  borderRadius: 0,
-  borderWidth : 0,
-  resizeMode: 'cover',
-  position: 'relative'
-}
-
-const flexVariants = {
-  borderRadius: (size = 0) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderRadius value')
-    }
-    return { borderRadius: size }
-  },
-  flex: (size = 0) => {
-    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 = 1) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderWidth value')
-    }
-    return { borderWidth: size }
-  },
-  borderColor: color => {
-    if (!color) return
-    if (!isValidColor(color)) {
-      throw new Error('Invalid backgroundColor value')
-    }
-    return { borderColor: color }
-  },
-  resizeMode: mode => {
-    if (!mode) return
-
-    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 }
-  },
-  relative: {
-    position: 'relative'
-  },
-  absolute: {
-    true: {
-      position: 'absolute'
-    }
-  }
-}
-
-const variants = {
-  borderRadius: (size = 0) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderRadius value')
-    }
-    return { borderRadius: size }
-  },
-  borderTopLeftRadius: (size = 0) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderTopLeftRadius value')
-    }
-    return { borderTopLeftRadius: size }
-  },
-  borderTopRightRadius: (size = 0) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderTopRightRadius value')
-    }
-    return { borderTopRightRadius: size }
-  },
-  borderBottomLeftRadius: (size = 0) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderBottomLeftRadius value')
-    }
-    return { borderBottomLeftRadius: size }
-  },
-  borderBottomRightRadius: (size = 0) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderBottomRightRadius value')
-    }
-    return { borderBottomRightRadius: size }
-  },
-  flex: (size = 0) => {
-    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 = 1) => {
-    if (!isValidNumber(size)) {
-      throw new Error('Invalid borderWidth value')
-    }
-    return { borderWidth: size }
-  },
-  borderColor: color => {
-    if (!color) return
-    if (!isValidColor(color)) {
-      throw new Error('Invalid backgroundColor value')
-    }
-    return { borderColor: color }
-  },
-  resizeMode: mode => {
-    if (!mode) return
-
-    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 }
-  },
-  relative: {
-    position: 'relative'
-  },
-  absolute: {
-    true: {
-      position: 'absolute'
-    }
-  }
-}
-
-const FlexImage = styled(SourceImage, {
-  base: { ...base },
-  variants: {
-    ...flexVariants
-  }
-})
-
-const FlexImageBackground = styled(ImageBg, {
-  base: { ...base },
-  variants: {
-    ...flexVariants
-  }
-})
-
-const Image = styled(SourceImage, {
-  base: { ...base },
-  variants: {
-    ...variants
-  }
-})
-
-const ImageBackground = styled(ImageBg, {
-  base: { ...base },
-  variants: {
-    ...variants
-  }
-})
-
-const FlexStyledImage = ({
-	imageUrl,
-	local = false,
-	fallback = require('../../assets/img/blank_1.png'),
-	...rest
-}) => {
-  const [hasError, setHasError] = useState(false)
-  const getImageSource = () => {
-    if (local) {
-      return imageUrl || fallback
-    }
-
-    if (hasError || !imageUrl) {
-      return fallback
-    }
-
-    return { uri: imageUrl }
-  }
-
-  return (
-    <FlexImage
-      source={getImageSource()}
-      onError={() => setHasError(true)}
-      {...rest}
-		/>
-  )
-}
-
-const FlexStyledBackgroundImage = ({
-	imageUrl,
-	local = false,
-	fallback = require('../../assets/img/blank_1.png'),
-	...rest
-}) => {
-  const [hasError, setHasError] = useState(false)
-  const getImageSource = () => {
-    if (local) {
-      return imageUrl || fallback
-    }
-
-    if (hasError || !imageUrl) {
-      return fallback
-    }
-
-    return { uri: imageUrl }
-  }
-
-  return (
-    <FlexImageBackground
-      source={getImageSource()}
-      onError={() => setHasError(true)}
-      {...rest}
-		/>
-  )
-}
-
-const StyledImage = ({
-	imageUrl,
-	local = false,
-	fallback = require('../../assets/img/blank_1.png'),
-	...rest
-}) => {
-  const [hasError, setHasError] = useState(false)
-  const getImageSource = () => {
-    if (local) {
-      return imageUrl || fallback
-    }
-
-    if (hasError || !imageUrl) {
-      return fallback
-    }
-
-    return { uri: hasError ? fallback: imageUrl }
-  }
-
-  return (
-    <Image
-      source={getImageSource()}
-      onError={() => setHasError(true)}
-      {...rest}
-		/>
-  )
-}
-
-const StyledBackgroundImage = ({
-	imageUrl,
-	local = false,
-	fallback = require('../../assets/img/blank_1.png'),
-	...rest
-}) => {
-  const [hasError, setHasError] = useState(false)
-  const getImageSource = () => {
-    if (local) {
-      return imageUrl || fallback
-    }
-
-    if (hasError || !imageUrl) {
-      return fallback
-    }
-
-    return { uri: imageUrl }
-  }
-
-  return (
-    <ImageBackground
-      source={getImageSource()}
-      onError={() => setHasError(true)}
-      {...rest}
-		/>
-  )
-}
-
-export {
-	StyledImage,
-	StyledBackgroundImage,
-	FlexStyledBackgroundImage,
-	FlexStyledImage
-}

package/src/package/radioButton/index.jsx

@@ -1,74 +0,0 @@
-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'
-
-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: {
-    height: size => ({
-      height: size || 24
-    }),
-    width: size => ({
-      width: size || 24
-    }),
-    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 = ({
-	name= "",
-	onPress,
-	disabled = false,
-	selected,
-	checkedColor,
-	iconProps,
-	...rest
-}) => {
-  const checked = selected === name 
-  return (
-    <RadioButton
-      disabled={disabled}
-      checked={checked}
-      checkedColor={checked && checkedColor && checkedColor}
-      onPress={() => onPress && onPress(name)}
-      {...rest}
-		>
-      {checked &&
-      <Icon
-        name='circle'
-        color={theme.colors.gray[700]}
-        size={15}
-        {...iconProps}
-				/>}
-    </RadioButton>
-  )
-}
-
-export { StyledRadioButton }

package/src/package/safeAreaView/index.jsx

@@ -1,20 +0,0 @@
-import { SafeAreaView } from 'react-native'
-import { styled } from '../styled'
-import { isValidColor } from '../utils'
-
-const StyledSafeAreaView = styled(SafeAreaView, {
-  base: {
-    flex: 1
-  },
-  variants: {
-    backgroundColor: color => {
-      if (!color) return
-      if (!isValidColor(color)) {
-        throw new Error('Invalid backgroundColor value')
-      }
-      return { backgroundColor: color }
-    }
-  }
-})
-
-export { StyledSafeAreaView }

package/src/package/scrollView/index.jsx

@@ -1,17 +0,0 @@
-import { ScrollView } from 'react-native'
-import { styled } from '../styled'
-import { isValidColor } from '../utils'
-
-const StyledScrollView = styled(ScrollView, {
-  variants: {
-    backgroundColor: color => {
-      if (!color) return
-      if (!isValidColor(color)) {
-        throw new Error('Invalid backgroundColor value')
-      }
-      return { backgroundColor: color }
-    }
-  }
-})
-
-export { StyledScrollView }

package/src/package/separator/index.jsx

@@ -1,27 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

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