@fixefy/fixefy-ui-components 0.0.41 → 0.0.43

package/src/FxAsyncDropdown/helpers/helpers.ts

@@ -1,105 +0,0 @@
-export const getJPart = (j: any, jsonPath: string, defaultValue?: any): any => {
-  // input check - if key is invalid - return error
-  if (isObjectValid(j) === false) return defaultValue
-
-  // convert indexes to properties
-  jsonPath = jsonPath.replace(/\[(\w+)\]/g, '.$1')
-
-  // strip a leading dot
-  jsonPath = jsonPath.replace(/^\./, '')
-
-  // split path by '.'
-  let _isArrayValid = false
-  let _isStringValid = false
-  let currentPathPart: any
-  let isLoop = true
-  
-  const pathParts = jsonPath.split('.')
-
-  for (let i = 0, n = pathParts.length; isLoop && i < n; ++i) {
-    currentPathPart = pathParts[i]
-    _isStringValid = isStringValid(j)
-    _isArrayValid = isArrayValid(j)
-
-    if (_isStringValid === true || _isArrayValid === true) {
-      if (_isStringValid === true) {
-        j = JSON.parse(j)
-      } else {
-        j = j.reduce((acc: Array<any>, cur: any) => {
-          const innerJ = getJPart(
-            cur,
-            pathParts.slice(i).join("."),
-            defaultValue,
-          );
-
-          if (isArrayValid(innerJ)) {
-            acc.push(...innerJ)
-          } else {
-            acc.push({
-              ...innerJ,
-              value: innerJ._id,
-            })
-          }
-
-          return acc
-        }, [])
-
-        isLoop = false
-      }
-    } else {
-      if (currentPathPart in j) {
-        j = j[currentPathPart]
-      } else {
-        // if something in the process failed:
-        //  1. set the rv as the default value
-        //  2. stop the loop`
-        j = defaultValue
-        isLoop = false
-      }
-    }
-  }
-
-  return j
-}
-
-export const isArrayValid = (arr: any[], minLength: number = 1, maxLength: number = 0): boolean => {
-  let rv: boolean =
-    isObjectValid(arr) &&
-    arr.length >= minLength &&
-    //arr instanceof Array
-    Object.prototype.toString.call(arr) == '[object Array]'
-
-  if (maxLength > 0) {
-    rv = rv && arr.length <= maxLength
-  }
-
-  return rv
-}
-
-export const isObjectValid = (obj: any, isCheckKeys: boolean = false): boolean => {
-  let rv: boolean = typeof obj !== 'undefined' && obj !== null
-
-  if (isCheckKeys) {
-    rv = rv && Object.keys(obj).length > 0
-  }
-
-  return rv
-}
-
-export const isStringValid = (str: string, minLength: number | null = null, maxLength: number | null = null, isValidateType: boolean = true): boolean => {
-  let rv = isObjectValid(str) && str.toString().length > 0 && (isValidateType ? typeof str === 'string' : true)
-
-  if (rv === false) return false
-
-  if (minLength && isNaN(minLength) === false && minLength > 0) {
-    rv = rv && str.toString().length >= minLength
-  }
-
-  if (rv === false) return false
-
-  if (maxLength && isNaN(maxLength) === false && maxLength > 0) {
-    rv = rv && str.toString().length <= maxLength
-  }
-
-  return rv
-}

package/src/FxAsyncDropdown/index.ts

@@ -1,2 +0,0 @@
-export { FxAsyncDropdown } from './FxAsyncDropdown'
-export type { AsyncDropdownPropsType } from './async_dropdown_types'

package/src/FxAsyncDropdown/styles/dropdown.styles.tsx

@@ -1,162 +0,0 @@
-import { styled } from '@mui/material/styles'
-
-export const Root: any = styled('div')(() => ({
-  color: 'rgba(0,0,0,.85)',
-  fontSize: 14,
-}))
-
-export const Label: any = styled('label')(() => ({
-  padding: '0 0 4px',
-  lineHeight: '1.5',
-  display: 'block',
-}))
-
-export const Loading: any = styled('div')(() => ({
-  width: 30,
-  height: 30,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  ['& span']: {
-    width: '20px !important',
-    height: '20px !important',
-  },
-}))
-
-export const InputWrapper: any = styled('div')<any>(({ theme, hasValue, disabled }) => {
-  const defaultBorder = `1px solid ${theme.palette.greyscale[200]}`
-  const hasValueBorder = `1px solid ${theme.palette.primary[500]}`
-  const disabledBorder = `1px solid ${theme.palette.greyscale[200]}`
-  const activeBorder = `1px solid ${theme.palette.primary[500]}`
-
-  return {
-    border: disabled ? disabledBorder : hasValue ? hasValueBorder : defaultBorder,
-    backgroundColor: theme.palette.common.white,
-    borderRadius: 4,
-    padding: 1,
-    display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    cursor: disabled ? 'not-allowed' : 'pointer',
-
-    ['&:hover']: {
-      border: disabled ? disabledBorder : activeBorder,
-      borderRadius: 4,
-    },
-    ['&:focus']: {
-      border: disabled ? disabledBorder : activeBorder,
-      borderRadius: 4,
-    },
-    ['& > svg']: {
-      color: disabled ? theme.palette.greyscale[300] : theme.palette.primary['500'],
-      marginRight: 8,
-    },
-    ['& input']: {
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      backgroundColor: theme.palette.common.white,
-      color: theme.palette.typography.title,
-      height: 36,
-      boxSizing: 'border-box',
-      padding: '4px 6px 4px 16px',
-      width: 0,
-      minWidth: 30,
-      flexGrow: 1,
-      border: 0,
-      margin: 0,
-      outline: 0,
-
-      ...theme.typography.body1,
-      lineHeight: '20px',
-
-      ['& ::placeholder']: {
-        color: hasValue ? theme.palette.typography.title : theme.palette.greyscale[400],
-      },
-    },
-  }
-})
-
-export const Listbox: any = styled('ul')(({ theme }) => ({
-  margin: 0,
-  padding: 0,
-  position: 'absolute',
-  listStyle: 'none',
-  backgroundColor: theme.palette.common.white,
-  overflow: 'auto',
-  maxHeight: 250,
-  minHeight: 250,
-  borderRadius: 4,
-  boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
-  zIndex: 1,
-  maxWidth: 270,
-  minWidth: 270,
-  top: 48,
-  left: -42,
-
-  ['& div']: {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-}))
-
-export const StyledClose: any = styled('div')(() => ({
-  position: 'absolute',
-  bottom: 0,
-}))
-
-export const StyledListBox: any = styled('ul')(({ theme, hasClearBtn }: any) => ({
-  // width: 300,
-  margin: 0,
-  padding: 0,
-  // position: 'absolute',
-  listStyle: 'none',
-  backgroundColor: theme.palette.common.white,
-  overflow: 'auto',
-  maxHeight: hasClearBtn ? 190 : 230,
-  zIndex: 1,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflowX: 'hidden',
-  paddingTop: 8,
-  paddingBottom: 8,
-  maxWidth: 270,
-  minWidth: 270,
-
-  ['& div']: {
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-  ['& li']: {
-    paddingRight: 16,
-    paddingLeft: 16,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    height: 40,
-    cursor: 'pointer',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    maxWidth: 270,
-    minWidth: 270,
-  },
-
-  ['& li:hover']: {
-    backgroundColor: '#F6F9FA',
-  },
-
-  ["& li[aria-selected='true']"]: {
-    fontWeight: 900,
-    backgroundColor: '#F6F9FA',
-  },
-
-  ["& li[data-focus='true']"]: {
-    backgroundColor: '#F6F9FA',
-    cursor: 'pointer',
-
-    ['& svg ']: {
-      color: 'currentColor',
-    },
-  },
-}))

package/src/FxAvatar/FxAvatar.tsx

@@ -1,50 +0,0 @@
-import React, { useState } from 'react'
-import { titleCase } from '@fixefy/fixefy-ui-utils'
-import { stringToColor } from './helpers/stringToColor'
-
-import { AvatarWrapper, StyledAvatar, StyledMoreAvatar, AvatarGroup, EditIcon, FxTooltip } from './styles/avatar.styles'
-
-import { AvatarPropsType } from './avatar_types'
-
-type BackgroundColorsType = {
-  [key: string]: string
-}
-
-export function FxAvatar({ users, max = 5, isEditable = false, onEdit }: AvatarPropsType) {
-  const [backgroundcolors, setBackgroundColors] = useState({} as BackgroundColorsType)
-
-  const avatars = users.length > max ? users.slice(0, max - 1) : users
-  const isMoreThanMax = users.length > max
-
-  return (
-    <AvatarWrapper>
-      <AvatarGroup>
-        {avatars.map((user, index) => {
-          const userName = user.first_name + ' ' + user.last_name
-          return (
-            <FxTooltip key={index} title={titleCase(userName)}>
-              <StyledAvatar
-                sx={{
-                  backgroundColor: backgroundcolors[userName]
-                    ? backgroundcolors[userName]
-                    : stringToColor(userName, (color) => {
-                        setBackgroundColors({
-                          ...backgroundcolors,
-                          [userName]: color,
-                        })
-                      }),
-                }}
-                src={user.image_url}
-                alt={userName}
-              >
-                {titleCase(userName.slice(0, 1))}
-              </StyledAvatar>
-            </FxTooltip>
-          )
-        })}
-        {isMoreThanMax && <StyledMoreAvatar>{`+${users.length - max + 1}`}</StyledMoreAvatar>}
-      </AvatarGroup>
-      {isEditable && <EditIcon onClick={onEdit && onEdit} />}
-    </AvatarWrapper>
-  )
-}

package/src/FxAvatar/avatar_types.d.ts

@@ -1,11 +0,0 @@
-export type AvatarPropsType = {
-  users: {
-    first_name: string
-    last_name: string
-    image_url: string
-    [x: string]: any
-  }[]
-  max?: number
-  isEditable?: boolean
-  onEdit?: () => void
-}

package/src/FxAvatar/helpers/stringToColor.ts

@@ -1,16 +0,0 @@
-export const stringToColor = (string: string, callBack?: (color: string) => void) => {
-  let hash = 0
-  let color = '#'
-  /* eslint-disable no-bitwise */
-  for (let i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash)
-  }
-
-  for (let i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff
-    color += `00${value.toString(16)}`.substr(-2)
-  }
-  /* eslint-enable no-bitwise */
-  callBack && callBack(color)
-  return color
-}

package/src/FxAvatar/index.ts

@@ -1,2 +0,0 @@
-export { FxAvatar } from './FxAvatar'
-export type { AvatarPropsType } from './avatar_types'

package/src/FxAvatar/styles/avatar.styles.tsx

@@ -1,82 +0,0 @@
-import React from "react";
-
-import { styled } from "@mui/material/styles";
-import { Avatar as _Avatar } from "@mui/material";
-import { TooltipProps, tooltipClasses } from "@mui/material";
-
-import Tooltip from "@mui/material/Tooltip";
-import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
-
-import "@fixefy/fixefy-ui-utils";
-
-export const AvatarWrapper: any = styled("div")(() => ({
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
-	flexDirection: "row",
-}));
-
-export const AvatarGroup: any = styled("div")(() => ({
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
-	flexDirection: "row",
-
-	"&>:first-of-type": {
-		marginLeft: 0,
-	},
-}));
-
-export const StyledAvatar: any = styled(_Avatar)(({ theme }) => ({
-	width: 32,
-	height: 32,
-	border: `2px solid ${theme.palette.common.white}`,
-	marginLeft: "-8px",
-
-	fontFamily: "Open Sans",
-	fontStyle: "normal",
-	fontWeight: "normal",
-	fontSize: 14,
-	lineHeight: "20px",
-	letterSpacing: "0.15px",
-}));
-
-export const StyledMoreAvatar: any = styled(_Avatar)(({ theme }) => ({
-	width: 32,
-	height: 32,
-	border: `2px solid ${theme.palette.common.white}`,
-	marginLeft: "-8px",
-
-	fontFamily: "Open Sans",
-	fontStyle: "normal",
-	fontWeight: "normal",
-	fontSize: 11,
-	lineHeight: "16px",
-	letterSpacing: "0.1px",
-	color: theme.palette.greyscale.dark,
-	backgroundColor: theme.palette.greyscale.light,
-}));
-
-export const EditIcon: any = styled(EditOutlinedIcon)(({ theme }) => ({
-	cursor: "pointer",
-	color: theme.palette.primary.light,
-}));
-
-export const FxTooltip = styled(({ className, ...props }: TooltipProps) => (
-	<Tooltip {...props} placement="top" arrow classes={{ popper: className }} />
-))(({ theme }) => ({
-	[`& .${tooltipClasses.arrow}`]: {
-		color: theme.palette.primary.main,
-	},
-	[`& .${tooltipClasses.tooltip}`]: {
-		backgroundColor: theme.palette.primary.main,
-		padding: 12,
-		fontFamily: "Open Sans",
-		fontStyle: "normal",
-		fontWeight: "normal",
-		fontSize: 14,
-		lineHeight: "20px",
-		textAlign: "center",
-		letterSpacing: "0.15px",
-	},
-}));

package/src/FxButton/FxButton.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import { ButtonStyled } from './styles/button.styles'
-
-export type ButtonPropsType = {
-  children: any
-  [x: string]: any
-}
-
-export function FxButton({ type = 'primary', children, ...rest }: ButtonPropsType) {
-  return <ButtonStyled {...rest}>{children}</ButtonStyled>
-}

package/src/FxButton/index.ts

@@ -1,2 +0,0 @@
-export { FxButton } from './FxButton'
-export type { ButtonPropsType } from './FxButton'

package/src/FxButton/styles/button.styles.tsx

@@ -1,14 +0,0 @@
-import { Button } from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-export const ButtonStyled = styled(Button)(({ theme, variant }) => {
-  const border = variant === 'text' ? `0px solid #0000` : `1px solid ${theme.palette.primary.main}`
-  return {
-    border,
-    minHeight: '40px',
-    borderRadius: '100px',
-    minWidth: '87px',
-    fontSize: '12px',
-    letterSpacing: '0.5px',
-  }
-})

package/src/FxChip/FxChip.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { ChipPropsType } from './chip_types'
-import { getScoreColor, titleCase } from '@fixefy/fixefy-ui-utils'
-import { StatusChipStyled, ScoreChipStyled } from './styles/chip.styles'
-
-export const FxChip = (props: ChipPropsType) => {
-  const { status, label, type = 'status', scoreValue = 0, minimized = false, variant = 'outlined', onClick } = props
-  const newStatus = status ? (status as unknown as string).split(' ').join('_') : status
-
-  const value = typeof label === 'number' ? label.toFixed(2) : (label as string)
-
-  return type === 'status' ? <StatusChipStyled status={newStatus as any} label={titleCase(value)} variant={variant} onClick={onClick} /> : <ScoreChipStyled score={scoreValue} scoreLabel={getScoreColor(scoreValue) as any} label={titleCase(value)} minimized={minimized} variant={variant} onClick={onClick} />
-}

package/src/FxChip/chip_types.d.ts

@@ -1,34 +0,0 @@
-import { EntityStatusType, ChargeStateType, InvoiceStateType, RecoStateType, ScoreType } from '@fixefy/fixefy-ui-utils'
-
-export type ChipType = {
-  score: string
-  status: EntityStatusType | ChargeStateType | InvoiceStateType | RecoStateType
-}
-
-export type ChipVariant = {
-  outlined: string
-  filled: string
-}
-
-export interface ChipPropsType {
-  status?: EntityStatusType | ChargeStateType | InvoiceStateType | RecoStateType
-  label: string | number
-  variant?: 'outlined' | 'filled'
-  type?: ChipType
-  scoreValue?: number
-  minimized?: boolean
-  [x: string]: any
-  onClick?: (e: any) => void
-}
-
-export interface ScoreProps {
-  score: number
-  scoreLabel: ScoreType
-  minimized: boolean
-}
-
-export interface StatusProps {
-  amount?: number
-  label: string
-  status: EntityStatusType | ChargeStateType | InvoiceStateType | RecoStateType
-}

package/src/FxChip/index.ts

@@ -1,2 +0,0 @@
-export { FxChip } from './FxChip'
-export type { ChipPropsType } from './chip_types'

package/src/FxChip/styles/chip.styles.tsx

@@ -1,51 +0,0 @@
-import { Chip as MuiChip } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { ScoreProps, StatusProps } from '../chip_types.d'
-
-import '@fixefy/fixefy-ui-utils'
-
-export const ScoreChipStyled = styled(MuiChip)<ScoreProps>(({ theme, scoreLabel, minimized }) => {
-  const color = theme.palette.score[scoreLabel as any]
-
-  return {
-    height: 20,
-    minWidth: minimized ? 35 : 80,
-    maxWidth: 120,
-    backgroundColor: color,
-    ['& .MuiChip-label']: {
-      color: theme.palette.common.white,
-      fontSize: 9,
-      fontWeight: 600,
-      paddingLeft: minimized ? 0 : 'inherit',
-      paddingRight: minimized ? 0 : 'inherit',
-    },
-  }
-})
-
-export const StatusChipStyled = styled(MuiChip)<StatusProps>(({ theme, status, variant }) => {
-  let backgroundColor, border, labelColor
-
-  if (theme.palette.status[status as any]) {
-    if (variant === 'filled') {
-      backgroundColor = theme.palette.status[status as any]['border']
-      labelColor = theme.palette.common.white
-    } else {
-      backgroundColor = theme.palette.status[status as any]['background']
-    }
-    border = theme.palette.status[status as any]['border']
-  }
-
-  return {
-    height: 20,
-    minWidth: 80,
-    maxWidth: 120,
-    ['& .MuiChip-label']: {
-      fontSize: 9,
-      fontWeight: 600,
-      lineHeight: '12px',
-      color: labelColor ? labelColor : theme.palette.statistics.label,
-    },
-    backgroundColor,
-    border: `1px solid ${border}`,
-  }
-})

package/src/FxIcon/FxIcon.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import { IconPropsType } from './icon_types'
-import { DynamicIcon, LazyIcon } from './content'
-import { toPascalCase } from '@fixefy/fixefy-ui-utils'
-
-import * as MUIIcons from '@mui/icons-material'
-
-// importing all the local icons - in the future should be removed to CDN server
-const iconsModule: any[] = []
-
-export const FxIcon = ({ className, color, fontSize, icon, height, sx, width }: IconPropsType) => {
-  if (!icon) throw Error('Provide a property `icon`')
-
-  let rv: JSX.Element
-
-  const splittedPath = icon.split('/')
-  const iconWithoutPath: any = toPascalCase(splittedPath[splittedPath.length - 1])
-
-  // const name = toPascalCase(icon)
-
-  if (iconsModule[iconWithoutPath]) {
-    rv = <DynamicIcon icon={iconsModule[iconWithoutPath]} sx={sx} />
-    // @ts-ignore
-  } else if (MUIIcons[iconWithoutPath]) {
-    // @ts-ignore
-    const MUIIcon = MUIIcons[iconWithoutPath]
-    rv = <MUIIcon className={className} color={color} sx={{ ...sx, fontSize }} />
-  } else {
-    rv = <LazyIcon icon={icon} sx={sx} width={width} height={height} />
-  }
-
-  return rv
-}

package/src/FxIcon/content/dynamic_icon.tsx

@@ -1,3 +0,0 @@
-import React from 'react'
-// @ts-ignore
-export const DynamicIcon = ({ icon: IconComponent, sx }) => (IconComponent ? <IconComponent sx={sx} /> : null)

package/src/FxIcon/content/index.ts

@@ -1,2 +0,0 @@
-export { DynamicIcon } from "./dynamic_icon";
-export { LazyIcon } from "./lazy_icon";

package/src/FxIcon/content/lazy_icon.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from 'react'
-
-import { SxProps } from '@mui/system'
-import { Avatar, Typography } from '@mui/material'
-import { imageLoader, toInitials } from '@fixefy/fixefy-ui-utils'
-
-import Image from 'next/image'
-
-// importing all the local icons - in the future should be removed to CDN server
-// const iconsModule = []
-
-export const LazyIcon = ({
-  icon,
-  root,
-  width,
-  height,
-}: {
-  icon: string
-  root?: string
-  width?: number | `${number}`
-  height?: number | `${number}`
-  sx?: SxProps
-}) => {
-  const [isError, setError] = useState(false)
-  const handleError = (isError: boolean) => setError(isError)
-
-  if (isError) {
-    return (
-      <Avatar>
-        <Typography fontSize={29} fontWeight={600}>
-          {toInitials(icon)}
-        </Typography>
-      </Avatar>
-    )
-  }
-
-  return (
-    <Image
-      alt={icon}
-      width={width}
-      height={height}
-      loader={(obj) => imageLoader({ ...obj, root })}
-      src={icon}
-      onLoad={() => handleError(false)}
-      onError={() => handleError(true)}
-    />
-  )
-}

package/src/FxIcon/icon_types.d.ts

@@ -1,10 +0,0 @@
-export type IconPropsType = {
-  className?: string
-  color?: unknown
-  fontSize?: string | number
-  height?: `${number}` | number
-  icon: string
-  sx?: any
-  root: string
-  width?: `${number}` | number
-}

package/src/FxIcon/index.ts

@@ -1,2 +0,0 @@
-export { FxIcon } from './FxIcon'
-export { IconPropsType } from './icon_types'