refactor DateTimePicker in the helper-plugin to use the new one in the DS repo

packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap

@@ -207,6 +207,11 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   fill: #8e8ea9;
 }
 
+.c9 {
+  border-radius: 4px;
+  height: 1.5rem;
+}
+
 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -227,11 +232,6 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
   padding: 4px 12px;
 }
 
-.c9 {
-  border-radius: 4px;
-  height: 1.5rem;
-}
-
 <div>
   <div
     aria-hidden="true"

packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js

@@ -273,22 +273,6 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
         fill: #8e8ea9;
       }
 
-      .c8 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c8 svg {
-        height: 4px;
-        width: 6px;
-      }
-
       .c21 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
@@ -346,6 +330,22 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
         outline: none;
       }
 
+      .c8 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c8 svg {
+        height: 4px;
+        width: 6px;
+      }
+
       .c12 {
         margin: 0 auto;
         width: 552px;

packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js

@@ -621,22 +621,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         align-items: center;
       }
 
-      .c8 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c8 svg {
-        height: 4px;
-        width: 6px;
-      }
-
       .c12:focus-visible {
         outline: none;
       }
@@ -667,6 +651,22 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
         max-width: 100%;
       }
 
+      .c8 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c8 svg {
+        height: 4px;
+        width: 6px;
+      }
+
       .c11 {
         margin: 0 auto;
         width: 552px;

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js

@@ -495,22 +495,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         align-items: center;
       }
 
-      .c8 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c8 svg {
-        height: 4px;
-        width: 6px;
-      }
-
       .c35 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
@@ -568,6 +552,22 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
         outline: none;
       }
 
+      .c8 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c8 svg {
+        height: 4px;
+        width: 6px;
+      }
+
       .c12 {
         margin: 0 auto;
         width: 552px;

packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js

@@ -545,22 +545,6 @@ describe('Admin | UseCasePage', () => {
         width: 100%;
       }
 
-      .c8 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c8 svg {
-        height: 4px;
-        width: 6px;
-      }
-
       .c10:focus-visible {
         outline: none;
       }
@@ -626,6 +610,22 @@ describe('Admin | UseCasePage', () => {
         height: 4.5rem;
       }
 
+      .c8 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c8 svg {
+        height: 4px;
+        width: 6px;
+      }
+
       .c12 {
         margin: 0 auto;
         width: 552px;

packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js

@@ -1,221 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { DateTimePicker as MyDateTimePicker } from '@strapi/design-system';
-import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { DatePicker } from '@strapi/design-system/DatePicker';
-import { TimePicker } from '@strapi/design-system/TimePicker';
-import { Field, FieldHint, FieldLabel, FieldError } from '@strapi/design-system/Field';
-import { Flex } from '@strapi/design-system/Flex';
-import { Box } from '@strapi/design-system/Box';
-import { parseDate } from './parseDate';
-
-const CustomField = styled(Field)`
-  > div {
-    > div {
-      p[data-strapi-field-error='true'] {
-        display: none;
-      }
-    }
-  }
-`;
-
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const DateTimePicker = ({
-  ariaLabel,
-  clearLabel,
-  disabled,
-  error,
-  hint,
-  label,
-  labelAction,
-  onChange,
-  onClear,
-  name,
-  required,
-  size,
-  step,
-  value,
-  ...props
-}) => {
-  const initialDate = parseDate(value);
-  const [dateValue, setDateValue] = useState(initialDate);
-  const [timeValue, setTimeValue] = useState(
-    initialDate
-      ? `${initialDate.getHours()}:${initialDate.getMinutes()}:${initialDate.getSeconds()}`
-      : null
-  );
-
-  const handleDateChange = (e) => {
-    setDateValue(e);
-
-    if (timeValue) {
-      const dateToSet = new Date(e);
-      dateToSet.setHours(timeValue.split(':')[0]);
-      dateToSet.setMinutes(timeValue.split(':')[1]);
-
-      if (onChange) {
-        onChange(dateToSet);
-      }
-    } else {
-      const dateToSet = new Date(e);
-      setTimeValue(`${dateToSet.getHours()}:${dateToSet.getMinutes()}:${dateToSet.getSeconds()}`);
-
-      if (onChange) {
-        onChange(dateToSet);
-      }
-    }
-  };
-
-  const handleTimeChange = (e) => {
-    setTimeValue(e);
-
-    const dateToSet = new Date(dateValue);
-    dateToSet.setHours(e.split(':')[0]);
-    dateToSet.setMinutes(e.split(':')[1]);
-
-    if (!dateValue) {
-      setDateValue(new Date());
-    }
-
-    if (onChange) {
-      onChange(dateToSet);
-    }
-  };
-
-  const handleDateClear = () => {
-    setDateValue(undefined);
-    setTimeValue(undefined);
-    onClear();
-  };
-
-  const handleTimeClear = () => {
-    setTimeValue(undefined);
-
-    let dateToSet;
-
-    if (dateValue) {
-      dateToSet = new Date(dateValue);
-      dateToSet.setHours('00');
-      dateToSet.setMinutes('00');
-    }
-
-    if (onChange) {
-      onChange(dateToSet);
-    }
-  };
 
+export default function DateTimePicker(props) {
   useEffect(() => {
-    if (value) {
+    if (process.env.NODE_ENV === 'development') {
-      const parsedData = parseDate(value);
+      console.log(
-      setDateValue(parsedData);
-      setTimeValue(
-        parsedData
-          ? `${parsedData.getHours()}:${parsedData.getMinutes()}:${parsedData.getSeconds()}`
-          : null
-      );
-    } else {
-      setDateValue(undefined);
-      setTimeValue(undefined);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    console.warn(
         `
-      Deprecation warning: Usage of "DateTimePicker" component from the helper-plugin is deprecated and will be removed in the next major release. Instead, use the DateTimePicker from the Design System: import { DateTimePicker } from '@strapi/design-system/DateTimePicker';"
+        TODO V5: remove DateTimePicker component from the helper-plugin
+        Deprecation warning: Usage of "DateTimePicker" component from the helper-plugin is deprecated and will be removed in the next major release. Instead, use the DateTimePicker from the Design System: import { DateTimePicker } from '@strapi/design-system';"
         `
       );
+    }
   }, []);
 
-  return (
+  return <MyDateTimePicker {...props} />;
-    <CustomField
+}
-      name={name}
-      role="group"
-      aria-labelledby="datetime-label"
-      hint={hint}
-      error={error}
-    >
-      <Stack spacing={1}>
-        {label && (
-          <Flex>
-            <FieldLabel required={required} id="datetime-label">
-              {label}
-            </FieldLabel>
-            {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-          </Flex>
-        )}
-        <Stack horizontal spacing={2}>
-          <DatePicker
-            data-testid="datetimepicker-date"
-            name={name}
-            ariaLabel={label || ariaLabel}
-            error={error}
-            selectedDate={dateValue}
-            selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
-            onChange={handleDateChange}
-            size={size}
-            onClear={onClear && handleDateClear}
-            clearLabel={clearLabel}
-            disabled={disabled}
-            {...props}
-          />
-          <TimePicker
-            data-testid="datetimepicker-time"
-            size={size}
-            aria-label={label || ariaLabel}
-            error={error}
-            value={timeValue}
-            onChange={handleTimeChange}
-            onClear={onClear && handleTimeClear}
-            clearLabel={clearLabel}
-            disabled={disabled}
-            step={step}
-          />
-        </Stack>
-        <FieldHint />
-        <FieldError id="datetimepicker" />
-      </Stack>
-    </CustomField>
-  );
-};
-
-DateTimePicker.displayName = 'DateTimePicker';
-
-DateTimePicker.defaultProps = {
-  ariaLabel: undefined,
-  clearLabel: 'clear',
-  disabled: false,
-  error: undefined,
-  hint: undefined,
-  label: undefined,
-  labelAction: undefined,
-  onClear: undefined,
-  required: false,
-  size: 'M',
-  step: 1,
-  value: undefined,
-};
-
-DateTimePicker.propTypes = {
-  ariaLabel: PropTypes.string,
-  clearLabel: PropTypes.string,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  hint: PropTypes.string,
-  label: PropTypes.string,
-  labelAction: PropTypes.element,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func,
-  required: PropTypes.bool,
-  size: PropTypes.oneOf(['S', 'M']),
-  step: PropTypes.number,
-  value: PropTypes.instanceOf(Date),
-};
-
-export default DateTimePicker;

packages/core/helper-plugin/lib/src/components/DateTimePicker/tests/__snapshots__/index.test.js.snap

@@ -1,21 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DateTimePicker snapshots the component 1`] = `
-.c8 {
+.c2 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  font-weight: 600;
+  color: #32324d;
+}
+
+.c17 {
+  font-size: 0.875rem;
+  line-height: 1.43;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #32324d;
+}
+
+.c20 {
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #666687;
+}
+
+.c7 {
   padding-right: 8px;
   padding-left: 12px;
 }
 
-.c15 {
+.c14 {
   padding-left: 12px;
 }
 
-.c17 {
+.c16 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c1 {
+.c0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -43,7 +66,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
   flex-direction: row;
 }
 
-.c6 {
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -61,53 +84,30 @@ exports[`DateTimePicker snapshots the component 1`] = `
   justify-content: space-between;
 }
 
-.c2 > * {
+.c1 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c2 > * + * {
+.c1 > * + * {
   margin-top: 4px;
 }
 
-.c11 > * {
+.c10 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c5 > * {
+.c4 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c5 > * + * {
+.c4 > * + * {
   margin-left: 8px;
 }
 
-.c4 {
+.c9 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  font-weight: 600;
-  color: #32324d;
-}
-
-.c18 {
-  font-size: 0.875rem;
-  line-height: 1.43;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #32324d;
-}
-
-.c21 {
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #666687;
-}
-
-.c10 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
@@ -122,36 +122,36 @@ exports[`DateTimePicker snapshots the component 1`] = `
   background: inherit;
 }
 
-.c10::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c10::-moz-placeholder {
+.c9::-moz-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c10:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c10::placeholder {
+.c9::placeholder {
   color: #8e8ea9;
   opacity: 1;
 }
 
-.c10[aria-disabled='true'] {
+.c9[aria-disabled='true'] {
   color: inherit;
 }
 
-.c10:focus {
+.c9:focus {
   outline: none;
   box-shadow: none;
 }
 
-.c7 {
+.c6 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -163,41 +163,12 @@ exports[`DateTimePicker snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c7:focus-within {
+.c6:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c9 {
+.c11 {
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-}
-
-.c9 svg path {
-  fill: #8e8ea9;
-}
-
-.c13 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  background: transparent;
-  border: none;
-}
-
-.c13:focus {
-  outline: none;
-}
-
-.c13[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.c12 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -213,28 +184,28 @@ exports[`DateTimePicker snapshots the component 1`] = `
   transition-duration: 0.2s;
 }
 
-.c12:focus-within {
+.c11:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c19 {
+.c18 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c19 svg {
+.c18 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c19 svg path {
+.c18 svg path {
   fill: #666687;
 }
 
-.c20 {
+.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -243,15 +214,44 @@ exports[`DateTimePicker snapshots the component 1`] = `
   border: none;
 }
 
-.c20 svg {
+.c19 svg {
   width: 0.375rem;
 }
 
-.c14 {
+.c8 {
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+}
+
+.c8 svg path {
+  fill: #8e8ea9;
+}
+
+.c12 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
+}
+
+.c12:focus {
+  outline: none;
+}
+
+.c12[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.c13 {
   width: 100%;
 }
 
-.c16 {
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,35 +262,27 @@ exports[`DateTimePicker snapshots the component 1`] = `
   align-items: center;
 }
 
-.c16 svg {
+.c15 svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c16 svg path {
+.c15 svg path {
   fill: #8e8ea9;
 }
 
-.c0 > div > div p[data-strapi-field-error='true'] {
-  display: none;
-}
-
 <div
-  aria-labelledby="datetime-label"
+  aria-labelledby="datetime-label-1"
-  class="c0"
   role="group"
 >
   <div
-    class="c1 c2"
+    class="c0 c1"
     spacing="1"
-  >
-    <div
-      class="c3"
   >
     <label
-        class="c4"
+      class="c2"
-        for="field-1"
+      for="field-3"
-        id="datetime-label"
+      id="datetime-label-1"
     >
       <div
         class="c3"
@@ -298,9 +290,8 @@ exports[`DateTimePicker snapshots the component 1`] = `
         Date time picker
       </div>
     </label>
-    </div>
     <div
-      class="c3 c5"
+      class="c3 c4"
       spacing="2"
     >
       <div
@@ -309,19 +300,19 @@ exports[`DateTimePicker snapshots the component 1`] = `
         <div>
           <div>
             <div
-              class="c1 c2"
+              class="c0 c1"
               spacing="1"
             >
               <div
-                class="c6 c7"
+                class="c5 c6"
               >
                 <div
-                  class="c8"
+                  class="c7"
                 >
                   <button
                     aria-disabled="false"
                     aria-label="Date picker, current is 10/13/2021"
-                    class="c9"
+                    class="c8"
                     type="button"
                   >
                     <svg
@@ -346,9 +337,9 @@ exports[`DateTimePicker snapshots the component 1`] = `
                   aria-disabled="false"
                   aria-invalid="false"
                   aria-label="Date time picker"
-                  class="c10"
+                  class="c9"
                   data-testid="datetimepicker-date"
-                  id="datepicker-2"
+                  id="datepicker-4"
                   name="datetimepicker"
                   value="10/13/2021"
                 />
@@ -359,34 +350,34 @@ exports[`DateTimePicker snapshots the component 1`] = `
       </div>
       <div>
         <div
-          class="c1 c11"
+          class="c0 c10"
         >
           <div
-            class="c3 c12"
+            class="c3 c11"
           >
             <button
               aria-disabled="false"
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-label="Date time picker"
-              aria-labelledby="timepicker-3-label timepicker-3-content"
+              aria-labelledby="timepicker-5-label timepicker-5-content"
-              class="c13"
+              class="c12"
               data-testid="datetimepicker-time"
-              id="timepicker-3"
+              id="timepicker-5"
               type="button"
             />
             <div
-              class="c6 c14"
+              class="c5 c13"
             >
               <div
                 class="c3"
               >
                 <div
                   aria-hidden="true"
-                  class="c15"
+                  class="c14"
                 >
                   <div
-                    class="c16"
+                    class="c15"
                   >
                     <svg
                       fill="none"
@@ -405,11 +396,11 @@ exports[`DateTimePicker snapshots the component 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c17"
+                  class="c16"
                 >
                   <span
-                    class="c18"
+                    class="c17"
-                    id="timepicker-3-content"
+                    id="timepicker-5-content"
                   >
                     10:00
                   </span>
@@ -420,9 +411,9 @@ exports[`DateTimePicker snapshots the component 1`] = `
               >
                 <button
                   aria-hidden="true"
-                  class="c15 c19 c20"
+                  class="c14 c18 c19"
                   tabindex="-1"
-                  title="Carret Down Button"
+                  title="select"
                   type="button"
                 >
                   <svg
@@ -447,8 +438,8 @@ exports[`DateTimePicker snapshots the component 1`] = `
       </div>
     </div>
     <p
-      class="c21"
+      class="c20"
-      id="field-1-hint"
+      id="field-3-hint"
     >
       This is a super description
     </p>

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap

@@ -568,22 +568,6 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 100%;
 }
 
-.c9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c9 svg {
-  height: 4px;
-  width: 6px;
-}
-
 .c27 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
@@ -620,6 +604,22 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   color: #4a4a6a;
 }
 
+.c9 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c9 svg {
+  height: 4px;
+  width: 6px;
+}
+
 .c30 {
   height: 100%;
   left: 0;

packages/core/upload/admin/src/components/FilterPopover/FilterValueInput.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DateTimePicker } from '@strapi/design-system/DateTimePicker';
+import { DateTimePicker, Select } from '@strapi/design-system';
-import { Select, Option } from '@strapi/design-system/Select';
+import { Option } from '@strapi/design-system/Select';
 import { useIntl } from 'react-intl';
 
 const FilterValueInput = ({ label, onChange, options, type, value }) => {