@strapi/admin 4.2.0-beta.3 → 4.2.0-beta.4

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromComputerForm.js

@@ -0,0 +1,176 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { Flex } from '@strapi/design-system/Flex';
+import { Icon } from '@strapi/design-system/Icon';
+import { Typography } from '@strapi/design-system/Typography';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { Button } from '@strapi/design-system/Button';
+import { Field, FieldError, FieldInput } from '@strapi/design-system/Field';
+import PicturePlus from '@strapi/icons/PicturePlus';
+import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
+import { ACCEPTED_FORMAT, SIZE, DIMENSION } from '../../utils/constants';
+
+const FileInput = styled(FieldInput)`
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+`;
+
+const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
+  const { formatMessage } = useIntl();
+  const [dragOver, setDragOver] = useState(false);
+  const [fileError, setFileError] = useState(undefined);
+  const inputRef = useRef(null);
+
+  const handleDragEnter = () => setDragOver(true);
+  const handleDragLeave = () => setDragOver(false);
+
+  const handleClick = e => {
+    e.preventDefault();
+    inputRef.current.click();
+  };
+
+  const handleChange = async () => {
+    handleDragLeave();
+    const file = inputRef.current.files[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      const asset = await parseFileMetadatas(file);
+      setLocalImage(asset);
+      goTo(next);
+    } catch (err) {
+      if (err.displayMessage) {
+        setFileError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION }));
+        inputRef.current.focus();
+      } else {
+        throw err;
+      }
+    }
+  };
+
+  const getBorderColor = () => {
+    if (dragOver) {
+      return 'primary500';
+    }
+    if (fileError) {
+      return 'danger600';
+    }
+
+    return 'neutral300';
+  };
+
+  return (
+    <>
+      <form>
+        <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
+          <Field name="logo-upload" error={fileError}>
+            <label htmlFor="logo-upload">
+              <Stack spacing={2}>
+                <Flex
+                  paddingTop={9}
+                  paddingBottom={7}
+                  hasRadius
+                  justifyContent="center"
+                  direction="column"
+                  background={dragOver ? 'primary100' : 'neutral100'}
+                  borderColor={getBorderColor()}
+                  borderStyle="dashed"
+                  borderWidth="1px"
+                  position="relative"
+                  onDragEnter={handleDragEnter}
+                  onDragLeave={handleDragLeave}
+                >
+                  <Icon
+                    color="primary600"
+                    width={`${60 / 16}rem`}
+                    height={`${60 / 16}rem`}
+                    as={PicturePlus}
+                    aria-hidden
+                  />
+
+                  <Box paddingTop={3} paddingBottom={5}>
+                    <Typography variant="delta" as="span">
+                      {formatMessage({
+                        id: 'Settings.application.customization.modal.upload.drag-drop',
+                        defaultMessage: 'Drag and Drop here or',
+                      })}
+                    </Typography>
+                  </Box>
+
+                  <FileInput
+                    accept={ACCEPTED_FORMAT}
+                    cursor="pointer"
+                    as="input"
+                    type="file"
+                    name="files"
+                    tabIndex={-1}
+                    zIndex={1}
+                    onChange={handleChange}
+                    ref={inputRef}
+                    id="logo-upload"
+                  />
+
+                  <Button type="button" onClick={handleClick}>
+                    {formatMessage({
+                      id: 'Settings.application.customization.modal.upload.cta.browse',
+                      defaultMessage: 'Browse files',
+                    })}
+                  </Button>
+
+                  <Box paddingTop={6}>
+                    <Typography variant="pi" textColor="neutral600">
+                      {formatMessage(
+                        {
+                          id: 'Settings.application.customization.modal.upload.file-validation',
+                          defaultMessage:
+                            'Max dimension: {dimension}x{dimension}, Max size: {size}KB',
+                        },
+                        { size: SIZE, dimension: DIMENSION }
+                      )}
+                    </Typography>
+                  </Box>
+                </Flex>
+                <FieldError />
+              </Stack>
+            </label>
+          </Field>
+        </Box>
+      </form>
+      <ModalFooter
+        startActions={
+          <Button onClick={onClose} variant="tertiary">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+      />
+    </>
+  );
+};
+
+FromComputerForm.defaultProps = {
+  next: null,
+};
+
+FromComputerForm.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default FromComputerForm;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import urlToFile from '../../utils/urlToFile';
+import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
+import { SIZE, DIMENSION } from '../../utils/constants';
+
+const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
+  const { formatMessage } = useIntl();
+  const [logoUrl, setLogoUrl] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleChange = e => {
+    setLogoUrl(e.target.value);
+  };
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    try {
+      const file = await urlToFile(logoUrl);
+      const asset = await parseFileMetadatas(file);
+
+      setLocalImage(asset);
+      goTo(next);
+    } catch (err) {
+      if (err.displayMessage) {
+        setError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION }));
+      } else {
+        throw err;
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
+        <TextInput
+          label={formatMessage({
+            id: 'Settings.application.customization.modal.upload.from-url.input-label',
+            defaultMessage: 'URL',
+          })}
+          error={error}
+          onChange={handleChange}
+          value={logoUrl}
+          name="logo-url"
+        />
+      </Box>
+      <ModalFooter
+        startActions={
+          <Button onClick={onClose} variant="tertiary">
+            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
+          </Button>
+        }
+        endActions={
+          <Button type="submit">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.upload.next',
+              defaultMessage: 'Next',
+            })}
+          </Button>
+        }
+      />
+    </form>
+  );
+};
+
+FromUrlForm.defaultProps = {
+  next: null,
+};
+
+FromUrlForm.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default FromUrlForm;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/ImageCardAsset.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import {
+  Card,
+  CardAsset,
+  CardBadge,
+  CardBody,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+} from '@strapi/design-system/Card';
+
+const ImageCardAsset = ({ asset }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardAsset size="S" src={asset.url} />
+      </CardHeader>
+      <CardBody>
+        <CardContent>
+          <CardTitle>{asset.name}</CardTitle>
+          <CardSubtitle>
+            {`${asset.ext.toUpperCase()} - ${asset.width}✕${asset.height}`}
+          </CardSubtitle>
+        </CardContent>
+        <CardBadge>
+          {formatMessage({
+            id: 'Settings.application.customization.modal.pending.card-badge',
+            defaultMessage: 'image',
+          })}
+        </CardBadge>
+      </CardBody>
+    </Card>
+  );
+};
+
+ImageCardAsset.propTypes = {
+  asset: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    ext: PropTypes.string,
+  }).isRequired,
+};
+
+export default ImageCardAsset;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { Button } from '@strapi/design-system/Button';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { Typography } from '@strapi/design-system/Typography';
+import ImageCardAsset from './ImageCardAsset';
+
+const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, onChangeLogo }) => {
+  const { formatMessage } = useIntl();
+
+  const handleGoBack = () => {
+    setLocalImage(undefined);
+    goTo(prev);
+  };
+
+  const handleUpload = () => {
+    onChangeLogo(asset);
+    goTo(next);
+  };
+
+  return (
+    <>
+      <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
+        <Flex justifyContent="space-between" paddingBottom={6}>
+          <Flex direction="column" alignItems="flex-start">
+            <Typography variant="pi" fontWeight="bold">
+              {formatMessage({
+                id: 'Settings.application.customization.modal.pending.title',
+                defaultMessage: 'Logo ready to upload',
+              })}
+            </Typography>
+            <Typography variant="pi" textColor="neutral500">
+              {formatMessage({
+                id: 'Settings.application.customization.modal.pending.subtitle',
+                defaultMessage: 'Manage the chosen logo before uploading it',
+              })}
+            </Typography>
+          </Flex>
+          <Button onClick={handleGoBack} variant="secondary">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.pending.choose-another',
+              defaultMessage: 'Choose another logo',
+            })}
+          </Button>
+        </Flex>
+        <Box maxWidth={pxToRem(180)}>
+          <ImageCardAsset asset={asset} />
+        </Box>
+      </Box>
+      <ModalFooter
+        startActions={
+          <Button onClick={onClose} variant="tertiary">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endActions={
+          <Button onClick={handleUpload}>
+            {formatMessage({
+              id: 'Settings.application.customization.modal.pending.upload',
+              defaultMessage: 'Upload logo',
+            })}
+          </Button>
+        }
+      />
+    </>
+  );
+};
+
+PendingLogoDialog.defaultProps = {
+  next: null,
+  prev: null,
+};
+
+PendingLogoDialog.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  asset: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    ext: PropTypes.string,
+  }).isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  onChangeLogo: PropTypes.func.isRequired,
+  prev: PropTypes.string,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default PendingLogoDialog;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/index.js

@@ -0,0 +1,85 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { ModalLayout, ModalHeader } from '@strapi/design-system/ModalLayout';
+import { Typography } from '@strapi/design-system/Typography';
+import reducer, { initialState } from './reducer';
+
+const LogoModalStepper = ({
+  onChangeLogo,
+  customLogo,
+  goTo,
+  Component,
+  modalTitle,
+  next,
+  prev,
+  currentStep,
+}) => {
+  const [{ localImage }, dispatch] = useReducer(reducer, initialState);
+  const { formatMessage } = useIntl();
+
+  const setLocalImage = asset => {
+    dispatch({
+      type: 'SET_LOCAL_IMAGE',
+      value: asset,
+    });
+  };
+
+  const handleCloseModal = () => {
+    goTo(null);
+  };
+
+  if (!currentStep) {
+    return null;
+  }
+
+  return (
+    <ModalLayout labelledBy="modal" onClose={handleCloseModal}>
+      <ModalHeader>
+        <Typography fontWeight="bold" as="h2" id="modal">
+          {formatMessage(modalTitle)}
+        </Typography>
+      </ModalHeader>
+      <Component
+        setLocalImage={setLocalImage}
+        goTo={goTo}
+        next={next}
+        prev={prev}
+        onClose={handleCloseModal}
+        asset={localImage || customLogo}
+        onChangeLogo={onChangeLogo}
+      />
+    </ModalLayout>
+  );
+};
+
+LogoModalStepper.defaultProps = {
+  Component: undefined,
+  currentStep: undefined,
+  customLogo: undefined,
+  modalTitle: undefined,
+  next: null,
+  prev: null,
+};
+
+LogoModalStepper.propTypes = {
+  Component: PropTypes.elementType,
+  currentStep: PropTypes.string,
+  customLogo: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    ext: PropTypes.string,
+  }),
+  goTo: PropTypes.func.isRequired,
+  modalTitle: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  next: PropTypes.string,
+  onChangeLogo: PropTypes.func.isRequired,
+  prev: PropTypes.string,
+};
+
+export default LogoModalStepper;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/reducer.js

@@ -0,0 +1,28 @@
+/* eslint-disable consistent-return */
+/*
+ *
+ * LogoModalStepper reducer
+ *
+ */
+
+import produce from 'immer';
+
+const initialState = {
+  localImage: undefined,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'SET_LOCAL_IMAGE': {
+        draftState.localImage = action.value;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };