@fixefy/fixefy-ui-components 0.0.42 → 0.0.44

package/src/FxNotes/FxNotes.tsx

@@ -1,165 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-
-import {
-  StyledAvatar,
-  CommentWrapper,
-  CommentInput,
-  CommentsWrapper,
-  UserComment,
-  CommentUserTitle,
-  CommentDate,
-  CommentDesc,
-  CommentsContainer,
-  UserCommentWrapper,
-  CommentsScrollWrapper,
-} from './styles/notes.styles'
-
-import { ME } from './operations/queries'
-import { useQuery } from '@apollo/client'
-import { NotesPropsType } from './note_types'
-import { stringToColor } from './helpers/stringToColor'
-import { normalizeTimestamp, titleCase } from '@fixefy/fixefy-ui-utils'
-
-type BackgroundColorsType = {
-  [key: string]: string
-}
-
-export const FxNotes = ({ notes, onChange, onSend }: NotesPropsType) => {
-  const [comment, setComment] = useState('')
-  const [backgroundcolors, setBackgroundColors] = useState({} as BackgroundColorsType)
-  // const [anchorEl] = React.useState<HTMLButtonElement | null>(null)
-
-  const inputRef: HTMLInputElement | any = useRef()
-
-  const { data } = useQuery(ME)
-  const { me } = data
-
-  // const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-  //   setAnchorEl(event.currentTarget)
-  // }
-
-  // const handleClose = () => {
-  //   setAnchorEl(null)
-  // }
-
-  const handleEnterKeyPressed = () => {
-    setComment((prevState) => {
-      if (prevState) {
-        onSend &&
-          onSend({
-            created_at: new Date().getTime(),
-            created_by: me.username,
-            text: prevState,
-          })
-      }
-
-      return ''
-    })
-  }
-
-  useEffect(() => {
-    onChange && onChange(comment)
-  }, [comment])
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.addEventListener('keyup', (event: any) => {
-        if (event.keyCode === 13) {
-          event.preventDefault()
-          handleEnterKeyPressed()
-        }
-      })
-    }
-
-    return inputRef && inputRef.current && inputRef.current.removeEventListener('keyup', handleEnterKeyPressed)
-  }, [])
-
-  // const open = Boolean(anchorEl)
-  // const id = open ? 'simple-popover' : undefined
-
-  return (
-    <CommentsContainer>
-      {/* <StyledPopover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}>
-        <span>asd</span>
-        <span>asd</span>
-        <span>asd</span>
-        <span>asd</span>
-      </StyledPopover> */}
-      <CommentWrapper>
-        <StyledAvatar
-          sx={{
-            backgroundColor: backgroundcolors[me.username]
-              ? backgroundcolors[me.username]
-              : stringToColor(me.username, (color) => {
-                  setBackgroundColors({
-                    ...backgroundcolors,
-                    [me.username]: color,
-                  })
-                }),
-          }}
-          src={me && me.image_url}
-        >
-          {me && titleCase(me.username.slice(0, 1))}
-        </StyledAvatar>
-        <CommentInput
-          type='text'
-          value={comment}
-          ref={inputRef}
-          onChange={(e: React.FormEvent<HTMLInputElement>) => {
-            setComment(e.currentTarget.value)
-          }}
-        />
-        {/* <Button aria-describedby={id} onClick={handleClick}>
-          asd
-        </Button> */}
-      </CommentWrapper>
-      {notes && notes.length ? (
-        <CommentsWrapper>
-          <CommentsScrollWrapper>
-            {notes
-              .slice()
-              .reverse()
-              .map((comment, index) => {
-                return (
-                  <UserCommentWrapper key={index}>
-                    <StyledAvatar
-                      sx={{
-                        backgroundColor: backgroundcolors[comment.created_by]
-                          ? backgroundcolors[comment.created_by]
-                          : stringToColor(comment.created_by, (color) => {
-                              setBackgroundColors({
-                                ...backgroundcolors,
-                                [comment.created_by]: color,
-                              })
-                            }),
-                      }}
-                      // src={comment.image_url}
-                    >
-                      {titleCase(comment.created_by.slice(0, 1))}
-                    </StyledAvatar>
-                    <UserComment>
-                      <CommentUserTitle>{comment.created_by}</CommentUserTitle>
-                      <CommentDate>
-                        {normalizeTimestamp(comment.created_at, {
-                          dateOnly: true,
-                        })}
-                      </CommentDate>
-                      <CommentDesc>{comment.text}</CommentDesc>
-                    </UserComment>
-                  </UserCommentWrapper>
-                )
-              })}
-          </CommentsScrollWrapper>
-        </CommentsWrapper>
-      ) : null}
-    </CommentsContainer>
-  )
-}

package/src/FxNotes/helpers/stringToColor.ts

@@ -1,19 +0,0 @@
-export const stringToColor = (string: string, callBack?: (color: string) => void) => {
-  let hash = 0
-  let color = '#'
-  if (!string) {
-    return '#000'
-  }
-  /* 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/FxNotes/index.ts

@@ -1,2 +0,0 @@
-export { FxNotes } from './FxNotes'
-export type { NotesPropsType } from './note_types'

package/src/FxNotes/note_types.d.ts

@@ -1,12 +0,0 @@
-type NoteCreateInput = {
-  created_at: number
-  created_by: string
-  text: string
-}
-
-export type NotesPropsType = {
-  notes?: NoteCreateInput[]
-  onChange?: (comment: string) => void
-  onSend?: (noteCreateInput: NoteCreateInput) => void
-  sendOnEnter?: boolean
-}

package/src/FxNotes/operations/queries.ts

@@ -1,21 +0,0 @@
-import gql from 'graphql-tag'
-
-export const ME = gql`
-  query ME {
-    me {
-      _id
-      username
-      first_name
-      last_name
-      email
-      workspaces {
-        ...InsideWorkspace
-      }
-    }
-  }
-
-  fragment InsideWorkspace on Workspace {
-    _id
-    title
-  }
-`

package/src/FxNotes/styles/notes.styles.tsx

@@ -1,135 +0,0 @@
-import Popover from '@mui/material/Popover'
-
-import { styled } from '@mui/material/styles'
-import { Avatar as _Avatar } from '@mui/material'
-
-import '@fixefy/fixefy-ui-utils'
-
-export const CommentsContainer: any = styled('div')(() => ({
-  display: 'flex',
-  flexDirection: 'column',
-  marginTop: 16,
-  justifyContent: 'space-between',
-  alignItems: 'flex-start',
-}))
-
-export const CommentsWrapper: any = styled('div')(({}) => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  width: '100%',
-}))
-
-export const CommentsScrollWrapper: any = styled('div')(({}) => ({
-  maxHeight: 170,
-  overflow: 'auto',
-  width: '100%',
-}))
-
-export const UserCommentWrapper: any = styled('div')(({}) => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  marginTop: 16,
-  '&:first-of-type': {
-    marginTop: 0,
-  },
-}))
-
-export const CommentWrapper: any = styled('div')(({}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  marginBottom: 16,
-}))
-
-export const CommentInput: any = styled('input')(({ theme }) => ({
-  background: theme.palette.common.white,
-  border: '1px solid #F0F0F0',
-  borderRadius: '4px',
-  height: 36,
-  padding: '0 16px',
-
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-  fontSize: 14,
-  lineHeight: '20px',
-  letterSpacing: '0.15px',
-  color: '#172326',
-
-  width: '100%',
-
-  '&::focus-visible': {
-    outline: 'unset',
-  },
-}))
-
-export const StyledAvatar: any = styled(_Avatar)(({ theme }) => ({
-  width: 32,
-  height: 32,
-  border: `2px solid ${theme.palette.common.white}`,
-  marginRight: '8px',
-
-  fontFamily: 'Open Sans',
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-  fontSize: 14,
-  lineHeight: '20px',
-  letterSpacing: '0.15px',
-}))
-
-export const UserComment: any = styled('div')(({ theme }) => ({
-  background: theme.palette.greyscale.contrastText,
-  border: '1px solid #F0F0F0',
-  borderRadius: '4px',
-  padding: '8px 16px',
-  minWidth: 300,
-
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  justifyContent: 'center',
-}))
-
-export const CommentUserTitle: any = styled('div')(({}) => ({
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-  fontSize: 11,
-  lineHeight: '16px',
-  letterSpacing: '0.15px',
-  color: '#172326',
-}))
-
-export const CommentDate: any = styled('div')(({}) => ({
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-  fontSize: 11,
-  lineHeight: '16px',
-  letterSpacing: '0.15px',
-  color: '#898989',
-}))
-
-export const CommentDesc: any = styled('div')(({}) => ({
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-  fontSize: 14,
-  lineHeight: '20px',
-  letterSpacing: '0.15px',
-  color: '#172326',
-}))
-
-export const StyledPopover: any = styled(Popover)(({ theme }) => ({
-  position: 'absolute',
-  right: 12,
-  width: 80,
-  height: 16,
-  background: '#F7F7F7',
-  borderRadius: 4,
-  fontFamily: 'Open Sans',
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-  fontSize: 11,
-  lineHeight: '16px',
-  letterSpacing: '0.1px',
-  color: theme.palette.primary.light,
-}))

package/src/FxNumberField/FxNumberField.tsx

@@ -1,37 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { useStyles } from './styles/number_field.styles'
-import { NumberfieldPropsType } from './number_field_types'
-
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
-
-export function FxNumberField({ placeholder, defaultValue, label, hint, onChange }: NumberfieldPropsType) {
-  const _classes = useStyles()
-  const [value, setValue] = useState(defaultValue || 0)
-
-  useEffect(() => {
-    onChange && onChange(value)
-  }, [value])
-  return (
-    <div className={_classes.container}>
-      {label && <span className={_classes.label}>{label}</span>}
-      <div className={_classes.inputWrapper}>
-        <input
-          type="number"
-          placeholder={placeholder}
-          value={value}
-          //@ts-ignore
-          onChange={(e) => setValue(e.target.value)}
-        />
-        <div className={_classes.inputActions}>
-          <button className={_classes.inputActionsPlus} onClick={() => setValue(value + 1)}>
-            <KeyboardArrowRightIcon />
-          </button>
-          <button className={_classes.inputActionsMinus} onClick={() => setValue(value - 1)}>
-            <KeyboardArrowRightIcon />
-          </button>
-        </div>
-      </div>
-      {hint && <span className={_classes.hint}>{hint}</span>}
-    </div>
-  )
-}

package/src/FxNumberField/index.ts

@@ -1,2 +0,0 @@
-export { FxNumberField } from './FxNumberField'
-export type { NumberfieldPropsType } from './number_field_types'

package/src/FxNumberField/number_field_types.d.ts

@@ -1,7 +0,0 @@
-export type NumberfieldPropsType = {
-  placeholder?: string
-  label?: string
-  hint?: string
-  defaultValue?: number
-  onChange?: (value: number) => void
-}

package/src/FxNumberField/styles/number_field.styles.ts

@@ -1,85 +0,0 @@
-import { makeStyles } from '@mui/styles'
-
-export const useStyles = makeStyles(() => ({
-  container: {},
-  label: {
-    fontFamily: 'Open Sans',
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 11,
-    lineHeight: '16px',
-    letterSpacing: 0.1,
-    color: '#505050',
-  },
-  hint: {
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 11,
-    lineHeight: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    letterSpacing: 0.1,
-    color: '#8A8A8A',
-  },
-  inputWrapper: {
-    background: '#FFFFFF',
-    border: '1px solid #EEEEEE',
-    borderRadius: 5,
-    height: 40,
-    display: 'flex',
-    width: 'fit-content',
-    ['& input']: {
-      border: 'none',
-      paddingLeft: 10,
-      borderRadius: 5,
-      ['&:focus-visible']: {
-        outline: 'none',
-      },
-      ['&::-webkit-inner-spin-button']: {
-        '-webkit-appearance': 'none',
-      },
-      ['&::-webkit-outer-spin-button']: {
-        '-webkit-appearance': 'none',
-      },
-    },
-  },
-  inputActions: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inputActionsPlus: {
-    cursor: 'pointer',
-    background: '#FFFFFF',
-    height: '50%',
-    padding: 0,
-    width: 36,
-    border: 'none',
-    borderLeft: '1px solid #EEEEEE',
-    borderBottom: '1px solid #EEEEEE',
-    borderRadius: '0 5px 0 0',
-    color: '#568793',
-    ['& svg']: {
-      transform: 'rotate(270deg)',
-      width: 20,
-      height: 20,
-    },
-  },
-  inputActionsMinus: {
-    cursor: 'pointer',
-    background: '#FFFFFF',
-    height: '50%',
-    padding: 0,
-    width: 36,
-    border: 'none',
-    borderLeft: '1px solid #EEEEEE',
-    borderRadius: '0 0 5px 0',
-    color: '#568793',
-    ['& svg']: {
-      transform: 'rotate(90deg)',
-      width: 20,
-      height: 20,
-    },
-  },
-}))

package/src/FxProgressCircle/FxProgressCircle.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { Container, Label, Slider, SliderCircle, SliderBar } from './styles/progress_circle.styles'
-import { ProgressCirclePropsType } from './progress_circle_types'
-
-export const FxProgressCircle = ({ radius = 70, border = 70, value, hasLabel = true, max = 100, color, type = 'progress' }: ProgressCirclePropsType) => {
-  const _value = value ? value / max : 0
-  const p = 2 * Math.PI * (radius - border / 2)
-
-  const strokeWidth = border
-  const strokeDashoffset = p * (1 - _value)
-  const strokeDasharray = p
-
-  const label = type === 'progress' ? `${value}/${max}` : `${value.toFixed()}%`
-
-  return (
-    <Container>
-      {hasLabel && type === 'progress' && <Label>{label}</Label>}
-      <Slider
-        // ref={(potar) => (potar = potar)}
-        viewBox={`0 0 ${radius * 2} ${radius * 2}`}
-      // onMouseDown={this.handleMouseDown}
-      >
-        <SliderCircle style={{ strokeWidth }} r={radius - border / 2} cx={radius} cy={radius} color={color} />
-
-        <SliderBar
-          style={{
-            strokeWidth,
-            strokeDashoffset,
-            strokeDasharray,
-          }}
-          r={radius - border / 2}
-          cx={radius}
-          cy={radius}
-          color={color}
-        />
-      </Slider>
-      {hasLabel && type === 'percentage' && <Label sx={{ ml: 1 }}>{label}</Label>}
-    </Container>
-  )
-}

package/src/FxProgressCircle/index.ts

@@ -1,2 +0,0 @@
-export { FxProgressCircle } from './FxProgressCircle'
-export type { ProgressCirclePropsType } from './progress_circle_types'

package/src/FxProgressCircle/progress_circle_types.d.ts

@@ -1,9 +0,0 @@
-export type ProgressCirclePropsType = {
-  radius?: number
-  border?: number
-  value: number
-  hasLabel?: boolean
-  max?: number
-  color?: string
-  type?: 'percentage' | 'progress'
-}

package/src/FxProgressCircle/styles/progress_circle.styles.tsx

@@ -1,33 +0,0 @@
-import { styled } from "@mui/material/styles";
-
-export const Container = styled("div")(({  }) => ({
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-}));
-
-export const Label = styled("span")(({ theme }) => ({
-	...theme.typography.body1,
-	color: theme.palette.typography.title,
-	marginRight: 8,
-}));
-
-export const Slider = styled("svg")(({  }) => ({
-	display: "block",
-	width: 22,
-	height: 22,
-	transform: "rotate(-90deg)",
-}));
-
-export const SliderCircle = styled("circle")(({ theme, color }) => ({
-	fill: "transparent",
-	stroke: color ?? theme.palette.green2scale.main,
-	opacity: 0.1,
-}));
-
-export const SliderBar = styled("circle")(({ theme, color }) => ({
-	fill: "transparent",
-	stroke: color ?? theme.palette.green2scale.main,
-	strokeDashoffset: 0,
-	strokeDasharray: 0,
-}));

package/src/FxProgressCounter/ProgressCounter.tsx

@@ -1,81 +0,0 @@
-// @ts-nocheck
-import React from 'react'
-
-import { Box, Typography } from '@mui/material'
-import { imageLoader } from '@fixefy/fixefy-ui-utils'
-import { ProgressCounterPropsType } from './progress_counter_types'
-import { Container, ProgressContainer, MainBar, BackgroundBar } from './styles/progress_counter.styles'
-
-import Image from 'next/image'
-
-export function FxProgressCounter({ values, structure, filter, ...rest }: ProgressCounterPropsType) {
-  // const { extended, title } = structure ?? {};
-  // const {
-  // 	gql_operation,
-  // 	object_path: objectPath,
-  // 	title_path: titlePath,
-  // 	filter: structureFilter,
-  // } = extended ?? {};
-  const initialValues = {
-    count: values?.count ?? 0,
-    current: values?.current ?? 0,
-  }
-
-  // let _filter = structureFilter;
-
-  // if (filter) {
-  //   _filter = {
-  //     ..._filter,
-  //     ...filter,
-  //   };
-  // }
-
-  // const { data, error, loading } = useQuery(gql(gql_operation), {
-  //   variables: {
-  //     where: { ..._filter },
-  //   },
-  // });
-
-  const normalizeNumber = (number) => {
-    return (number / initialValues.count) * 100
-  }
-
-  return (
-    <Container>
-      {/* {false ? (
-        <Skeleton animation="wave" variant="text" width={68} height={68} />
-      ) : ( */}
-      <Box position={'relative'} textAlign={'center'} justifyContent={'center'} mt={1.2}>
-        <Image
-          alt={'approve'}
-          width={16}
-          height={16}
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'invoices/approve-small-white.svg',
-            }) as any
-          }
-          src={'invoices/approve-small-white.svg'}
-          onLoad={() => console.log('loaded')}
-          onError={(e) => console.log('error:', e)}
-        />
-
-        <Box mt={0.5}>
-          <Typography fontSize={19} fontWeight={600}>
-            {initialValues.current}/{initialValues.count}
-          </Typography>
-        </Box>
-
-        <Typography fontSize={11} sx={{ opacity: 0.6 }}>
-          Charges
-        </Typography>
-      </Box>
-
-      <ProgressContainer>
-        <MainBar variant="determinate" value={normalizeNumber(initialValues.current)} color={'inherit'} {...rest} />
-        <BackgroundBar variant="determinate" value={initialValues.count > 100 ? 100 : initialValues.count} color={'inherit'} {...rest} />
-      </ProgressContainer>
-    </Container>
-  )
-}

package/src/FxProgressCounter/index.ts

@@ -1,2 +0,0 @@
-export { FxProgressCounter } from './ProgressCounter'
-export type { ProgressCounterPropsType } from './progress_counter_types'

package/src/FxProgressCounter/progress_counter_types.d.ts

@@ -1,10 +0,0 @@
-export type ProgressCounterPropsType = {
-  values?: {
-    count: number
-    current: number
-  }
-  structure?: any
-  [x: string]: any
-  filter?: object
-  ctx?: any
-}