Verified Commit 7fe46857 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Use components from amiv-react-components package

parent f8f9b1fa
......@@ -116,8 +116,8 @@ module.exports = {
{
resolve: 'gatsby-plugin-zopfli',
options: {
extensions: ['css', 'html', 'js', 'svg']
}
extensions: ['css', 'html', 'js', 'svg'],
},
},
`gatsby-plugin-sitemap`,
{
......
......@@ -3205,6 +3205,36 @@
"resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
},
"amiv-react-components": {
"version": "git+https://gitlab.ethz.ch/amiv/react-components.git#ec9df25003d4a818fbbd42924df1f484deb90e65",
"from": "git+https://gitlab.ethz.ch/amiv/react-components.git#ec9df25003d4a818fbbd42924df1f484deb90e65",
"requires": {
"@babel/runtime": "^7.8.4",
"@material-ui/core": "^4.9.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.44",
"@material-ui/styles": "^4.9.0",
"@reach/router": "^1.3.1",
"ajv": "^6.12.0",
"animated-scroll-to": "^2.0.5",
"axios": "^0.19.2",
"html-escape": "^2.0.0",
"marked": "^0.8.0",
"prop-types": "^15.7.2",
"react-helmet": "^5.2.1",
"react-intl": "^3.12.0"
},
"dependencies": {
"@babel/runtime": {
"version": "7.8.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
"integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
"requires": {
"regenerator-runtime": "^0.13.2"
}
}
}
},
"animated-scroll-to": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/animated-scroll-to/-/animated-scroll-to-2.0.5.tgz",
......@@ -5408,157 +5438,6 @@
}
}
},
"compression-webpack-plugin": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-1.1.12.tgz",
"integrity": "sha512-UpBXSHbrCSdSZieAffqXlAQpLO2fikVVRYibrWlbHYzKpOw1Y4jwkVZ/+S91GzWuJvXSbc8SBy/e8fQJh8uEMQ==",
"requires": {
"cacache": "^10.0.1",
"find-cache-dir": "^1.0.0",
"neo-async": "^2.5.0",
"serialize-javascript": "^1.4.0",
"webpack-sources": "^1.0.1"
},
"dependencies": {
"cacache": {
"version": "10.0.4",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
"integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
"requires": {
"bluebird": "^3.5.1",
"chownr": "^1.0.1",
"glob": "^7.1.2",
"graceful-fs": "^4.1.11",
"lru-cache": "^4.1.1",
"mississippi": "^2.0.0",
"mkdirp": "^0.5.1",
"move-concurrently": "^1.0.1",
"promise-inflight": "^1.0.1",
"rimraf": "^2.6.2",
"ssri": "^5.2.4",
"unique-filename": "^1.1.0",
"y18n": "^4.0.0"
}
},
"find-cache-dir": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz",
"integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=",
"requires": {
"commondir": "^1.0.1",
"make-dir": "^1.0.0",
"pkg-dir": "^2.0.0"
}
},
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
"requires": {
"locate-path": "^2.0.0"
}
},
"locate-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
"integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
"requires": {
"p-locate": "^2.0.0",
"path-exists": "^3.0.0"
}
},
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
"requires": {
"pseudomap": "^1.0.2",
"yallist": "^2.1.2"
}
},
"make-dir": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
"integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
"requires": {
"pify": "^3.0.0"
}
},
"mississippi": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz",
"integrity": "sha512-zHo8v+otD1J10j/tC+VNoGK9keCuByhKovAvdn74dmxJl9+mWHnx6EMsDN4lgRoMI/eYo2nchAxniIbUPb5onw==",
"requires": {
"concat-stream": "^1.5.0",
"duplexify": "^3.4.2",
"end-of-stream": "^1.1.0",
"flush-write-stream": "^1.0.0",
"from2": "^2.1.0",
"parallel-transform": "^1.1.0",
"pump": "^2.0.1",
"pumpify": "^1.3.3",
"stream-each": "^1.1.0",
"through2": "^2.0.0"
}
},
"p-limit": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
"integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
"requires": {
"p-try": "^1.0.0"
}
},
"p-locate": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
"integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
"requires": {
"p-limit": "^1.1.0"
}
},
"p-try": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
"integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
},
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
},
"pkg-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
"integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
"requires": {
"find-up": "^2.1.0"
}
},
"pump": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
"integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
"requires": {
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
}
},
"serialize-javascript": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
"integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A=="
},
"ssri": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
"integrity": "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ==",
"requires": {
"safe-buffer": "^5.1.1"
}
}
}
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
......@@ -9625,14 +9504,6 @@
"@babel/runtime": "^7.2.0"
}
},
"gatsby-plugin-compression-v2": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-compression-v2/-/gatsby-plugin-compression-v2-0.1.0.tgz",
"integrity": "sha512-e+GTThkUfVnT6Ojd8OIqZhaRuF/hWaeiep2Xkuu8RZmCpC5NapDhFZC5sWeoygpq90Q6DXzRZfyk61IOtWQcfQ==",
"requires": {
"compression-webpack-plugin": "^1.0.1"
}
},
"gatsby-plugin-intl": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/gatsby-plugin-intl/-/gatsby-plugin-intl-0.3.3.tgz",
......
......@@ -11,6 +11,7 @@
"@material-ui/styles": "^4.9.0",
"@reach/router": "^1.3.1",
"ajv": "^6.12.0",
"amiv-react-components": "git+https://gitlab.ethz.ch/amiv/react-components.git#ec9df25003d4a818fbbd42924df1f484deb90e65",
"animated-scroll-to": "^2.0.5",
"axios": "^0.19.2",
"debounce": "^1.2.0",
......@@ -39,6 +40,7 @@
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"react-intl": "^3.12.0",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
......@@ -77,9 +79,9 @@
},
"repository": {
"type": "git",
"url": "https://gitlab.ethz.ch/amiv/amiv-website-gatsby"
"url": "https://gitlab.ethz.ch/amiv/amiv-website"
},
"bugs": {
"url": "https://gitlab.ethz.ch/amiv/amiv-website-gatsby/issues"
"url": "https://gitlab.ethz.ch/amiv/amiv-website/issues"
}
}
......@@ -5,13 +5,16 @@ import { makeStyles } from '@material-ui/styles'
import { Toolbar, Button, TextField } from '@material-ui/core'
import { useIntl, FormattedMessage } from 'gatsby-plugin-intl'
import Alert from '@material-ui/lab/Alert'
import {
Spinner,
CopyButton,
JsonSchemaForm,
JsonSchemaFormFieldGroup,
} from 'amiv-react-components'
import { dateFormatter } from 'config'
import TranslatedContent from '../general/translatedContent'
import CopyButton from '../general/copyButton'
import Spinner from '../general/spinner'
import JsonSchemaForm from '../general/jsonSchema/form'
import { authLoginStart } from '../../store/auth/actions'
import {
loadSignupForEvent,
......@@ -19,7 +22,6 @@ import {
patchSignup,
deleteSignup,
} from '../../store/events/actions'
import JsonSchemaFormFieldGroup from '../general/jsonSchema/fieldGroup'
const useStyles = makeStyles(
theme => ({
......
......@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
import { makeStyles, useTheme } from '@material-ui/core/styles'
import Skeleton from '@material-ui/lab/Skeleton'
import { Box } from '@material-ui/core'
import { Spinner } from 'amiv-react-components'
import { apiUrl } from 'config'
import Img from '../general/image'
import Link from '../general/link'
import Spinner from '../general/spinner'
const useStyles = makeStyles(
{
......
......@@ -12,9 +12,9 @@ import {
Button,
Divider,
} from '@material-ui/core'
import { SearchField } from 'amiv-react-components'
import FilterView from '../filteredListPage/filter'
import SearchField from '../general/searchField'
import { EVENTS } from '~store/events/constants'
import { setQueryFromFilterValues } from '~store/events/actions'
......
......@@ -6,11 +6,11 @@ import InstagramIcon from '@material-ui/icons/Instagram'
import FacebookIcon from '@material-ui/icons/Facebook'
import TwitterIcon from '@material-ui/icons/Twitter'
import { FormattedMessage } from 'gatsby-plugin-intl'
import { ExternalLink } from 'amiv-react-components'
import VsethLogoSVG from '~images/logos/vseth_fachverein.png'
import EthLogoSVG from '~images/logos/eth.svg'
import ExternalLink from './general/externalLink'
import Link from './general/link'
const useVsethLogoStyles = makeStyles(
......
import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(
theme => ({
root: {
display: 'inline-block',
cursor: 'pointer',
padding: '1em',
verticalAlign: 'middle',
'& div': {
width: '35px',
height: '5px',
backgroundColor: theme.palette.common.headerContrastText,
margin: '6px 0',
transition: '.4s',
borderRadius: '2px',
},
},
rootActive: {
'& $bar1': {
transform: 'rotate(-45deg) translate(-9px, 6px)',
},
'& $bar2': {
opacity: 0,
},
'& $bar3': {
transform: 'rotate(45deg) translate(-8px, -8px)',
},
},
bar1: {},
bar2: {},
bar3: {},
}),
{ name: 'burgerIcon' }
)
const BurgerIcon = ({ active, onClick, className }) => {
const classes = useStyles()
return (
<div
className={[classes.root, active && classes.rootActive, className].join(
' '
)}
onClick={onClick}
>
<div className={classes.bar1} />
<div className={classes.bar2} />
<div className={classes.bar3} />
</div>
)
}
BurgerIcon.propTypes = {
/** Show burger when false, show cross when true */
active: PropTypes.bool,
/** Callback when the user clicked on the icon */
onClick: PropTypes.func,
/** Additional class applied to the outermost box. */
className: PropTypes.string,
}
BurgerIcon.defaultProps = {
active: false,
onClick: () => {},
}
export default BurgerIcon
import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import { Button } from '@material-ui/core'
import { isBrowser, sleep } from '~utils'
import { error } from '~utils/log'
const useStyles = makeStyles(
{
textarea: {
opacity: 0,
width: 0,
height: 0,
padding: 0,
},
},
{ name: 'copyButton' }
)
const copyToClipboard = async (ref, text = null) => {
const element = ref.current
if (!isBrowser || !element) return false
if (text) {
element.innerHTML = text
// Wait for some time until the DOM has been updated.
await sleep(1000)
}
const range = document.createRange()
range.selectNode(element)
window.getSelection().addRange(range)
let successful = false
try {
document.execCommand('copy')
successful = document.execCommand('copy')
} catch (err) {
error(`Unable to copy: ${err}`)
successful = false
}
window.getSelection().removeAllRanges()
return successful
}
const CopyButton = ({ value, children, ...props }) => {
const classes = useStyles()
const spanRef = React.createRef(null)
const handleClick = () => {
copyToClipboard(spanRef)
}
return (
<React.Fragment>
<span ref={spanRef} className={classes.textarea}>
{value}
</span>
<Button onClick={handleClick} {...props}>
{children}
</Button>
</React.Fragment>
)
}
CopyButton.propTypes = {
/** Value to be copied. */
value: PropTypes.string,
/** Content of the button component */
children: PropTypes.node.isRequired,
}
export default CopyButton
export { copyToClipboard }
import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import LaunchIcon from '@material-ui/icons/Launch'
import { Link } from '@material-ui/core'
const useStyles = makeStyles(
{
icon: {
verticalAlign: 'middle',
width: 16,
height: 16,
marginLeft: 2,
},
},
{ name: 'externalLink' }
)
const ExternalLink = ({ noIcon, children, ...props }) => {
const classes = useStyles()
return (
<Link {...props} target="_blank" rel="noopener noreferrer">
{children}
{!noIcon && <LaunchIcon className={classes.icon} />}
</Link>
)
}
ExternalLink.propTypes = {
/** Target URL */
href: PropTypes.string.isRequired,
/** Text color */
color: PropTypes.string,
/** Specifies that the icon should not be drawn. */
noIcon: PropTypes.bool,
/** Content of the link (text) */
children: PropTypes.node.isRequired,
/** Additional class applied to the outermost box. */
className: PropTypes.string,
}
ExternalLink.defaultProps = {
color: 'secondary',
noIcon: false,
}
export default ExternalLink
import React from 'react'
import PropTypes from 'prop-types'
import FileIcon from '~images/icons/file'
import PdfIcon from '~images/icons/pdf'
import ImageIcon from '~images/icons/image'
import ArchiveIcon from '~images/icons/archive'
import WordIcon from '~images/icons/word'
import ExcelIcon from '~images/icons/excel'
import PowerPointIcon from '~images/icons/powerpoint'
const getIconComponentByMimeType = mimeType => {
switch (mimeType) {
case 'application/pdf':
return PdfIcon
// Word Documents
case 'application/vnd.oasis.opendocument.text':
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/msword':
return WordIcon
// PowerPoint Documents
case 'application/vnd.oasis.opendocument.presentation':
case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
case 'application/vnd.ms-powerpoint':
return PowerPointIcon
// Excel Document
case 'application/vnd.oasis.opendocument.spreadsheet':
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
case 'application/vnd.ms-excel':
return ExcelIcon
// Archives
case 'application/x-tar':
case 'application/octet-stream':
case 'application/x-bzip':
case 'application/x-bzip2':
case 'application/x-rar-compressed':
case 'application/zip':
case 'application/x-7z-compressed':
return ArchiveIcon
// Images
case 'image/jpeg':
case 'image/gif':
case 'image/png':
case 'image/svg+xml':
return ImageIcon
default:
return FileIcon
}
}
const FileTypeIcon = ({ mimeType, ...props }) => {
const IconComponent = getIconComponentByMimeType(mimeType)
return <IconComponent {...props} />
}
FileTypeIcon.propTypes = {
/** MimeType to select corresponding icon */
mimeType: PropTypes.string,
}
export default FileTypeIcon
import React from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core/styles'
import { Tooltip } from '@material-ui/core'
import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
const useStyles = makeStyles(
{
icon: {
verticalAlign: 'middle',
width: 16,
height: 16,
marginLeft: 2,
position: 'relative',
top: '-1px',
},
},
{ name: 'helpTooltip' }
)
const HelpTooltip = ({ title, ...props }) => {
const classes = useStyles()
return (
<Tooltip title={title} {...props}>
<HelpOutlineIcon className={classes.icon} fontSize="small" />
</Tooltip>
)
}
HelpTooltip.propTypes = {
/** Content of the tooltip */
title: PropTypes.node,
}