fluent-styles 1.54.0 → 1.56.0

package/src/package/cycle/index.jsx

@@ -1,49 +0,0 @@
-import React from "react";
-import { Pressable } from "react-native";
-import { YStack } from "../stack";
-import { theme } from "../theme";
-
-const StyledCycle = ({
-	children,
-	pressable = false,
-	pressableProps = {},
-	...cycleProps
-}) => {
-	if (pressable) {
-		return (
-			<Pressable {...pressableProps}>
-				<YStack
-					height={48}
-					width={48}
-					borderRadius={50}
-					borderWidth={1}
-					borderColor={theme.colors.gray[1]}
-					backgroundColor={theme.colors.gray[1]}
-					justifyContent="center"
-					alignItems="center"
-          {...cycleProps}
-				>
-					{children}
-				</YStack>
-			</Pressable>
-		);
-	}
-
-  return (
-    <YStack
-      height={48}
-      width={48}
-      borderRadius={50}
-      borderWidth={1}
-      borderColor={theme.colors.gray[1]}
-      backgroundColor={theme.colors.gray[1]}
-      justifyContent="center"
-      alignItems="center"
-      {...cycleProps}
-    >
-      {children}
-    </YStack>
-  );
-};
-
-export { StyledCycle };

package/src/package/dialog/index.jsx

@@ -1,263 +0,0 @@
-import React, { useState } from 'react'
-import { Modal } from 'react-native'
-import { XStack, YStack } from '../stack'
-import { StyledText } from '../text'
-import { StyledButton } from '../button'
-import { StyledSpacer } from '../spacer'
-import { styled } from '../styled'
-import { theme } from '../theme'
-
-const Dialog = styled(Modal, {
-  base: {
-    backgroundColor: theme.colors.gray[100],
-    padding: 20,
-    borderRadius: 10
-  }
-})
-
-const StyledDialog = ({
-  children,
-  animationType = 'fade',
-  transparent = true,
-  visible = false,
-  ...rest
-}) => {
-  return (
-    <Dialog
-      visible={visible}
-      transparent={transparent}
-      animationType={animationType}
-      {...rest}
-    >
-      {children}
-    </Dialog>
-  )
-}
-
-const StyledConfirmDialog = ({
-  visible = false,
-  row,
-  animationType = 'fade',
-  onCancel,
-  onConfirm,
-  transparent = true,
-  dialogProps,
-  ...rest
-}) => {
-  const [show, setShow] = useState(visible)
-  const {
-    title,
-    description,
-    cancel = 'Cancel',
-    onNeural,
-    confirm = 'Confirm',
-    neutral = 'Neutral',
-    isNeutral= false
-  } = rest
-
-  const handleConfirm = () => {
-    setShow(false)
-    if (typeof onConfirm === 'function') {
-      if (typeof row === 'object' && row !== null) {
-        onConfirm(row)
-      } else {
-        onConfirm()
-      }
-    }
-  }
-  const handleCancel = () => {
-    setShow(false)
-    if (typeof onCancel === 'function') {
-      onCancel()
-    }
-  }
-
-  const handleNeural = () => {
-    setShow(false)
-    if (typeof onNeural === 'function') {
-      onNeural()
-    }
-  }
-  return (
-    <Dialog
-      visible={show}
-      transparent={transparent}
-      animationType={animationType}
-      {...rest}
-    >
-      <YStack
-        transparent
-        flex={1}
-        justifyContent='center'
-        alignItems='center'
-        {...dialogProps}
-      >
-        <YStack
-          width={'90%'}
-          borderRadius={8}
-          paddingVertical={16}
-          paddingHorizontal={16}
-          backgroundColor={theme.colors.gray[1]}
-        >
-          <StyledText
-            color={theme.colors.gray[800]}
-            fontSize={theme.fontSize.normal}
-            fontWeight={theme.fontWeight.bold}
-          >
-            {title}
-          </StyledText>
-          <StyledSpacer marginVertical={1} />
-          <StyledText
-            color={theme.colors.gray[800]}
-            fontSize={theme.fontSize.large}
-            fontWeight={theme.fontWeight.normal}
-          >
-            {description}
-          </StyledText>
-          <StyledSpacer marginVertical={4} />
-          <XStack justifyContent='flex-end' alignItems='center'>
-            <StyledButton
-              backgroundColor={theme.colors.red[400]}
-              borderColor={theme.colors.red[400]}
-              borderRadius={30}
-              onPress={() => handleCancel()}
-            >
-              <StyledText
-                paddingHorizontal={20}
-                paddingVertical={4}
-                color={theme.colors.gray[1]}
-                fontSize={theme.fontSize.normal}
-                fontWeight={theme.fontWeight.normal}
-              >
-                {cancel}
-              </StyledText>
-            </StyledButton>
-            <StyledSpacer marginHorizontal={2} />
-            {(onNeural && isNeutral) && (
-              <>
-                <StyledButton
-                  backgroundColor={theme.colors.orange[400]}
-                  borderColor={theme.colors.orange[400]}
-                  borderRadius={30}
-                  onPress={() => handleNeural()}
-                >
-                  <StyledText
-                    paddingHorizontal={20}
-                    paddingVertical={4}
-                    color={theme.colors.gray[1]}
-                    fontSize={theme.fontSize.normal}
-                    fontWeight={theme.fontWeight.normal}
-                  >
-                    {neutral}
-                  </StyledText>
-                </StyledButton>
-                <StyledSpacer marginHorizontal={2} />
-              </>
-            )}
-            <StyledButton
-              backgroundColor={theme.colors.green[500]}
-              borderColor={theme.colors.green[500]}
-              onPress={() => handleConfirm()}
-              borderRadius={30}
-            >
-              <StyledText
-                paddingHorizontal={20}
-                paddingVertical={4}
-                color={theme.colors.gray[1]}
-                fontSize={theme.fontSize.normal}
-                fontWeight={theme.fontWeight.normal}
-              >
-                {confirm}
-              </StyledText>
-            </StyledButton>
-          </XStack>
-        </YStack>
-      </YStack>
-    </Dialog>
-  )
-}
-
-const StyledOkDialog = ({
-  visible = false,
-  animationType = 'fade',
-  transparent = true,
-  dialogProps,
-  ...rest
-}) => {
-  const [show, setShow] = useState(visible)
-  const {
-    title = "We're sorry, something went wrong.",
-    description = 'Please try again later',
-    ok = 'Ok',
-    onOk
-  } = rest
-
-  const handleOk = () => {
-    setShow(false)
-    if (typeof onOk === 'function') {
-      onOk()
-    }
-  }
-  return (
-    <Dialog
-      visible={show}
-      transparent={transparent}
-      animationType={animationType}
-      {...rest}
-    >
-      <YStack
-        transparent
-        flex={1}
-        justifyContent='center'
-        alignItems='center'
-        {...dialogProps}
-      >
-        <YStack
-          width={'90%'}
-          borderRadius={8}
-          paddingVertical={16}
-          paddingHorizontal={16}
-          backgroundColor={theme.colors.gray[1]}
-        >
-          <StyledText
-            color={theme.colors.gray[800]}
-            fontSize={theme.fontSize.normal}
-            fontWeight={theme.fontWeight.bold}
-          >
-            {title}
-          </StyledText>
-          <StyledSpacer marginVertical={2} />
-          <StyledText
-            color={theme.colors.gray[800]}
-            fontSize={theme.fontSize.normal}
-            fontWeight={theme.fontWeight.normal}
-          >
-            {description}
-          </StyledText>
-          <StyledSpacer marginVertical={8} />
-          <XStack justifyContent='flex-end' alignItems='center'>
-            <StyledButton
-              flex={1}
-              backgroundColor={theme.colors.cyan[500]}
-              borderColor={theme.colors.cyan[500]}
-              onPress={handleOk}
-              borderRadius={30}
-            >
-              <StyledText
-                paddingHorizontal={20}
-                paddingVertical={8}
-                color={theme.colors.gray[1]}
-                fontSize={theme.fontSize.large}
-                fontWeight={theme.fontWeight.bold}
-              >
-                {ok}
-              </StyledText>
-            </StyledButton>
-          </XStack>
-        </YStack>
-      </YStack>
-    </Dialog>
-  )
-}
-
-export { StyledDialog, StyledConfirmDialog, StyledOkDialog }

package/src/package/dropdown/index.jsx

@@ -1,101 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { YStack } from '../stack';
-import { StyledText } from '../text';
-import { StyledSpacer } from '../spacer';
-import DropDownPicker from "react-native-dropdown-picker";
-import { theme } from "../theme";
-import { styled } from "../styled";
-
-const Dropdown = styled(DropDownPicker, {
-    base: {
-        borderColor: theme.colors.gray[800],
-        borderWidth: 1,
-        borderRadius: 30,
-        backgroundColor: theme.colors.gray[1],
-        width: '100%',
-        color: theme.colors.gray[800],
-        paddingHorizontal: 16,
-    },
-    variants: {
-        error: {
-            true: {
-                borderColor: theme.colors.pink[500],
-                borderWidth: 1,
-            },
-            false: {
-                borderColor: theme.colors.gray[800],
-            }
-        },
-    }
-})
-
-const StyledDropdown = ({ items, label, errorMessage, error, labelStyles, ...rest }) => {
-    const [open, setOpen] = useState(false)
-    return (
-        <>
-            {
-                label && (
-                    <>                       
-                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>
-                            {label}
-                        </StyledText>
-                        <StyledSpacer marginVertical={4} />
-                    </>
-
-                )
-            }
-            <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />
-            {
-                (error && errorMessage)  && (
-                    <>
-                        <StyledSpacer marginVertical={1} />
-                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>
-                            {errorMessage}
-                        </StyledText>
-                    </>
-                )
-            }
-
-        </>
-    )
-}
-
-const StyledMultiDropdown = ({ items, label, errorMessage, labelStyles, onSelected, ...rest }) => {
-    const [selected, setSelected] = useState([])
-    const [open, setOpen] = useState(false)
-
-    useEffect(() => {
-        onSelected && onSelected(selected)
-    }, [selected])
-
-    return (
-        <YStack justifyContent='flex-start' alignItems='flex-start'>
-            {
-                label && (
-                    <>
-                        <StyledSpacer marginVertical={4} />
-                        <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>
-                            {label}
-                        </StyledText>
-                        <StyledSpacer marginVertical={4} />
-                    </>
-
-                )
-            }
-            <Dropdown open={open} setOpen={setOpen} items={items} setValue={setSelected} value={selected} multiple {...rest} />
-            {
-                errorMessage && (
-                    <>
-                        <StyledSpacer marginVertical={1} />
-                        <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>
-                            {errorMessage}
-                        </StyledText>
-                    </>
-                )
-            }
-
-        </YStack>
-    )
-}
-
-export { StyledDropdown, StyledMultiDropdown }

package/src/package/form/index.jsx

@@ -1,144 +0,0 @@
-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[800]) => {
-            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, containerProps, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {
-    return (
-        <>
-            {
-                label && (
-                    <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start' {...containerProps} >
-                        <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>
-                            {label}
-                        </StyledText>
-                        <StyledSpacer marginVertical={4} />
-                    </YStack>
-                )
-            }
-            <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />
-            {
-                errorMessage && (
-                    <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start' {...containerProps} >
-                        <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, StyledInputText as InputText }
-export default StyledInputText

package/src/package/header/index.jsx

@@ -1,96 +0,0 @@
-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'
-import { getStatusBarHeight } from '../utils/statusBar'
-
-const Headers = styled(View, {
-  base: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
-  },
-  variants: {
-    marginTop: (size = 0) => {
-      if (!isValidNumber(size)) {
-        throw new Error('Invalid marginTop value')
-      }
-      return { marginTop: size }
-    },
-    statusHeight: (height = 0) => {
-      return { paddingTop: height }
-    }
-  }
-})
-
-const StyledHeader = ({ statusProps, skipAndroid = false, skipIos = true, ...rest }) => {
-  return (
-    <YStack>
-      <StatusBar
-        translucent={true}
-        backgroundColor={theme.colors.gray[1]}
-        barStyle={'dark-content'}
-        {...statusProps}
-      />
-      <Headers statusHeight={getStatusBarHeight(skipAndroid, skipIos)} {...rest} />
-    </YStack>
-  )
-}
-
-const Header = ({ navigator, fontWeight = theme.fontWeight.normal, fontSize = theme.fontSize.normal, iconProps, color = theme.colors.gray[800], textProps, title, icon = false, cycleProps, rightIcon, rightIconProps, onPress, ...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={() => onPress && onPress()}
-                {...iconProps}
-              />
-              <StyledSpacer marginHorizontal={4} />
-            </>
-          </StyledCycle>
-        )
-      }
-      {title &&
-        <StyledText
-          color={color}
-          fontWeight={fontWeight}
-          fontSize={fontSize}
-        >
-          {title}
-        </StyledText>}
-      {
-        rightIcon && (
-          <>{rightIcon}</>
-        )
-      }
-
-    </XStack>
-  )
-}
-
-const Full = ({ children }) => {
-  return (
-    <>{children}</>
-  )
-}
-
-StyledHeader.Header = Header
-StyledHeader.Full = Full
-
-export { StyledHeader }