@primer/components 0.0.0-20219293614 → 0.0.0-2021931194230

package/lib-esm/DatePicker/Month.js

@@ -0,0 +1,98 @@
+import { format, isEqual, lastDayOfMonth, getDaysInMonth, eachDayOfInterval, startOfWeek, endOfWeek } from 'date-fns';
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import { BlankDay, Day } from './Day';
+import useDatePicker from './useDatePicker';
+const weekdayEnum = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6
+};
+const MonthComponent = styled(Box).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 = styled(Text).withConfig({
+  displayName: "Month__MonthTitle",
+  componentId: "l6j7o0-1"
+})(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'));
+const WeekdayHeader = styled(Text).withConfig({
+  displayName: "Month__WeekdayHeader",
+  componentId: "l6j7o0-2"
+})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
+export const Month = ({
+  month,
+  year
+}) => {
+  const {
+    configuration
+  } = useDatePicker();
+  const [selectedDay, setSelectedDay] = useState(null);
+  const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
+  const weekdayHeaders = useMemo(() => {
+    var _configuration$weekSt;
+
+    const now = new Date(year, month);
+    const weekOptions = {
+      weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
+    };
+    return eachDayOfInterval({
+      start: startOfWeek(now, weekOptions),
+      end: endOfWeek(now, weekOptions)
+    }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, format(d, 'EEEEEE')));
+  }, [configuration.weekStartsOn, month, year]);
+
+  const dayAction = date => {
+    setSelectedDay(date);
+  };
+
+  const dayComponents = useMemo(() => {
+    var _configuration$weekSt2, _configuration$weekSt3;
+
+    const components = [];
+    const firstDay = new Date(year, month, 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.createElement(BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
+      const date = new Date(year, month, i);
+      components.push( /*#__PURE__*/React.createElement(Day, {
+        key: `day-component-${date.toString()}`,
+        date: date,
+        selected: selectedDay ? isEqual(date, selectedDay) : false,
+        onAction: dayAction
+      }));
+    }
+
+    const lastDay = 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.createElement(BlankDay, {
+        key: `month-post-blank-${i}`
+      }));
+    }
+
+    return components;
+  }, [configuration.weekStartsOn, month, selectedDay, year]);
+  return /*#__PURE__*/React.createElement(MonthComponent, {
+    role: "grid"
+  }, /*#__PURE__*/React.createElement(MonthTitle, {
+    "aria-live": "polite"
+  }, getTitle), weekdayHeaders, dayComponents);
+};
+Month.displayName = "Month";

package/lib-esm/DatePicker/dateParser.d.ts

@@ -0,0 +1,11 @@
+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;
+    variant?: SelectionVariant;
+};
+export declare const formatDate: ({ selection, anchorVariant, dateFormat, placeholder, variant }: FormatDateOptions) => string;
+export {};

package/lib-esm/DatePicker/dateParser.js

@@ -0,0 +1,178 @@
+import { eachDayOfInterval, format, isBefore } from 'date-fns';
+import { isRangeSelection } from './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('-', '/');
+};
+
+export 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(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 (isRangeSelection(item)) {
+            if (item.to) {
+              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 => isRangeSelection(d))[0];
+      }
+
+    default:
+      {
+        return parsedDateItems[0];
+      }
+  }
+};
+export const formatDate = ({
+  selection,
+  anchorVariant = 'button',
+  dateFormat = 'short',
+  placeholder = 'Select a Date',
+  variant = 'single'
+}) => {
+  if (!selection) {
+    if (anchorVariant === 'input') return '';
+    return placeholder;
+  }
+
+  let template = 'MMM d';
+
+  if (anchorVariant !== 'input' && 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 format(selection, template);
+        } else if (Array.isArray(selection)) {
+          return format(selection[0], template);
+        } else if (isRangeSelection(selection)) {
+          return format(selection.from, template);
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    case 'multi':
+      {
+        if (Array.isArray(selection)) {
+          if (selection.length > 3 && anchorVariant !== 'input') return `${selection.length} Selected`;
+          const formatted = selection.map(d => format(d, template)).join(', ');
+          return formatted;
+        } else if (selection instanceof Date) {
+          return [selection].map(d => format(d, template)).join(', ');
+        } else if (isRangeSelection(selection)) {
+          return [selection.to, selection.from].map(d => d ? format(d, template) : '').join(', ');
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    case 'range':
+      {
+        if (isRangeSelection(selection)) {
+          return Object.entries(selection).map(([_, date]) => date ? format(date, template) : '').join(' - ');
+        } else if (selection instanceof Date) {
+          return Object.entries({
+            from: selection,
+            to: null
+          }).map(([_, date]) => date ? 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 ? format(date, template) : '').join(' - ');
+        } else {
+          return 'Invalid Selection';
+        }
+      }
+
+    default:
+      {
+        return 'Invalid Configuration';
+      }
+  }
+};

package/lib-esm/DatePicker/index.d.ts

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

package/lib-esm/DatePicker/index.js

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

package/lib-esm/DatePicker/useDatePicker.d.ts

@@ -0,0 +1,89 @@
+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;
+    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;
+    goToMonth: (date: Date) => void;
+    hoverRange?: RangeSelection | null;
+    selection?: Selection;
+    softSelection?: Partial<RangeSelection> | null;
+    selectionActive?: boolean;
+    formattedDate: string;
+    nextMonth: () => void;
+    onClose: () => void;
+    onDateInput: (updatedSelection: Selection) => void;
+    onDayFocus: (date: Date) => void;
+    onSelection: (date: Date) => void;
+    previousMonth: () => void;
+    revertValue: () => void;
+    saveValue: (selection?: Selection) => void;
+}
+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;
+    selected: DaySelection;
+    today: boolean;
+    configuration: DatePickerConfiguration;
+    currentViewingDate: Date;
+    goToMonth: (date: Date) => void;
+    hoverRange?: RangeSelection | null | undefined;
+    selection?: Selection | undefined;
+    softSelection?: Partial<RangeSelection> | null | undefined;
+    selectionActive?: boolean | undefined;
+    formattedDate: string;
+    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;
+};
+export default useDatePicker;
+export interface DatePickerProviderProps {
+    closePicker?: () => void;
+    configuration?: DatePickerConfiguration;
+    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 DatePickerProvider: React.FC<DatePickerProviderProps>;