lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1771 from RafaelTaranto/refactor/dev-tools-frontend

Browse source 
LAM-1251 Refactor/dev tools frontend
This commit is contained in:
Rafael Taranto 2024-12-05 10:53:05 +00:00 • committed by GitHub
commit 8b7340269a
318 changed files with 8071 additions and 31039 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.tool-versions Normal file
View file

@ -0,0 +1 @@
nodejs 14

12
lib/blacklist.js
View file

@ -1,5 +1,6 @@
const _ = require('lodash/fp') const _ = require('lodash/fp')
const { addressDetector } = require('@lamassu/coins')
const db = require('./db') const db = require('./db')
const notifierQueries = require('./notifier/queries') const notifierQueries = require('./notifier/queries')
@ -16,7 +17,18 @@ const deleteFromBlacklist = address => {
return db.none(sql, [address]) return db.none(sql, [address])
} }
const isValidAddress = address => {
try {
return !_.isEmpty(addressDetector.getSupportedCoinsForAddress(address).matches)
} catch {
return false
}
}
const insertIntoBlacklist = address => { const insertIntoBlacklist = address => {
if (!isValidAddress(address)) {
return Promise.reject(new Error('Invalid address'))
}
return db return db
.none( .none(
'INSERT INTO blacklist (address) VALUES ($1);', 'INSERT INTO blacklist (address) VALUES ($1);',

1
lib/new-admin/middlewares/context.js
View file

@ -20,7 +20,6 @@ const buildApolloContext = async ({ req, res }) => {
req.session.user.role = user.role req.session.user.role = user.role
res.set('lamassu_role', user.role) res.set('lamassu_role', user.role)
res.cookie('pazuz_operatoridentifier', base64.encode(user.username))
res.set('Access-Control-Expose-Headers', 'lamassu_role') res.set('Access-Control-Expose-Headers', 'lamassu_role')
return { req, res } return { req, res }

1
new-lamassu-admin/.env
View file

@ -2,4 +2,3 @@ SKIP_PREFLIGHT_CHECK=true
HTTPS=true HTTPS=true
REACT_APP_TYPE_CHECK_SANCTUARY=false REACT_APP_TYPE_CHECK_SANCTUARY=false
PORT=3001 PORT=3001
REACT_APP_BUILD_TARGET=LAMASSU

29
new-lamassu-admin/.eslintrc.js
View file

@ -1,29 +0,0 @@
module.exports = {
extends: ['react-app', 'prettier-standard', 'prettier/react'],
plugins: ['import'],
settings: {
'import/resolver': {
alias: [['src', './src']]
}
},
rules: {
'import/no-anonymous-default-export': [2, { allowObject: true }],
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
'parent',
'sibling',
'index'
],
alphabetize: {
order: 'asc'
},
'newlines-between': 'always'
}
]
}
}

8
new-lamassu-admin/.prettierrc Normal file
View file

@ -0,0 +1,8 @@
{
"trailingComma": "none",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"arrowParens": "avoid",
"bracketSameLine": true
}

10
new-lamassu-admin/.storybook/main.js
View file

@ -1,10 +0,0 @@
module.exports = {
stories: ['../src/stories/index.js'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-backgrounds',
'@storybook/preset-create-react-app'
]
}

1
new-lamassu-admin/.tool-versions Normal file
View file

@ -0,0 +1 @@
nodejs 22

16
new-lamassu-admin/README.md
View file

@ -1,5 +1,3 @@
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Dev Environment ## Dev Environment
### formatting ### formatting
@ -10,16 +8,6 @@ The configuration for vscode is already on the repo, all you need to do is insta
This project has a husky pre commit hook to format the staged changes using our styleguide. This project has a husky pre commit hook to format the staged changes using our styleguide.
To take advantage of that make sure to run `git commit` from within this folder. To take advantage of that make sure to run `git commit` from within this folder.
### Sanctuary
Sanctuary has a runtime typechecker that can make be quite slow, but its turned off by default.
To turn it on add the following line to a `.env.local` file.
```
REACT_APP_TYPE_CHECK_SANCTUARY=true
```
## Available Scripts ## Available Scripts
In the project directory, you can run: In the project directory, you can run:
@ -36,10 +24,6 @@ You will also see any lint errors in the console.
Runs eslint --fix on the src folder Runs eslint --fix on the src folder
### `npm storybook`
Runs the storybook server
### `npm test` ### `npm test`
Launches the test runner in the interactive watch mode.<br> Launches the test runner in the interactive watch mode.<br>

39
new-lamassu-admin/eslint.config.js Normal file
View file

@ -0,0 +1,39 @@
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginReact from 'eslint-plugin-react'
import reactCompiler from 'eslint-plugin-react-compiler'
import eslintConfigPrettier from 'eslint-config-prettier'
/** @type {import('eslint').Linter.Config[]} */
export default [
{
files: ['**/*.{js,mjs,cjs,jsx}'],
languageOptions: {
...pluginReact.configs.flat.recommended.languageOptions,
globals: {
...globals.browser,
process: 'readonly'
}
},
settings: {
react: {
version: '16'
}
},
plugins: {
'react-compiler': reactCompiler
}
},
pluginJs.configs.recommended,
pluginReact.configs.flat.recommended,
{
rules: {
'no-unused-vars': 'off',
'react/prop-types': 'off',
'react/display-name': 'off',
'react/no-unescaped-entities': 'off',
'react-compiler/react-compiler': 'warn'
}
},
eslintConfigPrettier
]

20
new-lamassu-admin/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="robots" content="noindex"/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Lamassu Admin</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>

33530
new-lamassu-admin/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

87
new-lamassu-admin/package.json
View file

@ -2,12 +2,13 @@
"name": "lamassu-admin", "name": "lamassu-admin",
"version": "0.2.1", "version": "0.2.1",
"license": "../LICENSE", "license": "../LICENSE",
"type": "module",
"dependencies": { "dependencies": {
"@apollo/react-hooks": "^3.1.3", "@apollo/react-hooks": "^3.1.3",
"@lamassu/coins": "v1.4.0-beta.4", "@lamassu/coins": "v1.5.3",
"@material-ui/core": "4.11.0", "@material-ui/core": "4.12.4",
"@material-ui/icons": "4.9.1", "@material-ui/icons": "4.11.2",
"@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/lab": "^4.0.0-alpha.61",
"@simplewebauthn/browser": "^3.0.0", "@simplewebauthn/browser": "^3.0.0",
"@use-hooks/axios": "1.3.0", "@use-hooks/axios": "1.3.0",
"apollo-cache-inmemory": "^1.6.6", "apollo-cache-inmemory": "^1.6.6",
@ -27,12 +28,11 @@
"downshift": "3.3.4", "downshift": "3.3.4",
"file-saver": "2.0.2", "file-saver": "2.0.2",
"formik": "2.2.0", "formik": "2.2.0",
"google-libphonenumber": "^3.2.22",
"graphql": "^14.5.8", "graphql": "^14.5.8",
"graphql-tag": "^2.10.3", "graphql-tag": "^2.12.6",
"jss-plugin-extend": "^10.0.0", "jss-plugin-extend": "^10.0.0",
"jszip": "^3.6.0", "jszip": "^3.6.0",
"libphonenumber-js": "^1.7.50", "libphonenumber-js": "^1.11.15",
"match-sorter": "^4.2.0", "match-sorter": "^4.2.0",
"pretty-ms": "^2.1.0", "pretty-ms": "^2.1.0",
"qrcode.react": "0.9.3", "qrcode.react": "0.9.3",
@ -41,69 +41,34 @@
"react-copy-to-clipboard": "^5.0.2", "react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.10.2", "react-dom": "^16.10.2",
"react-dropzone": "^11.4.2", "react-dropzone": "^11.4.2",
"react-material-ui-carousel": "^2.2.7", "react-material-ui-carousel": "^2.3.11",
"react-number-format": "^4.4.1", "react-number-format": "^4.4.1",
"react-otp-input": "^2.3.0", "react-otp-input": "^2.3.0",
"react-router-dom": "5.1.2", "react-router-dom": "5.1.2",
"react-use": "15.3.2", "react-use": "15.3.2",
"react-virtualized": "^9.21.2", "react-virtualized": "^9.21.2",
"sanctuary": "^2.0.1",
"ua-parser-js": "^1.0.2", "ua-parser-js": "^1.0.2",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"yup": "0.32.9" "yup": "1.4.0"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-actions": "6.0.26", "@eslint/js": "^9.16.0",
"@storybook/addon-backgrounds": "6.0.26", "@vitejs/plugin-react-swc": "^3.7.2",
"@storybook/addon-knobs": "6.0.26", "esbuild-plugin-react-virtualized": "^1.0.4",
"@storybook/addon-links": "6.0.26", "eslint": "^9.16.0",
"@storybook/addons": "6.0.26", "eslint-config-prettier": "^9.1.0",
"@storybook/preset-create-react-app": "^3.1.4", "eslint-plugin-react": "^7.37.2",
"@storybook/react": "6.0.26", "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
"@welldone-software/why-did-you-render": "^3.3.9", "globals": "^15.13.0",
"eslint": "^7.19.0", "lint-staged": "^15.2.10",
"eslint-config-prettier": "^6.7.0", "prettier": "3.4.1",
"eslint-config-prettier-standard": "^3.0.1", "vite": "^6.0.1",
"eslint-config-standard": "^14.1.0", "vite-plugin-svgr": "^4.3.0"
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-standard": "^4.0.1",
"husky": "^3.1.0",
"lint-staged": "^9.5.0",
"patch-package": "^6.2.2",
"prettier": "1.19.1",
"prettier-config-standard": "^1.0.1",
"react-scripts": "4.0.0",
"serve": "^11.3.2",
"source-map-explorer": "^2.4.2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"eslint --fix",
"git add"
]
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "vite",
"fix": "eslint --fix --ext .js,.md,.json src/", "build": "vite build",
"build": "react-scripts build", "preview": "vite preview"
"analyze": "source-map-explorer 'build/static/js/*.js'",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"postinstall": "patch-package",
"build-storybook": "build-storybook -s public",
"lamassu": "REACT_APP_BUILD_TARGET=LAMASSU react-scripts start",
"pazuz": "REACT_APP_BUILD_TARGET=PAZUZ react-scripts start"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
@ -116,5 +81,9 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
},
"lint-staged": {
"*.{js,jsx,md,json}": "eslint --cache --fix",
"*.{js,jsx,css,md,json}": "prettier --write"
} }
} }

42
new-lamassu-admin/public/index.html
View file

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="robots" content="noindex"/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Lamassu Admin</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

27
new-lamassu-admin/src/App.js → new-lamassu-admin/src/App.jsx
View file

@ -17,21 +17,16 @@ import {
useHistory, useHistory,
BrowserRouter as Router BrowserRouter as Router
} from 'react-router-dom' } from 'react-router-dom'
import AppContext from 'src/AppContext'
import Header from 'src/components/layout/Header' import Header from 'src/components/layout/Header'
import Sidebar from 'src/components/layout/Sidebar' import Sidebar from 'src/components/layout/Sidebar'
import TitleSection from 'src/components/layout/TitleSection' import TitleSection from 'src/components/layout/TitleSection'
import { tree, hasSidebar, Routes, getParent } from 'src/routing/routes' import { tree, hasSidebar, Routes, getParent } from 'src/routing/routes'
import ApolloProvider from 'src/utils/apollo'
import AppContext from 'src/AppContext'
import global from 'src/styling/global' import global from 'src/styling/global'
import theme from 'src/styling/theme' import theme from 'src/styling/theme'
import { backgroundColor, mainWidth } from 'src/styling/variables' import { backgroundColor, mainWidth } from 'src/styling/variables'
import ApolloProvider from 'src/utils/apollo'
if (process.env.NODE_ENV !== 'production') {
const whyDidYouRender = require('@welldone-software/why-did-you-render')
whyDidYouRender(React)
}
const jss = create({ const jss = create({
plugins: [extendJss(), ...jssPreset().plugins] plugins: [extendJss(), ...jssPreset().plugins]
@ -120,17 +115,11 @@ const Main = () => {
)} )}
<main className={classes.wrapper}> <main className={classes.wrapper}>
{sidebar && !is404 && wizardTested && ( {sidebar && !is404 && wizardTested && (
<Slide <Slide direction="left" in={true} mountOnEnter unmountOnExit>
direction="left" <div>
in={true} <TitleSection title={parent.title}></TitleSection>
mountOnEnter </div>
unmountOnExit </Slide>
children={
<div>
<TitleSection title={parent.title}></TitleSection>
</div>
}
/>
)} )}
<Grid container className={classes.grid}> <Grid container className={classes.grid}>

10
new-lamassu-admin/src/components/Carousel.js → new-lamassu-admin/src/components/Carousel.jsx
View file

@ -1,10 +1,8 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import React, { memo } from 'react' import React, { memo } from 'react'
import ReactCarousel from 'react-material-ui-carousel' import ReactCarousel from 'react-material-ui-carousel'
import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
import { ReactComponent as LeftArrow } from 'src/styling/icons/arrow/carousel-left-arrow.svg' import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
import { ReactComponent as RightArrow } from 'src/styling/icons/arrow/carousel-right-arrow.svg'
import { URI } from 'src/utils/apollo'
const useStyles = makeStyles({ const useStyles = makeStyles({
imgWrapper: { imgWrapper: {
@ -49,11 +47,11 @@ export const Carousel = memo(({ photosData, slidePhoto }) => {
next={activeIndex => slidePhoto(activeIndex)} next={activeIndex => slidePhoto(activeIndex)}
prev={activeIndex => slidePhoto(activeIndex)}> prev={activeIndex => slidePhoto(activeIndex)}>
{photosData.map((item, i) => ( {photosData.map((item, i) => (
<div> <div key={i}>
<div className={classes.imgWrapper}> <div className={classes.imgWrapper}>
<img <img
className={classes.imgInner} className={classes.imgInner}
src={`${URI}/${item?.photoDir}/${item?.path}`} src={`/${item?.photoDir}/${item?.path}`}
alt="" alt=""
/> />
</div> </div>

0
new-lamassu-admin/src/components/Chip.js → new-lamassu-admin/src/components/Chip.jsx
View file

0
new-lamassu-admin/src/components/CollapsibleCard.js → new-lamassu-admin/src/components/CollapsibleCard.jsx
View file

4
new-lamassu-admin/src/components/ConfirmDialog.js → new-lamassu-admin/src/components/ConfirmDialog.jsx
View file

@ -6,11 +6,11 @@ import {
InputLabel InputLabel
} from '@material-ui/core' } from '@material-ui/core'
import React, { memo, useState } from 'react' import React, { memo, useState } from 'react'
import { H4, P } from 'src/components/typography'
import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
import { Button, IconButton } from 'src/components/buttons' import { Button, IconButton } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs' import { TextInput } from 'src/components/inputs'
import { H4, P } from 'src/components/typography'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
import { spacer } from 'src/styling/variables' import { spacer } from 'src/styling/variables'
import ErrorMessage from './ErrorMessage' import ErrorMessage from './ErrorMessage'

196
new-lamassu-admin/src/components/DeleteDialog.js → new-lamassu-admin/src/components/DeleteDialog.jsx
View file

@ -1,98 +1,98 @@
import { import {
Dialog, Dialog,
DialogActions, DialogActions,
DialogContent, DialogContent,
makeStyles makeStyles
} from '@material-ui/core' } from '@material-ui/core'
import React from 'react' import React from 'react'
import { H4, P } from 'src/components/typography'
import { Button, IconButton } from 'src/components/buttons' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
import { H4, P } from 'src/components/typography'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' import { Button, IconButton } from 'src/components/buttons'
import { spacer } from 'src/styling/variables' import { spacer } from 'src/styling/variables'
import ErrorMessage from './ErrorMessage' import ErrorMessage from './ErrorMessage'
const useStyles = makeStyles({ const useStyles = makeStyles({
content: { content: {
width: 434, width: 434,
padding: spacer * 2, padding: spacer * 2,
paddingRight: spacer * 3.5 paddingRight: spacer * 3.5
}, },
titleSection: { titleSection: {
padding: spacer * 2, padding: spacer * 2,
paddingRight: spacer * 1.5, paddingRight: spacer * 1.5,
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
margin: 0 margin: 0
}, },
actions: { actions: {
padding: spacer * 4, padding: spacer * 4,
paddingTop: spacer * 2 paddingTop: spacer * 2
}, },
title: { title: {
margin: 0 margin: 0
}, },
closeButton: { closeButton: {
padding: 0, padding: 0,
marginTop: -(spacer / 2) marginTop: -(spacer / 2)
} }
}) })
export const DialogTitle = ({ children, close }) => { export const DialogTitle = ({ children, close }) => {
const classes = useStyles() const classes = useStyles()
return ( return (
<div className={classes.titleSection}> <div className={classes.titleSection}>
{children} {children}
{close && ( {close && (
<IconButton <IconButton
size={16} size={16}
aria-label="close" aria-label="close"
onClick={close} onClick={close}
className={classes.closeButton}> className={classes.closeButton}>
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
)} )}
</div> </div>
) )
} }
export const DeleteDialog = ({ export const DeleteDialog = ({
title = 'Confirm Delete', title = 'Confirm Delete',
open = false, open = false,
onConfirmed, onConfirmed,
onDismissed, onDismissed,
item = 'item', item = 'item',
confirmationMessage = `Are you sure you want to delete this ${item}?`, confirmationMessage = `Are you sure you want to delete this ${item}?`,
extraMessage, extraMessage,
errorMessage = '' errorMessage = ''
}) => { }) => {
const classes = useStyles() const classes = useStyles()
return ( return (
<Dialog open={open} aria-labelledby="form-dialog-title"> <Dialog open={open} aria-labelledby="form-dialog-title">
<DialogTitle close={() => onDismissed()}> <DialogTitle close={() => onDismissed()}>
<H4 className={classes.title}>{title}</H4> <H4 className={classes.title}>{title}</H4>
</DialogTitle> </DialogTitle>
{errorMessage && ( {errorMessage && (
<DialogTitle> <DialogTitle>
<ErrorMessage> <ErrorMessage>
{errorMessage.split(':').map(error => ( {errorMessage.split(':').map(error => (
<> <>
{error} {error}
<br /> <br />
</> </>
))} ))}
</ErrorMessage> </ErrorMessage>
</DialogTitle> </DialogTitle>
)} )}
<DialogContent className={classes.content}> <DialogContent className={classes.content}>
{confirmationMessage && <P>{confirmationMessage}</P>} {confirmationMessage && <P>{confirmationMessage}</P>}
{extraMessage} {extraMessage}
</DialogContent> </DialogContent>
<DialogActions className={classes.actions}> <DialogActions className={classes.actions}>
<Button onClick={onConfirmed}>Confirm</Button> <Button onClick={onConfirmed}>Confirm</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
) )
} }

2
new-lamassu-admin/src/components/ErrorMessage.js → new-lamassu-admin/src/components/ErrorMessage.jsx
View file

@ -1,8 +1,8 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import ErrorIcon from 'src/styling/icons/warning-icon/tomato.svg?react'
import { ReactComponent as ErrorIcon } from 'src/styling/icons/warning-icon/tomato.svg'
import { errorColor } from 'src/styling/variables' import { errorColor } from 'src/styling/variables'
import { Info3 } from './typography' import { Info3 } from './typography'

6
new-lamassu-admin/src/components/ImagePopper.js → new-lamassu-admin/src/components/ImagePopper.jsx
View file

@ -1,11 +1,11 @@
import { makeStyles, ClickAwayListener } from '@material-ui/core' import { makeStyles, ClickAwayListener } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import React, { memo, useState } from 'react' import React, { memo, useState } from 'react'
import Popper from 'src/components/Popper' import Popper from 'src/components/Popper'
import ZoomIconInverse from 'src/styling/icons/circle buttons/search/white.svg?react'
import ZoomIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
import { FeatureButton } from 'src/components/buttons' import { FeatureButton } from 'src/components/buttons'
import { ReactComponent as ZoomIconInverse } from 'src/styling/icons/circle buttons/search/white.svg'
import { ReactComponent as ZoomIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'
import imagePopperStyles from './ImagePopper.styles' import imagePopperStyles from './ImagePopper.styles'

3
new-lamassu-admin/src/components/InfoMessage.js → new-lamassu-admin/src/components/InfoMessage.jsx
View file

@ -1,8 +1,7 @@
import { Box, makeStyles } from '@material-ui/core' import { Box, makeStyles } from '@material-ui/core'
import React from 'react' import React from 'react'
import { Label1 } from 'src/components/typography' import { Label1 } from 'src/components/typography'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
const useStyles = makeStyles({ const useStyles = makeStyles({
message: ({ width }) => ({ message: ({ width }) => ({

4
new-lamassu-admin/src/components/InformativeDialog.js → new-lamassu-admin/src/components/InformativeDialog.jsx
View file

@ -1,9 +1,9 @@
import { Dialog, DialogContent, makeStyles } from '@material-ui/core' import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
import React, { memo } from 'react' import React, { memo } from 'react'
import { H1 } from 'src/components/typography'
import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
import { IconButton } from 'src/components/buttons' import { IconButton } from 'src/components/buttons'
import { H1 } from 'src/components/typography'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
import { spacer } from 'src/styling/variables' import { spacer } from 'src/styling/variables'
const useStyles = makeStyles({ const useStyles = makeStyles({

6
new-lamassu-admin/src/components/LogsDownloaderPopper.js → new-lamassu-admin/src/components/LogsDownloaderPopper.jsx
View file

@ -5,11 +5,11 @@ import { format, set } from 'date-fns/fp'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState, useCallback } from 'react' import React, { useState, useCallback } from 'react'
import Arrow from 'src/styling/icons/arrow/download_logs.svg?react'
import DownloadInverseIcon from 'src/styling/icons/button/download/white.svg?react'
import Download from 'src/styling/icons/button/download/zodiac.svg?react'
import { FeatureButton, Link } from 'src/components/buttons' import { FeatureButton, Link } from 'src/components/buttons'
import { ReactComponent as Arrow } from 'src/styling/icons/arrow/download_logs.svg'
import { ReactComponent as DownloadInverseIcon } from 'src/styling/icons/button/download/white.svg'
import { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg'
import { primaryColor, offColor, zircon } from 'src/styling/variables' import { primaryColor, offColor, zircon } from 'src/styling/variables'
import { formatDate } from 'src/utils/timezones' import { formatDate } from 'src/utils/timezones'

8
new-lamassu-admin/src/components/Modal.js → new-lamassu-admin/src/components/Modal.jsx
View file

@ -1,10 +1,10 @@
import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core' import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import { H1, H4 } from 'src/components/typography'
import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
import { IconButton } from 'src/components/buttons' import { IconButton } from 'src/components/buttons'
import { H1, H4 } from 'src/components/typography'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
const styles = { const styles = {
modal: { modal: {
@ -55,8 +55,8 @@ const styles = {
margin: xl margin: xl
? [[0, 0, 'auto', 'auto']] ? [[0, 0, 'auto', 'auto']]
: small : small
? [[12, 12, 'auto', 'auto']] ? [[12, 12, 'auto', 'auto']]
: [[16, 16, 'auto', 'auto']] : [[16, 16, 'auto', 'auto']]
}), }),
header: { header: {
display: 'flex' display: 'flex'

9
new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.js → new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx
View file

@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core/styles'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import ActionButton from 'src/components/buttons/ActionButton' import ActionButton from 'src/components/buttons/ActionButton'
import { H5 } from 'src/components/typography' import { H5 } from 'src/components/typography'
import { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg' import NotificationIconZodiac from 'src/styling/icons/menu/notification-zodiac.svg?react'
import { ReactComponent as ClearAllIconInverse } from 'src/styling/icons/stage/spring/empty.svg' import ClearAllIconInverse from 'src/styling/icons/stage/spring/empty.svg?react'
import { ReactComponent as ClearAllIcon } from 'src/styling/icons/stage/zodiac/empty.svg' import ClearAllIcon from 'src/styling/icons/stage/zodiac/empty.svg?react'
import { ReactComponent as ShowUnreadIcon } from 'src/styling/icons/stage/zodiac/full.svg' import ShowUnreadIcon from 'src/styling/icons/stage/zodiac/full.svg?react'
import styles from './NotificationCenter.styles' import styles from './NotificationCenter.styles'
import NotificationRow from './NotificationRow' import NotificationRow from './NotificationRow'

11
new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js → new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx
View file

@ -3,11 +3,10 @@ import classnames from 'classnames'
import prettyMs from 'pretty-ms' import prettyMs from 'pretty-ms'
import * as R from 'ramda' import * as R from 'ramda'
import React from 'react' import React from 'react'
import { Label1, Label2, TL2 } from 'src/components/typography' import { Label1, Label2, TL2 } from 'src/components/typography'
import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg' import Wrench from 'src/styling/icons/action/wrench/zodiac.svg?react'
import { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg' import Transaction from 'src/styling/icons/arrow/transaction.svg?react'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg' import WarningIcon from 'src/styling/icons/warning-icon/tomato.svg?react'
import styles from './NotificationCenter.styles' import styles from './NotificationCenter.styles'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
@ -61,8 +60,8 @@ const NotificationRow = ({
typeDisplay && deviceName typeDisplay && deviceName
? `${typeDisplay} - ${deviceName}` ? `${typeDisplay} - ${deviceName}`
: !typeDisplay && deviceName : !typeDisplay && deviceName
? `${deviceName}` ? `${deviceName}`
: `${typeDisplay}` : `${typeDisplay}`
const iconClass = { const iconClass = {
[classes.readIcon]: read, [classes.readIcon]: read,

0
new-lamassu-admin/src/components/Popper.js → new-lamassu-admin/src/components/Popper.jsx
View file

0
new-lamassu-admin/src/components/PromptWhenDirty.js → new-lamassu-admin/src/components/PromptWhenDirty.jsx
View file

3
new-lamassu-admin/src/components/SearchBox.js → new-lamassu-admin/src/components/SearchBox.jsx
View file

@ -4,9 +4,8 @@ import { makeStyles } from '@material-ui/core/styles'
import MAutocomplete from '@material-ui/lab/Autocomplete' import MAutocomplete from '@material-ui/lab/Autocomplete'
import classnames from 'classnames' import classnames from 'classnames'
import React, { memo, useState } from 'react' import React, { memo, useState } from 'react'
import { P } from 'src/components/typography' import { P } from 'src/components/typography'
import { ReactComponent as SearchIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg' import SearchIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
import styles from './SearchBox.styles' import styles from './SearchBox.styles'

10
new-lamassu-admin/src/components/SearchFilter.js → new-lamassu-admin/src/components/SearchFilter.jsx
View file

@ -1,12 +1,12 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import React from 'react' import React from 'react'
import Chip from 'src/components/Chip' import Chip from 'src/components/Chip'
import { ActionButton } from 'src/components/buttons'
import { P, Label3 } from 'src/components/typography' import { P, Label3 } from 'src/components/typography'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
import { ReactComponent as FilterIcon } from 'src/styling/icons/button/filter/white.svg' import FilterIcon from 'src/styling/icons/button/filter/white.svg?react'
import { ReactComponent as ReverseFilterIcon } from 'src/styling/icons/button/filter/zodiac.svg' import ReverseFilterIcon from 'src/styling/icons/button/filter/zodiac.svg?react'
import { ActionButton } from 'src/components/buttons'
import { onlyFirstToUpper, singularOrPlural } from 'src/utils/string' import { onlyFirstToUpper, singularOrPlural } from 'src/utils/string'
import { chipStyles, styles } from './SearchFilter.styles' import { chipStyles, styles } from './SearchFilter.styles'

12
new-lamassu-admin/src/components/Stage.js → new-lamassu-admin/src/components/Stage.jsx
View file

@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import * as R from 'ramda' import * as R from 'ramda'
import React, { memo } from 'react' import React, { memo } from 'react'
import CompleteStageIconSpring from 'src/styling/icons/stage/spring/complete.svg?react'
import CurrentStageIconSpring from 'src/styling/icons/stage/spring/current.svg?react'
import EmptyStageIconSpring from 'src/styling/icons/stage/spring/empty.svg?react'
import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
import { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'
import { ReactComponent as CurrentStageIconSpring } from 'src/styling/icons/stage/spring/current.svg'
import { ReactComponent as EmptyStageIconSpring } from 'src/styling/icons/stage/spring/empty.svg'
import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
import { import {
primaryColor, primaryColor,
secondaryColor, secondaryColor,

0
new-lamassu-admin/src/components/Status.js → new-lamassu-admin/src/components/Status.jsx
View file

12
new-lamassu-admin/src/components/Stepper.js → new-lamassu-admin/src/components/Stepper.jsx
View file

@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import * as R from 'ramda' import * as R from 'ramda'
import React, { memo } from 'react' import React, { memo } from 'react'
import CompleteStageIconSpring from 'src/styling/icons/stage/spring/complete.svg?react'
import CurrentStageIconSpring from 'src/styling/icons/stage/spring/current.svg?react'
import EmptyStageIconSpring from 'src/styling/icons/stage/spring/empty.svg?react'
import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
import { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'
import { ReactComponent as CurrentStageIconSpring } from 'src/styling/icons/stage/spring/current.svg'
import { ReactComponent as EmptyStageIconSpring } from 'src/styling/icons/stage/spring/empty.svg'
import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
import { import {
primaryColor, primaryColor,
secondaryColor, secondaryColor,

0
new-lamassu-admin/src/components/Subtitle.js → new-lamassu-admin/src/components/Subtitle.jsx
View file

0
new-lamassu-admin/src/components/TableLabel.js → new-lamassu-admin/src/components/TableLabel.jsx
View file

0
new-lamassu-admin/src/components/Title.js → new-lamassu-admin/src/components/Title.jsx
View file

5
new-lamassu-admin/src/components/Tooltip.js → new-lamassu-admin/src/components/Tooltip.jsx
View file

@ -1,9 +1,8 @@
import { makeStyles, ClickAwayListener } from '@material-ui/core' import { makeStyles, ClickAwayListener } from '@material-ui/core'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState, memo } from 'react' import React, { useState, memo } from 'react'
import Popper from 'src/components/Popper' import Popper from 'src/components/Popper'
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg' import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react'
const useStyles = makeStyles({ const useStyles = makeStyles({
transparentButton: { transparentButton: {
@ -103,7 +102,7 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
<button <button
type="button" type="button"
onMouseEnter={handler.handleOpenHelpPopper} onMouseEnter={handler.handleOpenHelpPopper}
onMouseLeave={handler.handleCloseHelpPopper}> onMouseLeave={handler.handleCloseHelpPopper}
className={handler.classes.transparentButton}> className={handler.classes.transparentButton}>
<HelpIcon /> <HelpIcon />
</button> </button>

0
new-lamassu-admin/src/components/Uptime.js → new-lamassu-admin/src/components/Uptime.jsx
View file

12
new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.js → new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx
View file

@ -3,17 +3,17 @@ import classnames from 'classnames'
import { useFormikContext, Form, Formik, Field as FormikField } from 'formik' import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState, memo } from 'react' import React, { useState, memo } from 'react'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { H4 } from 'src/components/typography'
import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'
import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import FalseIcon from 'src/styling/icons/table/false.svg?react'
import TrueIcon from 'src/styling/icons/table/true.svg?react'
import * as Yup from 'yup' import * as Yup from 'yup'
import PromptWhenDirty from 'src/components/PromptWhenDirty'
import { Link, IconButton } from 'src/components/buttons' import { Link, IconButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs/formik' import { RadioGroup } from 'src/components/inputs/formik'
import { Table, TableBody, TableRow, TableCell } from 'src/components/table' import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
import { H4 } from 'src/components/typography'
import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import { ReactComponent as FalseIcon } from 'src/styling/icons/table/false.svg'
import { ReactComponent as TrueIcon } from 'src/styling/icons/table/true.svg'
import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles' import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'

0
new-lamassu-admin/src/components/buttons/ActionButton.js → new-lamassu-admin/src/components/buttons/ActionButton.jsx
View file

2
new-lamassu-admin/src/components/buttons/AddButton.js → new-lamassu-admin/src/components/buttons/AddButton.jsx
View file

@ -1,9 +1,9 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React, { memo } from 'react' import React, { memo } from 'react'
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
import typographyStyles from 'src/components/typography/styles' import typographyStyles from 'src/components/typography/styles'
import { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'
import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables' import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
const { p } = typographyStyles const { p } = typographyStyles

0
new-lamassu-admin/src/components/buttons/Button.js → new-lamassu-admin/src/components/buttons/Button.jsx
View file

2
new-lamassu-admin/src/components/buttons/DeleteButton.js → new-lamassu-admin/src/components/buttons/DeleteButton.jsx
View file

@ -1,9 +1,9 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React, { memo } from 'react' import React, { memo } from 'react'
import DeleteIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'
import typographyStyles from 'src/components/typography/styles' import typographyStyles from 'src/components/typography/styles'
import { ReactComponent as DeleteIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables' import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
const { p } = typographyStyles const { p } = typographyStyles

0
new-lamassu-admin/src/components/buttons/FeatureButton.js → new-lamassu-admin/src/components/buttons/FeatureButton.jsx
View file

2
new-lamassu-admin/src/components/buttons/IDButton.js → new-lamassu-admin/src/components/buttons/IDButton.jsx
View file

@ -2,8 +2,8 @@ import { ClickAwayListener } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React, { useState, memo } from 'react' import React, { useState, memo } from 'react'
import Popover from 'src/components/Popper' import Popover from 'src/components/Popper'
import typographyStyles from 'src/components/typography/styles' import typographyStyles from 'src/components/typography/styles'
import { import {
subheaderColor, subheaderColor,

0
new-lamassu-admin/src/components/buttons/IconButton.js → new-lamassu-admin/src/components/buttons/IconButton.jsx
View file

0
new-lamassu-admin/src/components/buttons/Link.js → new-lamassu-admin/src/components/buttons/Link.jsx
View file

6
new-lamassu-admin/src/components/buttons/Link.styles.js
View file

@ -1,4 +1,4 @@
import { fade } from '@material-ui/core/styles/colorManipulator' import { alpha } from '@material-ui/core/styles/colorManipulator'
import typographyStyles from 'src/components/typography/styles' import typographyStyles from 'src/components/typography/styles'
import { import {
@ -11,10 +11,10 @@ import {
const { h4 } = typographyStyles const { h4 } = typographyStyles
const color = color => ({ const color = color => ({
boxShadow: `inset 0 -4px 0 0 ${fade(color, 0.8)}`, boxShadow: `inset 0 -4px 0 0 ${alpha(color, 0.8)}`,
'&:hover': { '&:hover': {
boxShadow: 'none', boxShadow: 'none',
backgroundColor: fade(color, 0.8) backgroundColor: alpha(color, 0.8)
} }
}) })

59
new-lamassu-admin/src/components/buttons/SimpleButton.js
View file

@ -1,59 +0,0 @@
import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import React, { memo } from 'react'
import baseButtonStyles from './BaseButton.styles'
const { baseButton, primary } = baseButtonStyles
const styles = {
button: {
extend: baseButton,
borderRadius: baseButton.height / 2,
outline: 0,
padding: '0 20px'
},
primary,
buttonIcon: {
marginTop: 4,
marginRight: 4,
'& svg': {
width: 20,
height: 20,
overflow: 'visible'
}
},
buttonIconActive: {} // required to extend primary
}
const useStyles = makeStyles(styles)
const SimpleButton = memo(
({ className, Icon, InverseIcon, children, color, size, ...props }) => {
const classes = useStyles()
return (
<button
className={classnames(classes.primary, classes.button, className)}
{...props}>
{Icon && (
<div className={classes.buttonIcon}>
<Icon />
</div>
)}
{InverseIcon && (
<div
className={classnames(
classes.buttonIcon,
classes.buttonIconActive
)}>
<InverseIcon />
</div>
)}
{children}
</button>
)
}
)
export default SimpleButton

3
new-lamassu-admin/src/components/buttons/SubpageButton.js → new-lamassu-admin/src/components/buttons/SubpageButton.jsx
View file

@ -1,9 +1,8 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React, { memo, useState } from 'react' import React, { memo, useState } from 'react'
import { H4 } from 'src/components/typography' import { H4 } from 'src/components/typography'
import { ReactComponent as CancelIconInverse } from 'src/styling/icons/button/cancel/white.svg' import CancelIconInverse from 'src/styling/icons/button/cancel/white.svg?react'
import subpageButtonStyles from './SubpageButton.styles' import subpageButtonStyles from './SubpageButton.styles'

4
new-lamassu-admin/src/components/buttons/SupportLinkButton.js → new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx
View file

@ -1,9 +1,9 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import React from 'react' import React from 'react'
import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'
import { ActionButton } from 'src/components/buttons' import { ActionButton } from 'src/components/buttons'
import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
import { spacer, primaryColor } from 'src/styling/variables' import { spacer, primaryColor } from 'src/styling/variables'
const useStyles = makeStyles({ const useStyles = makeStyles({

2
new-lamassu-admin/src/components/buttons/index.js
View file

@ -6,14 +6,12 @@ import FeatureButton from './FeatureButton'
import IDButton from './IDButton' import IDButton from './IDButton'
import IconButton from './IconButton' import IconButton from './IconButton'
import Link from './Link' import Link from './Link'
import SimpleButton from './SimpleButton'
import SubpageButton from './SubpageButton' import SubpageButton from './SubpageButton'
import SupportLinkButton from './SupportLinkButton' import SupportLinkButton from './SupportLinkButton'
export { export {
Button, Button,
Link, Link,
SimpleButton,
ActionButton, ActionButton,
FeatureButton, FeatureButton,
IconButton, IconButton,

4
new-lamassu-admin/src/components/date-range-picker/Calendar.js → new-lamassu-admin/src/components/date-range-picker/Calendar.jsx
View file

@ -15,10 +15,10 @@ import {
} from 'date-fns/fp' } from 'date-fns/fp'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState } from 'react' import React, { useState } from 'react'
import Arrow from 'src/styling/icons/arrow/month_change.svg?react'
import RightArrow from 'src/styling/icons/arrow/month_change_right.svg?react'
import typographyStyles from 'src/components/typography/styles' import typographyStyles from 'src/components/typography/styles'
import { ReactComponent as Arrow } from 'src/styling/icons/arrow/month_change.svg'
import { ReactComponent as RightArrow } from 'src/styling/icons/arrow/month_change_right.svg'
import { primaryColor, zircon } from 'src/styling/variables' import { primaryColor, zircon } from 'src/styling/variables'
import Tile from './Tile' import Tile from './Tile'

0
new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js → new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx
View file

0
new-lamassu-admin/src/components/date-range-picker/Tile.js → new-lamassu-admin/src/components/date-range-picker/Tile.jsx
View file

6
new-lamassu-admin/src/components/editableProperty/EditableProperty.js → new-lamassu-admin/src/components/editableProperty/EditableProperty.jsx
View file

@ -1,11 +1,11 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import React, { useState, memo } from 'react' import React, { useState, memo } from 'react'
import { H4, P } from 'src/components/typography'
import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'
import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import { Link } from 'src/components/buttons' import { Link } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs' import { RadioGroup } from 'src/components/inputs'
import { H4, P } from 'src/components/typography'
import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import { editablePropertyStyles } from './EditableProperty.styles' import { editablePropertyStyles } from './EditableProperty.styles'

2
new-lamassu-admin/src/components/editableTable/Header.js → new-lamassu-admin/src/components/editableTable/Header.jsx
View file

@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useContext } from 'react' import React, { useContext } from 'react'
import { import {
Td, Td,
THead, THead,
TDoubleLevelHead, TDoubleLevelHead,
ThDoubleLevel ThDoubleLevel
} from 'src/components/fake-table/Table' } from 'src/components/fake-table/Table'
import { sentenceCase } from 'src/utils/string' import { sentenceCase } from 'src/utils/string'
import TableCtx from './Context' import TableCtx from './Context'

0
new-lamassu-admin/src/components/editableTable/NamespacedTable.js → new-lamassu-admin/src/components/editableTable/NamespacedTable.jsx
View file

597
new-lamassu-admin/src/components/editableTable/Row.js → new-lamassu-admin/src/components/editableTable/Row.jsx
View file

@ -1,298 +1,299 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import { Field, useFormikContext } from 'formik' import { Field, useFormikContext } from 'formik'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useContext, useState } from 'react' import React, { useContext, useState } from 'react'
import { DeleteDialog } from 'src/components/DeleteDialog'
import { DeleteDialog } from 'src/components/DeleteDialog' import { Td, Tr } from 'src/components/fake-table/Table'
import { Link, IconButton } from 'src/components/buttons' import { Label2 } from 'src/components/typography'
import { Td, Tr } from 'src/components/fake-table/Table' import DisabledDeleteIcon from 'src/styling/icons/action/delete/disabled.svg?react'
import { Switch } from 'src/components/inputs' import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
import { Label2 } from 'src/components/typography' import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg' import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg' import StripesSvg from 'src/styling/icons/stripes.svg?react'
import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg' import { Link, IconButton } from 'src/components/buttons'
import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg' import { Switch } from 'src/components/inputs'
import TableCtx from './Context' import TableCtx from './Context'
import styles from './Row.styles' import styles from './Row.styles'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
const ActionCol = ({ disabled, editing }) => { const ActionCol = ({ disabled, editing }) => {
const classes = useStyles() const classes = useStyles()
const { values, submitForm, resetForm } = useFormikContext() const { values, submitForm, resetForm } = useFormikContext()
const { const {
editWidth, editWidth,
onEdit, onEdit,
enableEdit, enableEdit,
enableDelete, enableDelete,
disableRowEdit, disableRowEdit,
onDelete, onDelete,
deleteWidth, deleteWidth,
enableToggle, enableToggle,
onToggle, onToggle,
toggleWidth, toggleWidth,
forceAdd, forceAdd,
clearError, clearError,
actionColSize, actionColSize,
error error
} = useContext(TableCtx) } = useContext(TableCtx)
const disableEdit = disabled || (disableRowEdit && disableRowEdit(values)) const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
const cancel = () => { const cancel = () => {
clearError() clearError()
resetForm() resetForm()
} }
const [deleteDialog, setDeleteDialog] = useState(false) const [deleteDialog, setDeleteDialog] = useState(false)
const onConfirmed = () => { const onConfirmed = () => {
onDelete(values.id).then(res => { onDelete(values.id).then(res => {
if (!R.isNil(res)) setDeleteDialog(false) if (!R.isNil(res)) setDeleteDialog(false)
}) })
} }
return ( return (
<> <>
{editing && ( {editing && (
<Td textAlign="center" width={actionColSize}> <Td textAlign="center" width={actionColSize}>
<Link <Link
className={classes.saveButton} className={classes.saveButton}
type="submit" type="submit"
color="primary" color="primary"
onClick={submitForm}> onClick={submitForm}>
Save Save
</Link> </Link>
{!forceAdd && ( {!forceAdd && (
<Link color="secondary" onClick={cancel}> <Link color="secondary" onClick={cancel}>
Cancel Cancel
</Link> </Link>
)} )}
</Td> </Td>
)} )}
{!editing && enableEdit && ( {!editing && enableEdit && (
<Td textAlign="center" width={editWidth}> <Td textAlign="center" width={editWidth}>
<IconButton <IconButton
disabled={disableEdit} disabled={disableEdit}
className={classes.editButton} className={classes.editButton}
onClick={() => onEdit && onEdit(values.id)}> onClick={() => onEdit && onEdit(values.id)}>
{disableEdit ? <DisabledEditIcon /> : <EditIcon />} {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
</IconButton> </IconButton>
</Td> </Td>
)} )}
{!editing && enableDelete && ( {!editing && enableDelete && (
<Td textAlign="center" width={deleteWidth}> <Td textAlign="center" width={deleteWidth}>
<IconButton <IconButton
disabled={disabled} disabled={disabled}
onClick={() => { onClick={() => {
setDeleteDialog(true) setDeleteDialog(true)
}}> }}>
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />} {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
</IconButton> </IconButton>
<DeleteDialog <DeleteDialog
open={deleteDialog} open={deleteDialog}
setDeleteDialog={setDeleteDialog} setDeleteDialog={setDeleteDialog}
onConfirmed={onConfirmed} onConfirmed={onConfirmed}
onDismissed={() => { onDismissed={() => {
setDeleteDialog(false) setDeleteDialog(false)
clearError() clearError()
}} }}
errorMessage={error} errorMessage={error}
/> />
</Td> </Td>
)} )}
{!editing && enableToggle && ( {!editing && enableToggle && (
<Td textAlign="center" width={toggleWidth}> <Td textAlign="center" width={toggleWidth}>
<Switch <Switch
checked={!!values.active} checked={!!values.active}
value={!!values.active} value={!!values.active}
disabled={disabled} disabled={disabled}
onChange={() => onToggle(values.id)} onChange={() => onToggle(values.id)}
/> />
</Td> </Td>
)} )}
</> </>
) )
} }
const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => { const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
const { const {
name, name,
names, names,
bypassField, bypassField,
input, input,
editable = true, editable = true,
size, size,
bold, bold,
width, width,
textAlign, textAlign,
editingAlign = textAlign, editingAlign = textAlign,
prefix, prefix,
PrefixComponent = Label2, PrefixComponent = Label2,
suffix, suffix,
SuffixComponent = Label2, SuffixComponent = Label2,
textStyle = it => {}, textStyle = it => {},
isHidden = it => false, isHidden = it => false,
view = it => it?.toString(), view = it => it?.toString(),
inputProps = {} inputProps = {}
} = config } = config
const fields = names ?? [name] const fields = names ?? [name]
const { values } = useFormikContext() const { values } = useFormikContext()
const isEditable = editable => { const isEditable = editable => {
if (typeof editable === 'function') return editable(values) if (typeof editable === 'function') return editable(values)
return editable return editable
} }
const isEditing = editing && isEditable(editable) const isEditing = editing && isEditable(editable)
const isField = !bypassField const isField = !bypassField
const classes = useStyles({ const classes = useStyles({
textAlign: isEditing ? editingAlign : textAlign, textAlign: isEditing ? editingAlign : textAlign,
size size
}) })
const innerProps = { const innerProps = {
fullWidth: true, fullWidth: true,
autoFocus: focus, autoFocus: focus,
size, size,
bold, bold,
textAlign: isEditing ? editingAlign : textAlign, textAlign: isEditing ? editingAlign : textAlign,
...inputProps ...inputProps
} }
return ( return (
<div className={classes.fields}> <div className={classes.fields}>
{R.map(f => ( {fields.map((f, idx) => (
<Td <Td
className={{ key={idx}
[classes.extraPaddingRight]: extraPaddingRight, className={{
[classes.extraPadding]: extraPadding, [classes.extraPaddingRight]: extraPaddingRight,
[classes.withSuffix]: suffix, [classes.extraPadding]: extraPadding,
[classes.withPrefix]: prefix [classes.withSuffix]: suffix,
}} [classes.withPrefix]: prefix
width={width} }}
size={size} width={width}
bold={bold} size={size}
textAlign={textAlign}> bold={bold}
{prefix && !isHidden(values) && ( textAlign={textAlign}>
<PrefixComponent {prefix && !isHidden(values) && (
className={classes.prefix} <PrefixComponent
style={isEditing ? {} : textStyle(values, isEditing)}> className={classes.prefix}
{typeof prefix === 'function' ? prefix(f) : prefix} style={isEditing ? {} : textStyle(values, isEditing)}>
</PrefixComponent> {typeof prefix === 'function' ? prefix(f) : prefix}
)} </PrefixComponent>
{isEditing && isField && !isHidden(values) && ( )}
<Field name={f} component={input} {...innerProps} /> {isEditing && isField && !isHidden(values) && (
)} <Field name={f} component={input} {...innerProps} />
{isEditing && !isField && !isHidden(values) && ( )}
<config.input name={f} /> {isEditing && !isField && !isHidden(values) && (
)} <config.input name={f} />
{!isEditing && values && !isHidden(values) && ( )}
<div style={textStyle(values, isEditing)}> {!isEditing && values && !isHidden(values) && (
{view(values[f], values)} <div style={textStyle(values, isEditing)}>
</div> {view(values[f], values)}
)} </div>
{suffix && !isHidden(values) && ( )}
<SuffixComponent {suffix && !isHidden(values) && (
className={classes.suffix} <SuffixComponent
style={isEditing ? {} : textStyle(values, isEditing)}> className={classes.suffix}
{suffix} style={isEditing ? {} : textStyle(values, isEditing)}>
</SuffixComponent> {suffix}
)} </SuffixComponent>
{isHidden(values) && <StripesSvg />} )}
</Td> {isHidden(values) && <StripesSvg />}
))(fields)} </Td>
</div> ))}
) </div>
} )
}
const groupStriped = elements => {
const [toStripe, noStripe] = R.partition(R.propEq('stripe', true))(elements) const groupStriped = elements => {
const [toStripe, noStripe] = R.partition(R.propEq('stripe', true))(elements)
if (!toStripe.length) {
return elements if (!toStripe.length) {
} return elements
}
const index = R.indexOf(toStripe[0], elements)
const width = R.compose(R.sum, R.map(R.path(['width'])))(toStripe) const index = R.indexOf(toStripe[0], elements)
const width = R.compose(R.sum, R.map(R.path(['width'])))(toStripe)
return R.insert(
index, return R.insert(
{ width, editable: false, view: () => <StripesSvg /> }, index,
noStripe { width, editable: false, view: () => <StripesSvg /> },
) noStripe
} )
}
const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
const { touched, errors, values } = useFormikContext() const ERow = ({ editing, disabled, lastOfGroup, newRow }) => {
const { const { touched, errors, values } = useFormikContext()
elements, const {
enableEdit, elements,
enableDelete, enableEdit,
error, enableDelete,
enableToggle, error,
rowSize, enableToggle,
stripeWhen rowSize,
} = useContext(TableCtx) stripeWhen
} = useContext(TableCtx)
const classes = useStyles()
const classes = useStyles()
const shouldStripe = !editing && stripeWhen && stripeWhen(values)
const shouldStripe = !editing && stripeWhen && stripeWhen(values)
const innerElements = shouldStripe ? groupStriped(elements) : elements
const [toSHeader] = R.partition(R.has('doubleHeader'))(elements) const innerElements = shouldStripe ? groupStriped(elements) : elements
const [toSHeader] = R.partition(R.has('doubleHeader'))(elements)
const extraPaddingIndex = toSHeader?.length
? R.indexOf(toSHeader[0], elements) const extraPaddingIndex = toSHeader?.length
: -1 ? R.indexOf(toSHeader[0], elements)
: -1
const extraPaddingRightIndex = toSHeader?.length
? R.indexOf(toSHeader[toSHeader.length - 1], elements) const extraPaddingRightIndex = toSHeader?.length
: -1 ? R.indexOf(toSHeader[toSHeader.length - 1], elements)
: -1
const elementToFocusIndex = innerElements.findIndex(
it => it.editable === undefined || it.editable const elementToFocusIndex = innerElements.findIndex(
) it => it.editable === undefined || it.editable
)
const classNames = {
[classes.lastOfGroup]: lastOfGroup const classNames = {
} [classes.lastOfGroup]: lastOfGroup
}
const touchedErrors = R.pick(R.keys(touched), errors)
const hasTouchedErrors = touchedErrors && R.keys(touchedErrors).length > 0 const touchedErrors = R.pick(R.keys(touched), errors)
const hasErrors = hasTouchedErrors || !!error const hasTouchedErrors = touchedErrors && R.keys(touchedErrors).length > 0
const hasErrors = hasTouchedErrors || !!error
const errorMessage =
error || (touchedErrors && R.values(touchedErrors).join(', ')) const errorMessage =
error || (touchedErrors && R.values(touchedErrors).join(', '))
return (
<Tr return (
className={classnames(classNames)} <Tr
size={rowSize} className={classnames(classNames)}
error={editing && hasErrors} size={rowSize}
newRow={newRow && !hasErrors} error={editing && hasErrors}
shouldShowError newRow={newRow && !hasErrors}
errorMessage={errorMessage}> shouldShowError
{innerElements.map((it, idx) => { errorMessage={errorMessage}>
return ( {innerElements.map((it, idx) => {
<ECol return (
key={idx} <ECol
config={it} key={idx}
editing={editing} config={it}
focus={idx === elementToFocusIndex && editing} editing={editing}
extraPaddingRight={extraPaddingRightIndex === idx} focus={idx === elementToFocusIndex && editing}
extraPadding={extraPaddingIndex === idx} extraPaddingRight={extraPaddingRightIndex === idx}
/> extraPadding={extraPaddingIndex === idx}
) />
})} )
{(enableEdit || enableDelete || enableToggle) && ( })}
<ActionCol disabled={disabled} editing={editing} /> {(enableEdit || enableDelete || enableToggle) && (
)} <ActionCol disabled={disabled} editing={editing} />
</Tr> )}
) </Tr>
} )
}
export default ERow
export default ERow

10
new-lamassu-admin/src/components/editableTable/Table.js → new-lamassu-admin/src/components/editableTable/Table.jsx
View file

@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
import { Form, Formik } from 'formik' import { Form, Formik } from 'formik'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { v4 } from 'uuid'
import PromptWhenDirty from 'src/components/PromptWhenDirty' import PromptWhenDirty from 'src/components/PromptWhenDirty'
import Link from 'src/components/buttons/Link.js' import Link from 'src/components/buttons/Link'
import { AddButton } from 'src/components/buttons/index.js'
import { TBody, Table } from 'src/components/fake-table/Table' import { TBody, Table } from 'src/components/fake-table/Table'
import { Info2, TL1 } from 'src/components/typography' import { Info2, TL1 } from 'src/components/typography'
import { v4 } from 'uuid'
import { AddButton } from 'src/components/buttons/index'
import TableCtx from './Context' import TableCtx from './Context'
import Header from './Header' import Header from './Header'
@ -75,7 +75,7 @@ const ETable = ({
setSaving(true) setSaving(true)
const it = validationSchema.cast(value) const it = validationSchema.cast(value, { assert: 'ignore-optionality' })
const index = R.findIndex(R.propEq('id', it.id))(data) const index = R.findIndex(R.propEq('id', it.id))(data)
const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data) const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)

0
new-lamassu-admin/src/components/fake-table/Table.js → new-lamassu-admin/src/components/fake-table/Table.jsx
View file

2
new-lamassu-admin/src/components/inputs/base/Autocomplete.js → new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx
View file

@ -3,9 +3,9 @@ import MAutocomplete from '@material-ui/lab/Autocomplete'
import sort from 'match-sorter' import sort from 'match-sorter'
import * as R from 'ramda' import * as R from 'ramda'
import React from 'react' import React from 'react'
import { HoverableTooltip } from 'src/components/Tooltip' import { HoverableTooltip } from 'src/components/Tooltip'
import { P } from 'src/components/typography' import { P } from 'src/components/typography'
import { errorColor, orangeYellow, spring4 } from 'src/styling/variables' import { errorColor, orangeYellow, spring4 } from 'src/styling/variables'
import TextInput from './TextInput' import TextInput from './TextInput'

4
new-lamassu-admin/src/components/inputs/base/Checkbox.js → new-lamassu-admin/src/components/inputs/base/Checkbox.jsx
View file

@ -3,9 +3,9 @@ import { makeStyles } from '@material-ui/core/styles'
import CheckBoxIcon from '@material-ui/icons/CheckBox' import CheckBoxIcon from '@material-ui/icons/CheckBox'
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank' import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
import React from 'react' import React from 'react'
import { Label2, Info3 } from 'src/components/typography' import { Label2, Info3 } from 'src/components/typography'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg' import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
import { import {
fontSize2, fontSize2,
fontSize3, fontSize3,

0
new-lamassu-admin/src/components/inputs/base/CodeInput.js → new-lamassu-admin/src/components/inputs/base/CodeInput.jsx
View file

0
new-lamassu-admin/src/components/inputs/base/Dropdown.js → new-lamassu-admin/src/components/inputs/base/Dropdown.jsx
View file

0
new-lamassu-admin/src/components/inputs/base/NumberInput.js → new-lamassu-admin/src/components/inputs/base/NumberInput.jsx
View file

2
new-lamassu-admin/src/components/inputs/base/RadioGroup.js → new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx
View file

@ -6,8 +6,8 @@ import {
} from '@material-ui/core' } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import { Label1 } from 'src/components/typography' import { Label1 } from 'src/components/typography'
import { offColor } from 'src/styling/variables' import { offColor } from 'src/styling/variables'
const styles = { const styles = {
label: { label: {

0
new-lamassu-admin/src/components/inputs/base/SecretInput.js → new-lamassu-admin/src/components/inputs/base/SecretInput.jsx
View file

3
new-lamassu-admin/src/components/inputs/base/Select.js → new-lamassu-admin/src/components/inputs/base/Select.jsx
View file

@ -3,8 +3,7 @@ import classnames from 'classnames'
import { useSelect } from 'downshift' import { useSelect } from 'downshift'
import * as R from 'ramda' import * as R from 'ramda'
import React from 'react' import React from 'react'
import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react'
import { ReactComponent as Arrowdown } from 'src/styling/icons/action/arrow/regular.svg'
import styles from './Select.styles' import styles from './Select.styles'

0
new-lamassu-admin/src/components/inputs/base/Switch.js → new-lamassu-admin/src/components/inputs/base/Switch.jsx
View file

0
new-lamassu-admin/src/components/inputs/base/TextInput.js → new-lamassu-admin/src/components/inputs/base/TextInput.jsx
View file

2
new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.js → new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx
View file

@ -2,8 +2,8 @@ import { makeStyles } from '@material-ui/core'
import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab' import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab'
import ToggleButton from '@material-ui/lab/ToggleButton' import ToggleButton from '@material-ui/lab/ToggleButton'
import React from 'react' import React from 'react'
import { H4, P } from 'src/components/typography' import { H4, P } from 'src/components/typography'
import { backgroundColor, comet } from 'src/styling/variables' import { backgroundColor, comet } from 'src/styling/variables'
const styles = { const styles = {
noTextTransform: { noTextTransform: {

2
new-lamassu-admin/src/components/inputs/cashbox/Cashbox.js → new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx
View file

@ -1,9 +1,9 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import Chip from 'src/components/Chip' import Chip from 'src/components/Chip'
import { Info2, Label1, Label2 } from 'src/components/typography' import { Info2, Label1, Label2 } from 'src/components/typography'
import { numberToFiatAmount } from 'src/utils/number' import { numberToFiatAmount } from 'src/utils/number'
import { cashboxStyles, gridStyles } from './Cashbox.styles' import { cashboxStyles, gridStyles } from './Cashbox.styles'

0
new-lamassu-admin/src/components/inputs/formik/Autocomplete.js → new-lamassu-admin/src/components/inputs/formik/Autocomplete.jsx
View file

1
new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.js → new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx
View file

@ -1,7 +1,6 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import classNames from 'classnames' import classNames from 'classnames'
import React, { memo, useState } from 'react' import React, { memo, useState } from 'react'
import { CashOut } from 'src/components/inputs/cashbox/Cashbox' import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
import { NumberInput } from '../base' import { NumberInput } from '../base'

0
new-lamassu-admin/src/components/inputs/formik/Checkbox.js → new-lamassu-admin/src/components/inputs/formik/Checkbox.jsx
View file

0
new-lamassu-admin/src/components/inputs/formik/Dropdown.js → new-lamassu-admin/src/components/inputs/formik/Dropdown.jsx
View file

0
new-lamassu-admin/src/components/inputs/formik/NumberInput.js → new-lamassu-admin/src/components/inputs/formik/NumberInput.jsx
View file

43
new-lamassu-admin/src/components/inputs/formik/PhoneNumberInput.js
View file

@ -1,43 +0,0 @@
import { makeStyles } from '@material-ui/core'
import React, { memo, useState } from 'react'
import TextInputFormik from './TextInput'
import { styles } from './TextInput.styles'
const useStyles = makeStyles(styles)
const mask = /(\+)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)(\d{1,3}){0,1}(\d{1,3}){0,1}(\d{1,3}){0,1}(\d{1,3}){0,1}(\d{1,2}){0,1}$/
const maskValue = value =>
value ? value.replace(mask, '$1 $2 $3 $4 $5 $6') : ''
const PhoneNumberInputFormik = memo(({ ...props }) => {
const { onChange, value } = props.field
const classes = useStyles()
// Regex adapted from http://phoneregex.com/
const [maskedValue, setMaskedValue] = useState(maskValue(value))
const handleChange = event => {
setMaskedValue(maskValue(event.target.value))
onChange(event)
}
return (
<>
<span className={classes.masked} aria-hidden="true">
{maskedValue}
</span>
<TextInputFormik
inputProps={{ maxLength: 17 }}
className={classes.maskedInput}
onChange={handleChange}
{...props}
/>
</>
)
})
export { PhoneNumberInputFormik, mask, maskValue }

0
new-lamassu-admin/src/components/inputs/formik/RadioGroup.js → new-lamassu-admin/src/components/inputs/formik/RadioGroup.jsx
View file

48
new-lamassu-admin/src/components/inputs/formik/SecretInput.js → new-lamassu-admin/src/components/inputs/formik/SecretInput.jsx
View file

@ -1,24 +1,24 @@
import React, { memo } from 'react' import React, { memo } from 'react'
import { SecretInput } from '../base' import { SecretInput } from '../base'
const SecretInputFormik = memo(({ isPasswordFilled, ...props }) => { const SecretInputFormik = memo(({ isPasswordFilled, ...props }) => {
const { name, onChange, onBlur, value } = props.field const { name, onChange, onBlur, value } = props.field
const { touched, errors } = props.form const { touched, errors } = props.form
const error = !isPasswordFilled && !!(touched[name] && errors[name]) const error = !isPasswordFilled && !!(touched[name] && errors[name])
return ( return (
<SecretInput <SecretInput
name={name} name={name}
isPasswordFilled={isPasswordFilled} isPasswordFilled={isPasswordFilled}
onChange={onChange} onChange={onChange}
onBlur={onBlur} onBlur={onBlur}
value={value} value={value}
error={error} error={error}
{...props} {...props}
/> />
) )
}) })
export default SecretInputFormik export default SecretInputFormik

0
new-lamassu-admin/src/components/inputs/formik/TextInput.js → new-lamassu-admin/src/components/inputs/formik/TextInput.jsx
View file

0
new-lamassu-admin/src/components/inputs/formik/ToggleButtonGroup.js → new-lamassu-admin/src/components/inputs/formik/ToggleButtonGroup.jsx
View file

16
new-lamassu-admin/src/components/layout/Header.js → new-lamassu-admin/src/components/layout/Header.jsx
View file

@ -7,15 +7,15 @@ import gql from 'graphql-tag'
import * as R from 'ramda' import * as R from 'ramda'
import React, { memo, useState, useEffect, useRef } from 'react' import React, { memo, useState, useEffect, useRef } from 'react'
import { NavLink, useHistory } from 'react-router-dom' import { NavLink, useHistory } from 'react-router-dom'
import NotificationCenter from 'src/components/NotificationCenter'
import ActionButton from 'src/components/buttons/ActionButton' import ActionButton from 'src/components/buttons/ActionButton'
import { H4 } from 'src/components/typography' import { H4 } from 'src/components/typography'
import AddIconReverse from 'src/styling/icons/button/add/white.svg?react'
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
import Logo from 'src/styling/icons/menu/logo.svg?react'
import NotificationIcon from 'src/styling/icons/menu/notification.svg?react'
import NotificationCenter from 'src/components/NotificationCenter'
import AddMachine from 'src/pages/AddMachine' import AddMachine from 'src/pages/AddMachine'
import { ReactComponent as AddIconReverse } from 'src/styling/icons/button/add/white.svg'
import { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'
import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
import { ReactComponent as NotificationIcon } from 'src/styling/icons/menu/notification.svg'
import styles from './Header.styles' import styles from './Header.styles'
@ -141,7 +141,9 @@ const Header = memo(({ tree, user }) => {
className={classnames(classes.link, classes.whiteLink)} className={classnames(classes.link, classes.whiteLink)}
activeClassName={classes.activeLink}> activeClassName={classes.activeLink}>
<li className={classes.li}> <li className={classes.li}>
<span className={classes.forceSize} forcesize={it.label}> <span
className={classes.forceSize}
data-forcesize={it.label}>
{it.label} {it.label}
</span> </span>
</li> </li>

2
new-lamassu-admin/src/components/layout/Header.styles.js
View file

@ -90,7 +90,7 @@ const styles = {
textAlign: 'center', textAlign: 'center',
'&:after': { '&:after': {
display: 'block', display: 'block',
content: 'attr(forcesize)', content: 'attr(data-forcesize)',
fontWeight: 700, fontWeight: 700,
height: 0, height: 0,
overflow: 'hidden', overflow: 'hidden',

1
new-lamassu-admin/src/components/layout/Section.js → new-lamassu-admin/src/components/layout/Section.jsx
View file

@ -1,6 +1,5 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import React from 'react' import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import Subtitle from 'src/components/Subtitle' import Subtitle from 'src/components/Subtitle'

13
new-lamassu-admin/src/components/layout/Sidebar.js → new-lamassu-admin/src/components/layout/Sidebar.jsx
View file

@ -1,11 +1,10 @@
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import { P } from 'src/components/typography' import { P } from 'src/components/typography'
import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg' import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg' import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg' import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
import styles from './Sidebar.styles' import styles from './Sidebar.styles'
@ -27,9 +26,11 @@ const Sidebar = ({
{loading && <P>Loading...</P>} {loading && <P>Loading...</P>}
{!loading && {!loading &&
data?.map((it, idx) => ( data?.map((it, idx) => (
<div className={classes.linkWrapper} onClick={() => onClick(it)}> <div
key={idx}
className={classes.linkWrapper}
onClick={() => onClick(it)}>
<div <div
key={idx}
className={classnames({ className={classnames({
[classes.activeLink]: isSelected(it), [classes.activeLink]: isSelected(it),
[classes.customRenderActiveLink]: itemRender && isSelected(it), [classes.customRenderActiveLink]: itemRender && isSelected(it),

4
new-lamassu-admin/src/components/layout/TitleSection.js → new-lamassu-admin/src/components/layout/TitleSection.jsx
View file

@ -2,12 +2,12 @@ import { makeStyles, Box } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import * as R from 'ramda' import * as R from 'ramda'
import React from 'react' import React from 'react'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import Title from 'src/components/Title' import Title from 'src/components/Title'
import { SubpageButton } from 'src/components/buttons'
import { Info1, Label1 } from 'src/components/typography' import { Info1, Label1 } from 'src/components/typography'
import { SubpageButton } from 'src/components/buttons'
import styles from './TitleSection.styles' import styles from './TitleSection.styles'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)

7
new-lamassu-admin/src/components/machineActions/DiagnosticsModal.js → new-lamassu-admin/src/components/machineActions/DiagnosticsModal.jsx
View file

@ -4,11 +4,10 @@ import { subMinutes } from 'date-fns'
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import Modal from 'src/components/Modal' import Modal from 'src/components/Modal'
import { Button } from 'src/components/buttons'
import { H3, P } from 'src/components/typography' import { H3, P } from 'src/components/typography'
import { URI } from 'src/utils/apollo'
import { Button } from 'src/components/buttons'
import { diagnosticsModal } from './MachineActions.styles' import { diagnosticsModal } from './MachineActions.styles'
@ -92,7 +91,7 @@ const DiagnosticsModal = ({ onClose, deviceId, sendAction }) => {
} }
}, [data, stopPolling, timeout, timestamp]) }, [data, stopPolling, timeout, timestamp])
const path = `${URI}/operator-data/diagnostics/${deviceId}/` const path = `/operator-data/diagnostics/${deviceId}/`
function runDiagnostics() { function runDiagnostics() {
startPolling(2000) startPolling(2000)

17
new-lamassu-admin/src/components/machineActions/MachineActions.js → new-lamassu-admin/src/components/machineActions/MachineActions.jsx
View file

@ -2,18 +2,17 @@ import { useMutation, useLazyQuery } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core/styles' import { makeStyles } from '@material-ui/core/styles'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import React, { memo, useState } from 'react' import React, { memo, useState } from 'react'
import { ConfirmDialog } from 'src/components/ConfirmDialog' import { ConfirmDialog } from 'src/components/ConfirmDialog'
import ActionButton from 'src/components/buttons/ActionButton' import ActionButton from 'src/components/buttons/ActionButton'
import { H3 } from 'src/components/typography' import { H3 } from 'src/components/typography'
import { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg' import EditReversedIcon from 'src/styling/icons/button/edit/white.svg?react'
import { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg' import EditIcon from 'src/styling/icons/button/edit/zodiac.svg?react'
import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg' import RebootReversedIcon from 'src/styling/icons/button/reboot/white.svg?react'
import { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg' import RebootIcon from 'src/styling/icons/button/reboot/zodiac.svg?react'
import { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg' import ShutdownReversedIcon from 'src/styling/icons/button/shut down/white.svg?react'
import { ReactComponent as ShutdownIcon } from 'src/styling/icons/button/shut down/zodiac.svg' import ShutdownIcon from 'src/styling/icons/button/shut down/zodiac.svg?react'
import { ReactComponent as UnpairReversedIcon } from 'src/styling/icons/button/unpair/white.svg' import UnpairReversedIcon from 'src/styling/icons/button/unpair/white.svg?react'
import { ReactComponent as UnpairIcon } from 'src/styling/icons/button/unpair/zodiac.svg' import UnpairIcon from 'src/styling/icons/button/unpair/zodiac.svg?react'
import DiagnosticsModal from './DiagnosticsModal' import DiagnosticsModal from './DiagnosticsModal'
import { machineActionsStyles } from './MachineActions.styles' import { machineActionsStyles } from './MachineActions.styles'

6
new-lamassu-admin/src/components/single-row-table/SingleRowTable.js → new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx
View file

@ -1,8 +1,6 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import React from 'react' import React from 'react'
import { IconButton } from 'src/components/buttons'
import { import {
Table, Table,
THead, THead,
@ -11,7 +9,9 @@ import {
Th, Th,
Tr Tr
} from 'src/components/fake-table/Table' } from 'src/components/fake-table/Table'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/white.svg' import EditIcon from 'src/styling/icons/action/edit/white.svg?react'
import { IconButton } from 'src/components/buttons'
import styles from './SingleRowTable.styles' import styles from './SingleRowTable.styles'

0
new-lamassu-admin/src/components/table/EditCell.js → new-lamassu-admin/src/components/table/EditCell.jsx
View file

3
new-lamassu-admin/src/components/table/EmptyTable.js → new-lamassu-admin/src/components/table/EmptyTable.jsx
View file

@ -1,9 +1,8 @@
import { makeStyles } from '@material-ui/core' import { makeStyles } from '@material-ui/core'
import classNames from 'classnames' import classNames from 'classnames'
import React, { memo } from 'react' import React, { memo } from 'react'
import { H4 } from 'src/components/typography' import { H4 } from 'src/components/typography'
import { ReactComponent as EmptyTableIcon } from 'src/styling/icons/table/empty-table.svg' import EmptyTableIcon from 'src/styling/icons/table/empty-table.svg?react'
const styles = { const styles = {
emptyTable: { emptyTable: {

0
new-lamassu-admin/src/components/table/Table.js → new-lamassu-admin/src/components/table/Table.jsx
View file

0
new-lamassu-admin/src/components/table/TableBody.js → new-lamassu-admin/src/components/table/TableBody.jsx
View file

0
new-lamassu-admin/src/components/table/TableCell.js → new-lamassu-admin/src/components/table/TableCell.jsx
View file

0
new-lamassu-admin/src/components/table/TableHead.js → new-lamassu-admin/src/components/table/TableHead.jsx
View file

0
new-lamassu-admin/src/components/table/TableHeader.js → new-lamassu-admin/src/components/table/TableHeader.jsx
View file

Some files were not shown because too many files have changed in this diff Show more