@skyscanner/backpack-web 0.0.1

package/bpk-component-calendar/src/custom-proptypes.js

@@ -0,0 +1,94 @@
+/*
+ * 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 PropTypes from 'prop-types';
+
+import { isBefore, isSameDay } from './date-utils';
+
+const DateType = (key) => (props) => {
+  const { endDate, startDate } = props[key];
+
+  // No range selected
+  if (!startDate && !endDate) {
+    return null;
+  }
+
+  // End date without a start date is not allowed
+  if (!startDate && endDate) {
+    return new Error(
+      `Cannot specify \`endDate\` without \`startDate\` in ${key}.`,
+    );
+  }
+
+  // Start date without an end date is always valid
+  if (startDate && !endDate) {
+    return null;
+  }
+
+  // Start date cannot be after end date
+  if (isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
+    return new Error(
+      `Start date \`${startDate}\` cannot be after end date \`${endDate}\` in \`props.${key}\`.`,
+    );
+  }
+
+  return null;
+};
+
+const CALENDAR_SELECTION_TYPE = {
+  single: 'single',
+  range: 'range',
+};
+
+const SelectionConfigurationSingle = PropTypes.shape({
+  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.single]),
+  date: PropTypes.instanceOf(Date),
+});
+
+const SelectionConfigurationRange = PropTypes.shape({
+  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.range]),
+  startDate: DateType('selectionConfiguration'),
+  endDate: DateType('selectionConfiguration'),
+});
+
+const SelectionConfiguration = PropTypes.oneOfType([
+  SelectionConfigurationSingle,
+  SelectionConfigurationRange,
+]);
+
+const WeekDay = PropTypes.shape({
+  name: PropTypes.string,
+  nameAbbr: PropTypes.string,
+  index: PropTypes.number,
+  isWeekend: PropTypes.bool,
+});
+
+const WeekDayKey = PropTypes.string;
+const DaysOfWeek = PropTypes.arrayOf(WeekDay);
+const DateModifiers = PropTypes.objectOf(PropTypes.func);
+const ReactComponent = PropTypes.oneOfType([PropTypes.string, PropTypes.func]);
+
+export { CALENDAR_SELECTION_TYPE };
+export default {
+  SelectionConfiguration,
+  DateModifiers,
+  DaysOfWeek,
+  ReactComponent,
+  WeekDay,
+  WeekDayKey,
+};

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

@@ -0,0 +1,222 @@
+/*
+ * 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';
+
+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, month, date) {
+  return new Date(Date.UTC(year, month, date));
+}
+
+function daysInMonth(year, month) {
+  // Gets the last day of the month specified
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function dateAtStartOfDay(year, month, day) {
+  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, month, day) {
+  const date = utc(year, month, day);
+  date.setUTCDate(date.getUTCDate() + 1);
+  return [date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()];
+}
+
+function startOfWeek(year, month, day, weekStartsOn) {
+  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, weekStartsOn) {
+  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) {
+  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) {
+  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, weekStartsOn) => {
+  // 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, to) {
+  return {
+    min: startOfMonth(from),
+    max: endOfMonth(to),
+  };
+}
+
+function getMonthsInRange(from, to) {
+  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, minDate, maxDate) => {
+  if (!date) {
+    return minDate;
+  }
+  if (isWithinRange(date, { start: minDate, end: maxDate })) {
+    return date;
+  }
+  if (isBefore(date, minDate)) {
+    return minDate;
+  }
+  return maxDate;
+};
+
+const setMonthYear = (date, newMonth, newYear) => {
+  const dateToUse = date || new Date(newYear, newMonth, 1);
+  return setYear(setMonth(dateToUse, newMonth), newYear);
+};
+
+const parseIsoDate = parseISO;
+const formatIsoDate = (date) => format(date, 'yyyy-MM-dd');
+const formatIsoMonth = (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.js

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+export default [
+  'calendarDateTextColor',
+  'calendarDateTextHoverColor',
+  'calendarDateTextActiveColor',
+  'calendarDateTextFocusColor',
+  'calendarDateTextSelectedColor',
+  'calendarDateSelectedBackgroundColor',
+  'calendarDateFocusedBorderColor',
+  'calendarNudgerIconColor',
+  'calendarNudgerIconHoverColor',
+  'calendarNudgerIconActiveColor',
+];

package/bpk-component-calendar/src/utils.js

@@ -0,0 +1,61 @@
+/*
+ * 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 {
+  calendarDaySize,
+  calendarDaySpacing,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
+
+const splitToken = (value) => {
+  const match = value.match(CSS_UNIT_REGEX);
+  if (!match) {
+    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];
+};
+
+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}`,
+    );
+  }
+  const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
+  return `${width}${sizeUnit}`;
+};
+
+export const getTransformStyles = (transformValue) => {
+  const transform = `translateX(${transformValue})`;
+  return {
+    transform,
+    msTransform: transform,
+    MozTransform: transform,
+    WebkitTransform: transform,
+  };
+};
+
+export const isTransitionEndSupported = () =>
+  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);

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

@@ -0,0 +1,302 @@
+/*
+ * 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) => format(date, 'EEEE, do MMMM yyyy');
+export const formatDateFullArabic = (date) => {
+  const dateString = 'EEEE, dd، MMMM، yyyy';
+  const newString = dateString.replace('yyyy', date.getUTCFullYear());
+  return format(date, newString);
+};
+export const formatDateFullJapanese = (date) => {
+  const dateString = 'Y年M月d日EEEE';
+  const newString = dateString.replace('Y', date.getUTCFullYear());
+  return format(date, newString);
+};
+export const formatMonth = (date) => format(date, 'MMMM yyyy');
+export const formatMonthArabic = (date) => {
+  const months = [
+    'يناير',
+    'فبراير',
+    'مارس',
+    'أبريل',
+    'مايو',
+    'يونيو',
+    'يوليو',
+    'أغسطس',
+    'سبتمبر',
+    'أكتوبر',
+    'نوفمبر',
+    'ديسمبر',
+  ];
+  return `${months[date.getMonth()]} ${date.getFullYear()}`;
+};
+export const formatMonthJapanese = (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,
+  },
+];