@fixefy/fixefy-ui-components 0.0.42 → 0.0.43

package/build/FxButton/styles/button.styles.js

@@ -16,9 +16,3 @@ exports.ButtonStyled = (0, styles_1.styled)(material_1.Button)(({ theme, variant
         letterSpacing: '0.5px'
     };
 });
-
-        minWidth: '87px',
-        fontSize: '12px',
-        letterSpacing: '0.5px'
-    };
-});

package/package.json

@@ -57,17 +57,17 @@
     "node": "18.17.1"
   },
   "files": [
-    "*"
+    "build/**/*"
   ],
   "private": false,
-  "main": "./index.js",
-  "module": "./index.js",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "require": "./index.js"
+      "import": "./builds/index.js",
+      "require": "./build/index.js"
     }
   },
-  "types": "./index.d.ts",
-  "version": "0.0.42"
+  "types": "./build/index.ts",
+  "version": "0.0.43"
 }

package/.prettierrc.json

@@ -1,10 +0,0 @@
-{
-    "bracketSpacing": true,
-    "singleQuote": true,
-    "trailingComma": "all",
-    "tabWidth": 2,
-    "semi": false,
-    "printWidth": 120,
-    "jsxSingleQuote": true,
-    "endOfLine": "auto"
-  }

package/.swcrc

@@ -1,20 +0,0 @@
-{
-    "jsc": {
-      "externalHelpers": false,
-      "target": "es2016",
-      "parser": {
-        "syntax": "typescript",
-        "tsx": true,
-        "decorators": false,
-        "dynamicImport": true
-      },
-      "transform": {
-        "react": {
-          "runtime": "automatic"
-        }
-      }
-    },
-    "module": {
-      "type": "commonjs"
-    }
-  }

package/src/FxActionsTray/FxActionsTray.tsx

@@ -1,293 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-import { Slide } from '@mui/material'
-import { imageLoader } from '@fixefy/fixefy-ui-utils'
-import { ActionsTrayPropsType } from './actions_tray_types'
-
-import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actions_tray.styles'
-
-export function FxActionsTray({ type, onApprove, onChallenge, show, onClose, chargesCount, container, direction = 'up' }: ActionsTrayPropsType) {
-  const renderActions = () => {
-    switch (type) {
-      case 'approved':
-        return <ApprovedActions onChallenge={onChallenge} />
-      case 'challenge':
-        return <ChallengeActions onChallenge={onChallenge} onApprove={onApprove} />
-      case 'pending':
-        return <PendingActions onApprove={onApprove} onChallenge={onChallenge} />
-      case 'no_pricing':
-        return <NoPricingActions onApprove={onApprove} onChallenge={onChallenge} />
-      default:
-        return <ApprovedActions onChallenge={onChallenge} />
-    }
-  }
-  return (
-    <div>
-      <Slide direction={direction} in={show} mountOnEnter unmountOnExit timeout={400} container={container}>
-        <Container>
-          <TitleWrapper>
-            <ChargesCount>{chargesCount}</ChargesCount>
-            <ChargesTitle>charges selected</ChargesTitle>
-          </TitleWrapper>
-          <Divider />
-          <div>
-            {renderActions()}
-            {/* {actions.map(({ title, name, onClick, ...action }, index) => (
-							<ActionBtn key={index} onClick={(event) => onClick(event, name)}>
-								<Image
-									loader={() =>
-										imageLoader({
-											root: "https://cdn-dev.fixefy.me/",
-											src: `actions/${action.extended.icon}}.svg`,
-										})
-									}
-									src={`actions/${action.extended.icon}}.svg`}
-									width={20}
-									height={20}
-									onLoad={() => console.log("loaded")}
-									onError={(e) => console.log("error:", e)}
-								/>
-								<ActionTitle>{titleCase(title)}</ActionTitle>
-							</ActionBtn>
-						))} */}
-          </div>
-          <Divider />
-          <div onClick={onClose}>
-            <Close>close</Close>
-          </div>
-        </Container>
-      </Slide>
-    </div>
-  )
-}
-
-const ChallengeActions = ({ onChallenge, onApprove }: { onChallenge?: () => void; onApprove?: () => void }) => {
-  return (
-    <>
-      <ActionBtn onClick={onChallenge} type="low">
-        <Image
-          alt="challenge"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/challenge.svg',
-            })
-          }
-          src={'actions/challenge.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>challenge</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image
-          alt="approve"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/approve.svg',
-            })
-          }
-          src={'actions/approve.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>approve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image
-          alt="ignore and approve"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/ignore_and_approve.svg',
-            })
-          }
-          src={'actions/ignore_and_approve.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>ignore & approve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image
-          alt="change exception"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/change_exception.svg',
-            })
-          }
-          src={'actions/change_exception.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>Change exeption</ActionTitle>
-      </ActionBtn>
-    </>
-  )
-}
-const PendingActions = ({ onApprove, onChallenge }: { onChallenge?: () => void; onApprove?: () => void }) => {
-  return (
-    <>
-      <ActionBtn onClick={onApprove} type="excellent">
-        <Image
-          alt="approve"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/approve.svg',
-            })
-          }
-          src={'actions/approve.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>approve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onChallenge}>
-        <Image
-          alt="challenge"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/challenge.svg',
-            })
-          }
-          src={'actions/challenge.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>challenge</ActionTitle>
-      </ActionBtn>
-
-      <ActionBtn onClick={onChallenge}>
-        <Image
-          alt="dive in"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/dive_in.svg',
-            })
-          }
-          src={'actions/dive_in.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>dive in</ActionTitle>
-      </ActionBtn>
-    </>
-  )
-}
-const NoPricingActions = ({ onApprove, onChallenge }: { onChallenge?: () => void; onApprove?: () => void }) => {
-  return (
-    <>
-      <ActionBtn onClick={onChallenge}>
-        <Image
-          alt="dive in"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/dive_in.svg',
-            })
-          }
-          src={'actions/dive_in.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>dive in</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image
-          alt="solve"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/solve.svg',
-            })
-          }
-          src={'actions/solve.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>solve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image
-          alt="ignore and approve"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/ignore_and_approve.svg',
-            })
-          }
-          src={'actions/ignore_and_approve.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>ignore & approve</ActionTitle>
-      </ActionBtn>
-    </>
-  )
-}
-const ApprovedActions = ({ onChallenge }: { onChallenge?: () => void; onApprove?: () => void }) => {
-  return (
-    <>
-      <ActionBtn onClick={onChallenge}>
-        <Image
-          alt="dive in"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actionsCards/check_exceptions.svg',
-            })
-          }
-          src={'actionsCards/check_exceptions.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>dive in</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onChallenge}>
-        <Image
-          alt="challenge"
-          loader={() =>
-            imageLoader({
-              root: 'https://cdn-dev.fixefy.me/',
-              src: 'actions/undo.svg',
-            })
-          }
-          src={'actions/undo.svg'}
-          width={20}
-          height={20}
-          onLoad={() => console.log('loaded')}
-          onError={(e: any) => console.log('error:', e)}
-        />
-        <ActionTitle>undo</ActionTitle>
-      </ActionBtn>
-    </>
-  )
-}

package/src/FxActionsTray/actions_tray_types.d.ts

@@ -1,15 +0,0 @@
-export type ActionsTrayPropsType = {
-  type: 'approved' | 'challenge' | 'pending' | 'no_pricing'
-  onApprove?: () => void
-  onChallenge?: () => void
-  onClick?: () => void
-  onClose?: () => void
-  show: boolean
-  chargesCount: number
-  container?: any
-  direction?: 'down' | 'left' | 'right' | 'up'
-}
-
-export type ActionButtonPropsType = {
-  type?: 'excellent' | 'high' | 'medium' | 'low' | 'bad'
-}

package/src/FxActionsTray/index.ts

@@ -1,3 +0,0 @@
-export { FxActionsTray } from './FxActionsTray'
-
-export type { ActionsTrayPropsType, ActionButtonPropsType } from './actions_tray_types'

package/src/FxActionsTray/styles/actions_tray.styles.tsx

@@ -1,90 +0,0 @@
-import { FxButton } from '../../FxButton'
-import { Typography } from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-import { ActionButtonPropsType } from '../actions_tray_types'
-
-// const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)'
-const filterPrimary = 'invert(46%) sepia(48%) saturate(297%) hue-rotate(145deg) brightness(97%) contrast(90%)'
-
-export const Container = styled('div')(({ theme }: { theme: any }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-
-  background: theme.palette.common.white,
-  border: '1px solid #C6DDE2',
-  boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
-  borderRadius: 8,
-  padding: '16px 24px',
-  height: 38,
-  width: 'fit-content',
-  margin: 4,
-}))
-
-export const ChargesCount = styled(Typography)(({ theme }: { theme: any }) => ({
-  ...theme.typography.table,
-  color: theme.palette.typography.title,
-  fontWeight: 700,
-  marginRight: 4,
-}))
-
-export const ChargesTitle = styled(Typography)(({ theme }: { theme: any }) => ({
-  ...theme.typography.table,
-  color: theme.palette.typography.title,
-}))
-
-export const Close = styled(Typography)(({ theme }: { theme: any }) => ({
-  ...theme.typography.body1,
-  color: theme.palette.primary['500'],
-  textTransform: 'uppercase',
-  fontWeight: 600,
-  letterSpacing: '0.5px',
-  cursor: 'pointer',
-}))
-
-export const TitleWrapper = styled('div')(({  }: { theme: any }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}))
-
-export const Divider = styled('div')(({ theme }: { theme: any }) => ({
-  width: 1,
-  height: '100%',
-  background: theme.palette.greyscale.contrastText,
-  marginRight: 24,
-  marginLeft: 24,
-}))
-
-export const ActionBtn = styled(FxButton)<ActionButtonPropsType>(({ theme, type }: { theme: any; type: any }) => ({
-  height: 40,
-  maxHeight: 40,
-  borderRadius: 100,
-
-  padding: '8px 16px',
-  color: type ? theme.palette.common.white : theme.palette.primary['500'],
-  borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
-  background: type ? theme.palette.score[type] : theme.palette.common.white,
-  marginRight: 8,
-
-  ['& img']: {
-    filter: type ? 'none' : filterPrimary,
-  },
-  ['&:hover']: {
-    background: type ? theme.palette.score[type] : theme.palette.common.white,
-    color: type ? theme.palette.common.white : theme.palette.primary['500'],
-    borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
-  },
-}))
-
-export const ActionTitle = styled('span')(({ theme }: { theme: any }) => ({
-  ...theme.typography.body1,
-  color: 'inherit',
-  textTransform: 'uppercase',
-  fontWeight: 600,
-  letterSpacing: '0.5px',
-  cursor: 'pointer',
-  marginLeft: 4,
-  marginTop: 2,
-}))

package/src/FxAggregationsBar/FxAggregations.tsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import Stack from '@mui/material/Stack'
-import { structureReader } from './helpers/structureReader'
-
-import { AggreationsBarPropsType } from './aggregations_types'
-
-export const FxAggregationsBar = (props: AggreationsBarPropsType) => {
-  const { structure, minWidth, mb, filter, initialValues } = props
-  const { children, extended } = structure
-  const { variables } = extended
-  const { collapsed } = variables
-
-  return (
-    <Stack
-      direction="row"
-      spacing={1.5}
-      sx={{
-        mb: mb ? mb : 0,
-        ['& div']: {
-          minWidth: minWidth,
-        },
-        ['& > span']: {
-          minWidth: minWidth,
-        },
-      }}
-    >
-      {children.map((child: any) => {
-        return structureReader(child, filter, collapsed, initialValues)
-      })}
-    </Stack>
-  )
-}

package/src/FxAggregationsBar/aggregations_types.d.ts

@@ -1,21 +0,0 @@
-export type AggregationsDataPropsType = {
-    title: string
-    value: number
-    type?: 'currency' | 'percentage'
-    loading?: boolean
-  }
-  
-  export type AggreationsBarPropsType = {
-    structure: any
-    minWidth?: string | number
-    mb?: string | number
-    filter?: object
-    initialValues?: {
-      score?: number
-      originalCharge?: number
-      underContractCharges?: number
-      fairValue?: number
-      spendRisk?: number
-      [x: string]: any
-    }
-  }

package/src/FxAggregationsBar/helpers/structureReader.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import { Box, Stack, Divider } from '@mui/material'
-
-import { FxScore } from '../../FxScore'
-import { FxStatisticsBar } from '../../FxStatisticsBar'
-import { FxProgressCounter } from '../../FxProgressCounter'
-
-export const structureReader = (structure: any, filter: any, collapsed: boolean, initialValues: any) => {
-  const { extended, type } = structure
-  switch (type) {
-    case 'aggregations_primary_container':
-      return structure.children.map((child: any, index: number) =>
-        child.input_type?.value === 'percentage' ? (
-          <FxScore structure={child} key={index} filter={filter} value={initialValues?.score} />
-        ) : child.input_type?.value === 'progress' ? (
-          <FxProgressCounter structure={child} filter={filter} key={index} values={initialValues} />
-        ) : (
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              width: 'fit-content',
-              padding: 2,
-              borderRadius: 2,
-              backgroundColor: extended?.variables?.bg || '#FFFFFF',
-            }}
-          >
-            <FxStatisticsBar
-              structure={child}
-              key={index}
-              filter={filter}
-              collapsed={collapsed}
-              value={initialValues ? initialValues[child.extended.object_path] : null}
-            />
-          </Box>
-        ),
-      )
-    case 'aggregations_secondary_container':
-      return (
-        <Stack
-          direction='row'
-          divider={<Divider orientation='vertical' flexItem />}
-          spacing={2}
-          sx={{
-            backgroundColor: extended?.variables?.bg || '#FFFFFF',
-            borderRadius: '8px',
-            padding: '24px 16px',
-          }}
-        >
-          {structure.children.map((child: any, index: number) => {
-            return (
-              <FxStatisticsBar
-                structure={child}
-                key={index}
-                filter={filter}
-                collapsed={collapsed}
-                value={initialValues ? initialValues[child.extended.object_path] : null}
-              />
-            )
-          })}
-        </Stack>
-      )
-  }
-}

package/src/FxAggregationsBar/index.ts

@@ -1,2 +0,0 @@
-export { FxAggregationsBar } from './FxAggregations'
-export type { AggregationsDataPropsType, AggreationsBarPropsType } from './aggregations_types'

package/src/FxAggregationsBar/operations/query.ts

@@ -1,64 +0,0 @@
-import { gql } from 'graphql-tag'
-
-export const STRUCTURES = gql`
-  query STRUCTURES {
-    structure(where: { name: "aggregations_invoice" }) {
-      _id
-      bundle_name
-      name
-      title
-      type
-      input_type {
-        name
-        value
-      }
-      readable_id
-      extended {
-        format
-        gql_operation
-        title_path
-        object_path
-        filter
-        variables
-      }
-      children(sort: { index: 1 }) {
-        _id
-        name
-        title
-        type
-        input_type {
-          name
-          value
-        }
-        readable_id
-        extended {
-          format
-          gql_operation
-          title_path
-          object_path
-          filter
-          variables
-        }
-        children(sort: { index: 1 }) {
-          _id
-          name
-          title
-          type
-          input_type {
-            name
-            value
-          }
-          readable_id
-          extended {
-            format
-            gql_operation
-            title_path
-            object_path
-            filter
-            variables
-          }
-        }
-      }
-    }
-  }
-`