@fixefy/fixefy-ui-components 0.0.42 → 0.0.44

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.jsx

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonStyled = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-exports.ButtonStyled = (0, styles_1.styled)(material_1.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/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'

package/src/FxModal/FxModal.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { ModalPropsType } from '.'
-import { Box, DialogContent } from '@mui/material'
-import { FxDialog, DialogActionsStyled, StyledDialogTitle, StyledInlineDialogTitle } from './styles/modal.style'
-
-//////////////
-
-const FxDialogTitle = (props: any) => {
-  const { children, ...other } = props
-  return <StyledDialogTitle {...other}>{children}</StyledDialogTitle>
-}
-
-const FxInlineDialogTitle = (props: any) => {
-  const { children, ...other } = props
-  return <StyledInlineDialogTitle {...other}>{children}</StyledInlineDialogTitle>
-}
-
-const IconTitle = ({ icon, title, inline }: { icon: string; title?: string; inline: boolean }) => {
-  const renderObject = inline ? (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      {icon}
-      <FxInlineDialogTitle id="customized-dialog-title">{title}</FxInlineDialogTitle>
-    </Box>
-  ) : (
-    <>
-      {icon && icon}
-      {title && <FxDialogTitle id="customized-dialog-title">{title}</FxDialogTitle>}
-    </>
-  )
-
-  return renderObject
-}
-
-export const FxModal = ({ isOpen = false, isIconTitleInline = false, icon, onClose, children, title, actions, ...rest }: ModalPropsType) => {
-  return (
-    <div>
-      <FxDialog {...rest} fullWidth onClose={onClose} aria-labelledby="customized-dialog-title" open={isOpen}>
-        <IconTitle icon={icon} title={title} inline={isIconTitleInline} />
-        <DialogContent>{children}</DialogContent>
-        {actions && <DialogActionsStyled>{actions}</DialogActionsStyled>}
-      </FxDialog>
-    </div>
-  )
-}

package/src/FxModal/index.ts

@@ -1,2 +0,0 @@
-export { FxModal } from './FxModal'
-export type { ModalPropsType } from './modal_types.d'

package/src/FxModal/modal_types.d.ts

@@ -1,10 +0,0 @@
-export interface ModalPropsType {
-  actions?: any
-  children: any
-  icon?: any
-  isIconTitleInline?: boolean
-  isOpen: boolean
-  onClose: (e: any) => void
-  title?: string
-  [x: string]: any
-}

package/src/FxModal/styles/modal.style.tsx

@@ -1,40 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { Dialog, DialogActions, DialogTitle } from '@mui/material'
-
-export const FxDialog = styled(Dialog)(() => ({
-  '& .MuiDialog-paper': {
-    borderRadius: 8,
-    padding: '24px',
-    // minWidth: "370px",
-    maxWidth: 'fit-content',
-    // height: "262px",
-  },
-  '& .MuiDialogContent-root': {
-    padding: 0,
-  },
-  // "& .MuiDialogTitle-root": {
-  //   margin: "8px 0",
-  // },
-  '& .MuiDialogActions-root': {
-    margin: '24px 0 0 0',
-    padding: 0,
-  },
-}))
-
-export const StyledDialogTitle = styled(DialogTitle)(() => ({
-  fontSize: 14,
-  fontWeight: 900,
-  margin: '8px 0',
-}))
-
-export const StyledInlineDialogTitle = styled(DialogTitle)(() => ({
-  fontSize: 19,
-  fontWeight: 600,
-  color: '#568793',
-  margin: '8px 16px',
-  padding: 0,
-}))
-
-export const DialogActionsStyled = styled(DialogActions)(({}) => ({
-  justifyContent: 'flex-start',
-}))