@primer/components 0.0.0-2021102224222 → 0.0.0-202110343939

package/lib-esm/DatePicker/Day.js

@@ -0,0 +1,174 @@
+import React, { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import useDatePicker from './useDatePicker';
+const DayBaseComponent = styled(Box).withConfig({
+  displayName: "Day__DayBaseComponent",
+  componentId: "sc-1japneh-0"
+})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], get('space.1'));
+const states = {
+  blocked: {
+    background: get('colors.neutral.subtle'),
+    borderRadius: get('radii.2'),
+    color: get('colors.fg.subtle')
+  },
+  disabled: {
+    background: get('colors.canvas.primary'),
+    borderRadius: get('radii.2'),
+    color: get('colors.fg.subtle')
+  },
+  selected: {
+    default: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    },
+    start: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: '4px 0 0 4px',
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    },
+    middle: {
+      background: get('colors.accent.subtle'),
+      borderRadius: '0',
+      color: get('colors.fg.default'),
+      todayColor: get('colors.accent.fg')
+    },
+    end: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: '0 4px 4px 0',
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    }
+  },
+  default: {
+    normal: {
+      background: get('colors.canvas.primary'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.default'),
+      todayColor: get('colors.accent.fg')
+    },
+    hover: {
+      background: get('colors.neutral.muted'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.default'),
+      todayColor: get('colors.accent.fg')
+    },
+    pressed: {
+      background: get('colors.neutral.emphasis'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    }
+  }
+};
+
+const getStateStyles = (props, prop, state) => {
+  const {
+    blocked,
+    disabled,
+    focused,
+    selected,
+    today
+  } = props;
+
+  if (selected) {
+    switch (selected) {
+      case 'start':
+        return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
+
+      case 'middle':
+        return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
+
+      case 'end':
+        return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
+
+      default:
+        return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
+    }
+  } else if (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else if (focused) {
+    return states.default.hover[prop];
+  } else {
+    return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
+  }
+};
+
+const DayComponent = styled(DayBaseComponent).attrs(props => ({
+  background: getStateStyles(props, 'background', 'normal'),
+  borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
+  textColor: getStateStyles(props, 'color', 'normal'),
+  backgroundHover: getStateStyles(props, 'background', 'hover'),
+  textColorHover: getStateStyles(props, 'color', 'hover'),
+  backgroundPressed: getStateStyles(props, 'background', 'pressed'),
+  textColorPressed: getStateStyles(props, 'color', 'pressed')
+})).withConfig({
+  displayName: "Day__DayComponent",
+  componentId: "sc-1japneh-1"
+})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;user-select:none;transition:0.1s color ease;width:30px;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
+export const Day = ({
+  date,
+  onAction
+}) => {
+  const {
+    onDayFocus,
+    onSelection,
+    disabled,
+    blocked,
+    focused,
+    selected,
+    today
+  } = useDatePicker(date);
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onSelection(date);
+      onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+    }
+  }, [disabled, onSelection, onAction, date]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onSelection(date);
+    onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+  }, [disabled, onSelection, date, onAction]);
+  const todayStyles = useMemo(() => today ? {
+    border: '2px solid',
+    padding: '4px 6px',
+    borderRadius: '16px',
+    fontWeight: 'bold'
+  } : {}, [today]);
+  return /*#__PURE__*/React.createElement(DayComponent, {
+    role: "gridcell",
+    "aria-disabled": disabled,
+    "aria-selected": selected !== false,
+    blocked: blocked,
+    disabled: disabled,
+    focused: focused,
+    selected: selected,
+    today: today,
+    onClick: clickHandler,
+    onMouseEnter: () => onDayFocus(date),
+    onFocus: () => onDayFocus(date),
+    onKeyPress: keyPressHandler
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: todayStyles
+  }, date.getDate()));
+};
+Day.displayName = "Day";
+export const BlankDay = styled(DayBaseComponent).withConfig({
+  displayName: "Day__BlankDay",
+  componentId: "sc-1japneh-2"
+})(["background-color:", ";"], get('colors.canvas.primary'));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
+    date: Date;
+}
+export declare const Month: React.FC<MonthProps>;

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;height:", ";justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'), get('space.4'));
+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 = ({
+  date
+}) => {
+  const {
+    configuration
+  } = useDatePicker();
+  const [selectedDay, setSelectedDay] = useState(null);
+  const getTitle = useMemo(() => `${format(new Date(date), 'MMMM yyyy')}`, [date]);
+  const weekdayHeaders = 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 eachDayOfInterval({
+      start: startOfWeek(now, weekOptions),
+      end: endOfWeek(now, weekOptions)
+    }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, format(d, 'EEEEEE')));
+  }, [configuration.weekStartsOn, date]);
+
+  const dayAction = day => {
+    setSelectedDay(day);
+  };
+
+  const dayComponents = 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.createElement(BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
+      const day = new Date(date.getFullYear(), date.getMonth(), i);
+      components.push( /*#__PURE__*/React.createElement(Day, {
+        key: `day-component-${day.toString()}`,
+        date: day,
+        selected: selectedDay ? isEqual(day, 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, date, selectedDay]);
+  return /*#__PURE__*/React.createElement(MonthComponent, {
+    role: "grid",
+    "aria-labelledby": `${date.getMonth()} ${date.getFullYear()}`
+  }, /*#__PURE__*/React.createElement(MonthTitle, {
+    "aria-live": "polite"
+  }, !configuration.compressedHeader ? getTitle : ''), weekdayHeaders, dayComponents);
+};
+Month.displayName = "Month";

package/lib-esm/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-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,
+  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 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 && !rawFormat) 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,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>;