Merge pull request #1771 from RafaelTaranto/refactor/dev-tools-frontend
LAM-1251 Refactor/dev tools frontend
This commit is contained in:
Rafael Taranto
GitHub
commit
8b7340269a
318 changed files with 8071 additions and 31039 deletions
1
.tool-versions
Normal file
1
.tool-versions
Normal file
|
|
@ -0,0 +1 @@
|
|||
nodejs 14
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
const _ = require('lodash/fp')
|
||||
|
||||
const { addressDetector } = require('@lamassu/coins')
|
||||
const db = require('./db')
|
||||
const notifierQueries = require('./notifier/queries')
|
||||
|
||||
|
|
@ -16,7 +17,18 @@ const deleteFromBlacklist = address => {
|
|||
return db.none(sql, [address])
|
||||
}
|
||||
|
||||
const isValidAddress = address => {
|
||||
try {
|
||||
return !_.isEmpty(addressDetector.getSupportedCoinsForAddress(address).matches)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const insertIntoBlacklist = address => {
|
||||
if (!isValidAddress(address)) {
|
||||
return Promise.reject(new Error('Invalid address'))
|
||||
}
|
||||
return db
|
||||
.none(
|
||||
'INSERT INTO blacklist (address) VALUES ($1);',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ const buildApolloContext = async ({ req, res }) => {
|
|||
req.session.user.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')
|
||||
|
||||
return { req, res }
|
||||
|
|
|
|||
|
|
@ -2,4 +2,3 @@ SKIP_PREFLIGHT_CHECK=true
|
|||
HTTPS=true
|
||||
REACT_APP_TYPE_CHECK_SANCTUARY=false
|
||||
PORT=3001
|
||||
REACT_APP_BUILD_TARGET=LAMASSU
|
||||
|
|
|
|||
|
|
@ -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
8
new-lamassu-admin/.prettierrc
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"trailingComma": "none",
|
||||
"tabWidth": 2,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"arrowParens": "avoid",
|
||||
"bracketSameLine": true
|
||||
}
|
||||
|
|
@ -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
1
new-lamassu-admin/.tool-versions
Normal file
|
|
@ -0,0 +1 @@
|
|||
nodejs 22
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Dev Environment
|
||||
|
||||
### 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.
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
### `npm storybook`
|
||||
|
||||
Runs the storybook server
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.<br>
|
||||
|
|
|
|||
39
new-lamassu-admin/eslint.config.js
Normal file
39
new-lamassu-admin/eslint.config.js
Normal 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
20
new-lamassu-admin/index.html
Normal 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
33530
new-lamassu-admin/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -2,12 +2,13 @@
|
|||
"name": "lamassu-admin",
|
||||
"version": "0.2.1",
|
||||
"license": "../LICENSE",
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@apollo/react-hooks": "^3.1.3",
|
||||
"@lamassu/coins": "v1.4.0-beta.4",
|
||||
"@material-ui/core": "4.11.0",
|
||||
"@material-ui/icons": "4.9.1",
|
||||
"@material-ui/lab": "^4.0.0-alpha.56",
|
||||
"@lamassu/coins": "v1.5.3",
|
||||
"@material-ui/core": "4.12.4",
|
||||
"@material-ui/icons": "4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.61",
|
||||
"@simplewebauthn/browser": "^3.0.0",
|
||||
"@use-hooks/axios": "1.3.0",
|
||||
"apollo-cache-inmemory": "^1.6.6",
|
||||
|
|
@ -27,12 +28,11 @@
|
|||
"downshift": "3.3.4",
|
||||
"file-saver": "2.0.2",
|
||||
"formik": "2.2.0",
|
||||
"google-libphonenumber": "^3.2.22",
|
||||
"graphql": "^14.5.8",
|
||||
"graphql-tag": "^2.10.3",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"jss-plugin-extend": "^10.0.0",
|
||||
"jszip": "^3.6.0",
|
||||
"libphonenumber-js": "^1.7.50",
|
||||
"libphonenumber-js": "^1.11.15",
|
||||
"match-sorter": "^4.2.0",
|
||||
"pretty-ms": "^2.1.0",
|
||||
"qrcode.react": "0.9.3",
|
||||
|
|
@ -41,69 +41,34 @@
|
|||
"react-copy-to-clipboard": "^5.0.2",
|
||||
"react-dom": "^16.10.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-otp-input": "^2.3.0",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-use": "15.3.2",
|
||||
"react-virtualized": "^9.21.2",
|
||||
"sanctuary": "^2.0.1",
|
||||
"ua-parser-js": "^1.0.2",
|
||||
"uuid": "^8.3.2",
|
||||
"yup": "0.32.9"
|
||||
"yup": "1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "6.0.26",
|
||||
"@storybook/addon-backgrounds": "6.0.26",
|
||||
"@storybook/addon-knobs": "6.0.26",
|
||||
"@storybook/addon-links": "6.0.26",
|
||||
"@storybook/addons": "6.0.26",
|
||||
"@storybook/preset-create-react-app": "^3.1.4",
|
||||
"@storybook/react": "6.0.26",
|
||||
"@welldone-software/why-did-you-render": "^3.3.9",
|
||||
"eslint": "^7.19.0",
|
||||
"eslint-config-prettier": "^6.7.0",
|
||||
"eslint-config-prettier-standard": "^3.0.1",
|
||||
"eslint-config-standard": "^14.1.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"
|
||||
]
|
||||
"@eslint/js": "^9.16.0",
|
||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||
"esbuild-plugin-react-virtualized": "^1.0.4",
|
||||
"eslint": "^9.16.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
|
||||
"globals": "^15.13.0",
|
||||
"lint-staged": "^15.2.10",
|
||||
"prettier": "3.4.1",
|
||||
"vite": "^6.0.1",
|
||||
"vite-plugin-svgr": "^4.3.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"fix": "eslint --fix --ext .js,.md,.json src/",
|
||||
"build": "react-scripts build",
|
||||
"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"
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
|
|
@ -116,5 +81,9 @@
|
|||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,md,json}": "eslint --cache --fix",
|
||||
"*.{js,jsx,css,md,json}": "prettier --write"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -17,21 +17,16 @@ import {
|
|||
useHistory,
|
||||
BrowserRouter as Router
|
||||
} from 'react-router-dom'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
import Header from 'src/components/layout/Header'
|
||||
import Sidebar from 'src/components/layout/Sidebar'
|
||||
import TitleSection from 'src/components/layout/TitleSection'
|
||||
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 theme from 'src/styling/theme'
|
||||
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({
|
||||
plugins: [extendJss(), ...jssPreset().plugins]
|
||||
|
|
@ -120,17 +115,11 @@ const Main = () => {
|
|||
)}
|
||||
<main className={classes.wrapper}>
|
||||
{sidebar && !is404 && wizardTested && (
|
||||
<Slide
|
||||
direction="left"
|
||||
in={true}
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
children={
|
||||
<div>
|
||||
<TitleSection title={parent.title}></TitleSection>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Slide direction="left" in={true} mountOnEnter unmountOnExit>
|
||||
<div>
|
||||
<TitleSection title={parent.title}></TitleSection>
|
||||
</div>
|
||||
</Slide>
|
||||
)}
|
||||
|
||||
<Grid container className={classes.grid}>
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import React, { memo } from 'react'
|
||||
import ReactCarousel from 'react-material-ui-carousel'
|
||||
|
||||
import { ReactComponent as LeftArrow } from 'src/styling/icons/arrow/carousel-left-arrow.svg'
|
||||
import { ReactComponent as RightArrow } from 'src/styling/icons/arrow/carousel-right-arrow.svg'
|
||||
import { URI } from 'src/utils/apollo'
|
||||
import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
|
||||
import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
imgWrapper: {
|
||||
|
|
@ -49,11 +47,11 @@ export const Carousel = memo(({ photosData, slidePhoto }) => {
|
|||
next={activeIndex => slidePhoto(activeIndex)}
|
||||
prev={activeIndex => slidePhoto(activeIndex)}>
|
||||
{photosData.map((item, i) => (
|
||||
<div>
|
||||
<div key={i}>
|
||||
<div className={classes.imgWrapper}>
|
||||
<img
|
||||
className={classes.imgInner}
|
||||
src={`${URI}/${item?.photoDir}/${item?.path}`}
|
||||
src={`/${item?.photoDir}/${item?.path}`}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -6,11 +6,11 @@ import {
|
|||
InputLabel
|
||||
} from '@material-ui/core'
|
||||
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 { 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 ErrorMessage from './ErrorMessage'
|
||||
|
|
@ -5,10 +5,10 @@ import {
|
|||
makeStyles
|
||||
} from '@material-ui/core'
|
||||
import React 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 { 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 ErrorMessage from './ErrorMessage'
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
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 { Info3 } from './typography'
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { makeStyles, ClickAwayListener } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import React, { memo, useState } from 'react'
|
||||
|
||||
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 { 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'
|
||||
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import { Box, makeStyles } from '@material-ui/core'
|
||||
import React from 'react'
|
||||
|
||||
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({
|
||||
message: ({ width }) => ({
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
|
||||
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 { H1 } from 'src/components/typography'
|
||||
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
|
||||
import { spacer } from 'src/styling/variables'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
|
|
@ -5,11 +5,11 @@ import { format, set } from 'date-fns/fp'
|
|||
import FileSaver from 'file-saver'
|
||||
import * as R from 'ramda'
|
||||
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 { 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 { formatDate } from 'src/utils/timezones'
|
||||
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
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 { H1, H4 } from 'src/components/typography'
|
||||
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
|
||||
|
||||
const styles = {
|
||||
modal: {
|
||||
|
|
@ -55,8 +55,8 @@ const styles = {
|
|||
margin: xl
|
||||
? [[0, 0, 'auto', 'auto']]
|
||||
: small
|
||||
? [[12, 12, 'auto', 'auto']]
|
||||
: [[16, 16, 'auto', 'auto']]
|
||||
? [[12, 12, 'auto', 'auto']]
|
||||
: [[16, 16, 'auto', 'auto']]
|
||||
}),
|
||||
header: {
|
||||
display: 'flex'
|
||||
|
|
@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core/styles'
|
|||
import gql from 'graphql-tag'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import ActionButton from 'src/components/buttons/ActionButton'
|
||||
import { H5 } from 'src/components/typography'
|
||||
import { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg'
|
||||
import { ReactComponent as ClearAllIconInverse } from 'src/styling/icons/stage/spring/empty.svg'
|
||||
import { ReactComponent as ClearAllIcon } from 'src/styling/icons/stage/zodiac/empty.svg'
|
||||
import { ReactComponent as ShowUnreadIcon } from 'src/styling/icons/stage/zodiac/full.svg'
|
||||
import NotificationIconZodiac from 'src/styling/icons/menu/notification-zodiac.svg?react'
|
||||
import ClearAllIconInverse from 'src/styling/icons/stage/spring/empty.svg?react'
|
||||
import ClearAllIcon from 'src/styling/icons/stage/zodiac/empty.svg?react'
|
||||
import ShowUnreadIcon from 'src/styling/icons/stage/zodiac/full.svg?react'
|
||||
|
||||
import styles from './NotificationCenter.styles'
|
||||
import NotificationRow from './NotificationRow'
|
||||
|
|
@ -3,11 +3,10 @@ import classnames from 'classnames'
|
|||
import prettyMs from 'pretty-ms'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import { Label1, Label2, TL2 } from 'src/components/typography'
|
||||
import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg'
|
||||
import { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg'
|
||||
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'
|
||||
import Wrench from 'src/styling/icons/action/wrench/zodiac.svg?react'
|
||||
import Transaction from 'src/styling/icons/arrow/transaction.svg?react'
|
||||
import WarningIcon from 'src/styling/icons/warning-icon/tomato.svg?react'
|
||||
|
||||
import styles from './NotificationCenter.styles'
|
||||
const useStyles = makeStyles(styles)
|
||||
|
|
@ -61,8 +60,8 @@ const NotificationRow = ({
|
|||
typeDisplay && deviceName
|
||||
? `${typeDisplay} - ${deviceName}`
|
||||
: !typeDisplay && deviceName
|
||||
? `${deviceName}`
|
||||
: `${typeDisplay}`
|
||||
? `${deviceName}`
|
||||
: `${typeDisplay}`
|
||||
|
||||
const iconClass = {
|
||||
[classes.readIcon]: read,
|
||||
|
|
@ -4,9 +4,8 @@ import { makeStyles } from '@material-ui/core/styles'
|
|||
import MAutocomplete from '@material-ui/lab/Autocomplete'
|
||||
import classnames from 'classnames'
|
||||
import React, { memo, useState } from 'react'
|
||||
|
||||
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'
|
||||
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import React from 'react'
|
||||
|
||||
import Chip from 'src/components/Chip'
|
||||
import { ActionButton } from 'src/components/buttons'
|
||||
import { P, Label3 } from 'src/components/typography'
|
||||
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
|
||||
import { ReactComponent as FilterIcon } from 'src/styling/icons/button/filter/white.svg'
|
||||
import { ReactComponent as ReverseFilterIcon } from 'src/styling/icons/button/filter/zodiac.svg'
|
||||
import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
|
||||
import FilterIcon from 'src/styling/icons/button/filter/white.svg?react'
|
||||
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 { chipStyles, styles } from './SearchFilter.styles'
|
||||
|
|
@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
|
|||
import classnames from 'classnames'
|
||||
import * as R from 'ramda'
|
||||
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 {
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
|
|
@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
|
|||
import classnames from 'classnames'
|
||||
import * as R from 'ramda'
|
||||
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 {
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
import { makeStyles, ClickAwayListener } from '@material-ui/core'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState, memo } from 'react'
|
||||
|
||||
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({
|
||||
transparentButton: {
|
||||
|
|
@ -103,7 +102,7 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
|
|||
<button
|
||||
type="button"
|
||||
onMouseEnter={handler.handleOpenHelpPopper}
|
||||
onMouseLeave={handler.handleCloseHelpPopper}>
|
||||
onMouseLeave={handler.handleCloseHelpPopper}
|
||||
className={handler.classes.transparentButton}>
|
||||
<HelpIcon />
|
||||
</button>
|
||||
|
|
@ -3,17 +3,17 @@ import classnames from 'classnames'
|
|||
import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
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 PromptWhenDirty from 'src/components/PromptWhenDirty'
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { RadioGroup } from 'src/components/inputs/formik'
|
||||
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'
|
||||
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import classnames from 'classnames'
|
||||
import React, { memo } from 'react'
|
||||
import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
|
||||
|
||||
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'
|
||||
|
||||
const { p } = typographyStyles
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import classnames from 'classnames'
|
||||
import React, { memo } from 'react'
|
||||
import DeleteIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'
|
||||
|
||||
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'
|
||||
|
||||
const { p } = typographyStyles
|
||||
|
|
@ -2,8 +2,8 @@ import { ClickAwayListener } from '@material-ui/core'
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import classnames from 'classnames'
|
||||
import React, { useState, memo } from 'react'
|
||||
|
||||
import Popover from 'src/components/Popper'
|
||||
|
||||
import typographyStyles from 'src/components/typography/styles'
|
||||
import {
|
||||
subheaderColor,
|
||||
|
|
@ -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 {
|
||||
|
|
@ -11,10 +11,10 @@ import {
|
|||
const { h4 } = typographyStyles
|
||||
|
||||
const color = color => ({
|
||||
boxShadow: `inset 0 -4px 0 0 ${fade(color, 0.8)}`,
|
||||
boxShadow: `inset 0 -4px 0 0 ${alpha(color, 0.8)}`,
|
||||
'&:hover': {
|
||||
boxShadow: 'none',
|
||||
backgroundColor: fade(color, 0.8)
|
||||
backgroundColor: alpha(color, 0.8)
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import classnames from 'classnames'
|
||||
import React, { memo, useState } from 'react'
|
||||
|
||||
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'
|
||||
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
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 { 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'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
|
|
@ -6,14 +6,12 @@ import FeatureButton from './FeatureButton'
|
|||
import IDButton from './IDButton'
|
||||
import IconButton from './IconButton'
|
||||
import Link from './Link'
|
||||
import SimpleButton from './SimpleButton'
|
||||
import SubpageButton from './SubpageButton'
|
||||
import SupportLinkButton from './SupportLinkButton'
|
||||
|
||||
export {
|
||||
Button,
|
||||
Link,
|
||||
SimpleButton,
|
||||
ActionButton,
|
||||
FeatureButton,
|
||||
IconButton,
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ import {
|
|||
} from 'date-fns/fp'
|
||||
import * as R from 'ramda'
|
||||
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 { 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 Tile from './Tile'
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
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 { 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'
|
||||
|
||||
|
|
@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
|
|||
import classnames from 'classnames'
|
||||
import * as R from 'ramda'
|
||||
import React, { useContext } from 'react'
|
||||
|
||||
import {
|
||||
Td,
|
||||
THead,
|
||||
TDoubleLevelHead,
|
||||
ThDoubleLevel
|
||||
} from 'src/components/fake-table/Table'
|
||||
|
||||
import { sentenceCase } from 'src/utils/string'
|
||||
|
||||
import TableCtx from './Context'
|
||||
|
|
@ -3,17 +3,17 @@ import classnames from 'classnames'
|
|||
import { Field, useFormikContext } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
import React, { useContext, useState } from 'react'
|
||||
|
||||
import { DeleteDialog } from 'src/components/DeleteDialog'
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { Td, Tr } from 'src/components/fake-table/Table'
|
||||
import { Switch } from 'src/components/inputs'
|
||||
import { Label2 } from 'src/components/typography'
|
||||
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
|
||||
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
|
||||
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 { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
|
||||
import DisabledDeleteIcon from 'src/styling/icons/action/delete/disabled.svg?react'
|
||||
import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
|
||||
import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
|
||||
import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
|
||||
import StripesSvg from 'src/styling/icons/stripes.svg?react'
|
||||
|
||||
import { Link, IconButton } from 'src/components/buttons'
|
||||
import { Switch } from 'src/components/inputs'
|
||||
|
||||
import TableCtx from './Context'
|
||||
import styles from './Row.styles'
|
||||
|
|
@ -165,8 +165,9 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
|||
|
||||
return (
|
||||
<div className={classes.fields}>
|
||||
{R.map(f => (
|
||||
{fields.map((f, idx) => (
|
||||
<Td
|
||||
key={idx}
|
||||
className={{
|
||||
[classes.extraPaddingRight]: extraPaddingRight,
|
||||
[classes.extraPadding]: extraPadding,
|
||||
|
|
@ -204,7 +205,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
|
|||
)}
|
||||
{isHidden(values) && <StripesSvg />}
|
||||
</Td>
|
||||
))(fields)}
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
|
|||
import { Form, Formik } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { v4 } from 'uuid'
|
||||
|
||||
import PromptWhenDirty from 'src/components/PromptWhenDirty'
|
||||
import Link from 'src/components/buttons/Link.js'
|
||||
import { AddButton } from 'src/components/buttons/index.js'
|
||||
import Link from 'src/components/buttons/Link'
|
||||
import { TBody, Table } from 'src/components/fake-table/Table'
|
||||
import { Info2, TL1 } from 'src/components/typography'
|
||||
import { v4 } from 'uuid'
|
||||
|
||||
import { AddButton } from 'src/components/buttons/index'
|
||||
|
||||
import TableCtx from './Context'
|
||||
import Header from './Header'
|
||||
|
|
@ -75,7 +75,7 @@ const ETable = ({
|
|||
|
||||
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 list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
|
||||
|
||||
|
|
@ -3,9 +3,9 @@ import MAutocomplete from '@material-ui/lab/Autocomplete'
|
|||
import sort from 'match-sorter'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import { HoverableTooltip } from 'src/components/Tooltip'
|
||||
import { P } from 'src/components/typography'
|
||||
|
||||
import { errorColor, orangeYellow, spring4 } from 'src/styling/variables'
|
||||
|
||||
import TextInput from './TextInput'
|
||||
|
|
@ -3,9 +3,9 @@ import { makeStyles } from '@material-ui/core/styles'
|
|||
import CheckBoxIcon from '@material-ui/icons/CheckBox'
|
||||
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
|
||||
import React from 'react'
|
||||
|
||||
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 {
|
||||
fontSize2,
|
||||
fontSize3,
|
||||
|
|
@ -6,8 +6,8 @@ import {
|
|||
} from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
|
||||
import { Label1 } from 'src/components/typography'
|
||||
|
||||
import { offColor } from 'src/styling/variables'
|
||||
const styles = {
|
||||
label: {
|
||||
|
|
@ -3,8 +3,7 @@ import classnames from 'classnames'
|
|||
import { useSelect } from 'downshift'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import { ReactComponent as Arrowdown } from 'src/styling/icons/action/arrow/regular.svg'
|
||||
import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react'
|
||||
|
||||
import styles from './Select.styles'
|
||||
|
||||
|
|
@ -2,8 +2,8 @@ import { makeStyles } from '@material-ui/core'
|
|||
import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab'
|
||||
import ToggleButton from '@material-ui/lab/ToggleButton'
|
||||
import React from 'react'
|
||||
|
||||
import { H4, P } from 'src/components/typography'
|
||||
|
||||
import { backgroundColor, comet } from 'src/styling/variables'
|
||||
const styles = {
|
||||
noTextTransform: {
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
|
||||
import Chip from 'src/components/Chip'
|
||||
import { Info2, Label1, Label2 } from 'src/components/typography'
|
||||
|
||||
import { numberToFiatAmount } from 'src/utils/number'
|
||||
|
||||
import { cashboxStyles, gridStyles } from './Cashbox.styles'
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import classNames from 'classnames'
|
||||
import React, { memo, useState } from 'react'
|
||||
|
||||
import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
|
||||
|
||||
import { NumberInput } from '../base'
|
||||
|
|
@ -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 }
|
||||
|
|
@ -7,15 +7,15 @@ import gql from 'graphql-tag'
|
|||
import * as R from 'ramda'
|
||||
import React, { memo, useState, useEffect, useRef } from 'react'
|
||||
import { NavLink, useHistory } from 'react-router-dom'
|
||||
|
||||
import NotificationCenter from 'src/components/NotificationCenter'
|
||||
import ActionButton from 'src/components/buttons/ActionButton'
|
||||
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 { 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'
|
||||
|
||||
|
|
@ -141,7 +141,9 @@ const Header = memo(({ tree, user }) => {
|
|||
className={classnames(classes.link, classes.whiteLink)}
|
||||
activeClassName={classes.activeLink}>
|
||||
<li className={classes.li}>
|
||||
<span className={classes.forceSize} forcesize={it.label}>
|
||||
<span
|
||||
className={classes.forceSize}
|
||||
data-forcesize={it.label}>
|
||||
{it.label}
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -90,7 +90,7 @@ const styles = {
|
|||
textAlign: 'center',
|
||||
'&:after': {
|
||||
display: 'block',
|
||||
content: 'attr(forcesize)',
|
||||
content: 'attr(data-forcesize)',
|
||||
fontWeight: 700,
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import React from 'react'
|
||||
|
||||
import ErrorMessage from 'src/components/ErrorMessage'
|
||||
import Subtitle from 'src/components/Subtitle'
|
||||
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
|
||||
import { P } from 'src/components/typography'
|
||||
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 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 styles from './Sidebar.styles'
|
||||
|
||||
|
|
@ -27,9 +26,11 @@ const Sidebar = ({
|
|||
{loading && <P>Loading...</P>}
|
||||
{!loading &&
|
||||
data?.map((it, idx) => (
|
||||
<div className={classes.linkWrapper} onClick={() => onClick(it)}>
|
||||
<div
|
||||
key={idx}
|
||||
className={classes.linkWrapper}
|
||||
onClick={() => onClick(it)}>
|
||||
<div
|
||||
key={idx}
|
||||
className={classnames({
|
||||
[classes.activeLink]: isSelected(it),
|
||||
[classes.customRenderActiveLink]: itemRender && isSelected(it),
|
||||
|
|
@ -2,12 +2,12 @@ import { makeStyles, Box } from '@material-ui/core'
|
|||
import classnames from 'classnames'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import ErrorMessage from 'src/components/ErrorMessage'
|
||||
import Title from 'src/components/Title'
|
||||
import { SubpageButton } from 'src/components/buttons'
|
||||
import { Info1, Label1 } from 'src/components/typography'
|
||||
|
||||
import { SubpageButton } from 'src/components/buttons'
|
||||
|
||||
import styles from './TitleSection.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
|
@ -4,11 +4,10 @@ import { subMinutes } from 'date-fns'
|
|||
import FileSaver from 'file-saver'
|
||||
import gql from 'graphql-tag'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import Modal from 'src/components/Modal'
|
||||
import { Button } from 'src/components/buttons'
|
||||
import { H3, P } from 'src/components/typography'
|
||||
import { URI } from 'src/utils/apollo'
|
||||
|
||||
import { Button } from 'src/components/buttons'
|
||||
|
||||
import { diagnosticsModal } from './MachineActions.styles'
|
||||
|
||||
|
|
@ -92,7 +91,7 @@ const DiagnosticsModal = ({ onClose, deviceId, sendAction }) => {
|
|||
}
|
||||
}, [data, stopPolling, timeout, timestamp])
|
||||
|
||||
const path = `${URI}/operator-data/diagnostics/${deviceId}/`
|
||||
const path = `/operator-data/diagnostics/${deviceId}/`
|
||||
|
||||
function runDiagnostics() {
|
||||
startPolling(2000)
|
||||
|
|
@ -2,18 +2,17 @@ import { useMutation, useLazyQuery } from '@apollo/react-hooks'
|
|||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import gql from 'graphql-tag'
|
||||
import React, { memo, useState } from 'react'
|
||||
|
||||
import { ConfirmDialog } from 'src/components/ConfirmDialog'
|
||||
import ActionButton from 'src/components/buttons/ActionButton'
|
||||
import { H3 } from 'src/components/typography'
|
||||
import { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg'
|
||||
import { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg'
|
||||
import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg'
|
||||
import { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg'
|
||||
import { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg'
|
||||
import { ReactComponent as ShutdownIcon } from 'src/styling/icons/button/shut down/zodiac.svg'
|
||||
import { ReactComponent as UnpairReversedIcon } from 'src/styling/icons/button/unpair/white.svg'
|
||||
import { ReactComponent as UnpairIcon } from 'src/styling/icons/button/unpair/zodiac.svg'
|
||||
import EditReversedIcon from 'src/styling/icons/button/edit/white.svg?react'
|
||||
import EditIcon from 'src/styling/icons/button/edit/zodiac.svg?react'
|
||||
import RebootReversedIcon from 'src/styling/icons/button/reboot/white.svg?react'
|
||||
import RebootIcon from 'src/styling/icons/button/reboot/zodiac.svg?react'
|
||||
import ShutdownReversedIcon from 'src/styling/icons/button/shut down/white.svg?react'
|
||||
import ShutdownIcon from 'src/styling/icons/button/shut down/zodiac.svg?react'
|
||||
import UnpairReversedIcon from 'src/styling/icons/button/unpair/white.svg?react'
|
||||
import UnpairIcon from 'src/styling/icons/button/unpair/zodiac.svg?react'
|
||||
|
||||
import DiagnosticsModal from './DiagnosticsModal'
|
||||
import { machineActionsStyles } from './MachineActions.styles'
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import React from 'react'
|
||||
|
||||
import { IconButton } from 'src/components/buttons'
|
||||
import {
|
||||
Table,
|
||||
THead,
|
||||
|
|
@ -11,7 +9,9 @@ import {
|
|||
Th,
|
||||
Tr
|
||||
} 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'
|
||||
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
import { makeStyles } from '@material-ui/core'
|
||||
import classNames from 'classnames'
|
||||
import React, { memo } from 'react'
|
||||
|
||||
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 = {
|
||||
emptyTable: {
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue