@fixefy/fixefy-ui-components 0.0.37 → 0.0.39

package/src/FxStatusBar/index.ts

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

package/src/FxStatusBar/status_bar_types.d.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,67 @@
+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,
+// }));

package/src/FxStyledComponents/index.tsx

@@ -0,0 +1,196 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/FxTag/index.ts

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

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,117 @@
+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

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

package/src/FxTextField/text_field_types.d.ts

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,58 @@
+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

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

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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,19 @@
+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";
+}