Upgrade to date-fns 2.x (#2927)

keystonejs · May 11, 2020 · e9a0de2 · e9a0de2
1 parent 15c5731
commit e9a0de2
Show file tree

Hide file tree

Showing 29 changed files with 99 additions and 61 deletions.
diff --git a/.changeset/polite-trains-run.md b/.changeset/polite-trains-run.md
@@ -0,0 +1,31 @@
+---
+'@keystonejs/demo-project-blog': major
+'@keystonejs/demo-project-meetup': major
+'@arch-ui/day-picker': major
+'@keystonejs/fields': major
+'@keystonejs/fields-datetime-utc': major
+'@keystonejs/list-plugins': major
+'@keystonejs/cypress-project-basic': major
+'@keystonejs/cypress-project-client-validation': major
+---
+
+Upgraded to date-fns 2.x. This version uses [Unicode tokens](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table) for its formatting strings. A conversion table is available [here](https://github.com/date-fns/date-fns/blob/master/CHANGELOG.md#200---2019-08-20).
+
+This change only affects the `CalendarDay` and `DateTime` fields' `format` config option.
+
+The following script utilizes the [`@date-fns/upgrade`](https://github.com/date-fns/date-fns-upgrade) package and can be used to convert old formatting strings:
+
+```js
+const { convertTokens } = require('@date-fns/upgrade/v2');
+
+console.table(
+  [
+    // Add date-dns 1.x formatting strings here.
+  ].map(str => ({
+    v1: str,
+    v2: convertTokens(str).replace(/'/g, ''),
+  }))
+);
+```
+
+Do note this converts symbols to standalone style as opposed to formatted style which may not always be desired. For example, `DD/MM/YYYY` would be converted to `dd/LL/yyyy` instead of `dd/MM/yyyy`. See [here](http://cldr.unicode.org/translation/date-time-1/date-time#TOC-Stand-Alone-vs.-Format-Styles) for more information on which you should use.
diff --git a/demo-projects/blog/app/pages/index.js b/demo-projects/blog/app/pages/index.js
@@ -4,7 +4,7 @@ import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
 
 import { jsx } from '@emotion/core';
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 import Layout from '../templates/layout';
 import Header from '../components/header';
@@ -33,7 +33,7 @@ const Post = ({ post }) => {
           <div css={{ marginTop: '1em', borderTop: '1px solid hsl(200, 20%, 80%)' }}>
             <p css={{ fontSize: '0.8em', marginBottom: 0, color: 'hsl(200, 20%, 50%)' }}>
               Posted by {post.author ? post.author.name : 'someone'} on{' '}
-              {format(post.posted, 'DD/MM/YYYY')}
+              {format(parseISO(post.posted), 'dd/MM/yyyy')}
             </p>
           </div>
         </article>

diff --git a/demo-projects/blog/app/pages/post/[slug].js b/demo-projects/blog/app/pages/post/[slug].js
@@ -6,7 +6,7 @@ import { useMutation, useQuery } from '@apollo/react-hooks';
 import { useState } from 'react';
 
 import { jsx } from '@emotion/core';
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 import Layout from '../../templates/layout';
 import Header from '../../components/header';
@@ -98,7 +98,7 @@ const Comments = ({ data }) => (
                   margin: '8px 0',
                 }}
               >
-                {comment.author.name} on {format(comment.posted, 'DD MMM YYYY')}
+                {comment.author.name} on {format(parseISO(comment.posted), 'dd MMM yyyy')}
               </p>
               <p css={{ margin: '8px 0' }}>{comment.body}</p>
             </div>
@@ -250,7 +250,7 @@ const PostPage = withApollo(({ slug }) => {
                     <div css={{ marginTop: '1em', borderTop: '1px solid hsl(200, 20%, 80%)' }}>
                       <p css={{ fontSize: '0.8em', marginBottom: 0, color: 'hsl(200, 20%, 50%)' }}>
                         Posted by {post.author ? post.author.name : 'someone'} on{' '}
-                        {format(post.posted, 'DD/MM/YYYY')}
+                        {format(parseISO(post.posted), 'dd/MM/yyyy')}
                       </p>
                     </div>
                   </article>

diff --git a/demo-projects/blog/package.json b/demo-projects/blog/package.json
@@ -37,7 +37,7 @@
     "apollo-client": "^2.6.8",
     "apollo-upload-client": "^12.1.0",
     "cross-env": "^7.0.0",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.13.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "graphql-tag": "^2.10.1",

diff --git a/demo-projects/blog/schema.js b/demo-projects/blog/schema.js
@@ -14,7 +14,7 @@ const {
 const { Wysiwyg } = require('@keystonejs/fields-wysiwyg-tinymce');
 const { AuthedRelationship } = require('@keystonejs/fields-authed-relationship');
 const { LocalFileAdapter } = require('@keystonejs/file-adapters');
-const getYear = require('date-fns/get_year');
+const getYear = require('date-fns/getYear');
 
 const { staticRoute, staticPath, distDir } = require('./config');
 const dev = process.env.NODE_ENV !== 'production';
@@ -44,7 +44,7 @@ exports.User = {
     email: { type: Text, isUnique: true },
     dob: {
       type: CalendarDay,
-      format: 'Do MMMM YYYY',
+      format: 'do MMMM yyyy',
       yearRangeFrom: 1901,
       yearRangeTo: getYear(new Date()),
     },
@@ -89,7 +89,7 @@ exports.Post = {
       ],
     },
     body: { type: Wysiwyg },
-    posted: { type: DateTime, format: 'DD/MM/YYYY' },
+    posted: { type: DateTime, format: 'dd/MM/yyyy' },
     image: {
       type: File,
       adapter: fileAdapter,

diff --git a/demo-projects/meetup/package.json b/demo-projects/meetup/package.json
@@ -33,7 +33,7 @@
     "apollo-upload-client": "^12.1.0",
     "body-parser": "^1.18.2",
     "cross-env": "^7.0.0",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.13.0",
     "dotenv": "^8.2.0",
     "eslint-plugin-emotion": "^10.0.27",
     "express": "^4.17.1",

diff --git a/demo-projects/meetup/site/helpers/index.js b/demo-projects/meetup/site/helpers/index.js
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { format, isFuture } from 'date-fns';
+import { format, parseISO, isFuture } from 'date-fns';
 import getConfig from 'next/config';
 import contrast from 'get-contrast';
 
@@ -13,8 +13,8 @@ const {
 export const isInFuture = date => isFuture(date);
 
 // Pretty date formatting
-export const formatFutureDate = date => format(date, 'ddd D MMM, h:mm A');
-export const formatPastDate = date => format(date, 'MMM YYYY');
+export const formatFutureDate = date => format(parseISO(date), 'iii d MMM, h:mm a');
+export const formatPastDate = date => format(parseISO(date), 'LLL yyyy');
 
 // Singular / Plural
 export const pluralLabel = (num, single, plural) => {

diff --git a/packages/arch/packages/day-picker/package.json b/packages/arch/packages/day-picker/package.json
@@ -21,7 +21,7 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "chrono-node": "^1.4.6",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.13.0",
     "intersection-observer": "^0.10.0",
     "moment": "^2.24.0",
     "react-window": "^1.7.0"

diff --git a/packages/arch/packages/day-picker/src/DayPicker/index.js b/packages/arch/packages/day-picker/src/DayPicker/index.js
@@ -69,7 +69,7 @@ function scrollToDate(date, yearRangeFrom, yearRangeTo, list) {
 let weekLabels = (
   <WeekLabels>
     {[...new Array(7)]
-      .map((_, day) => format(setDay(new Date(), day), 'ddd'))
+      .map((_, day) => format(setDay(new Date(), day), 'iii'))
       .map(d => (
         <Day key={d}>{d}</Day>
       ))}

diff --git a/packages/arch/packages/day-picker/src/DayPicker/month.js b/packages/arch/packages/day-picker/src/DayPicker/month.js
@@ -66,7 +66,7 @@ export const Month = memo(({ style, index, data }) => {
   );
 });
 
-let readableMonths = months.map(month => format(setMonth(new Date(), month), 'MMMM'));
+const readableMonths = months.map(month => format(setMonth(new Date(), month), 'LLLL'));
 
 const MonthHeader = memo(({ month, year }) => {
   return (

diff --git a/packages/arch/packages/day-picker/src/DayPicker/selects.js b/packages/arch/packages/day-picker/src/DayPicker/selects.js
@@ -6,7 +6,7 @@ import { months, yearRange, usePrevious, isNumberInRange } from './utils';
 
 const monthOptions = months.map((month, i) => (
   <option key={i} value={i}>
-    {format(setMonth(new Date(), month), 'MMM')}
+    {format(setMonth(new Date(), month), 'LLL')}
   </option>
 ));
 

diff --git a/packages/arch/packages/day-picker/src/DayPicker/utils.js b/packages/arch/packages/day-picker/src/DayPicker/utils.js
@@ -1,7 +1,7 @@
 import {
   isSameMonth,
   startOfMonth,
-  eachDay,
+  eachDayOfInterval,
   addWeeks,
   startOfWeek,
   endOfWeek,
@@ -36,7 +36,7 @@ export function getWeeksInMonth(date) {
   const lastDayOfFirstWeek = endOfWeek(firstDayOfMonth, weekOptions);
 
   const getWeeks = (startDay, endDay, weekArray) => {
-    const week = eachDay(startDay, endDay).map(createDayObject);
+    const week = eachDayOfInterval({ start: startDay, end: endDay }).map(createDayObject);
     const weeks = [...weekArray, week];
     const nextWeek = addWeeks(startDay, 1);
 

diff --git a/packages/arch/packages/day-picker/src/DayTimePicker.js b/packages/arch/packages/day-picker/src/DayTimePicker.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { parse } from 'date-fns';
+import { parseISO } from 'date-fns';
 import { DayPicker } from './DayPicker';
 import { Input } from '@arch-ui/input';
 import Select from '@arch-ui/select';
@@ -56,8 +56,8 @@ export const DayTimePicker = props => {
         yearRangeFrom={yearRangeFrom}
         yearRangeTo={yearRangeTo}
         yearPickerType={yearPickerType}
-        startCurrentDateAt={date ? parse(date) : TODAY}
-        selectedDate={date ? parse(date) : null}
+        startCurrentDateAt={date ? parseISO(date) : TODAY}
+        selectedDate={date ? parseISO(date) : null}
       />
       <Input
         type="time"

diff --git a/packages/arch/packages/day-picker/src/TextDayPicker.js b/packages/arch/packages/day-picker/src/TextDayPicker.js
@@ -1,11 +1,11 @@
 import React, { useState, useEffect, forwardRef, useRef } from 'react';
 import chrono from 'chrono-node';
 import { Input } from '@arch-ui/input';
-import { format } from 'date-fns';
+import { format, formatISO, parseISO } from 'date-fns';
 
 export const TextDayPicker = forwardRef(
-  ({ date = '', onChange, format: displayFormat = 'Do MMMM YYYY', ...props }, ref) => {
-    const formatDate = newDate => (newDate ? format(newDate, displayFormat) : '');
+  ({ date = '', onChange, format: displayFormat = 'do MMMM yyyy', ...props }, ref) => {
+    const formatDate = newDate => (newDate ? format(parseISO(newDate), displayFormat) : '');
 
     const [isEditing, setIsEditing] = useState(false);
     const [value, setValue] = useState({
@@ -20,7 +20,7 @@ export const TextDayPicker = forwardRef(
       const parsedDate = chrono.parseDate(value.raw);
 
       // If valid, convert it to ISO 8601.
-      const isoDate = parsedDate ? format(parsedDate, 'YYYY-MM-DD') : null;
+      const isoDate = parsedDate ? formatISO(parsedDate, { representation: 'date' }) : null;
 
       // Pass it up the tree. The parent can handle the null case.
       onChange(isoDate);

diff --git a/packages/fields-datetime-utc/src/Implementation.js b/packages/fields-datetime-utc/src/Implementation.js
@@ -32,7 +32,7 @@ export class DateTimeUtcImplementation extends Implementation {
   }
 
   extendAdminMeta(meta) {
-    return { ...meta, format: 'YYYY-MM-DD[T]HH:mm:ss.SSSZZ' };
+    return { ...meta, format: 'yyyy-MM-dd[T]HH:mm:ss.SSSxx' };
   }
 }
 

diff --git a/packages/fields/package.json b/packages/fields/package.json
@@ -44,7 +44,7 @@
     "apollo-errors": "^1.9.0",
     "bcryptjs": "^2.4.3",
     "cuid": "^2.1.8",
-    "date-fns": "^1.30.1",
+    "date-fns": "^2.13.0",
     "dumb-passwords": "^0.2.1",
     "google-maps-react": "^2.0.2",
     "graphql": "^14.6.0",

diff --git a/packages/fields/src/types/CalendarDay/Implementation.js b/packages/fields/src/types/CalendarDay/Implementation.js
@@ -1,5 +1,4 @@
-import parse from 'date-fns/parse';
-import format from 'date-fns/format';
+import { formatISO, parseISO } from 'date-fns';
 import { Implementation } from '../../Implementation';
 import { MongooseFieldAdapter } from '@keystonejs/adapter-mongoose';
 import { KnexFieldAdapter } from '@keystonejs/adapter-knex';
@@ -8,7 +7,7 @@ export class CalendarDay extends Implementation {
   constructor(
     path,
     {
-      format = 'YYYY-MM-DD',
+      format = 'yyyy-MM-dd',
       yearRangeFrom = new Date().getFullYear() - 100,
       yearRangeTo = new Date().getFullYear(),
     }
@@ -63,12 +62,13 @@ const CommonCalendarInterface = superclass =>
 
 export class MongoCalendarDayInterface extends CommonCalendarInterface(MongooseFieldAdapter) {
   addToMongooseSchema(schema) {
-    const validator = a => typeof a === 'string' && format(parse(a), 'YYYY-MM-DD') === a;
+    const validator = a =>
+      typeof a === 'string' && formatISO(parseISO(a), { representation: 'date' }) === a;
     const schemaOptions = {
       type: String,
       validate: {
         validator: this.buildValidator(validator),
-        message: '{VALUE} is not an ISO8601 date string (YYYY-MM-DD)',
+        message: '{VALUE} is not an ISO8601 date string (yyyy-MM-dd)',
       },
     };
     schema.add({ [this.path]: this.mergeSchemaOptions(schemaOptions, this.config) });
@@ -93,7 +93,7 @@ export class KnexCalendarDayInterface extends CommonCalendarInterface(KnexFieldA
   setupHooks({ addPostReadHook }) {
     addPostReadHook(item => {
       if (item[this.path]) {
-        item[this.path] = format(item[this.path], 'YYYY-MM-DD');
+        item[this.path] = formatISO(item[this.path], { representation: 'date' });
       }
       return item;
     });

diff --git a/packages/fields/src/types/CalendarDay/README.md b/packages/fields/src/types/CalendarDay/README.md
@@ -38,11 +38,11 @@ keystone.createList('User', {
 #### `format`
 
 Defines the format of date string that the will be displayed in the Admin UI.
-The Admin UI uses the [`date-fns` v1.x](https://date-fns.org/v1.30.1/docs/format) library for formatting, and any format supported by that library is valid. E.g.
+The Admin UI uses the [`date-fns` v2.x](https://date-fns.org/v2.13.0/docs/format) library for formatting, and any format supported by that library is valid. E.g.
 
-- `YYYY-MM-DD` => "1970-01-31"
-- `MM/DD/YYYY` => "01/31/1970"
-- `MMM Do, YY` => "Jan 31st, 70"
+- `yyyy-MM-dd` => "1970-01-31"
+- `MM/dd/yyyy` => "01/31/1970"
+- `MMM do, yy` => "Jan 31st, 70"
 
 #### `yearRangeFrom`
 

diff --git a/packages/fields/src/types/CalendarDay/views/Cell.js b/packages/fields/src/types/CalendarDay/views/Cell.js
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 const CalendarDayCell = ({ data, field: { config } }) => {
   if (!data) {
@@ -9,7 +9,7 @@ const CalendarDayCell = ({ data, field: { config } }) => {
     return data;
   }
 
-  return format(data, config.format);
+  return format(parseISO(data), config.format);
 };
 
 export default CalendarDayCell;
diff --git a/packages/fields/src/types/CalendarDay/views/Controller.js b/packages/fields/src/types/CalendarDay/views/Controller.js
@@ -1,5 +1,5 @@
 import FieldController from '../../../Controller';
-import { getYear } from 'date-fns';
+import { getYear, parseISO } from 'date-fns';
 
 export default class CalendarDayController extends FieldController {
   getFilterGraphQL = ({ type, value }) => {
@@ -61,7 +61,7 @@ export default class CalendarDayController extends FieldController {
   validateInput = ({ resolvedData, addFieldValidationError }) => {
     const { yearRangeFrom, yearRangeTo } = this.config;
 
-    const inputYear = getYear(resolvedData[this.path]);
+    const inputYear = getYear(parseISO(resolvedData[this.path]));
     const inRange = yearRangeFrom <= inputYear && inputYear <= yearRangeTo;
 
     if (!inRange) {

diff --git a/packages/fields/src/types/DateTime/views/Cell.js b/packages/fields/src/types/DateTime/views/Cell.js
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 const DateTimeCell = props => {
   if (!props.data) {
@@ -8,7 +8,7 @@ const DateTimeCell = props => {
   if (!formatConfig) {
     return props.data;
   }
-  return format(props.data, formatConfig);
+  return format(parseISO(props.data), formatConfig);
 };
 
 export default DateTimeCell;
diff --git a/packages/fields/src/types/DateTime/views/Controller.js b/packages/fields/src/types/DateTime/views/Controller.js
@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 import FieldController from '../../../Controller';
 
 export default class DateTimeController extends FieldController {
@@ -14,7 +14,7 @@ export default class DateTimeController extends FieldController {
     let formattedValue = value;
 
     if (formatConfig) {
-      formattedValue = format(value, formatConfig);
+      formattedValue = format(parseISO(value), formatConfig);
     }
 
     return `${this.getFilterLabel({ label })}: "${formattedValue}"`;

diff --git a/packages/fields/src/types/DateTime/views/Filter.js b/packages/fields/src/types/DateTime/views/Filter.js
@@ -1,20 +1,22 @@
 import React from 'react';
-import { format } from 'date-fns';
+import { formatISO } from 'date-fns';
 import { DayTimePicker } from '@arch-ui/day-picker';
 import { stringifyDate, parseDate } from './utils';
 
 const DateTimeFilterView = props => {
   const parsedDate = props.value ? parseDate(props.value) : parseDate(new Date().toISOString());
 
-  let handleDayChange = day => {
-    props.onChange(stringifyDate({ ...parsedDate, date: format(day, 'YYYY-MM-DD') }));
+  const handleDayChange = day => {
+    props.onChange(
+      stringifyDate({ ...parsedDate, date: formatISO(day, { representation: 'date' }) })
+    );
   };
 
-  let handleTimeChange = event => {
+  const handleTimeChange = event => {
     props.onChange(stringifyDate({ ...parsedDate, time: event.target.value }));
   };
 
-  let handleOffsetChange = offset => {
+  const handleOffsetChange = offset => {
     props.onChange(stringifyDate({ ...parsedDate, offset }));
   };
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       extendAdminMeta(meta) {
-        return { ...meta, format: 'YYYY-MM-DD[T]HH:mm:ss.SSSZZ' };
+        return { ...meta, format: 'yyyy-MM-dd[T]HH:mm:ss.SSSxx' };
       }
     }
@@ Expand Down @@