fluent-styles 1.0.0

package/src/package/badge/index.jsx

@@ -0,0 +1,133 @@
+// @ts-nocheck
+import React from "react";
+import { Text } from 'react-native';
+import { XStack, YStack } from "../stack";
+import { StyledSpacer } from "../spacer";
+import { styled } from "../styled";
+import { theme } from "../theme";
+import { isValidColor, isValidNumber, isValidString } from '../utils';
+
+const Badge = styled(Text, {
+    base: {
+        borderColor: theme.colors.gray[300],
+        borderRadius: 32,
+        backgroundColor: theme.colors.gray[1],
+        fontSize: theme.fontSize.normal,
+        color: theme.colors.gray[900],
+        fontWeight: theme.fontWeight.bold,
+        position: 'relative',
+        textAlign: 'center'
+    },
+    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 }
+        },
+        flexWrap: 'wrap',
+        absolute: {
+            true: {
+                position: 'absolute'
+            }
+        },
+        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 }
+        },
+        borderColor: color => {
+            if (!isValidColor(color)) {
+                throw new Error('Invalid color value')
+            }
+            return { borderColor: color }
+        },
+        borderRadius: (size = 32) => {
+            if (!isValidNumber(size)) {
+                throw new Error('Invalid borderRadius value')
+            }
+            return { borderRadius: size }
+        },
+        backgroundColor: color => {
+            if (!isValidColor(color)) {
+                throw new Error('Invalid color value')
+            }
+            return { backgroundColor: color }
+        },
+        right: (size = 0) => {
+            if (!isValidNumber(size)) {
+                throw new Error('Invalid right value')
+            }
+            return { right: size }
+        },
+        top: (size = 0) => {
+            if (!isValidNumber(size)) {
+                throw new Error('Invalid top value')
+            }
+            return { top: size }
+        },
+    }
+})
+
+const StyledBadge = ({ children, ...rest }) => {
+    return (
+        <Badge {...rest}>
+            {children}
+        </Badge>
+    )
+}
+
+const StyledBadgeWithIcon = ({ iconLeft, iconRight, textProps, title, ...rest }) => {
+    return (
+        <XStack justifyContent='flex-start' alignItems='center' {...rest}>
+            {
+                iconLeft && (<>
+                    {iconLeft}
+                    <StyledSpacer marginHorizontal={2} />
+                </>)
+            }
+            <Badge backgroundColor={theme.colors.transparent} {...textProps}>
+                {title}
+            </Badge>
+            {
+                iconRight && (<>
+                    {iconRight}
+                    <StyledSpacer marginHorizontal={2} />
+                </>)
+            }
+        </XStack>
+    )
+}
+
+const StyledBadgeIcon = ({ top = -1, right = 5, icon, charProps, char, ...rest }) => {
+    return (
+        <YStack justifyContent='center' alignItems='center' {...rest}>
+            {icon}
+            <Badge absolute top={top} right={right} {...charProps}>
+                {char}
+            </Badge>
+        </YStack>
+    )
+}
+
+export { StyledBadge, StyledBadgeWithIcon, StyledBadgeIcon }

package/src/package/button/index.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import { styled } from '../styled'
+import { theme } from '../theme'
+import { isValidColor, isValidNumber } from '../utils'
+
+const Button = styled(TouchableOpacity, {
+  base: {
+    borderColor: theme.colors.gray[100],
+    borderWidth: 1,
+    borderRadius: 30,
+    backgroundColor: theme.colors.gray[300],
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  variants: {
+    borderColor: color => {
+      if (!isValidColor(color)) {
+        throw new Error('Invalid color value')
+      }
+      return { borderColor: color }
+    },
+    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 }
+    },
+    backgroundColor: color => {
+      if (!isValidColor(color)) {
+        throw new Error('Invalid backgroundColor value')
+      }
+      return { backgroundColor: color }
+    },
+    link: {
+      true: {
+        borderColor: theme.colors.transparent,
+        borderWidth: 0,
+        borderRadius: 0,
+        backgroundColor: theme.colors.transparent
+      }
+    },
+    selected: {
+      true: {
+        borderColor: theme.colors.cyan[500],
+        backgroundColor: theme.colors.cyan[500],
+        borderWidth: 0
+      },
+      false: {
+        borderColor: theme.colors.gray[300],
+        borderWidth: 0
+      }
+    }
+  }
+})
+
+const StyledButton = ({ children, ...rest }) => {
+  return (
+    <Button {...rest}>
+      {children}
+    </Button>
+  )
+}
+
+export { StyledButton, Button }

package/src/package/card/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { View, Pressable } from 'react-native'
+import { styled } from '../styled'
+import { shadow } from '../utils'
+
+const Card = styled(View, {
+  base: {
+    flexDirection: 'column'
+  },
+  variants: {
+    shadow: shadow
+  }
+})
+
+const StyledCard = ({
+	pressable = false,
+	pressableProps,
+	children,
+	...rest
+}) => {
+  if (pressable) {
+    return (
+      <Pressable {...pressableProps}>
+        <Card {...rest}>
+          {children}
+        </Card>
+      </Pressable>
+    )
+  }
+
+  return (
+    <Card {...rest}>
+      {children}
+    </Card>
+  )
+}
+
+export { StyledCard }

package/src/package/checkBox/index.jsx

@@ -0,0 +1,80 @@
+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 CheckBox = styled(TouchableOpacity, {
+  base: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    borderRadius: 1,
+    borderColor: theme.colors.gray[700],
+    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[800]
+      }
+    },
+    checkedColor: color => {
+      if (!color) return
+      return {
+        backgroundColor: color,
+        borderColor: color
+      }
+    }
+  }
+})
+
+const StyledCheckBox = ({
+	onPress,
+	disabled = false,
+	checkedColor,
+	iconProps,
+	...rest
+}) => {
+  const [checked, setChecked] = useState(false)
+
+  const toggleCheckbox = () => {
+    setChecked(!checked)
+    onPress && onPress(!checked)
+  }
+
+  return (
+    <CheckBox
+      disabled={disabled}
+      checked={checked}
+      checkedColor={checked && checkedColor && checkedColor}
+      onPress={() => toggleCheckbox()}
+      {...rest}
+		>
+      {checked &&
+      <Icon
+        name='check'
+        {...iconProps}
+        color={theme.colors.gray[1]}
+        size={20}
+				/>}
+    </CheckBox>
+  )
+}
+
+export { StyledCheckBox }

package/src/package/cycle/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { YStack } from '../stack'
+import { theme } from '../theme'
+
+const StyledCycle = ({ children, ...rest }) => {
+  return (
+    <YStack
+      height={48}
+      width={48}
+      borderRadius={50}
+      borderWidth={1}
+      borderColor={theme.colors.gray[1]}
+      backgroundColor={theme.colors.gray[1]}
+      justifyContent='center'
+      alignItems='center'
+      {...rest}
+		>
+      {children}
+    </YStack>
+  )
+}
+
+export { StyledCycle }

package/src/package/dialog/index.jsx

@@ -0,0 +1,214 @@
+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,
+	...rest
+}) => {
+  const [show, setShow] = useState(visible)
+  const { title, description, cancel = 'Cancel', confirm = 'Confirm' } = 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()
+    }
+  }
+
+  return (
+    <Dialog
+      visible={show}
+      transparent={transparent}
+      animationType={animationType}
+      {...rest}
+		>
+      <YStack transparent flex={1} justifyContent='center' alignItems='center'>
+        <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.large}
+                fontWeight={theme.fontWeight.normal}
+							>
+                {cancel}
+              </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.large}
+                fontWeight={theme.fontWeight.normal}
+							>
+                {confirm}
+              </StyledText>
+            </StyledButton>
+          </XStack>
+        </YStack>
+      </YStack>
+    </Dialog>
+  )
+}
+
+const StyledOkDialog = ({
+	visible = false,
+	animationType = 'fade',
+	transparent = true,
+	...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'>
+        <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

@@ -0,0 +1,102 @@
+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, labelStyles, ...rest }) => {
+    const [open, setOpen] = useState(false)
+    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} {...rest} />
+            {
+                errorMessage && (
+                    <>
+                        <StyledSpacer marginVertical={1} />
+                        <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>
+                            {errorMessage}
+                        </StyledText>
+                    </>
+                )
+            }
+
+        </YStack>
+    )
+}
+
+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={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>
+                            {errorMessage}
+                        </StyledText>
+                    </>
+                )
+            }
+
+        </YStack>
+    )
+}
+
+export { StyledDropdown, StyledMultiDropdown }