@fixefy/fixefy-ui-components 0.0.36 → 0.0.38

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

@@ -0,0 +1,40 @@
+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',
+}))

package/src/FxNotes/FxNotes.tsx

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

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

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

package/src/FxNotes/note_types.d.ts

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

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

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

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

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

package/src/FxNumberField/number_field_types.d.ts

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

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

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

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

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

package/src/FxProgressCircle/progress_circle_types.d.ts

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

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