@strapi/admin 4.15.0-alpha.0 → 4.15.0

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

@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { Flex, Icon, Typography } from '@strapi/design-system';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Check } from '@strapi/icons';
-import PropTypes from 'prop-types';
-
-import { IS_ACTIVE, IS_DONE, IS_NOT_DONE } from '../constants';
-
-const StepNumber = ({ type, number }) => {
-  if (type === IS_DONE) {
-    return (
-      <Flex
-        background="primary600"
-        padding={2}
-        borderRadius="50%"
-        width={pxToRem(30)}
-        height={pxToRem(30)}
-        justifyContent="center"
-      >
-        <Icon as={Check} aria-hidden width={pxToRem(16)} color="neutral0" />
-      </Flex>
-    );
-  }
-
-  if (type === IS_ACTIVE) {
-    return (
-      <Flex
-        background="primary600"
-        padding={2}
-        borderRadius="50%"
-        width={pxToRem(30)}
-        height={pxToRem(30)}
-        justifyContent="center"
-      >
-        <Typography fontWeight="semiBold" textColor="neutral0">
-          {number}
-        </Typography>
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex
-      borderColor="neutral500"
-      borderWidth="1px"
-      borderStyle="solid"
-      padding={2}
-      borderRadius="50%"
-      width={pxToRem(30)}
-      height={pxToRem(30)}
-      justifyContent="center"
-    >
-      <Typography fontWeight="semiBold" textColor="neutral600">
-        {number}
-      </Typography>
-    </Flex>
-  );
-};
-
-StepNumber.defaultProps = {
-  number: undefined,
-  type: IS_NOT_DONE,
-};
-
-StepNumber.propTypes = {
-  number: PropTypes.number,
-  type: PropTypes.oneOf([IS_ACTIVE, IS_DONE, IS_NOT_DONE]),
-};
-
-export default StepNumber;

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

@@ -1,3 +0,0 @@
-export const IS_ACTIVE = 'isActive';
-export const IS_DONE = 'isDone';
-export const IS_NOT_DONE = 'isNotDone';

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

@@ -1,102 +0,0 @@
-import React, { useReducer } from 'react';
-
-import { GuidedTourProvider } from '@strapi/helper-plugin';
-import get from 'lodash/get';
-import PropTypes from 'prop-types';
-
-import init from './init';
-import reducer, { initialState } from './reducer';
-import arePreviousSectionsDone from './utils/arePreviousSectionsDone';
-import arePreviousStepsDone from './utils/arePreviousStepsDone';
-import persistStateToLocaleStorage from './utils/persistStateToLocaleStorage';
-
-const GuidedTour = ({ children }) => {
-  const [{ currentStep, guidedTourState, isGuidedTourVisible, isSkipped }, dispatch] = useReducer(
-    reducer,
-    initialState,
-    init
-  );
-
-  const setCurrentStep = (step) => {
-    // if step is null it is intentional, we need to dispatch it
-    if (step !== null) {
-      const isStepAlreadyDone = get(guidedTourState, step);
-      const isStepToShow = arePreviousStepsDone(step, guidedTourState);
-
-      if (isStepAlreadyDone || isSkipped || !isStepToShow) {
-        return null;
-      }
-    }
-
-    persistStateToLocaleStorage.addCurrentStep(step);
-
-    return dispatch({
-      type: 'SET_CURRENT_STEP',
-      step,
-    });
-  };
-
-  const setGuidedTourVisibility = (value) => {
-    dispatch({
-      type: 'SET_GUIDED_TOUR_VISIBILITY',
-      value,
-    });
-  };
-
-  const setStepState = (currentStep, value) => {
-    persistStateToLocaleStorage.addCompletedStep(currentStep);
-
-    dispatch({
-      type: 'SET_STEP_STATE',
-      currentStep,
-      value,
-    });
-  };
-
-  const startSection = (sectionName) => {
-    const sectionSteps = guidedTourState[sectionName];
-
-    if (sectionSteps) {
-      const isSectionToShow = arePreviousSectionsDone(sectionName, guidedTourState);
-      const firstStep = Object.keys(sectionSteps)[0];
-      const isFirstStepDone = sectionSteps[firstStep];
-
-      if (isSectionToShow && !currentStep && !isFirstStepDone) {
-        return setCurrentStep(`${sectionName}.${firstStep}`);
-      }
-    }
-
-    return null;
-  };
-
-  const setSkipped = (value) => {
-    persistStateToLocaleStorage.setSkipped(value);
-
-    dispatch({
-      type: 'SET_SKIPPED',
-      value,
-    });
-  };
-
-  return (
-    <GuidedTourProvider
-      guidedTourState={guidedTourState}
-      currentStep={currentStep}
-      setCurrentStep={setCurrentStep}
-      setGuidedTourVisibility={setGuidedTourVisibility}
-      setSkipped={setSkipped}
-      setStepState={setStepState}
-      startSection={startSection}
-      isGuidedTourVisible={isGuidedTourVisible}
-      isSkipped={isSkipped}
-    >
-      {children}
-    </GuidedTourProvider>
-  );
-};
-
-GuidedTour.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
-export default GuidedTour;

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

@@ -1,37 +0,0 @@
-import set from 'lodash/set';
-
-import persistStateToLocaleStorage, {
-  COMPLETED_STEPS,
-  CURRENT_STEP,
-  SKIPPED,
-} from './utils/persistStateToLocaleStorage';
-
-const init = (initialState) => {
-  const copyInitialState = { ...initialState };
-  const guidedTourLocaleStorage = persistStateToLocaleStorage.get(COMPLETED_STEPS);
-  const currentStepLocaleStorage = persistStateToLocaleStorage.get(CURRENT_STEP);
-  const skippedLocaleStorage = persistStateToLocaleStorage.get(SKIPPED);
-
-  if (guidedTourLocaleStorage) {
-    guidedTourLocaleStorage.forEach((step) => {
-      const [sectionName, stepName] = step.split('.');
-      set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
-    });
-  }
-
-  // if current step when initializing mark it as done
-  if (currentStepLocaleStorage) {
-    const [sectionName, stepName] = currentStepLocaleStorage.split('.');
-    set(copyInitialState, ['guidedTourState', sectionName, stepName], true);
-    persistStateToLocaleStorage.addCompletedStep(currentStepLocaleStorage);
-    persistStateToLocaleStorage.addCurrentStep(null);
-  }
-
-  if (skippedLocaleStorage !== null) {
-    set(copyInitialState, 'isSkipped', skippedLocaleStorage);
-  }
-
-  return copyInitialState;
-};
-
-export default init;

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

@@ -1,50 +0,0 @@
-/* eslint-disable consistent-return */
-import produce from 'immer';
-
-export const initialState = {
-  currentStep: null,
-  guidedTourState: {
-    contentTypeBuilder: {
-      create: false,
-      success: false,
-    },
-    contentManager: {
-      create: false,
-      success: false,
-    },
-    apiTokens: {
-      create: false,
-      success: false,
-    },
-  },
-  isGuidedTourVisible: false,
-  isSkipped: true,
-};
-
-const reducer = (state = initialState, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'SET_CURRENT_STEP': {
-        draftState.currentStep = action.step;
-        break;
-      }
-      case 'SET_STEP_STATE': {
-        const [section, step] = action.currentStep.split('.');
-        draftState.guidedTourState[section][step] = action.value;
-        break;
-      }
-      case 'SET_SKIPPED': {
-        draftState.isSkipped = action.value;
-        break;
-      }
-      case 'SET_GUIDED_TOUR_VISIBILITY': {
-        draftState.isGuidedTourVisible = action.value;
-        break;
-      }
-      default: {
-        return draftState;
-      }
-    }
-  });
-
-export default reducer;

package/admin/src/components/GuidedTour/utils/arePreviousSectionsDone.js

@@ -1,13 +0,0 @@
-const arePreviousSectionsDone = (sectionName, guidedTourState) => {
-  const guidedTourArray = Object.entries(guidedTourState);
-
-  // Find current section position in the guidedTourArray
-  // Get only previous sections based on current section position
-  const currentSectionIndex = guidedTourArray.findIndex(([key]) => key === sectionName);
-  const previousSections = guidedTourArray.slice(0, currentSectionIndex);
-
-  // Check if every steps from previous section are done
-  return previousSections.every(([, sectionValue]) => Object.values(sectionValue).every(Boolean));
-};
-
-export default arePreviousSectionsDone;

package/admin/src/components/GuidedTour/utils/arePreviousStepsDone.js

@@ -1,12 +0,0 @@
-const arePreviousStepsDone = (step, guidedTourState) => {
-  const stepSplit = step.split('.');
-  const stepName = stepSplit[1];
-  const sectionArray = Object.entries(guidedTourState[stepSplit[0]]);
-
-  const currentStepIndex = sectionArray.findIndex(([key]) => key === stepName);
-  const previousSteps = sectionArray.slice(0, currentStepIndex);
-
-  return previousSteps.every(([, sectionValue]) => sectionValue);
-};
-
-export default arePreviousStepsDone;

package/admin/src/components/GuidedTour/utils/isGuidedTourCompleted.js

@@ -1,6 +0,0 @@
-const isGuidedTourCompleted = (guidedTourState) =>
-  Object.entries(guidedTourState).every(([, section]) =>
-    Object.entries(section).every(([, step]) => step)
-  );
-
-export default isGuidedTourCompleted;

package/admin/src/components/GuidedTour/utils/persistStateToLocaleStorage.js

@@ -1,34 +0,0 @@
-export const CURRENT_STEP = 'GUIDED_TOUR_CURRENT_STEP';
-export const COMPLETED_STEPS = 'GUIDED_TOUR_COMPLETED_STEPS';
-export const SKIPPED = 'GUIDED_TOUR_SKIPPED';
-const parse = JSON.parse;
-const stringify = JSON.stringify;
-
-const persistStateToLocaleStorage = {
-  clear() {
-    localStorage.removeItem(CURRENT_STEP);
-    localStorage.removeItem(COMPLETED_STEPS);
-  },
-  addCompletedStep(completedStep) {
-    const currentSteps = parse(localStorage.getItem(COMPLETED_STEPS))?.slice() || [];
-    const isAlreadyStored = currentSteps.includes(completedStep);
-
-    if (isAlreadyStored) {
-      return;
-    }
-
-    currentSteps.push(completedStep);
-    localStorage.setItem(COMPLETED_STEPS, stringify(currentSteps));
-  },
-  addCurrentStep(currentStep) {
-    localStorage.setItem(CURRENT_STEP, stringify(currentStep));
-  },
-  setSkipped(value) {
-    localStorage.setItem(SKIPPED, stringify(value));
-  },
-  get(item) {
-    return parse(localStorage.getItem(item));
-  },
-};
-
-export default persistStateToLocaleStorage;

package/admin/src/components/LanguageProvider/index.js

@@ -1,54 +0,0 @@
-/*
- *
- * LanguageProvider
- *
- * this component connects the redux state language locale to the
- * IntlProvider component and i18n messages (loaded from `app/translations`)
- */
-
-import React, { useEffect, useReducer } from 'react';
-
-import defaultsDeep from 'lodash/defaultsDeep';
-import PropTypes from 'prop-types';
-import { IntlProvider } from 'react-intl';
-
-import LocalesProvider from '../LocalesProvider';
-
-import init from './init';
-import reducer, { initialState } from './reducer';
-import localStorageKey from './utils/localStorageKey';
-
-const LanguageProvider = ({ children, localeNames, messages }) => {
-  const [{ locale }, dispatch] = useReducer(reducer, initialState, () => init(localeNames));
-
-  useEffect(() => {
-    // Set user language in local storage.
-    window.localStorage.setItem(localStorageKey, locale);
-    document.documentElement.setAttribute('lang', locale);
-  }, [locale]);
-
-  const changeLocale = (locale) => {
-    dispatch({
-      type: 'CHANGE_LOCALE',
-      locale,
-    });
-  };
-
-  const appMessages = defaultsDeep(messages[locale], messages.en);
-
-  return (
-    <IntlProvider locale={locale} defaultLocale="en" messages={appMessages} textComponent="span">
-      <LocalesProvider changeLocale={changeLocale} localeNames={localeNames}>
-        {children}
-      </LocalesProvider>
-    </IntlProvider>
-  );
-};
-
-LanguageProvider.propTypes = {
-  children: PropTypes.element.isRequired,
-  localeNames: PropTypes.objectOf(PropTypes.string).isRequired,
-  messages: PropTypes.object.isRequired,
-};
-
-export default LanguageProvider;

package/admin/src/components/LanguageProvider/init.js

@@ -1,13 +0,0 @@
-import localStorageKey from './utils/localStorageKey';
-
-const init = (localeNames) => {
-  const languageFromLocaleStorage = window.localStorage.getItem(localStorageKey);
-  const appLanguage = localeNames[languageFromLocaleStorage] ? languageFromLocaleStorage : 'en';
-
-  return {
-    locale: appLanguage,
-    localeNames,
-  };
-};
-
-export default init;

package/admin/src/components/LanguageProvider/reducer.js

@@ -1,30 +0,0 @@
-/*
- *
- * LanguageProvider reducer
- *
- */
-
-const initialState = {
-  localeNames: { en: 'English' },
-  locale: 'en',
-};
-
-const languageProviderReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case 'CHANGE_LOCALE': {
-      const { locale } = action;
-
-      if (!state.localeNames[locale]) {
-        return state;
-      }
-
-      return { ...state, locale };
-    }
-    default: {
-      return state;
-    }
-  }
-};
-
-export default languageProviderReducer;
-export { initialState };

package/admin/src/components/LanguageProvider/utils/localStorageKey.js

@@ -1,3 +0,0 @@
-const localStorageKey = 'strapi-admin-language';
-
-export default localStorageKey;

package/admin/src/components/LocalesProvider/context.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const LocalesProviderContext = createContext();
-
-export default LocalesProviderContext;

package/admin/src/components/LocalesProvider/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import LocalesProviderContext from './context';
-
-const LocalesProvider = ({ changeLocale, children, localeNames }) => {
-  return (
-    <LocalesProviderContext.Provider value={{ changeLocale, localeNames }}>
-      {children}
-    </LocalesProviderContext.Provider>
-  );
-};
-
-LocalesProvider.propTypes = {
-  changeLocale: PropTypes.func.isRequired,
-  children: PropTypes.element.isRequired,
-  localeNames: PropTypes.object.isRequired,
-};
-
-export default LocalesProvider;

package/admin/src/components/LocalesProvider/useLocalesProvider.js

@@ -1,11 +0,0 @@
-import { useContext } from 'react';
-
-import LocalesProviderContext from './context';
-
-const useLocalesProvider = () => {
-  const { changeLocale, localeNames, messages } = useContext(LocalesProviderContext);
-
-  return { changeLocale, localeNames, messages };
-};
-
-export default useLocalesProvider;

package/admin/src/components/NpsSurvey/hooks/useNpsSurveySettings.js

@@ -1,17 +0,0 @@
-import { usePersistentState } from '@strapi/helper-plugin';
-
-// Exported to make it available during admin user registration.
-// Because we only enable the NPS for users who subscribe to the newsletter when signing up
-export function useNpsSurveySettings() {
-  const [npsSurveySettings, setNpsSurveySettings] = usePersistentState(
-    'STRAPI_NPS_SURVEY_SETTINGS',
-    {
-      enabled: true,
-      lastResponseDate: null,
-      firstDismissalDate: null,
-      lastDismissalDate: null,
-    }
-  );
-
-  return { npsSurveySettings, setNpsSurveySettings };
-}

package/admin/src/components/PluginsInitializer/index.js

@@ -1,68 +0,0 @@
-import React, { useReducer, useRef } from 'react';
-
-import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
-
-import Admin from '../../pages/Admin';
-
-import init from './init';
-import reducer, { initialState } from './reducer';
-
-const PluginsInitializer = () => {
-  const { plugins: appPlugins } = useStrapiApp();
-  const [{ plugins }, dispatch] = useReducer(reducer, initialState, () => init(appPlugins));
-  const setPlugin = useRef((pluginId) => {
-    dispatch({ type: 'SET_PLUGIN_READY', pluginId });
-  });
-
-  const hasApluginNotReady = Object.keys(plugins).some(
-    (plugin) => plugins[plugin].isReady === false
-  );
-
-  /**
-   *
-   * I have spent some time trying to understand what is happening here, and wanted to
-   * leave that knowledge for my future me:
-   *
-   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
-   * of writing it seems only to be used by the i18n plugin.
-   *
-   * How does it work?
-   *
-   * Every plugin that has an `initializer` component defined, receives the
-   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
-   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
-   * reducer of the admin app defined above.
-   *
-   * Once all plugins are set to `isReady: true` the app renders.
-   *
-   * This API is used to block rendering of the admin app. We should remove that in v5 completely
-   * and make sure plugins can inject data into the global store before they are initialized, to avoid
-   * having a new prop-callback based communication channel between plugins and the core admin app.
-   *
-   */
-
-  if (hasApluginNotReady) {
-    const initializers = Object.keys(plugins).reduce((acc, current) => {
-      const InitializerComponent = plugins[current].initializer;
-
-      if (InitializerComponent) {
-        const key = plugins[current].pluginId;
-
-        acc.push(<InitializerComponent key={key} setPlugin={setPlugin.current} />);
-      }
-
-      return acc;
-    }, []);
-
-    return (
-      <>
-        {initializers}
-        <LoadingIndicatorPage />
-      </>
-    );
-  }
-
-  return <Admin />;
-};
-
-export default PluginsInitializer;

package/admin/src/components/PluginsInitializer/init.js

@@ -1,11 +0,0 @@
-const init = (plugins) => {
-  return {
-    plugins: Object.keys(plugins).reduce((acc, current) => {
-      acc[current] = { ...plugins[current] };
-
-      return acc;
-    }, {}),
-  };
-};
-
-export default init;

package/admin/src/components/PluginsInitializer/reducer.js

@@ -1,22 +0,0 @@
-import produce from 'immer';
-import set from 'lodash/set';
-
-const initialState = {
-  plugins: null,
-};
-
-const reducer = (state = initialState, action) =>
-  /* eslint-disable-next-line consistent-return */
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'SET_PLUGIN_READY': {
-        set(draftState, ['plugins', action.pluginId, 'isReady'], true);
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export { initialState };
-export default reducer;

package/admin/src/components/PrivateRoute/index.js

@@ -1,46 +0,0 @@
-/**
- *
- * PrivateRoute
- * Higher Order Component that blocks navigation when the user is not logged in
- * and redirect the user to login page
- *
- * Wrap your protected routes to secure your container
- */
-
-import React, { memo } from 'react';
-
-import { auth } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-import { Redirect, Route, useLocation } from 'react-router-dom';
-
-/* eslint-disable react/jsx-curly-newline */
-
-const PrivateRoute = ({ component: Component, path, ...rest }) => {
-  const { pathname, search } = useLocation();
-
-  return (
-    <Route
-      path={path}
-      render={(props) =>
-        auth.getToken() !== null ? (
-          <Component {...rest} {...props} />
-        ) : (
-          <Redirect
-            to={{
-              pathname: '/auth/login',
-              search:
-                pathname !== '/' && `?redirectTo=${encodeURIComponent(`${pathname}${search}`)}`,
-            }}
-          />
-        )
-      }
-    />
-  );
-};
-
-PrivateRoute.propTypes = {
-  component: PropTypes.any.isRequired,
-  path: PropTypes.string.isRequired,
-};
-
-export default memo(PrivateRoute);