Update design system version (#295)

* feat: Update design system * fix: Update design system * fix: Improve timepicker * chore: Update lockfile * fix: Remove increment time from timezone formatter * fix: Use new format for birthdate * fix: Correct datetime * chore: Update design system
AppQuality · Apr 8, 2024 · 782492b · 782492b
1 parent 0dc2425
commit 782492b
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 104 deletions.
diff --git a/generate-devel-token.sh b/generate-devel-token.sh
@@ -5,4 +5,4 @@ PASSWORD=$(cat generate-devel-token.json | jq -r .password)
 URL=$(cat generate-devel-token.json | jq -r .url)
 DATA='{"username":"'$USERNAME'","password":"'$PASSWORD'"}'
 
-echo "REACT_APP_DEFAULT_TOKEN="$(curl -X POST -H 'Content-type: application/json' --data "$DATA" $URL/authenticate | jq -r .token  ) > .env.development.local
+echo "REACT_APP_DEFAULT_TOKEN="$(curl -X POST -H 'Content-type: application/json'  -A "Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/81.0" --data "$DATA" $URL/authenticate | jq -r .token  ) > .env.development.local
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@appquality/appquality-design-system": "^1.0.68",
+    "@appquality/appquality-design-system": "2.0.0",
     "@appquality/craft-blocks": "^0.1.27",
     "@datadog/browser-logs": "^3.4.1",
     "@reduxjs/toolkit": "^1.8.2",
@@ -28,7 +28,7 @@
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^5.3.0",
+    "styled-components": "^6",
     "universal-cookie": "^4.0.4",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1",

diff --git a/src/features/BirthdayPicker.tsx b/src/features/BirthdayPicker.tsx
@@ -31,17 +31,17 @@ const BirthdayPicker = ({
         cancelText={t("Cancel")}
         onCancel={onCancel}
         onChange={(v: { value: Date }) => {
-          onChange(
-            v.value
-              ? new Date(
-                  Date.UTC(
-                    v.value.getFullYear(),
-                    v.value.getMonth(),
-                    v.value.getDate()
-                  )
+          const date = v.value
+            ? new Date(
+                Date.UTC(
+                  v.value.getFullYear(),
+                  v.value.getMonth(),
+                  v.value.getDate()
                 )
-              : maxDate
-          );
+              )
+            : maxDate;
+          if (isNaN(date.getTime())) return;
+          onChange(date);
         }}
       />
     </>

diff --git a/src/pages/BugForm/BugDetails/BugDetails.tsx b/src/pages/BugForm/BugDetails/BugDetails.tsx
@@ -129,7 +129,7 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
                   })}
                 />
                 <Datepicker
-                  key={field.value}
+                  key={field.name}
                   value={field.value}
                   id={"date"}
                   // maxDate={new Date()}
@@ -139,13 +139,14 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
                   })}
                   setText={t("Set")}
                   cancelText={t("Cancel")}
-                  onChange={(v: { value: Date }) =>
+                  onChange={(v: { value: Date }) => {
+                    if (isNaN(v.value.getTime())) return;
                     form.setFieldValue(
                       "date",
-                      v.value ? new Date(v.value) : new Date(),
+                      v.value ? v.value : new Date(),
                       true
-                    )
-                  }
+                    );
+                  }}
                 />
               </>
             )}
@@ -162,7 +163,7 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
                   })}
                 />
                 <Datepicker
-                  key={field.value}
+                  key={field.name}
                   value={field.value}
                   id={"time"}
                   locale={"it"}
@@ -172,13 +173,14 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
                   })}
                   setText={t("Set")}
                   cancelText={t("Cancel")}
-                  onChange={(v: { value: Date }) =>
+                  onChange={(v: { value: Date }) => {
+                    if (isNaN(v.value.getTime())) return;
                     form.setFieldValue(
                       "time",
                       v.value ? new Date(v.value) : new Date(),
                       true
-                    )
-                  }
+                    );
+                  }}
                 />
               </>
             )}

diff --git a/src/pages/BugForm/index.tsx b/src/pages/BugForm/index.tsx
@@ -1,13 +1,11 @@
-import React from "react";
-import { DatepickerGlobalStyle } from "@appquality/appquality-design-system";
+import { useTranslation } from "react-i18next";
+import Loading from "src/features/Loading";
 import { OutsideContainer, PageTemplate } from "src/features/PageTemplate";
-import { BugFormContainer } from "src/pages/BugForm/BugFormContainer";
 import { BugDetailsModal } from "src/pages/BugForm/BugDetails/BugDetailsModal/BugDetailsModal";
-import { BugFormUnauthorized } from "./BugFormErrorPages/BugFormUnauthorized";
+import { BugFormContainer } from "src/pages/BugForm/BugFormContainer";
 import { BugFormNoDevice } from "./BugFormErrorPages/BugFormNoDevice";
+import { BugFormUnauthorized } from "./BugFormErrorPages/BugFormUnauthorized";
 import useCampaignData from "./useCampaignData";
-import Loading from "src/features/Loading";
-import { useTranslation } from "react-i18next";
 
 export default function BugForm({
   shouldBeLoggedIn = true,
@@ -49,7 +47,6 @@ export default function BugForm({
       route={route}
       shouldBeLoggedIn={shouldBeLoggedIn}
     >
-      <DatepickerGlobalStyle />
       <BugFormContainer />
       <OutsideContainer>
         <BugDetailsModal />

diff --git a/src/pages/BugForm/toIsoStringWithTimezone.ts b/src/pages/BugForm/toIsoStringWithTimezone.ts
@@ -5,7 +5,7 @@ export const toISOStringWithTimezone = (date: Date, time: Date) => {
   return (
     date.getFullYear() +
     "-" +
-    pad(date.getMonth() + 1) +
+    pad(date.getMonth()) +
     "-" +
     pad(date.getDate()) +
     "T" +

diff --git a/src/pages/GettingStarted/NewSignupForm/FormProvider.tsx b/src/pages/GettingStarted/NewSignupForm/FormProvider.tsx
@@ -101,7 +101,7 @@ const FormProvider = ({ children }: FormProviderProps) => {
           password: values.password,
           name: values.name,
           surname: values.surname,
-          birthDate: values.birthdate.split("/").reverse().join("-"),
+          birthDate: values.birthdate,
           country: values.country,
           referral: values.referral,
         },

diff --git a/src/pages/GettingStarted/NewSignupForm/Step1/BirthdayInput.tsx b/src/pages/GettingStarted/NewSignupForm/Step1/BirthdayInput.tsx
@@ -1,13 +1,12 @@
 import {
-  FormikField,
+  DateInput,
   ErrorMessage,
   FormGroup,
   FormLabel,
-  DateInput,
+  FormikField,
 } from "@appquality/appquality-design-system";
+import { isDate, isValid, parse } from "date-fns";
 import { FieldProps } from "formik";
-import { parse, isDate, isValid } from "date-fns";
-import i18n from "src/i18n";
 import { useTranslation } from "react-i18next";
 
 const BirthdayInput = () => {
@@ -20,7 +19,7 @@ const BirthdayInput = () => {
     let error;
     const parsedDate = isDate(value)
       ? value
-      : parse(value, "dd/MM/yyyy", new Date());
+      : parse(value, "yyyy-MM-dd", new Date());
 
     if (!isValid(parsedDate)) {
       error = t("SIGNUP_FORM:::Invalid date");
@@ -49,15 +48,6 @@ const BirthdayInput = () => {
             name={field.name}
             value={field.value}
             maxDate={maxDate}
-            i18n={{
-              locale: i18n.language,
-              dateFormat: "DD/MM/YYYY",
-              placeholder: "29/11/1991",
-              setText: t("Set"),
-              cancelText: t("Cancel"),
-              buttonTitle: t("Select your birth date"),
-            }}
-            onCancel={() => form.setFieldTouched(field.name)}
             onChange={(event) => {
               field.onChange(event.target.value);
               form.setFieldValue(field.name, event.target.value, true);

diff --git a/src/pages/GettingStarted/NewSignupForm/index.tsx b/src/pages/GettingStarted/NewSignupForm/index.tsx
@@ -1,7 +1,6 @@
 import {
   Card,
   Container,
-  DatepickerGlobalStyle,
   Steps,
   Title,
 } from "@appquality/appquality-design-system";
@@ -31,7 +30,6 @@ const SignupForm = ({}) => {
       route={emailSignup}
       pageTitle={t("Signup for Tryber")}
     >
-      <DatepickerGlobalStyle />
       <Container className="aq-pb-3">
         <LangMenu
           className="aq-mt-3"

diff --git a/src/pages/GettingStarted/index.tsx b/src/pages/GettingStarted/index.tsx
@@ -1,6 +1,5 @@
 import {
   Container,
-  DatepickerGlobalStyle,
   Text,
   Title,
   aqBootstrapTheme,
@@ -29,7 +28,6 @@ export default function GettingStarted() {
       route={"getting-started/signup"}
       pageTitle={t("Signup for Tryber")}
     >
-      <DatepickerGlobalStyle />
       <Container>
         <LangMenu
           className="aq-pt-3"

diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx
@@ -2,7 +2,6 @@ import {
   BSCol,
   BSGrid,
   Card,
-  DatepickerGlobalStyle,
   Tab,
   Tabs,
 } from "@appquality/appquality-design-system";
@@ -35,7 +34,6 @@ export default function Profile() {
       <OutsideContainer>
         <UserDeleteModal />
       </OutsideContainer>
-      <DatepickerGlobalStyle />
       <BSGrid>
         <BSCol size="col-lg-9 aq-order-1 aq-order-0-lg ">
           <Card className="aq-mb-3" bodyClass="">