@strapi/admin 4.1.1 → 4.2.0-alpha.O

package/admin/src/StrapiApp.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { lightTheme } from '@strapi/design-system/themes';
+import { lightTheme, darkTheme } from '@strapi/design-system/themes';
 import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
@@ -13,7 +13,6 @@ import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
 import Providers from './components/Providers';
-import Theme from './components/Theme';
 import languageNativeNames from './translations/languageNativeNames';
 import {
   INJECT_COLUMN_IN_TABLE,
@@ -34,7 +33,7 @@ class StrapiApp {
       locales: ['en'],
       menuLogo: MenuLogo,
       notifications: { releases: true },
-      theme: lightTheme,
+      themes: { light: lightTheme, dark: darkTheme },
       translations: {},
       tutorials: true,
     };
@@ -226,7 +225,7 @@ class StrapiApp {
     }
 
     if (this.customConfigurations?.theme) {
-      this.configurations.theme = merge(this.configurations.theme, this.customConfigurations.theme);
+      merge(this.configurations.themes.light, this.customConfigurations.theme);
     }
 
     if (this.customConfigurations?.notifications?.releases !== undefined) {
@@ -427,44 +426,43 @@ class StrapiApp {
     } = this.library;
 
     return (
-      <Theme theme={this.configurations.theme}>
-        <Providers
-          authLogo={this.configurations.authLogo}
-          components={components}
-          fields={fields}
-          localeNames={localeNames}
-          getAdminInjectedComponents={this.getAdminInjectedComponents}
-          getPlugin={this.getPlugin}
-          messages={this.configurations.translations}
-          menu={this.menu}
-          menuLogo={this.configurations.menuLogo}
-          plugins={this.plugins}
-          runHookParallel={this.runHookParallel}
-          runHookWaterfall={(name, initialValue, async = false) => {
-            return this.runHookWaterfall(name, initialValue, async, store);
-          }}
-          runHookSeries={this.runHookSeries}
-          settings={this.settings}
-          showTutorials={this.configurations.tutorials}
-          showReleaseNotification={this.configurations.notifications.releases}
-          store={store}
-        >
-          <>
-            <Helmet
-              link={[
-                {
-                  rel: 'icon',
-                  type: 'image/png',
-                  href: this.configurations.head.favicon,
-                },
-              ]}
-            />
-            <BrowserRouter basename={basename}>
-              <App store={store} />
-            </BrowserRouter>
-          </>
-        </Providers>
-      </Theme>
+      <Providers
+        authLogo={this.configurations.authLogo}
+        components={components}
+        fields={fields}
+        localeNames={localeNames}
+        getAdminInjectedComponents={this.getAdminInjectedComponents}
+        getPlugin={this.getPlugin}
+        messages={this.configurations.translations}
+        menu={this.menu}
+        menuLogo={this.configurations.menuLogo}
+        plugins={this.plugins}
+        runHookParallel={this.runHookParallel}
+        runHookWaterfall={(name, initialValue, async = false) => {
+          return this.runHookWaterfall(name, initialValue, async, store);
+        }}
+        runHookSeries={this.runHookSeries}
+        themes={this.configurations.themes}
+        settings={this.settings}
+        showTutorials={this.configurations.tutorials}
+        showReleaseNotification={this.configurations.notifications.releases}
+        store={store}
+      >
+        <>
+          <Helmet
+            link={[
+              {
+                rel: 'icon',
+                type: 'image/png',
+                href: this.configurations.head.favicon,
+              },
+            ]}
+          />
+          <BrowserRouter basename={basename}>
+            <App store={store} />
+          </BrowserRouter>
+        </>
+      </Providers>
     );
   }
 }

package/admin/src/components/AutoReloadOverlayBlockerProvider/Blocker.js

@@ -44,8 +44,8 @@ const Blocker = ({ displayedIcon, description, title, isOpen }) => {
   if (isOpen) {
     return ReactDOM.createPortal(
       <Overlay>
-        <Content size={6}>
-          <Stack size={2}>
+        <Content spacing={6}>
+          <Stack spacing={2}>
             <Flex justifyContent="center">
               <Typography as="h1" variant="alpha">
                 {formatMessage(title)}

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

@@ -42,7 +42,7 @@ const GuidedTourHomepage = () => {
       paddingBottom={4}
       background="neutral0"
     >
-      <Stack size={6}>
+      <Stack spacing={6}>
         <Typography variant="beta" as="h2">
           {formatMessage({
             id: 'app.components.GuidedTour.title',

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

@@ -14,7 +14,7 @@ const Content = ({ id, defaultMessage }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <Stack size={4} paddingBottom={6}>
+    <Stack spacing={4} paddingBottom={6}>
       {formatMessage(
         { id, defaultMessage },
         {

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

@@ -17,7 +17,7 @@ const ModalWrapper = styled(Flex)`
   z-index: 4;
   inset: 0;
   /* this is theme.colors.neutral800 with opacity */
-  background: ${({ theme }) => `${theme.colors.neutral800}33`};
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
 `;
 
 const Modal = ({ onClose, onSkip, children, hideSkip }) => {
@@ -33,7 +33,7 @@ const Modal = ({ onClose, onSkip, children, hideSkip }) => {
             shadow="popupShadow"
             hasRadius
             padding={4}
-            size={8}
+            spacing={8}
             role="dialog"
             aria-modal
             onClick={e => e.stopPropagation()}

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

@@ -156,7 +156,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           hasRadius
         >
           <FocusTrap onEscape={handleToggleUserLinks}>
-            <Stack size={0}>
+            <Stack spacing={0}>
               <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({

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

@@ -21,7 +21,7 @@ const Notifications = ({ children }) => {
         left="50%"
         marginLeft="-250px"
         position="fixed"
-        size={2}
+        spacing={2}
         top={`${46 / 16}rem`}
         width={`${500 / 16}rem`}
         zIndex={10}

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

@@ -9,6 +9,8 @@ import GuidedTour from '../GuidedTour';
 import AutoReloadOverlayBlockerProvider from '../AutoReloadOverlayBlockerProvider';
 import Notifications from '../Notifications';
 import OverlayBlocker from '../OverlayBlocker';
+import ThemeToggleProvider from '../ThemeToggleProvider';
+import Theme from '../Theme';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,41 +38,45 @@ const Providers = ({
   settings,
   showReleaseNotification,
   showTutorials,
-
   store,
+  themes,
 }) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <Provider store={store}>
-        <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-          <ConfigurationsContext.Provider
-            value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
-          >
-            <StrapiAppProvider
-              getPlugin={getPlugin}
-              menu={menu}
-              plugins={plugins}
-              runHookParallel={runHookParallel}
-              runHookWaterfall={runHookWaterfall}
-              runHookSeries={runHookSeries}
-              settings={settings}
-            >
-              <LibraryProvider components={components} fields={fields}>
-                <LanguageProvider messages={messages} localeNames={localeNames}>
-                  <AutoReloadOverlayBlockerProvider>
-                    <OverlayBlocker>
-                      <GuidedTour>
-                        <Notifications>{children}</Notifications>
-                      </GuidedTour>
-                    </OverlayBlocker>
-                  </AutoReloadOverlayBlockerProvider>
-                </LanguageProvider>
-              </LibraryProvider>
-            </StrapiAppProvider>
-          </ConfigurationsContext.Provider>
-        </AdminContext.Provider>
-      </Provider>
-    </QueryClientProvider>
+    <ThemeToggleProvider themes={themes}>
+      <Theme>
+        <QueryClientProvider client={queryClient}>
+          <Provider store={store}>
+            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+              <ConfigurationsContext.Provider
+                value={{ authLogo, menuLogo, showReleaseNotification, showTutorials }}
+              >
+                <StrapiAppProvider
+                  getPlugin={getPlugin}
+                  menu={menu}
+                  plugins={plugins}
+                  runHookParallel={runHookParallel}
+                  runHookWaterfall={runHookWaterfall}
+                  runHookSeries={runHookSeries}
+                  settings={settings}
+                >
+                  <LibraryProvider components={components} fields={fields}>
+                    <LanguageProvider messages={messages} localeNames={localeNames}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlocker>
+                          <GuidedTour>
+                            <Notifications>{children}</Notifications>
+                          </GuidedTour>
+                        </OverlayBlocker>
+                      </AutoReloadOverlayBlockerProvider>
+                    </LanguageProvider>
+                  </LibraryProvider>
+                </StrapiAppProvider>
+              </ConfigurationsContext.Provider>
+            </AdminContext.Provider>
+          </Provider>
+        </QueryClientProvider>
+      </Theme>
+    </ThemeToggleProvider>
   );
 };
 
@@ -104,6 +110,33 @@ Providers.propTypes = {
   showReleaseNotification: PropTypes.bool.isRequired,
   showTutorials: PropTypes.bool.isRequired,
   store: PropTypes.object.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
 };
 
 export default Providers;

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

@@ -1,23 +1,22 @@
 import React from 'react';
 import { ThemeProvider } from '@strapi/design-system/ThemeProvider';
 import PropTypes from 'prop-types';
-import { lightTheme } from '@strapi/design-system/themes';
+import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
-const Theme = ({ children, theme }) => (
-  <ThemeProvider theme={theme}>
-    {children}
-    <GlobalStyle />
-  </ThemeProvider>
-);
+const Theme = ({ children }) => {
+  const { currentTheme, themes } = useThemeToggle();
 
-Theme.propTypes = {
-  children: PropTypes.element.isRequired,
-  theme: PropTypes.object,
+  return (
+    <ThemeProvider theme={themes[currentTheme] || themes.light}>
+      {children}
+      <GlobalStyle />
+    </ThemeProvider>
+  );
 };
 
-Theme.defaultProps = {
-  theme: lightTheme,
+Theme.propTypes = {
+  children: PropTypes.element.isRequired,
 };
 
 export default Theme;

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

@@ -0,0 +1,66 @@
+/**
+ *
+ * ThemeToggleProvider
+ *
+ */
+
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeToggleContext } from '../../contexts';
+
+const THEME_KEY = 'STRAPI_THEME';
+
+const getDefaultTheme = () => {
+  const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  const persistedTheme = localStorage.getItem(THEME_KEY);
+
+  return persistedTheme || browserTheme;
+};
+
+const ThemeToggleProvider = ({ children, themes }) => {
+  const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
+
+  const handleChangeTheme = nextTheme => {
+    setCurrentTheme(nextTheme);
+    localStorage.setItem(THEME_KEY, nextTheme);
+  };
+
+  return (
+    <ThemeToggleContext.Provider value={{ currentTheme, onChangeTheme: handleChangeTheme, themes }}>
+      {children}
+    </ThemeToggleContext.Provider>
+  );
+};
+
+ThemeToggleProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  themes: PropTypes.shape({
+    light: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    dark: PropTypes.shape({
+      colors: PropTypes.object.isRequired,
+      shadows: PropTypes.object.isRequired,
+      sizes: PropTypes.object.isRequired,
+      zIndices: PropTypes.array.isRequired,
+      spaces: PropTypes.array.isRequired,
+      borderRadius: PropTypes.string.isRequired,
+      mediaQueries: PropTypes.object.isRequired,
+      fontSizes: PropTypes.array.isRequired,
+      lineHeights: PropTypes.array.isRequired,
+      fontWeights: PropTypes.object.isRequired,
+    }).isRequired,
+    custom: PropTypes.object,
+  }).isRequired,
+};
+
+export default ThemeToggleProvider;

package/admin/src/{pages/AuthPage/components/Logo → components/UnauthenticatedLogo}/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useConfigurations } from '../../../../hooks';
+import { useConfigurations } from '../../hooks';
 
 const Img = styled.img`
   height: ${72 / 16}rem;

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

@@ -82,14 +82,14 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
             <CloseButtonContainer>
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />
             </CloseButtonContainer>
-            <StackFlexStart size={6}>
+            <StackFlexStart spacing={6}>
               <Typography fontWeight="bold" textColor="primary600">
                 {formatMessage({
                   id: 'app.components.UpgradePlanModal.text-ce',
                   defaultMessage: 'COMMUNITY EDITION',
                 })}
               </Typography>
-              <Stack size={2}>
+              <Stack spacing={2}>
                 <Typography variant="alpha" as="h2" id="upgrade-plan">
                   {formatMessage({
                     id: 'app.components.UpgradePlanModal.limit-reached',

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -6,7 +6,7 @@ import {
   useTracking,
   useNotification,
   useQueryParams,
-  formatComponentData,
+  formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
 } from '@strapi/helper-plugin';
@@ -88,7 +88,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       allLayoutDataRef.current.components
     );
 
-    return formatComponentData(
+    return formatContentTypeData(
       cleaned,
       allLayoutDataRef.current.contentType,
       allLayoutDataRef.current.components
@@ -103,7 +103,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         allLayoutData.components
       );
 
-      acc[current] = formatComponentData(
+      acc[current] = formatContentTypeData(
         defaultComponentForm,
         allLayoutData.components[current],
         allLayoutData.components
@@ -117,7 +117,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       allLayoutData.components
     );
 
-    const contentTypeDataStructureFormatted = formatComponentData(
+    const contentTypeDataStructureFormatted = formatContentTypeData(
       contentTypeDataStructure,
       allLayoutData.contentType,
       allLayoutData.components

package/admin/src/content-manager/components/ComponentInitializer/index.js

@@ -39,7 +39,7 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
         paddingBottom={9}
         type="button"
       >
-        <Stack size={2}>
+        <Stack spacing={2}>
           <Flex justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
             <IconWrapper>
               <PlusCircle />

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDelete/index.js

@@ -25,7 +25,7 @@ const ConfirmDialogDelete = ({ isConfirmButtonLoading, isOpen, onToggleDialog, o
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack size={2}>
+        <Stack spacing={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({

package/admin/src/content-manager/components/DynamicTable/ConfirmDialogDeleteAll/index.js

@@ -26,7 +26,7 @@ const ConfirmDialogDeleteAll = ({ isConfirmButtonLoading, isOpen, onToggleDialog
       isOpen={isOpen}
     >
       <DialogBody icon={<ExclamationMarkCircle />}>
-        <Stack size={2}>
+        <Stack spacing={2}>
           <Flex justifyContent="center">
             <Typography id="confirm-description">
               {formatMessage({

package/admin/src/content-manager/components/DynamicZone/components/Component/index.js

@@ -111,11 +111,11 @@ const Component = ({
     <Box>
       <Rectangle />
       <StyledBox hasRadius>
-        <Accordion expanded={isOpen} toggle={() => onToggle(index)} size="S" error={errorMessage}>
+        <Accordion expanded={isOpen} onToggle={() => onToggle(index)} size="S" error={errorMessage}>
           <AccordionToggle
             startIcon={<FontAwesomeIcon icon={icon} />}
             action={
-              <ActionStack horizontal size={0} expanded={isOpen}>
+              <ActionStack horizontal spacing={0} expanded={isOpen}>
                 {showDownIcon && (
                   <IconButtonCustom
                     noBorder

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/ComponentCard/index.js

@@ -62,7 +62,7 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
   return (
     <button type="button" onClick={handleClick}>
       <ComponentBox borderRadius="borderRadius">
-        <Stack size={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <Stack spacing={1} style={{ justifyContent: 'center', alignItems: 'center' }}>
           <StyledFontAwesomeIcon icon={icon} />
           <Typography variant="pi" fontWeight="bold" textColor="neutral600">
             {formatMessage(intlLabel)}

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/index.js

@@ -17,7 +17,7 @@ const Category = ({ category, components, isOdd, isOpen, onAddComponent, onToggl
   };
 
   return (
-    <Accordion expanded={isOpen} toggle={handleToggle} size="S">
+    <Accordion expanded={isOpen} onToggle={handleToggle} size="S">
       <AccordionToggle
         variant={isOdd ? 'primary' : 'secondary'}
         title={category}

package/admin/src/content-manager/components/DynamicZone/index.js

@@ -182,7 +182,7 @@ const DynamicZone = ({
   }
 
   return (
-    <Stack size={6}>
+    <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DzLabel
@@ -277,9 +277,6 @@ DynamicZone.propTypes = {
 
 const Memoized = memo(DynamicZone, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);
 
 export { DynamicZone };

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -18,12 +18,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
 
       switch (attrType) {
         case 'json':
-          try {
-            cleanedData = JSON.parse(value);
-          } catch (err) {
-            cleanedData = value;
-          }
-
+          cleanedData = JSON.parse(value);
           break;
         // TODO
         // case 'date':

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -1,8 +1,5 @@
 import get from 'lodash/get';
 import isBoolean from 'lodash/isBoolean';
-import isNumber from 'lodash/isNumber';
-import isNull from 'lodash/isNull';
-import isObject from 'lodash/isObject';
 import isEmpty from 'lodash/isEmpty';
 import isNaN from 'lodash/isNaN';
 import toNumber from 'lodash/toNumber';
@@ -10,8 +7,6 @@ import toNumber from 'lodash/toNumber';
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
-import isValidJSONString from './isValidJSONString';
-
 yup.addMethod(yup.mixed, 'defined', function() {
   return this.test('defined', errorsTrads.required, value => value !== undefined);
 });
@@ -223,10 +218,6 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return true;
         }
 
-        if (isValidJSONString(value) || isNumber(value) || isNull(value) || isObject(value)) {
-          return true;
-        }
-
         try {
           JSON.parse(value);
 

package/admin/src/content-manager/components/FieldComponent/index.js

@@ -86,7 +86,7 @@ const FieldComponent = ({
           />
         )}
       </Flex>
-      <Stack size={1}>
+      <Stack spacing={1}>
         {!isRepeatable && !isInitialized && (
           <ComponentInitializer
             isReadOnly={isReadOnly}
@@ -159,7 +159,4 @@ FieldComponent.propTypes = {
 
 const Memoized = memo(FieldComponent, isEqual);
 
-export default connect(
-  Memoized,
-  select
-);
+export default connect(Memoized, select);

package/admin/src/content-manager/components/InputJSON/index.js

@@ -16,7 +16,6 @@ import Label from './Label';
 import FieldWrapper from './FieldWrapper';
 
 const WAIT = 600;
-const stringify = JSON.stringify;
 const DEFAULT_THEME = 'blackboard';
 
 const loadCss = async () => {
@@ -80,9 +79,7 @@ class InputJSON extends React.Component {
     try {
       if (value === null) return this.codeMirror.setValue('');
 
-      const nextValue = stringify(value, null, 2);
-
-      return this.codeMirror.setValue(nextValue);
+      return this.codeMirror.setValue(value);
     } catch (err) {
       return this.setState({ error: true });
     }
@@ -160,7 +157,7 @@ class InputJSON extends React.Component {
 
     return (
       <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
-        <Stack size={1}>
+        <Stack spacing={1}>
           <Label
             intlLabel={this.props.intlLabel}
             labelAction={this.props.labelAction}