@fixefy/fixefy-ui-components 0.0.42 → 0.0.43

package/src/FxProgressCounter/styles/progress_counter.styles.ts

@@ -1,40 +0,0 @@
-// @ts-nocheck
-import { styled } from '@mui/material/styles'
-
-import { Box, LinearProgress } from '@mui/material'
-
-export const BaseProgress = styled(LinearProgress)(({ theme }) => ({
-  borderRadius: '8px',
-  width: '70%',
-  position: 'absolute',
-  zIndex: 2,
-  height: 3,
-}))
-
-export const MainBar = styled(BaseProgress)(({ theme }) => ({
-  opacity: 1,
-}))
-
-export const BackgroundBar = styled(BaseProgress)(({ theme }) => ({
-  opacity: 0.2,
-}))
-
-export const ProgressContainer = styled(Box)(({ theme }) => ({
-  alignItems: 'center',
-  display: 'flex',
-  width: '100%',
-  margin: '8px 0',
-  position: 'relative',
-  justifyContent: 'center',
-}))
-
-export const Container = styled(Box)(({ theme }) => ({
-  width: 104,
-  height: 104,
-  minWidth: 104,
-  maxWidth: 104,
-  borderRadius: 8,
-  position: 'relative',
-  color: theme.palette.common.white,
-  backgroundColor: theme.palette.score.excellent,
-}))

package/src/FxScore/FxScore.tsx

@@ -1,75 +0,0 @@
-import React, { useEffect } from 'react'
-
-import { gql } from 'graphql-tag'
-import { useLazyQuery } from '@apollo/client'
-import { ScorePropsType } from './score_types'
-import { useStyles } from './styles/score.styles'
-import { getScoreColor, titleCase } from '@fixefy/fixefy-ui-utils'
-import { Box, CircularProgress, Skeleton, Typography } from '@mui/material'
-
-export const FxScore = ({ value, structure, filter, variant = 'box', hasLabel = true, title: propsTitle = 'score', Sizes: propsSizes = {}, ...rest }: ScorePropsType) => {
-  const Sizes = {
-    box: {
-      boxWidth: 104,
-      progressWidth: 68,
-    },
-    circle: { boxWidth: 40, progressWidth: 36 },
-    ...propsSizes,
-  }
-
-  const { extended, title } = structure || {}
-  const { gql_operation, object_path: objectPath, filter: structureFilter } = extended || {}
-
-  const gqlOperation = gql_operation ?? 'query GET_SCORE($where: Json) { score: chargesAvg( where: $where data: { fields: ["score"], fragment: "{ score }" } ) }'
-  let _filter = structureFilter
-
-  if (filter) {
-    _filter = {
-      ..._filter,
-      ...filter,
-    }
-  }
-
-  const [fetchData, { data, loading }] = useLazyQuery(gql(gqlOperation))
-
-  useEffect(() => {
-    if (!value && structure) {
-      fetchData({
-        variables: {
-          where: { ..._filter },
-        },
-      })
-    }
-  }, [])
-
-  const ScoreValue: number | undefined = data ? data[objectPath] * 100 : value
-
-  const _classes = useStyles({
-    scoreColor: getScoreColor(ScoreValue || 0),
-    variant,
-  })
-
-  return loading ? (
-    <Box className={_classes.container}>
-      <Skeleton animation="wave" variant="circular" width={68} height={68} />
-    </Box>
-  ) : (
-    <Box
-      className={_classes.container}
-      sx={{
-        width: Sizes[variant].boxWidth,
-        height: Sizes[variant].boxWidth,
-        minWidth: Sizes[variant].boxWidth,
-        maxWidth: Sizes[variant].boxWidth,
-        borderRadius: variant === 'box' ? '8px' : '50%',
-      }}
-    >
-      <CircularProgress size={Sizes[variant].progressWidth} variant="determinate" value={ScoreValue} color="inherit" thickness={2} className={_classes.mainCircle} {...rest} />
-      <CircularProgress size={Sizes[variant].progressWidth} variant="determinate" value={100} color="inherit" thickness={2} className={_classes.backgroundCircle} {...rest} />
-      <Box className={_classes.content}>
-        <Typography variant={variant === 'box' ? 'h5' : 'table'} className={_classes.scoreNumber}>{`${Math.round(Number(ScoreValue)) ?? 0}%`}</Typography>
-        {hasLabel && <Typography className={_classes.scoreText}>{titleCase(title ?? propsTitle)}</Typography>}
-      </Box>
-    </Box>
-  )
-}

package/src/FxScore/index.ts

@@ -1,2 +0,0 @@
-export { FxScore } from './FxScore'
-export type { ScorePropsType } from './score_types'

package/src/FxScore/score_types.d.ts

@@ -1,16 +0,0 @@
-export type ScorePropsType = {
-	value?: number;
-	title?: string;
-	structure?: any;
-	hasLabel?: boolean;
-	variant?: "circle" | "box";
-	[x: string]: any;
-	filter?: object;
-	Sizes?: {
-		box?: {
-			boxWidth: number;
-			progressWidth: number;
-		};
-		circle?: { boxWidth: number; progressWidth: number };
-	};
-};

package/src/FxScore/styles/score.styles.ts

@@ -1,42 +0,0 @@
-import { makeStyles } from '@mui/styles'
-import { ScorePaletteColorOptions, Theme } from '@mui/material/styles'
-
-interface ScoreStylesPropsType {
-  scoreColor: keyof ScorePaletteColorOptions
-  variant: 'box' | 'circle'
-}
-
-export const useStyles = makeStyles((theme: Theme) => ({
-  container: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    color: theme.palette.common.white,
-    backgroundColor: (props: ScoreStylesPropsType) => theme.palette.score[props.scoreColor],
-  },
-  content: {
-    position: 'absolute',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-  },
-  scoreNumber: {
-    color: theme.palette.common.white,
-  },
-  scoreText: {
-    ...theme.typography.table,
-    fontWeight: 400,
-    color: theme.palette.common.white,
-    opacity: 0.6,
-  },
-  mainCircle: {
-    position: 'absolute',
-    zIndex: 2,
-  },
-  backgroundCircle: {
-    position: 'absolute',
-    opacity: 0.2,
-  },
-}))

package/src/FxShowMore/FxShowMore.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-
-import { Typography } from '@mui/material'
-import { ShowMorePropsType } from './show_more_types'
-import { ShowMoreWrapper, ShowMoreBtn, ShowMoreIcon, StyledPopover, StyledDivider, StyledLabel } from './styles/show_more.styles'
-
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-
-export function FxShowMore({ items, label, children, title }: ShowMorePropsType) {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  const open = Boolean(anchorEl)
-  const id = open ? 'simple-popover' : undefined
-  return (
-    <ShowMoreWrapper>
-      {children}
-
-      <ShowMoreBtn onClick={handleClick}>
-        <ShowMoreIcon isOpen={open}>
-          <KeyboardArrowDownIcon />
-        </ShowMoreIcon>
-        {title ? title : 'SHOW MORE'}
-      </ShowMoreBtn>
-
-      <StyledPopover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center',
-        }}
-      >
-        <StyledLabel>
-          {label} ({items.length})
-        </StyledLabel>
-        <StyledDivider />
-        {items?.map((item, index) => (
-          <div key={index}>
-            <Typography variant="body1">{item}</Typography>
-            {index + 1 !== items.length && <StyledDivider />}
-          </div>
-        ))}
-      </StyledPopover>
-    </ShowMoreWrapper>
-  )
-}

package/src/FxShowMore/index.ts

@@ -1,2 +0,0 @@
-export { FxShowMore } from './FxShowMore'
-export type { ShowMorePropsType } from './show_more_types'

package/src/FxShowMore/show_more_types.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react'
-
-export type ShowMorePropsType = {
-  items: string[]
-  label: string
-  children: ReactNode
-  title?: string
-}

package/src/FxShowMore/styles/show_more.styles.ts

@@ -1,67 +0,0 @@
-// import React from 'react'
-import { styled } from '@mui/material/styles'
-
-import { Box, Popover, Divider, Typography, Button } from '@mui/material'
-
-interface ShowMoreBtnProps {
-  isOpen: boolean
-}
-export const ShowMoreWrapper = styled(Box)(({}) => ({
-  borderRadius: '8px',
-}))
-
-export const ShowMoreBtn = styled(Button)(({ theme }) => ({
-  ...theme.typography.button,
-  fontWeight: 600,
-  fontSize: 12,
-  textTransform: 'uppercase',
-  color: theme.palette.primary[800],
-  padding: 0,
-
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-}))
-
-export const ShowMoreIcon = styled(Box)<ShowMoreBtnProps>(({ theme, isOpen }) => ({
-  width: 16,
-  height: 16,
-  color: theme.palette.primary[800],
-  borderRadius: '50%',
-  border: '1px solid',
-
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-
-  marginRight: 8,
-  ['& svg']: {
-    width: 14,
-    height: 14,
-    color: theme.palette.primary[800],
-
-    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-    transition: 'all 0.5s',
-  },
-}))
-
-export const StyledPopover = styled(Popover)(({ theme }) => ({
-  ['.MuiPaper-root']: {
-    background: theme.palette.common.white,
-    boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.3)',
-    borderRadius: 8,
-    padding: 24,
-    marginTop: 8,
-
-    minWidth: 226,
-    maxWidth: 328,
-  },
-}))
-export const StyledDivider = styled(Divider)(({}) => ({
-  marginTop: 8,
-  marginBottom: 8,
-}))
-export const StyledLabel = styled(Typography)(({ theme }) => ({
-  ...theme.typography.overLineCaption,
-  color: '#8B9092',
-}))

package/src/FxSlider/FxSlider.tsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import { Slider as _Slider } from '@mui/material'
-
-import { SliderPropsType } from './slider_types'
-
-export function FxSlider(props: SliderPropsType) {
-  return <_Slider {...props} />
-}

package/src/FxSlider/index.ts

@@ -1,2 +0,0 @@
-export { FxSlider } from './FxSlider'
-export type { SliderPropsType } from './slider_types'

package/src/FxSlider/slider_types.d.ts

@@ -1,3 +0,0 @@
-export type SliderPropsType = {
-  [x: string]: any
-}

package/src/FxStatisticsBar/FxStatisticsBar.tsx

@@ -1,112 +0,0 @@
-import React, { useEffect } from 'react'
-
-import { gql } from 'graphql-tag'
-import { useLazyQuery } from '@apollo/client'
-import { Box, Skeleton } from '@mui/material'
-import { titleCase } from '@fixefy/fixefy-ui-utils'
-import { getCurrency } from '@fixefy/fixefy-ui-utils'
-import { useStyles } from './styles/statistics.styles'
-
-import { StatisticsPropsType } from './statistics_bar_types'
-
-export function FxStatisticsBar({ value, type = 'currency', label, structure, collapsed, filter }: StatisticsPropsType) {
-  const _classes = useStyles()
-  const { extended, input_type, title } = structure || {}
-  const { gql_operation, object_path, filter: structurefilter, variables } = extended || {}
-
-  const gqlOperation = gql_operation ?? 'query GET_SCORE($where: Json) { score: chargesAvg( where: $where data: { fields: ["score"], fragment: "{ score }" } ) }'
-
-  let _filter = structurefilter
-
-  if (filter) {
-    _filter = {
-      ..._filter,
-      ...filter,
-    }
-  }
-
-  const [fetchData, { data, loading }] = useLazyQuery(gql(gqlOperation))
-
-  const convertValue = (value: any) => {
-    let newValue = ''
-    let sign = ''
-    if (value < 1000) {
-      newValue = value
-    } else if (value >= 1000 && value < 1000000) {
-      newValue = (value / 1000).toFixed(2)
-      sign = 'K'
-    } else {
-      newValue = (value / 1000000).toFixed(2)
-      sign = 'M'
-    }
-
-    return (
-      new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: getCurrency(null)?.code.toUpperCase() || 'USD',
-      }).format(Number(newValue)) + sign
-    )
-  }
-
-  const checkIsCollapsed = () => {
-    let collapsedFromStructureIsDefined = false
-
-    if (variables && variables.collapsed !== undefined && variables.collapsed !== null) {
-      collapsedFromStructureIsDefined = true
-    }
-
-    if (collapsedFromStructureIsDefined) {
-      return variables.collapsed
-    } else {
-      return collapsed
-    }
-  }
-
-  const getValue = (value: any) => {
-    const statisticsType = input_type?.value || type
-    switch (statisticsType) {
-      case 'percentage': {
-        return new Intl.NumberFormat('en-US', {
-          style: 'percent',
-        }).format(Number(value))
-      }
-      case 'currency': {
-        if (checkIsCollapsed()) {
-          return convertValue(value)
-        } else {
-          return new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: getCurrency(null)?.code.toUpperCase() || 'USD',
-          }).format(Number(value))
-        }
-      }
-      default: 
-        return value
-    }
-  }
-
-  useEffect(() => {
-    if (!value && structure) {
-      fetchData({
-        variables: {
-          where: { ..._filter },
-        },
-      })
-    }
-  }, [])
-
-  const statisticsTitle = label ? label : title
-  const statisticsValue = data && data[object_path] != null ? getValue(data[object_path]) : getValue(value)
-
-  return loading ? (
-    <Box sx={{ width: 100 }}>
-      <Skeleton animation="wave" width={100} height={30} />
-      <Skeleton animation="wave" width={100} height={20} />
-    </Box>
-  ) : (
-    <div className={_classes.container}>
-      <span className={variables?.contrast ? _classes.contrastValue : _classes.value}>{statisticsValue}</span>
-      <span className={variables?.contrast ? _classes.contrastLabel : _classes.label}>{titleCase(statisticsTitle)}</span>
-    </div>
-  )
-}

package/src/FxStatisticsBar/index.ts

@@ -1,2 +0,0 @@
-export { FxStatisticsBar } from './FxStatisticsBar'
-export type { StatisticsPropsType } from './statistics_bar_types'

package/src/FxStatisticsBar/statistics_bar_types.d.ts

@@ -1,8 +0,0 @@
-export type StatisticsPropsType = {
-  value?: number
-  type?: 'currency' | 'percentage'
-  collapsed?: boolean
-  label?: string
-  structure?: any
-  filter?: object
-}

package/src/FxStatisticsBar/styles/statistics.styles.ts

@@ -1,41 +0,0 @@
-import { makeStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
-
-import '@fixefy/fixefy-ui-utils'
-
-export const useStyles = makeStyles((theme: Theme) => ({
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    minHeight: 56,
-  },
-  contrastLabel: {
-    fontWeight: 'normal',
-    fontSize: 11,
-    lineHeight: '16px',
-    letterSpacing: '0.1px',
-    opacity: 0.7,
-    color: theme.palette.common.white,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  contrastValue: {
-    fontWeight: 600,
-    fontSize: 19,
-    lineHeight: '28px',
-    letterSpacing: '0.15px',
-    color: theme.palette.common.white,
-  },
-  label: {
-    ...theme.typography.table,
-    color: theme.palette.statistics.label,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  value: {
-    ...theme.typography.h5,
-    color: theme.palette.statistics.value,
-  },
-}))

package/src/FxStatusBar/FxStatusBar.tsx

@@ -1,66 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { Stack } from '@mui/material'
-import { FxChip } from '../FxChip'
-import { statuses } from './helpers/constants'
-import { titleCase } from '@fixefy/fixefy-ui-utils'
-import { StatusBarPropsType } from './status_bar_types'
-import { StatusBarCard, StatusBarTitle, StatusChipStyled } from './styles/statusBar.styles'
-
-export const FxStatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' }: StatusBarPropsType) => {
-  const [selectedStatus, setSelectedStatus] = useState<string[]>([])
-  const [searchValue] = useState<string>('')
-
-  useEffect(() => {
-    if (defaultStatus) {
-      typeof defaultStatus === 'string' ? setSelectedStatus([defaultStatus]) : setSelectedStatus(defaultStatus)
-    } else {
-      setSelectedStatus(['all'])
-    }
-  }, [defaultStatus])
-
-  const onStatusClick = (status: string) => {
-    if (status === 'all') {
-      setSelectedStatus(() => {
-        if (selectedStatus.includes(status)) {
-          return []
-        } else {
-          return ['all']
-        }
-      })
-    } else {
-      setSelectedStatus((prevState) => {
-        if (selectedStatus.includes(status)) {
-          const rv = prevState.filter((_status) => _status !== status && _status !== 'all')
-          return rv.length == 0 ? ['all'] : rv
-        } else {
-          const rv = prevState.filter((_status) => _status !== status && _status !== 'all')
-          return [...rv, status]
-        }
-      })
-    }
-  }
-
-  useEffect(() => {
-    onChangeStatus(selectedStatus)
-  }, [selectedStatus])
-
-  useEffect(() => {
-    onSearch && onSearch(searchValue)
-  }, [searchValue])
-
-  const __options: any = options ?? statuses
-
-  return (
-    <StatusBarCard>
-      {title && <StatusBarTitle style={{ marginRight: '8px' }}>{titleCase(title)}</StatusBarTitle>}
-
-      <Stack direction="row" spacing={1}>
-        <StatusChipStyled onClick={() => onStatusClick('all')} label="All" variant={selectedStatus.includes('all') ? 'filled' : 'outlined'} />
-        {Object.keys(__options).map((key: string, index: number) => {
-          return <FxChip onClick={() => onStatusClick(__options[key])} key={index} label={titleCase(key)} variant={chipsVariant} status={selectedStatus.includes(__options[key]) ? __options[key] : ''} />
-        })}
-      </Stack>
-    </StatusBarCard>
-  )
-}

package/src/FxStatusBar/helpers/constants.ts

@@ -1,12 +0,0 @@
-export const statuses = {
-  Declined: 'declined',
-  Pending: 'pending',
-  Approved: 'approved',
-  Active: 'active',
-  Challenge: 'challenged',
-  in_review: 'in_review',
-  Discrepancy: 'discrepancy',
-  no_pricing: 'no_pricing',
-  in_progress: 'in_progress',
-  Duplicated: 'duplicated',
-}

package/src/FxStatusBar/index.ts

@@ -1,2 +0,0 @@
-export { FxStatusBar } from './FxStatusBar'
-export { StatusBarPropsType } from './status_bar_types'

package/src/FxStatusBar/status_bar_types.d.ts

@@ -1,14 +0,0 @@
-import { EntityStatusType, ChargeStateType, InvoiceStateType, RecoStateType } from '@fixefy/fixefy-ui-utils'
-
-export type StatusBarPropsType = {
-  onSearch?: (searchValue: string) => void
-  onChangeStatus: (statuses: string[]) => void
-  defaultStatus?: string | string[]
-  title?: string
-  options?: Options
-  chipsVariant?: 'outlined' | 'filled'
-}
-
-type Options = {
-  [x: string]: keyof EntityStatusType | keyof ChargeStateType | keyof InvoiceStateType | keyof RecoStateType | string
-}

package/src/FxStatusBar/styles/statusBar.styles.tsx

@@ -1,67 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { Box, Chip as MuiChip } from "@mui/material";
-
-export const StatusBarCard = styled(Box)(({ theme }) => ({
-	background: theme.palette.common.white,
-	borderRadius: 4,
-	padding: 16,
-	boxShadow: "0px 0px 10px rgba(86, 135, 147, 0.3)",
-	display: "flex",
-	alignItems: "center",
-	width: "fit-content",
-}));
-
-export const StatusBarTitle = styled("span")(({ theme }) => ({
-	...theme.typography.body1,
-	color: theme.palette.common.black,
-}));
-
-export const StatusChipStyled = styled(MuiChip)(({ theme, variant }) => {
-	let backgroundColor, border, labelColor;
-
-	if (variant === "filled") {
-		backgroundColor = theme.palette.primary.light;
-		labelColor = theme.palette.common.white;
-	} else {
-		backgroundColor = theme.palette.common.white;
-	}
-	border = "#F0F0F0";
-
-	return {
-		height: 20,
-		minWidth: 34,
-		maxWidth: 120,
-		["& .MuiChip-label"]: {
-			fontSize: 9,
-			fontWeight: 600,
-			lineHeight: "12px",
-			color: labelColor ? labelColor : theme.palette["statistics"].label,
-		},
-		backgroundColor,
-		border: `1px solid ${border}`,
-	};
-});
-
-// export const StatusBarSearchWrapper = styled("div")(({ theme }) => ({
-//   position: "relative",
-//   display: "flex",
-//   alignItems: "center",
-//   ["& input"]: {
-//     ...theme.typography.body1,
-//     color: theme.palette.statistics.label,
-//     paddingLeft: 40,
-//     width: "100%",
-//   },
-//   ["& svg"]: {å
-//     position: "absolute",
-//     left: 16,
-//     color: theme.palette.primary.light,
-//   },
-// }));
-
-// export const StatusBarSearchBar = styled("input")(({ theme }) => ({
-//   background: theme.palette.common.white,
-//   border: "1px solid #C6DDE2",
-//   borderRadius: 4,
-//   height: 36,
-// }));