@skyscanner/backpack-web 25.2.0 → 25.4.0-alpha

package/bpk-component-calendar/src/date-utils.ts

@@ -0,0 +1,229 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import startOfMonth from 'date-fns/startOfMonth';
+import endOfMonth from 'date-fns/endOfMonth';
+import lastDayOfMonth from 'date-fns/lastDayOfMonth';
+import getDay from 'date-fns/getDay';
+import isWithinRange from 'date-fns/isWithinInterval';
+import isToday from 'date-fns/isToday';
+import isSaturday from 'date-fns/isSaturday';
+import isSunday from 'date-fns/isSunday';
+import isSameDay from 'date-fns/isSameDay';
+import isSameWeek from 'date-fns/isSameWeek';
+import isSameMonth from 'date-fns/isSameMonth';
+import isBefore from 'date-fns/isBefore';
+import isAfter from 'date-fns/isAfter';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import setMonth from 'date-fns/setMonth';
+import setYear from 'date-fns/setYear';
+import startOfDay from 'date-fns/startOfDay';
+import parseISO from 'date-fns/parseISO';
+import format from 'date-fns/format';
+
+import type { DaysOfWeek } from './custom-proptypes';
+
+const ONE_MINUTE_IN_MS = 60 * 1000;
+const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
+
+// TODO: Update to use date-fns functions.
+// see: https://github.com/date-fns/date-fns/issues/571 and https://bugs.webkit.org/show_bug.cgi?id=188001
+//
+// Safari has a problem with DST when the transition occurrs during midnight. To test set your timezone
+// to BRT (Brasilia) and type new Date(2018, 10, 4) on Safari's console.
+// It will return `Nov 03 2018 23:00:00` whereas Chrome and Firefox return `Nov 04 2018 01:00:00`.
+//
+// To go aroud this problem we're mostly avoiding date objects and using UTC when that's not
+// possible.
+
+function utc(year: number, month: number, date?: number) {
+  return new Date(Date.UTC(year, month, date));
+}
+
+function daysInMonth(year: number, month: number) {
+  // Gets the last day of the month specified
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function dateAtStartOfDay(year: number, month: number, day?: number) {
+  const date = utc(year, month, day);
+  const tzOffset = date.getTimezoneOffset();
+
+  // Date is utc so we add/subtract the timezone hours.
+  // Using setTime is consistent on every browser so we have the same result everywhere.
+  date.setTime(date.getTime() + tzOffset * ONE_MINUTE_IN_MS);
+
+  // Bug in Safari that only occurs when the transition from/to DST is during midnight (e.g. Brazil and Chile).
+  // We want the exact day provided in the arguments so we adjust accordingly.
+  if (day !== date.getDate() && date.getHours() === 23) {
+    date.setTime(date.getTime() + ONE_HOUR_IN_MS);
+  }
+  return date;
+}
+
+function addDay(year: number, month: number, day?: number) {
+  const date = utc(year, month, day);
+  date.setUTCDate(date.getUTCDate() + 1);
+  return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
+}
+
+function startOfWeek(
+  year: number,
+  month: number,
+  day: number,
+  weekStartsOn: number,
+) {
+  const date = utc(year, month, day);
+  const weekDay = date.getUTCDay();
+  const diff = (weekDay < weekStartsOn ? 7 : 0) + weekDay - weekStartsOn;
+  date.setUTCDate(date.getUTCDate() - diff);
+  return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
+}
+
+function getCalendarMonthWeeks(date: Date, weekStartsOn: number) {
+  let [year, month, day] = startOfWeek(
+    date.getFullYear(),
+    date.getMonth(),
+    1,
+    weekStartsOn,
+  );
+
+  const weeksInMonth = [];
+
+  for (let i = 0; i < 6; i += 1) {
+    const currWeek = [];
+    for (let j = 0; j < 7; j += 1) {
+      currWeek.push(dateAtStartOfDay(year, month, day));
+      [year, month, day] = addDay(year, month, day);
+    }
+    weeksInMonth.push(currWeek);
+  }
+  return weeksInMonth;
+}
+
+function getLastDayOfWeekend(daysOfWeek: DaysOfWeek) {
+  const weekend = daysOfWeek.map((day) => day.isWeekend);
+
+  if (weekend[0] && weekend[6]) {
+    // weekend stretches over turn the of the week
+    return daysOfWeek[weekend.indexOf(false) - 1].index;
+  }
+  return daysOfWeek[weekend.lastIndexOf(true)].index;
+}
+
+function getFirstDayOfWeekend(daysOfWeek: DaysOfWeek) {
+  const weekend = daysOfWeek.map((day) => day.isWeekend);
+
+  if (weekend[0] && weekend[6]) {
+    // weekend stretches over turn the of the week
+    return daysOfWeek[weekend.lastIndexOf(false) + 1].index;
+  }
+  return daysOfWeek[weekend.indexOf(true)].index;
+}
+
+const orderDaysOfWeek = (daysOfWeek: DaysOfWeek, weekStartsOn: number) => {
+  // Sorted in [sun, mon, ..., sat]
+  const sortedDaysOfWeek = daysOfWeek.slice().sort((a, b) => a.index - b.index);
+  // Ordered according to weekStartsOn, e.g. [mon, tue, ..., sun]
+  return [
+    ...sortedDaysOfWeek.slice(weekStartsOn),
+    ...sortedDaysOfWeek.slice(0, weekStartsOn),
+  ];
+};
+
+/* Takes arbitrary dates and returns the beginning of the first and enf of the last month containing these dates  */
+function getMonthRange(from: Date, to: Date) {
+  return {
+    min: startOfMonth(from),
+    max: endOfMonth(to),
+  };
+}
+
+function getMonthsInRange(from: Date, to: Date) {
+  const { max, min } = getMonthRange(from, to);
+  let currentMonth = startOfMonth(from);
+  const monthsInRange = [];
+
+  while (isWithinRange(currentMonth, { start: min, end: max })) {
+    monthsInRange.push(currentMonth);
+    currentMonth = addMonths(currentMonth, 1);
+  }
+
+  return monthsInRange;
+}
+
+/*
+Adjusts a date, if necessary, to fit within a range.
+If date passed in is null, it'll return the minimum date.
+*/
+const dateToBoundaries = (date: Date | null, minDate: Date, maxDate: Date) => {
+  if (!date) {
+    return minDate;
+  }
+  if (isWithinRange(date, { start: minDate, end: maxDate })) {
+    return date;
+  }
+  if (isBefore(date, minDate)) {
+    return minDate;
+  }
+  return maxDate;
+};
+
+const setMonthYear = (date: Date | null, newMonth: number, newYear: number) => {
+  const dateToUse = date || new Date(newYear, newMonth, 1);
+  return setYear(setMonth(dateToUse, newMonth), newYear);
+};
+
+const parseIsoDate = parseISO;
+const formatIsoDate = (date: Date) => format(date, 'yyyy-MM-dd');
+const formatIsoMonth = (date: Date) => format(date, 'yyyy-MM');
+
+export {
+  getCalendarMonthWeeks,
+  getFirstDayOfWeekend,
+  getLastDayOfWeekend,
+  getMonthsInRange,
+  getMonthRange,
+  getDay,
+  dateToBoundaries,
+  isWithinRange,
+  isSaturday,
+  isSunday,
+  isToday,
+  isSameDay,
+  isSameWeek,
+  isSameMonth,
+  isBefore,
+  isAfter,
+  differenceInCalendarMonths,
+  addMonths,
+  addDays,
+  orderDaysOfWeek,
+  setMonthYear,
+  startOfMonth,
+  lastDayOfMonth,
+  startOfDay,
+  format,
+  daysInMonth,
+  formatIsoDate,
+  formatIsoMonth,
+  parseIsoDate,
+  endOfMonth,
+};

package/bpk-component-calendar/src/themeAttributes-test.ts

@@ -0,0 +1,36 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import themeAttributes from './themeAttributes';
+
+describe('themeAttributes', () => {
+  it('should export the expected themeAttributes', () => {
+    expect(themeAttributes).toEqual([
+      'calendarDateTextColor',
+      'calendarDateTextHoverColor',
+      'calendarDateTextActiveColor',
+      'calendarDateTextFocusColor',
+      'calendarDateTextSelectedColor',
+      'calendarDateSelectedBackgroundColor',
+      'calendarDateFocusedBorderColor',
+      'calendarNudgerIconColor',
+      'calendarNudgerIconHoverColor',
+      'calendarNudgerIconActiveColor',
+    ]);
+  });
+});

package/{bpk-component-boilerplate/index.js → bpk-component-calendar/src/themeAttributes.ts}

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _BpkBoilerplate = _interopRequireDefault(require("./src/BpkBoilerplate"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,5 +15,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkBoilerplate.default;
-exports.default = _default;
+
+export default [
+  'calendarDateTextColor',
+  'calendarDateTextHoverColor',
+  'calendarDateTextActiveColor',
+  'calendarDateTextFocusColor',
+  'calendarDateTextSelectedColor',
+  'calendarDateSelectedBackgroundColor',
+  'calendarDateFocusedBorderColor',
+  'calendarNudgerIconColor',
+  'calendarNudgerIconHoverColor',
+  'calendarNudgerIconActiveColor',
+];

package/bpk-component-calendar/src/{utils.js → utils.ts}

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isTransitionEndSupported = exports.getTransformStyles = exports.getCalendarGridWidth = void 0;
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -23,35 +16,47 @@ var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
  * limitations under the License.
  */
 
+import {
+  calendarDaySize,
+  calendarDaySpacing, // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
-const splitToken = value => {
+
+const splitToken = (value: string) => {
   const match = value.match(CSS_UNIT_REGEX);
   if (!match) {
-    throw new Error(`Invalid token value. Expecting a valid css unit, got ${value}`);
+    throw new Error(
+      `Invalid token value. Expecting a valid css unit, got ${value}`,
+    );
   }
   const [_, val, unit] = match; // eslint-disable-line no-unused-vars
   return [parseFloat(val), unit];
 };
-const getCalendarGridWidth = (multiplier = 1) => {
-  const [sizeValue, sizeUnit] = splitToken(_base.calendarDaySize);
-  const [spacingValue, spacingUnit] = splitToken(_base.calendarDaySpacing);
+
+export const getCalendarGridWidth = (multiplier = 1) => {
+  const [sizeValue, sizeUnit] = splitToken(calendarDaySize);
+  const [spacingValue, spacingUnit] = splitToken(calendarDaySpacing);
+
   if (sizeUnit !== spacingUnit) {
-    throw new Error(`'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`);
+    throw new Error(
+      `'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`,
+    );
   }
   // @ts-expect-error TS doesn't correctly read the size and spacing values type i.e. numbers as returned by parseFloat
   const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
   return `${width}${sizeUnit}`;
 };
-exports.getCalendarGridWidth = getCalendarGridWidth;
-const getTransformStyles = transformValue => {
+
+export const getTransformStyles = (transformValue: string) => {
   const transform = `translateX(${transformValue})`;
   return {
     transform,
     msTransform: transform,
     MozTransform: transform,
-    WebkitTransform: transform
+    WebkitTransform: transform,
   };
 };
-exports.getTransformStyles = getTransformStyles;
-const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
-exports.isTransitionEndSupported = isTransitionEndSupported;
+
+export const isTransitionEndSupported = () =>
+  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);

package/bpk-component-calendar/test-utils.ts

@@ -0,0 +1,303 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import format from 'date-fns/format';
+
+export const formatDateFull = (date: Date) =>
+  format(date, 'EEEE, do MMMM yyyy');
+export const formatDateFullArabic = (date: Date) => {
+  const dateString = 'EEEE, dd، MMMM، yyyy';
+  const newString = dateString.replace('yyyy', `${date.getUTCFullYear()}`);
+  return format(date, newString);
+};
+export const formatDateFullJapanese = (date: Date) => {
+  const dateString = 'Y年M月d日EEEE';
+  const newString = dateString.replace('Y', `${date.getUTCFullYear()}`);
+  return format(date, newString);
+};
+export const formatMonth = (date: Date) => format(date, 'MMMM yyyy');
+export const formatMonthArabic = (date: Date) => {
+  const months = [
+    'يناير',
+    'فبراير',
+    'مارس',
+    'أبريل',
+    'مايو',
+    'يونيو',
+    'يوليو',
+    'أغسطس',
+    'سبتمبر',
+    'أكتوبر',
+    'نوفمبر',
+    'ديسمبر',
+  ];
+  return `${months[date.getMonth()]} ${date.getFullYear()}`;
+};
+export const formatMonthJapanese = (date: Date) => {
+  const months = [
+    '1月',
+    '2月',
+    '3月',
+    '4月',
+    '5月',
+    '6月',
+    '7月',
+    '8月',
+    '9月',
+    '10月',
+    '11月',
+    '12月',
+  ];
+  return `${date.getFullYear()}年${months[date.getMonth()]}`;
+};
+
+export const weekDays = [
+  {
+    name: 'Sunday',
+    nameAbbr: 'Sun',
+    nameNarrow: 'S',
+    index: 0,
+    isWeekend: true,
+  },
+  {
+    name: 'Monday',
+    nameAbbr: 'Mon',
+    nameNarrow: 'M',
+    index: 1,
+    isWeekend: false,
+  },
+  {
+    name: 'Tuesday',
+    nameAbbr: 'Tue',
+    nameNarrow: 'T',
+    index: 2,
+    isWeekend: false,
+  },
+  {
+    name: 'Wednesday',
+    nameAbbr: 'Wed',
+    nameNarrow: 'W',
+    index: 3,
+    isWeekend: false,
+  },
+  {
+    name: 'Thursday',
+    nameAbbr: 'Thu',
+    nameNarrow: 'T',
+    index: 4,
+    isWeekend: false,
+  },
+  {
+    name: 'Friday',
+    nameAbbr: 'Fri',
+    nameNarrow: 'F',
+    index: 5,
+    isWeekend: false,
+  },
+  {
+    name: 'Saturday',
+    nameAbbr: 'Sat',
+    nameNarrow: 'S',
+    index: 6,
+    isWeekend: true,
+  },
+];
+
+export const weekDaysMoreWeekend = [
+  {
+    name: 'Sunday',
+    nameAbbr: 'Sun',
+    nameNarrow: 'S',
+    index: 0,
+    isWeekend: true,
+  },
+  {
+    name: 'Monday',
+    nameAbbr: 'Mon',
+    nameNarrow: 'M',
+    index: 1,
+    isWeekend: false,
+  },
+  {
+    name: 'Tuesday',
+    nameAbbr: 'Tue',
+    nameNarrow: 'T',
+    index: 2,
+    isWeekend: false,
+  },
+  {
+    name: 'Wednesday',
+    nameAbbr: 'Wed',
+    nameNarrow: 'W',
+    index: 3,
+    isWeekend: false,
+  },
+  {
+    name: 'Thursday',
+    nameAbbr: 'Thu',
+    nameNarrow: 'T',
+    index: 4,
+    isWeekend: false,
+  },
+  {
+    name: 'Friday',
+    nameAbbr: 'Fri',
+    nameNarrow: 'F',
+    index: 5,
+    isWeekend: true,
+  },
+  {
+    name: 'Saturday',
+    nameAbbr: 'Sat',
+    nameNarrow: 'S',
+    index: 6,
+    isWeekend: true,
+  },
+];
+
+export const weekDaysArabic = [
+  {
+    name: 'الأحد',
+    nameAbbr: 'الأحد',
+    nameShort: 'الأحد',
+    nameNarrow: 'ح',
+    index: 0,
+    cldrKey: 'sun',
+    isWeekend: false,
+  },
+  {
+    name: 'الاثنين',
+    nameAbbr: 'الاثنين',
+    nameShort: 'الاثنين',
+    nameNarrow: 'ن',
+    index: 1,
+    cldrKey: 'mon',
+    isWeekend: false,
+  },
+  {
+    name: 'الثلاثاء',
+    nameAbbr: 'الثلاثاء',
+    nameShort: 'الثلاثاء',
+    nameNarrow: 'ث',
+    index: 2,
+    cldrKey: 'tue',
+    isWeekend: false,
+  },
+  {
+    name: 'الأربعاء',
+    nameAbbr: 'الأربعاء',
+    nameShort: 'الأربعاء',
+    nameNarrow: 'ر',
+    index: 3,
+    cldrKey: 'wed',
+    isWeekend: false,
+  },
+  {
+    name: 'الخميس',
+    nameAbbr: 'الخميس',
+    nameShort: 'الخميس',
+    nameNarrow: 'خ',
+    index: 4,
+    cldrKey: 'thu',
+    isWeekend: false,
+  },
+  {
+    name: 'الجمعة',
+    nameAbbr: 'الجمعة',
+    nameShort: 'الجمعة',
+    nameNarrow: 'ج',
+    index: 5,
+    cldrKey: 'fri',
+    isWeekend: true,
+  },
+  {
+    name: 'السبت',
+    nameAbbr: 'السبت',
+    nameShort: 'السبت',
+    nameNarrow: 'س',
+    index: 6,
+    cldrKey: 'sat',
+    isWeekend: true,
+  },
+];
+
+export const weekDaysJapanese = [
+  {
+    name: '日曜日',
+    nameAbbr: '日',
+    nameShort: '日',
+    nameNarrow: '日',
+    index: 0,
+    cldrKey: 'sun',
+    isWeekend: true,
+  },
+  {
+    name: '月曜日',
+    nameAbbr: '月',
+    nameShort: '月',
+    nameNarrow: '月',
+    index: 1,
+    cldrKey: 'mon',
+    isWeekend: false,
+  },
+  {
+    name: '火曜日',
+    nameAbbr: '火',
+    nameShort: '火',
+    nameNarrow: '火',
+    index: 2,
+    cldrKey: 'tue',
+    isWeekend: false,
+  },
+  {
+    name: '水曜日',
+    nameAbbr: '水',
+    nameShort: '水',
+    nameNarrow: '水',
+    index: 3,
+    cldrKey: 'wed',
+    isWeekend: false,
+  },
+  {
+    name: '木曜日',
+    nameAbbr: '木',
+    nameShort: '木',
+    nameNarrow: '木',
+    index: 4,
+    cldrKey: 'thu',
+    isWeekend: false,
+  },
+  {
+    name: '金曜日',
+    nameAbbr: '金',
+    nameShort: '金',
+    nameNarrow: '金',
+    index: 5,
+    cldrKey: 'fri',
+    isWeekend: false,
+  },
+  {
+    name: '土曜日',
+    nameAbbr: '土',
+    nameShort: '土',
+    nameNarrow: '土',
+    index: 6,
+    cldrKey: 'sat',
+    isWeekend: true,
+  },
+];