@strapi/admin 4.14.5 → 4.15.0

package/admin/src/components/GuidedTour/Homepage/components/Step.js

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../../constants';
-import StepLine from '../../Stepper/StepLine';
-import StepNumber from '../../Stepper/StepNumber';
-
-const StepHomepage = ({ type, title, number, content, hasLine }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Box>
-      <Flex>
-        <Box minWidth={pxToRem(30)} marginRight={5}>
-          <StepNumber type={type} number={number} />
-        </Box>
-        <Typography variant="delta" as="h3">
-          {formatMessage(title)}
-        </Typography>
-      </Flex>
-      <Flex alignItems="flex-start">
-        <Flex
-          justifyContent="center"
-          minWidth={pxToRem(30)}
-          marginBottom={3}
-          marginTop={3}
-          marginRight={5}
-        >
-          {hasLine && (
-            <StepLine type={type} minHeight={type === IS_ACTIVE ? pxToRem(85) : pxToRem(65)} />
-          )}
-        </Flex>
-        <Box marginTop={2}>{type === IS_ACTIVE && content}</Box>
-      </Flex>
-    </Box>
-  );
-};
-
-StepHomepage.defaultProps = {
-  content: undefined,
-  number: undefined,
-  type: IS_NOT_DONE,
-  hasLine: true,
-};
-
-StepHomepage.propTypes = {
-  content: PropTypes.node,
-  number: PropTypes.number,
-  title: PropTypes.shape({
-    id: PropTypes.string,
-    defaultMessage: PropTypes.string,
-  }).isRequired,
-  type: PropTypes.oneOf([IS_ACTIVE, IS_DONE, IS_NOT_DONE]),
-  hasLine: PropTypes.bool,
-};
-
-export default StepHomepage;

package/admin/src/components/GuidedTour/Homepage/components/Stepper.js

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { Box } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-
-import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../../constants';
-
-import StepHomepage from './Step';
-
-const getType = (activeSectionIndex, index) => {
-  if (activeSectionIndex === -1) {
-    return IS_DONE;
-  }
-  if (index < activeSectionIndex) {
-    return IS_DONE;
-  }
-  if (index > activeSectionIndex) {
-    return IS_NOT_DONE;
-  }
-
-  return IS_ACTIVE;
-};
-
-const StepperHomepage = ({ sections, currentSectionKey }) => {
-  const activeSectionIndex = sections.findIndex((section) => section.key === currentSectionKey);
-
-  return (
-    <Box>
-      {sections.map((section, index) => (
-        <StepHomepage
-          key={section.key}
-          title={section.title}
-          content={section.content}
-          number={index + 1}
-          type={getType(activeSectionIndex, index)}
-          hasLine={index !== sections.length - 1}
-        />
-      ))}
-    </Box>
-  );
-};
-
-StepperHomepage.defaultProps = {
-  currentSectionKey: undefined,
-};
-
-StepperHomepage.propTypes = {
-  sections: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string.isRequired,
-      title: PropTypes.shape({
-        id: PropTypes.string,
-        defaultMessage: PropTypes.string,
-      }).isRequired,
-      content: PropTypes.node,
-    })
-  ).isRequired,
-  currentSectionKey: PropTypes.string,
-};
-
-export default StepperHomepage;

package/admin/src/components/GuidedTour/Homepage/index.js

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { Box, Button, Flex, Typography } from '@strapi/design-system';
-import { LinkButton, useGuidedTour, useTracking } from '@strapi/helper-plugin';
-import { ArrowRight } from '@strapi/icons';
-import { useIntl } from 'react-intl';
-
-import layout from '../layout';
-
-import StepperHomepage from './components/Stepper';
-
-const GuidedTourHomepage = () => {
-  const { guidedTourState, setSkipped } = useGuidedTour();
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-
-  const sections = Object.entries(layout).map(([key, val]) => ({
-    key,
-    title: val.home.title,
-    content: (
-      <LinkButton
-        onClick={() => trackUsage(val.home.trackingEvent)}
-        to={val.home.cta.target}
-        endIcon={<ArrowRight />}
-      >
-        {formatMessage(val.home.cta.title)}
-      </LinkButton>
-    ),
-  }));
-
-  const enrichedSections = sections.map((section) => ({
-    isDone: Object.entries(guidedTourState[section.key]).every(([, value]) => value),
-    ...section,
-  }));
-
-  const activeSection = enrichedSections.find((section) => !section.isDone)?.key;
-
-  const handleSkip = () => {
-    setSkipped(true);
-    trackUsage('didSkipGuidedtour');
-  };
-
-  return (
-    <Box
-      hasRadius
-      shadow="tableShadow"
-      paddingTop={7}
-      paddingRight={4}
-      paddingLeft={7}
-      paddingBottom={4}
-      background="neutral0"
-    >
-      <Flex direction="column" alignItems="stretch" gap={6}>
-        <Typography variant="beta" as="h2">
-          {formatMessage({
-            id: 'app.components.GuidedTour.title',
-            defaultMessage: '3 steps to get started',
-          })}
-        </Typography>
-        <StepperHomepage sections={sections} currentSectionKey={activeSection} />
-      </Flex>
-      <Flex justifyContent="flex-end">
-        <Button variant="tertiary" onClick={handleSkip}>
-          {formatMessage({ id: 'app.components.GuidedTour.skip', defaultMessage: 'Skip the tour' })}
-        </Button>
-      </Flex>
-    </Box>
-  );
-};
-
-export default GuidedTourHomepage;

package/admin/src/components/GuidedTour/Modal/components/Content.js

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { Box, Flex, Typography } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-const LiStyled = styled.li`
-  list-style: disc;
-  &::marker {
-    color: ${({ theme }) => theme.colors.neutral800};
-  }
-`;
-
-const Content = ({ id, defaultMessage }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4} paddingBottom={6}>
-      {formatMessage(
-        { id, defaultMessage },
-        {
-          documentationLink: DocumentationLink,
-          b: Bold,
-          p: Paragraph,
-          light: Light,
-          ul: List,
-          li: ListItem,
-        }
-      )}
-    </Flex>
-  );
-};
-
-const DocumentationLink = (children) => (
-  <Typography
-    as="a"
-    textColor="primary600"
-    target="_blank"
-    rel="noopener noreferrer"
-    href="https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api.html#api-parameters"
-  >
-    {children}
-  </Typography>
-);
-
-const Bold = (children) => <Typography fontWeight="semiBold">{children}</Typography>;
-
-const Paragraph = (children) => <Typography>{children}</Typography>;
-
-const Light = (children) => <Typography textColor="neutral600">{children}</Typography>;
-
-const List = (children) => (
-  <Box paddingLeft={6}>
-    <ul>{children}</ul>
-  </Box>
-);
-
-const ListItem = (children) => <LiStyled>{children}</LiStyled>;
-
-Content.propTypes = {
-  id: PropTypes.string.isRequired,
-  defaultMessage: PropTypes.string.isRequired,
-};
-
-export default Content;

package/admin/src/components/GuidedTour/Modal/components/Modal.js

@@ -1,72 +0,0 @@
-import React from 'react';
-
-import { Box, Button, Flex, FocusTrap, IconButton, Portal } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Cross } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-const ModalWrapper = styled(Flex)`
-  position: fixed;
-  z-index: 4;
-  inset: 0;
-  /* this is theme.colors.neutral800 with opacity */
-  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
-`;
-
-const Modal = ({ onClose, onSkip, children, hideSkip }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Portal>
-      <ModalWrapper onClick={onClose} padding={8} justifyContent="center">
-        <FocusTrap onEscape={onClose}>
-          <Flex
-            direction="column"
-            alignItems="stretch"
-            background="neutral0"
-            width={pxToRem(660)}
-            shadow="popupShadow"
-            hasRadius
-            padding={4}
-            gap={8}
-            role="dialog"
-            aria-modal
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Flex justifyContent="flex-end">
-              <IconButton
-                onClick={onClose}
-                aria-label={formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' })}
-                icon={<Cross />}
-              />
-            </Flex>
-            <Box paddingLeft={7} paddingRight={7} paddingBottom={hideSkip ? 8 : 0}>
-              {children}
-            </Box>
-            {!hideSkip && (
-              <Flex justifyContent="flex-end">
-                <Button variant="tertiary" onClick={onSkip}>
-                  {formatMessage({
-                    id: 'app.components.GuidedTour.skip',
-                    defaultMessage: 'Skip the tour',
-                  })}
-                </Button>
-              </Flex>
-            )}
-          </Flex>
-        </FocusTrap>
-      </ModalWrapper>
-    </Portal>
-  );
-};
-
-Modal.propTypes = {
-  children: PropTypes.node.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSkip: PropTypes.func.isRequired,
-  hideSkip: PropTypes.bool.isRequired,
-};
-
-export default Modal;

package/admin/src/components/GuidedTour/Modal/components/StepNumberWithPadding.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { Box } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-
-import StepNumber from '../../Stepper/StepNumber';
-
-const StepNumberWithPadding = ({ number, last, type }) => (
-  <Box paddingTop={3} paddingBottom={last ? 0 : 3}>
-    <StepNumber number={number} type={type} />
-  </Box>
-);
-
-StepNumberWithPadding.defaultProps = {
-  number: undefined,
-  last: false,
-  type: '',
-};
-
-StepNumberWithPadding.propTypes = {
-  number: PropTypes.number,
-  last: PropTypes.bool,
-  type: PropTypes.string,
-};
-
-export default StepNumberWithPadding;

package/admin/src/components/GuidedTour/Modal/components/Stepper.js

@@ -1,118 +0,0 @@
-import React from 'react';
-
-import { Box, Button, Flex, Typography } from '@strapi/design-system';
-import { LinkButton, pxToRem } from '@strapi/helper-plugin';
-import { ArrowRight } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { IS_ACTIVE, IS_DONE } from '../../constants';
-import StepLine from '../../Stepper/StepLine';
-
-import Content from './Content';
-import StepNumberWithPadding from './StepNumberWithPadding';
-
-const StepperModal = ({
-  title,
-  content,
-  cta,
-  onCtaClick,
-  sectionIndex,
-  stepIndex,
-  hasSectionAfter,
-}) => {
-  const { formatMessage } = useIntl();
-
-  const hasSectionBefore = sectionIndex > 0;
-  const hasStepsBefore = stepIndex > 0;
-  const nextSectionIndex = sectionIndex + 1;
-
-  return (
-    <>
-      <Flex alignItems="stretch">
-        <Flex marginRight={8} justifyContent="center" minWidth={pxToRem(30)}>
-          {hasSectionBefore && <StepLine type={IS_DONE} minHeight={pxToRem(24)} />}
-        </Flex>
-        <Typography variant="sigma" textColor="primary600">
-          {formatMessage({
-            id: 'app.components.GuidedTour.title',
-            defaultMessage: '3 steps to get started',
-          })}
-        </Typography>
-      </Flex>
-      <Flex>
-        <Flex marginRight={8} minWidth={pxToRem(30)}>
-          <StepNumberWithPadding
-            number={sectionIndex + 1}
-            type={hasStepsBefore ? IS_DONE : IS_ACTIVE}
-          />
-        </Flex>
-        <Typography variant="alpha" fontWeight="bold" textColor="neutral800" as="h3" id="title">
-          {formatMessage(title)}
-        </Typography>
-      </Flex>
-      <Flex alignItems="stretch">
-        <Flex marginRight={8} direction="column" justifyContent="center" minWidth={pxToRem(30)}>
-          {hasSectionAfter && (
-            <>
-              <StepLine type={IS_DONE} />
-              {hasStepsBefore && (
-                <StepNumberWithPadding number={nextSectionIndex + 1} type={IS_ACTIVE} last />
-              )}
-            </>
-          )}
-        </Flex>
-        <Box>
-          <Content {...content} />
-          {cta &&
-            (cta.target ? (
-              <LinkButton endIcon={<ArrowRight />} onClick={onCtaClick} to={cta.target}>
-                {formatMessage(cta.title)}
-              </LinkButton>
-            ) : (
-              <Button endIcon={<ArrowRight />} onClick={onCtaClick}>
-                {formatMessage(cta.title)}
-              </Button>
-            ))}
-        </Box>
-      </Flex>
-      {hasStepsBefore && hasSectionAfter && (
-        <Box paddingTop={3}>
-          <Flex marginRight={8} justifyContent="center" width={pxToRem(30)}>
-            <StepLine type={IS_DONE} minHeight={pxToRem(24)} />
-          </Flex>
-        </Box>
-      )}
-    </>
-  );
-};
-
-StepperModal.defaultProps = {
-  currentStep: null,
-  cta: undefined,
-};
-
-StepperModal.propTypes = {
-  sectionIndex: PropTypes.number.isRequired,
-  stepIndex: PropTypes.number.isRequired,
-  hasSectionAfter: PropTypes.bool.isRequired,
-  content: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
-  cta: PropTypes.shape({
-    target: PropTypes.string,
-    title: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      defaultMessage: PropTypes.string.isRequired,
-    }),
-  }),
-  currentStep: PropTypes.string,
-  onCtaClick: PropTypes.func.isRequired,
-  title: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default StepperModal;

package/admin/src/components/GuidedTour/Modal/index.js

@@ -1,94 +0,0 @@
-import React, { useEffect, useReducer, useState } from 'react';
-
-import { useGuidedTour, useTracking } from '@strapi/helper-plugin';
-import at from 'lodash/at';
-
-import layout from '../layout';
-
-import Modal from './components/Modal';
-import StepperModal from './components/Stepper';
-import reducer, { initialState } from './reducer';
-
-const GuidedTourModal = () => {
-  const {
-    currentStep,
-    guidedTourState,
-    setCurrentStep,
-    setStepState,
-    isGuidedTourVisible,
-    setSkipped,
-  } = useGuidedTour();
-  const [isVisible, setIsVisible] = useState(currentStep);
-  const [{ stepContent, sectionIndex, stepIndex, hasSectionAfter, hasStepAfter }, dispatch] =
-    useReducer(reducer, initialState);
-  const { trackUsage } = useTracking();
-
-  useEffect(() => {
-    if (!currentStep) {
-      setIsVisible(false);
-
-      return;
-    }
-
-    const [isStepDone] = at(guidedTourState, currentStep);
-
-    setIsVisible(!isStepDone && isGuidedTourVisible);
-  }, [currentStep, guidedTourState, isGuidedTourVisible]);
-
-  useEffect(() => {
-    if (currentStep) {
-      const [content] = at(layout, currentStep);
-      const sectionKeys = Object.keys(guidedTourState);
-      const [sectionName, stepName] = currentStep.split('.');
-      const newSectionIndex = sectionKeys.indexOf(sectionName);
-      const newStepIndex = Object.keys(guidedTourState[sectionName]).indexOf(stepName);
-      const newHasSectionAfter = newSectionIndex < sectionKeys.length - 1;
-      const newHasStepAfter = newStepIndex < Object.keys(guidedTourState[sectionName]).length - 1;
-
-      dispatch({
-        type: 'UPDATE_MODAL',
-        content,
-        newSectionIndex,
-        newStepIndex,
-        newHasSectionAfter,
-        newHasStepAfter,
-      });
-    }
-  }, [currentStep, guidedTourState]);
-
-  const handleCtaClick = () => {
-    setStepState(currentStep, true);
-    trackUsage(stepContent.trackingEvent);
-
-    setCurrentStep(null);
-  };
-
-  const handleSkip = () => {
-    setSkipped(true);
-    setCurrentStep(null);
-    trackUsage('didSkipGuidedtour');
-  };
-
-  if (isVisible && stepContent) {
-    return (
-      <Modal
-        hideSkip={!hasStepAfter && !hasSectionAfter}
-        onSkip={handleSkip}
-        onClose={handleCtaClick}
-      >
-        <StepperModal
-          {...stepContent}
-          onCtaClick={handleCtaClick}
-          currentStep={currentStep}
-          sectionIndex={sectionIndex}
-          stepIndex={stepIndex}
-          hasSectionAfter={hasSectionAfter}
-        />
-      </Modal>
-    );
-  }
-
-  return null;
-};
-
-export default GuidedTourModal;

package/admin/src/components/GuidedTour/Modal/reducer.js

@@ -1,29 +0,0 @@
-/* eslint-disable consistent-return */
-import produce from 'immer';
-
-export const initialState = {
-  stepContent: null,
-  sectionIndex: null,
-  stepIndex: null,
-  hasSectionAfter: false,
-  hasStepAfter: false,
-};
-
-const reducer = (state = initialState, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'UPDATE_MODAL': {
-        draftState.stepContent = action.content;
-        draftState.sectionIndex = action.newSectionIndex;
-        draftState.stepIndex = action.newStepIndex;
-        draftState.hasSectionAfter = action.newHasSectionAfter;
-        draftState.hasStepAfter = action.newHasStepAfter;
-        break;
-      }
-      default: {
-        return draftState;
-      }
-    }
-  });
-
-export default reducer;

package/admin/src/components/GuidedTour/Stepper/StepLine.js

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { Box } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-
-import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../constants';
-
-const StepLine = ({ type, ...props }) => {
-  return (
-    <Box
-      width={pxToRem(2)}
-      height="100%"
-      background={type === IS_NOT_DONE ? 'neutral300' : 'primary500'}
-      hasRadius
-      {...props}
-    />
-  );
-};
-
-StepLine.defaultProps = {
-  type: IS_NOT_DONE,
-};
-
-StepLine.propTypes = {
-  type: PropTypes.oneOf([IS_ACTIVE, IS_DONE, IS_NOT_DONE]),
-};
-
-export default StepLine;