@fixefy/fixefy-ui-components 0.0.42 → 0.0.44

package/src/FxStyledComponents/index.tsx

@@ -1,196 +0,0 @@
-import React, { ReactElement, useMemo } from 'react'
-
-import { styled } from '@mui/material/styles'
-import { titleCase } from '@fixefy/fixefy-ui-utils'
-import { Paper, Link as MuiLink, Typography, Box, Grid } from '@mui/material'
-
-export const Card = styled(Paper)(({}) => ({
-  borderRadius: 8,
-  padding: 16,
-  // transition: "max-height 1000ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-  overflow: 'hidden',
-  position: 'relative',
-}))
-
-export const PageHeader = styled(Box)(({}) => ({
-  backgroundColor: '#E2EEF1',
-  width: '100%',
-  height: 220,
-  padding: 32,
-}))
-
-export const Label = styled(Typography)(({ theme }) => ({
-  ...theme.typography.overLineCaption,
-  color: theme.palette.statistics.label,
-}))
-
-export const BoldValue = styled(Typography)(({ theme }) => ({
-  ...theme.typography.subtitle2,
-  fontWeight: 700,
-  lineHeight: '16px',
-  color: theme.palette.typography.title,
-}))
-
-export const Value = styled(Typography)(({ theme }) => ({
-  ...theme.typography.body1,
-  fontFamily: theme.typography.fontFamily,
-  lineHeight: '20px',
-  color: theme.palette.typography.title,
-}))
-
-export const PageTitle = styled(Typography)(({ theme }) => ({
-  ...theme.typography.h4,
-  color: theme.palette.common.black,
-}))
-
-export const Link = styled(MuiLink)(({ theme }) => ({
-  ...theme.typography.body1,
-  lineHeight: '20px',
-  fontStyle: 'italic',
-  color: theme.palette.primary[500],
-  cursor: 'pointer',
-  textDecoration: 'none',
-}))
-
-export const Text = styled(Typography)(({ theme }) => ({
-  ...theme.typography.body1,
-  color: theme.palette.typography.title,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-}))
-
-export const ShowMore = styled(Typography)(({ theme }) => ({
-  ...theme.typography.body1,
-  color: theme.palette.primary['500'],
-  fontWeight: 600,
-  fontSize: '12px',
-  letterSpacing: '0.5px',
-  lineHeight: '24px',
-  cursor: 'pointer',
-}))
-
-export const ShowMoreContainer = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.common.white,
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  cursor: 'pointer',
-}))
-
-export const DataWrapper = ({
-  values = [],
-  title,
-  icon,
-  columns = 4,
-  cardStyle = {},
-  wrapperStyle = {},
-}: {
-  values: ReactElement[]
-  title?: string
-  columns?: number
-  icon?: any
-  cardStyle?: any
-  wrapperStyle?: any
-}) => {
-  const normalizedValues =
-    values.length % columns !== 0 ? [...values, ...new Array(columns - (values.length % columns))] : values
-
-  const last4Items = normalizedValues.splice(-columns)
-  const containerColumns = columns === 5 ? 10 : 12
-  return (
-    <Box sx={{ ...wrapperStyle }}>
-      {(title || icon) && (
-        <Box display='flex' alignItems='center' sx={{ ml: 2, mb: 1 }}>
-          {icon && icon}
-          {title && <BoldValue sx={{ ml: 1 }}>{titleCase(title)}</BoldValue>}
-        </Box>
-      )}
-      <Card elevation={0} sx={{ padding: 0, border: `1px solid #F0F0F0`, ...cardStyle }}>
-        <Grid container columns={containerColumns}>
-          {normalizedValues.map((value, index) => {
-            return (
-              <Grid
-                sx={{
-                  minHeight: 74,
-                  padding: 2,
-                  borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
-                  borderBottom: value && `1px solid #F0F0F0`,
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-                item
-                key={index}
-                xs={containerColumns / columns}
-              >
-                {value && React.cloneElement(value)}
-              </Grid>
-            )
-          })}
-          {last4Items.map((value, index) => {
-            return (
-              <Grid
-                sx={{
-                  minHeight: 74,
-                  padding: 2,
-                  borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-                item
-                key={index}
-                xs={containerColumns / columns}
-              >
-                {value && React.cloneElement(value)}
-              </Grid>
-            )
-          })}
-        </Grid>
-      </Card>
-    </Box>
-  )
-}
-
-interface field {
-  value: number
-  color: string
-}
-
-export const Bars = ({ fields }: { fields: field[] }) => {
-  const max = useMemo(() => {
-    return fields.reduce((total, acc) => {
-      return acc.value > total ? acc.value : total
-    }, 0)
-  }, [fields])
-
-  const calculateTheValue = (value: number) => {
-    const calculatedValue = (value * 24) / max
-
-    if (calculatedValue > 0 && calculatedValue < 2) {
-      return 2
-    }
-    if (calculatedValue < 1) {
-      return 1
-    }
-    return calculatedValue
-  }
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'flex-end' }}>
-      {fields.map((field, index) => {
-        return (
-          <div
-            key={index}
-            style={{
-              width: 8,
-              borderRadius: '0.75px',
-              height: calculateTheValue(field.value),
-              backgroundColor: field.color,
-              marginRight: 2,
-            }}
-          />
-        )
-      })}
-    </div>
-  )
-}

package/src/FxTag/FxTag.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Box } from '@mui/material'
-import { TagPropsType } from './fxtag_types'
-import { titleCase } from '@fixefy/fixefy-ui-utils/'
-import { StyledCount, StyledLabel, StyledTag } from './styles/tag.styles'
-
-export const FxTag = ({ name, count = 0 }: TagPropsType) => (
-  <Box display="flex" alignItems="center" justifyContent="center" sx={{ maxWidth: 'fit-content', mb: 1 }}>
-    <StyledTag name={name}>
-      <StyledLabel>{titleCase(name)}</StyledLabel>
-    </StyledTag>
-    <StyledCount name={name}>{count}</StyledCount>
-  </Box>
-)

package/src/FxTag/fxtag_types.d.ts

@@ -1,4 +0,0 @@
-export type TagPropsType = {
-  name: string;
-  count?: number;
-};

package/src/FxTag/index.ts

@@ -1,2 +0,0 @@
-export { FxTag } from "./FxTag";
-export { TagPropsType } from "./fxtag_types";

package/src/FxTag/styles/tag.styles.tsx

@@ -1,24 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { Box, Typography } from '@mui/material'
-//
-export const StyledTag = styled(Box)<{ name: string }>(({ theme, name }) => ({
-  background: name === 'in_dispute' ? '#56CCF2' : name === '' ? '#BB6BD9' : theme.palette.reconcilation[name].background,
-  borderRadius: 8,
-  padding: '2px 8px',
-  border: `1px solid ${name === 'in_dispute' ? '#56CCF2' : name === '' ? '#BB6BD9' : theme.palette.reconcilation[name].border}`,
-  display: 'flex',
-  alignItems: 'center',
-  width: 'fit-content',
-}))
-export const StyledLabel = styled(Typography)(({ theme }) => ({
-  ...theme.typography.body1,
-  lineHeight: '20px',
-  color: theme.palette.common.white,
-}))
-export const StyledCount = styled(Typography)<{ name: string }>(({ theme, name }) => ({
-  ...theme.typography.subtitle2,
-  lineHeight: '16px',
-  fontWeight: 700,
-  color: name === 'in_dispute' ? '#56CCF2' : name === '' ? '#BB6BD9' : theme.palette.reconcilation[name].background,
-  marginLeft: 8,
-}))

package/src/FxTextField/FxTextField.tsx

@@ -1,117 +0,0 @@
-import React, { useEffect, useState } from 'react'
-
-import { titleCase } from '@fixefy/fixefy-ui-utils'
-import { TextFieldPropsType } from './text_field_types'
-import { FormControl, FormHelperText, InputBase, InputLabel } from '@mui/material'
-
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded'
-
-export const FxTextField = ({
-  autoFocus,
-  droppedItem,
-  defaultValue = '',
-  onChange,
-  structure,
-  endAdornment,
-  startAdornment,
-  required,
-  helperText,
-  error = false,
-  errorText,
-  disabled,
-}: TextFieldPropsType) => {
-  const [value, setValue] = useState(defaultValue)
-
-  const {
-    input_type,
-    extended: { placeholder, title_path },
-    title,
-  } = structure
-
-  useEffect(() => {
-    if (droppedItem) {
-      const { item } = droppedItem
-      setValue(item[title_path])
-    }
-  }, [droppedItem])
-
-  const _onChange = (e: any) => {
-    onChange && onChange(e)
-    setValue(e.target.value)
-  }
-
-  return (
-    <FormControl variant='standard' error={error}>
-      {title && (
-        <InputLabel
-          shrink
-          htmlFor={title}
-          sx={(theme) => ({
-            color: theme.palette.greyscale.light,
-            '&.Mui-focused': {
-              color: theme.palette.greyscale.light,
-            },
-            ...(disabled && { opacity: '0.3' }),
-            '&.Mui-error': { color: theme.palette.greyscale.light },
-            ...(required && {
-              '&:before': {
-                content: "'*'",
-                color: theme.palette.redscale.main,
-                display: 'inline-block',
-                marginRight: '5px',
-              },
-            }),
-          })}
-        >
-          {titleCase(title)}
-        </InputLabel>
-      )}
-      <InputBase
-        endAdornment={endAdornment}
-        startAdornment={startAdornment}
-        id={title}
-        autoFocus={autoFocus ? autoFocus : false}
-        placeholder={titleCase(placeholder)}
-        onChange={_onChange}
-        type={input_type && input_type.value}
-        value={value}
-        error={error}
-      />
-      {error && errorText ? (
-        <FormHelperText
-          sx={(theme) => ({
-            '&.Mui-error': {
-              color: theme.palette.redscale.main,
-            },
-            display: 'grid',
-            gridAutoFlow: 'column',
-            alignItems: 'center',
-            justifyContent: 'left',
-            columnGap: theme.spacing(0.6),
-            fontSize: '11px',
-          })}
-        >
-          <ErrorRoundedIcon
-            sx={(theme) => ({
-              color: theme.palette.redscale.main,
-              width: 10,
-              height: 10,
-            })}
-          />
-          {titleCase(errorText)}
-        </FormHelperText>
-      ) : (
-        <FormHelperText
-          sx={(theme) => ({
-            color: theme.palette.greyscale.light,
-            fontSize: '11px',
-          })}
-        >
-          {helperText}
-        </FormHelperText>
-      )}
-    </FormControl>
-  )
-}
-
-export default FxTextField

package/src/FxTextField/index.ts

@@ -1,2 +0,0 @@
-export { FxTextField } from './FxTextField'
-export type { TextFieldPropsType } from './text_field_types'

package/src/FxTextField/text_field_types.d.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react'
-import { InputBaseProps } from '@mui/material'
-
-export interface TextFieldPropsType {
-  autoFocus?: boolean
-  droppedItem?: {
-    item: any
-    type: string
-  }
-  defaultValue?: string
-  onChange?: (e: any) => void
-  structure: any
-  helperText?: ReactNode
-  errorText?: string
-  endAdornment?: InputBaseProps['endAdornment']
-  startAdornment?: InputBaseProps['startAdornment']
-  required?: InputBaseProps['required']
-  disabled?: InputBaseProps['disabled']
-  error?: InputBaseProps['error']
-}

package/src/FxTodo/FxTodo.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-import { FxAvatar } from '../FxAvatar'
-import { Divider } from '@mui/material'
-import { TodoPropsType } from './todo_types'
-import { imageLoader, normalizeTimestamp, titleCase } from '@fixefy/fixefy-ui-utils'
-import { TodoCard, TodoCardHeader, TodoCardContent, TodoCardPriority, TodoCardTag, TodoCardFooter, TodoCardFooterDueDate, TodoCardContentButton } from './styles/todo.styles'
-
-export function FxTodo({ todo }: TodoPropsType) {
-  return (
-    <TodoCard>
-      <TodoCardHeader>
-        <TodoCardPriority priority={todo.priority}>
-          <Image
-            alt={todo.title}
-            width={16}
-            height={16}
-            loader={() =>
-              imageLoader({
-                root: 'https://cdn-dev.fixefy.me/',
-                src: 'invoices/severity_low.svg',
-              }) as any
-            }
-            src={`invoices/severity_${todo.priority}.svg`}
-            onLoad={() => console.log('loaded')}
-            onError={(e) => console.log('error:', e)}
-          />
-
-          {titleCase(todo.priority)}
-        </TodoCardPriority>
-        {todo.isNew && <TodoCardTag>New</TodoCardTag>}
-      </TodoCardHeader>
-      <TodoCardContent>
-        <p>{titleCase(todo.title)}</p>
-        <span>{titleCase(todo.description)}</span>
-        {todo.actionTitle && (
-          <TodoCardContentButton size="small" onClick={todo.action ? todo.action : () => {}}>
-            {todo.actionTitle}
-          </TodoCardContentButton>
-        )}
-      </TodoCardContent>
-      <Divider sx={{ mb: '16px' }} />
-      <TodoCardFooter>
-        <TodoCardFooterDueDate>
-          <span>Due Date</span>
-          <p>
-            {normalizeTimestamp(todo.created_date, {
-              dateOnly: true,
-              format: 'dd.mm.yyyy',
-            })}
-          </p>
-        </TodoCardFooterDueDate>
-        <FxAvatar max={4} isEditable={todo.isUserEditable} users={todo.users} />
-      </TodoCardFooter>
-    </TodoCard>
-  )
-}

package/src/FxTodo/index.ts

@@ -1,2 +0,0 @@
-export { FxTodo } from './FxTodo'
-export { PriorityPropsType, TodoPropsType } from './todo_types'

package/src/FxTodo/styles/todo.styles.tsx

@@ -1,113 +0,0 @@
-import { styled } from '@mui/material/styles'
-import { FxButton } from '../../FxButton'
-import { PriorityPropsType } from '../todo_types'
-
-export const TodoCard = styled('div')(({ theme }) => ({
-  background: theme.palette.common.white,
-  borderRadius: 8,
-  padding: 16,
-  marginBottom: 4,
-}))
-
-// Card Header
-export const TodoCardHeader = styled('div')(({}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  marginBottom: 16,
-}))
-
-export const TodoCardPriority = styled('div')<PriorityPropsType>(({ theme, priority }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-
-  ...theme.typography.table,
-  color: theme.palette.priority[priority],
-
-  ['& img']: {
-    marginRight: 4,
-  },
-}))
-
-export const TodoCardTag = styled('div')(({ theme }) => ({
-  ...theme.typography.table,
-  color: theme.palette.common.white,
-  width: 42,
-  height: 18,
-  background: '#6FCF97',
-  borderRadius: 50,
-
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}))
-
-// Card Content
-export const TodoCardContent = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  justifyContent: 'space-between',
-  flexDirection: 'column',
-  marginBottom: 16,
-
-  ['& p']: {
-    fontStyle: 'normal',
-    fontSize: 14,
-    letterSpacing: '0.15px',
-    color: theme.palette.typography.title,
-    fontWeight: 700,
-    lineHeight: '16px',
-    margin: 0,
-  },
-  ['& span']: {
-    fontStyle: 'normal',
-    fontSize: 14,
-    letterSpacing: '0.15px',
-    color: theme.palette.typography.title,
-    fontWeight: 400,
-    lineHeight: '20px',
-    marginBottom: 16,
-  },
-}))
-
-export const TodoCardContentButton = styled(FxButton)(({ theme }) => ({
-  ...theme.typography.button,
-  color: '#568793',
-  fontSize: 12,
-  maxHeight: 32,
-  minHeight: 32,
-  paddingLeft: 12,
-  paddingRight: 12,
-}))
-
-// Card Footer
-export const TodoCardFooter = styled('div')(({}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexDirection: 'row',
-}))
-
-export const TodoCardFooterDueDate = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  ['& p']: {
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    fontSize: 11,
-    lineHeight: '16px',
-    letterSpacing: '0.1px',
-    color: theme.palette.typography.title,
-    margin: 0,
-  },
-  ['& span']: {
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    fontSize: 14,
-    lineHeight: '24px',
-    letterSpacing: '0.15px',
-    color: theme.palette.statistics.label,
-  },
-}))

package/src/FxTodo/todo_types.d.ts

@@ -1,19 +0,0 @@
-type TodoItemType = {
-	title: string;
-	description: string;
-	created_date: string;
-	users: any[];
-	isUserEditable?: boolean;
-	onUsersEdit?: () => void;
-	priority: "critical" | "high" | "low";
-	actionTitle?: string;
-	action?: () => void;
-	isNew?: boolean;
-};
-export type TodoPropsType = {
-	todo: TodoItemType;
-};
-
-export interface PriorityPropsType {
-	priority: "critical" | "high" | "low";
-}

package/src/FxWizard/FxWizard.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-
-import { Divider } from '@mui/material'
-import { WizardPropsType } from './wizard_types'
-import { useTransition, animated } from '@react-spring/web'
-import { StyledModal, StyledContent } from './styles/wizard.styles'
-
-const Animations = {
-  rightToLeft: {
-    from: {
-      opacity: 0,
-      position: 'absolute',
-      transform: 'translate3d(20%,0,0)',
-      width: '100%',
-    },
-    enter: {
-      opacity: 1,
-      transform: 'translate3d(0%,0,0)',
-    },
-    leave: {
-      opacity: 0,
-      transform: 'translate3d(-10%,0,0)',
-    },
-  },
-  leftToRight: {
-    from: { opacity: 0, position: 'absolute', width: '100%' },
-    enter: {
-      opacity: 1,
-      transform: 'translate3d(0%,0,0)',
-    },
-    leave: {
-      opacity: 0,
-      transform: 'translate3d(20%,0,0)',
-    },
-  },
-}
-
-export function FxWizard({ open, content = [], currentPage = 0, reverse = false, onCancel, title, actions, icon, componentStyles, divider = true, ...rest }: WizardPropsType) {
-  const transitions = useTransition(content[currentPage], {
-    ...Animations[reverse ? 'leftToRight' : 'rightToLeft'],
-    keys: null,
-  })
-
-  return (
-    <StyledModal {...rest} title={title} actions={actions} icon={icon} isOpen={Boolean(open)} isIconTitleInline onClose={(e: any) => onCancel(e, '')}>
-      {divider && <Divider sx={{ mb: '32px', mt: '16px' }} />}
-      <StyledContent style={{ ...componentStyles }}>
-        {transitions((style, item) => (
-          // @ts-ignore
-          <animated.div style={style}>{item}</animated.div>
-        ))}
-      </StyledContent>
-      {divider && <Divider sx={{ mb: '8px', mt: '32px' }} />}
-    </StyledModal>
-  )
-}