@primer/components 0.0.0-202110322927 → 0.0.0-2021103235619

package/lib/DatePicker/Month.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Month = void 0;
+
+var _dateFns = require("date-fns");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _constants = require("../constants");
+
+var _Day = require("./Day");
+
+var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const weekdayEnum = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6
+};
+const MonthComponent = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Month__MonthComponent",
+  componentId: "l6j7o0-0"
+})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
+const MonthTitle = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Month__MonthTitle",
+  componentId: "l6j7o0-1"
+})(["font-size:", ";font-weight:", ";grid-area:month;height:", ";justify-self:center;"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('space.4'));
+const WeekdayHeader = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Month__WeekdayHeader",
+  componentId: "l6j7o0-2"
+})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], (0, _constants.get)('colors.fg.subtle'), (0, _constants.get)('fonts.mono'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+
+const Month = ({
+  date
+}) => {
+  const {
+    configuration
+  } = (0, _useDatePicker.default)();
+  const [selectedDay, setSelectedDay] = (0, _react.useState)(null);
+  const getTitle = (0, _react.useMemo)(() => `${(0, _dateFns.format)(new Date(date), 'MMMM yyyy')}`, [date]);
+  const weekdayHeaders = (0, _react.useMemo)(() => {
+    var _configuration$weekSt;
+
+    const now = new Date(date);
+    const weekOptions = {
+      weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
+    };
+    return (0, _dateFns.eachDayOfInterval)({
+      start: (0, _dateFns.startOfWeek)(now, weekOptions),
+      end: (0, _dateFns.endOfWeek)(now, weekOptions)
+    }).map(d => /*#__PURE__*/_react.default.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, (0, _dateFns.format)(d, 'EEEEEE')));
+  }, [configuration.weekStartsOn, date]);
+
+  const dayAction = day => {
+    setSelectedDay(day);
+  };
+
+  const dayComponents = (0, _react.useMemo)(() => {
+    var _configuration$weekSt2, _configuration$weekSt3;
+
+    const components = [];
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+    const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
+
+    for (let i = 0; i < preBlanks; i++) {
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= (0, _dateFns.getDaysInMonth)(firstDay); i++) {
+      const day = new Date(date.getFullYear(), date.getMonth(), i);
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.Day, {
+        key: `day-component-${day.toString()}`,
+        date: day,
+        selected: selectedDay ? (0, _dateFns.isEqual)(day, selectedDay) : false,
+        onAction: dayAction
+      }));
+    }
+
+    const lastDay = (0, _dateFns.lastDayOfMonth)(firstDay);
+    const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
+
+    for (let i = 6; i > postBlanks; i--) {
+      components.push( /*#__PURE__*/_react.default.createElement(_Day.BlankDay, {
+        key: `month-post-blank-${i}`
+      }));
+    }
+
+    return components;
+  }, [configuration.weekStartsOn, date, selectedDay]);
+  return /*#__PURE__*/_react.default.createElement(MonthComponent, {
+    role: "grid",
+    "aria-labelledby": `${date.getMonth()} ${date.getFullYear()}`
+  }, /*#__PURE__*/_react.default.createElement(MonthTitle, {
+    "aria-live": "polite"
+  }, !configuration.compressedHeader ? getTitle : ''), weekdayHeaders, dayComponents);
+};
+
+exports.Month = Month;
+Month.displayName = "Month";

package/lib/DatePicker/dateParser.d.ts

@@ -0,0 +1,12 @@
+import { AnchorVariant, Selection, SelectionVariant } from './useDatePicker';
+export declare const parseDate: (dateString: string, variant?: SelectionVariant) => Selection;
+declare type FormatDateOptions = {
+    selection?: Selection;
+    anchorVariant?: AnchorVariant;
+    dateFormat?: string;
+    placeholder?: string;
+    rawFormat?: boolean;
+    variant?: SelectionVariant;
+};
+export declare const formatDate: ({ selection, dateFormat, placeholder, rawFormat, variant }: FormatDateOptions) => string;
+export {};

package/lib/DatePicker/dateParser.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatDate = exports.parseDate = void 0;
+
+var _dateFns = require("date-fns");
+
+var _useDatePicker = require("./useDatePicker");
+
+const INVALID_DATE = 'Invalid Date';
+const DATE_REGEX = new RegExp(/(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})(?:\s?-\s?)?(\d{1,2}[-/.]\d{1,2}[-/.](?:\d{2}){1,2})?/g);
+
+const sanitizeDate = dateString => {
+  return dateString.replaceAll('.', '/').replaceAll('-', '/');
+};
+
+const parseDate = (dateString, variant = 'single') => {
+  const dateItems = dateString.matchAll(DATE_REGEX);
+  const parsedDateItems = []; // Determine Format
+
+  for (const d of dateItems) {
+    const tempD1 = new Date(sanitizeDate(d[1]));
+    const tempD2 = d[2] ? new Date(sanitizeDate(d[2])) : null;
+
+    if (tempD2) {
+      // Range
+      if (tempD1.toString() !== INVALID_DATE && tempD2.toString() !== INVALID_DATE) {
+        parsedDateItems.push((0, _dateFns.isBefore)(tempD1, tempD2) ? {
+          from: tempD1,
+          to: tempD2
+        } : {
+          from: tempD2,
+          to: tempD1
+        });
+      } else if (tempD1.toString() !== INVALID_DATE) {
+        parsedDateItems.push(tempD1);
+      } else if (tempD2.toString() !== INVALID_DATE) {
+        parsedDateItems.push(tempD2);
+      }
+    } else {
+      if (tempD1.toString() !== INVALID_DATE) {
+        parsedDateItems.push(tempD1);
+      }
+    }
+  }
+
+  if (parsedDateItems.length === 0) {
+    // No Valid Dates
+    return null;
+  } // Cast Format based on variant
+
+
+  switch (variant) {
+    case 'single':
+      {
+        return parsedDateItems[0];
+      }
+
+    case 'multi':
+      {
+        const expandedParsedItems = [];
+
+        for (const item of parsedDateItems) {
+          if ((0, _useDatePicker.isRangeSelection)(item)) {
+            if (item.to) {
+              (0, _dateFns.eachDayOfInterval)({
+                start: item.from,
+                end: item.to
+              }).map(d => expandedParsedItems.push(d));
+            } else {
+              expandedParsedItems.push(item.from);
+            }
+          } else {
+            if (item) {
+              if (Array.isArray(item)) {
+                item.map(d => expandedParsedItems.push(d));
+              } else {
+                expandedParsedItems.push(item);
+              }
+            }
+          }
+        }
+
+        return expandedParsedItems;
+      }
+
+    case 'range':
+      {
+        return parsedDateItems.filter(d => (0, _useDatePicker.isRangeSelection)(d))[0];
+      }
+
+    default:
+      {
+        return parsedDateItems[0];
+      }
+  }
+};
+
+exports.parseDate = parseDate;
+
+const formatDate = ({
+  selection,
+  dateFormat = 'short',
+  placeholder = 'Choose Date',
+  rawFormat = false,
+  variant = 'single'
+}) => {
+  if (!selection) {
+    if (rawFormat) return '';
+    return placeholder;
+  }
+
+  let template = 'MMM d';
+
+  if (!rawFormat && dateFormat) {
+    switch (dateFormat) {
+      case 'short':
+        template = 'MMM d';
+        break;
+
+      case 'long':
+        template = 'MMM d, yyyy';
+        break;
+
+      default:
+        template = dateFormat;
+        break;
+    }
+  } else {
+    template = 'MM/dd/yyyy';
+  }
+
+  switch (variant) {
+    case 'single':
+      {
+        if (selection instanceof Date) {
+          return (0, _dateFns.format)(selection, template);
+        } else if (Array.isArray(selection)) {
+          return (0, _dateFns.format)(selection[0], template);
+        } else if ((0, _useDatePicker.isRangeSelection)(selection)) {
+          return (0, _dateFns.format)(selection.from, template);
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    case 'multi':
+      {
+        if (Array.isArray(selection)) {
+          if (selection.length > 3 && !rawFormat) return `${selection.length} Selected`;
+          const formatted = selection.map(d => (0, _dateFns.format)(d, template)).join(', ');
+          return formatted;
+        } else if (selection instanceof Date) {
+          return [selection].map(d => (0, _dateFns.format)(d, template)).join(', ');
+        } else if ((0, _useDatePicker.isRangeSelection)(selection)) {
+          return [selection.to, selection.from].map(d => d ? (0, _dateFns.format)(d, template) : '').join(', ');
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    case 'range':
+      {
+        if ((0, _useDatePicker.isRangeSelection)(selection)) {
+          return Object.entries(selection).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+        } else if (selection instanceof Date) {
+          return Object.entries({
+            from: selection,
+            to: null
+          }).map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+        } else if (Array.isArray(selection)) {
+          return Object.entries({
+            from: selection[0],
+            to: selection[1]
+          }) // to date can still be null
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          .map(([_, date]) => date ? (0, _dateFns.format)(date, template) : '').join(' - ');
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    default:
+      {
+        return 'Invalid Configuration';
+      }
+  }
+};
+
+exports.formatDate = formatDate;

package/lib/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/lib/DatePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+
+var _DatePicker = require("./DatePicker");

package/lib/DatePicker/useDatePicker.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+export declare type AnchorVariant = 'input' | 'button' | 'icon-only';
+export declare type DateFormat = 'short' | 'long' | string;
+export declare type SelectionVariant = 'single' | 'multi' | 'range';
+export interface DatePickerConfiguration {
+    anchorVariant?: AnchorVariant;
+    blockedDates?: Array<Date>;
+    confirmation?: boolean;
+    confirmUnsavedClose?: boolean;
+    compressedHeader?: boolean;
+    dateFormat?: DateFormat;
+    disableWeekends?: boolean;
+    iconPlacement?: 'start' | 'end' | 'none';
+    maxDate?: Date | null;
+    maxSelections?: number;
+    maxRangeSize?: number;
+    minDate?: Date | null;
+    placeholder?: string;
+    rangeIncrement?: number;
+    showInputPrompt?: boolean;
+    variant?: SelectionVariant;
+    view?: '1-month' | '2-month';
+    weekStartsOn?: 'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday';
+}
+export declare type RangeSelection = {
+    from: Date;
+    to: Date | null;
+};
+export declare type StringRangeSelection = {
+    from: string;
+    to: string;
+};
+export interface DatePickerContext {
+    disabled?: boolean;
+    configuration: DatePickerConfiguration;
+    currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
+    formattedDate: string;
+    goToMonth: (date: Date) => void;
+    inputDate: string;
+    hoverRange?: RangeSelection | null;
+    nextMonth: () => void;
+    onClose: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection) => void;
+    selection?: Selection;
+    selectionActive?: boolean;
+    setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
+    setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
+    softSelection?: Partial<RangeSelection> | null;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    viewMode: '1-month' | '2-month';
+}
+export declare type Selection = Date | Array<Date> | RangeSelection | null;
+export declare type StringSelection = string | Array<string> | {
+    to: string;
+    from: string;
+} | null;
+export declare type DaySelection = boolean | 'start' | 'middle' | 'end';
+declare const useDatePicker: (date?: Date | undefined) => {
+    blocked: boolean | undefined;
+    disabled: boolean;
+    focused: boolean;
+    selected: DaySelection;
+    today: boolean;
+    configuration: DatePickerConfiguration;
+    currentViewingDate: Date;
+    dialogOpen: boolean;
+    focusDate: Date;
+    formattedDate: string;
+    goToMonth: (date: Date) => void;
+    inputDate: string;
+    hoverRange?: RangeSelection | null | undefined;
+    nextMonth: () => void;
+    onClose: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection | undefined) => void;
+    selection?: Selection | undefined;
+    selectionActive?: boolean | undefined;
+    setFocusDate: React.Dispatch<React.SetStateAction<Date>>;
+    setHoverRange: React.Dispatch<React.SetStateAction<RangeSelection | null>>;
+    softSelection?: Partial<RangeSelection> | null | undefined;
+    setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    viewMode: '1-month' | '2-month';
+};
+export default useDatePicker;
+export interface DatePickerProviderProps {
+    closePicker?: () => void;
+    configuration?: DatePickerConfiguration;
+    isOpen?: boolean;
+    value?: Selection | StringSelection;
+}
+export declare function isSingleSelection(selection: Selection): selection is Date;
+export declare function isMultiSelection(selection: Selection | StringSelection): selection is Array<Date> | Array<string>;
+export declare function isRangeSelection(selection: Selection | StringSelection): selection is RangeSelection | StringRangeSelection;
+export declare function isStringRangeSelection(selection: StringSelection): selection is StringRangeSelection;
+export declare const normalizeDate: (date: Date | string) => Date;
+export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;