@fibery/ui-kit 1.35.0 → 1.36.0

package/src/date-picker/single-date-picker.tsx

@@ -0,0 +1,243 @@
+import {ControlledDatePickerProps, RelativeDateValue, SingleDatePickerProps} from "./types";
+import {FakeDateInputWrapper} from "./fake-date-input";
+import {space, themeVars} from "../design-system";
+import {withPopupControl} from "./with-popup-control";
+import {css} from "@linaria/core";
+import "react-day-picker/dist/style.css";
+import {SingleDatePickerPopupContent} from "./single-date-picker-popup-content";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {forwardRef, useCallback, useRef, useState} from "react";
+import moment, {Moment} from "moment";
+import _ from "lodash";
+import {EmptyValue} from "../empty-value";
+import {formatDateInputValue} from "./utils";
+import {Popup} from "../popup";
+import {focusable} from "tabbable";
+import {TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
+import {RelativeDatePicker} from "./relative-date-picker";
+import {$TSFixMe} from "../tsfixme";
+
+const tabItemClassName = css`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;
+
+const tabNavLinkClassName = css`
+  justify-content: center;
+`;
+
+const isRelativeDatePlaceholder = (value: $TSFixMe) => {
+  return (
+    value !== null &&
+    Object.hasOwn(value, "isBeforeNow") &&
+    Object.hasOwn(value, "unit") &&
+    Object.hasOwn(value, "amount")
+  );
+};
+
+const formatRelativeDate = (value: RelativeDateValue) => {
+  if (value.amount === 0) {
+    return "today";
+  } else if (value.amount === 1 && value.unit === "day" && !value.isBeforeNow) {
+    return "tomorrow";
+  } else if (value.amount === 1 && value.unit === "day" && value.isBeforeNow) {
+    return "yesterday";
+  } else {
+    return `${value.amount} ${value.unit}s ${value.isBeforeNow ? "ago" : "from now"}`;
+  }
+};
+
+export type UncontrolledSingleDatePickerProps<IsRelativeDate extends boolean = false> = Omit<
+  SingleDatePickerProps<IsRelativeDate>,
+  keyof ControlledDatePickerProps
+>;
+
+interface SingleDatePickerWithForwardRefType extends React.FC<SingleDatePickerProps<boolean>> {
+  <T extends boolean>(
+    props: SingleDatePickerProps<T> & {
+      ref?: React.Ref<{setValue: (value: string) => void}>;
+    }
+  ): ReturnType<React.FC<SingleDatePickerProps<T>>>;
+}
+
+interface ControlledSingleDatePickerWithForwardRefType extends React.FC<UncontrolledSingleDatePickerProps<boolean>> {
+  <T extends boolean>(props: UncontrolledSingleDatePickerProps<T>): ReturnType<
+    React.FC<UncontrolledSingleDatePickerProps<T>>
+  >;
+}
+
+export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
+  {
+    setValue: (value: string) => void;
+  },
+  SingleDatePickerProps<boolean>
+>((props, ref) => {
+  const {
+    open,
+    onOpen,
+    onClose,
+    children,
+    bypassedRef,
+    value,
+    disabled = false,
+    placeholder,
+    renderInPortal = true,
+    onChange,
+    showTime = false,
+    dateFormat,
+    dateTimeFormat,
+    onKeyDown,
+    allowRelativeDate = false,
+    relativeDateToExactDate,
+  } = props;
+
+  const isRelativeValue = allowRelativeDate ? isRelativeDatePlaceholder(value) : false;
+
+  const dateValueFormatted = isRelativeValue
+    ? formatRelativeDate(value as RelativeDateValue)
+    : value
+    ? formatDateInputValue((value as Moment).toDate(), {
+        showTime,
+        dateFormat,
+        dateTimeFormat,
+      })
+    : null;
+  const onDateChange = useCallback(
+    (value: Date | null) => {
+      // @ts-expect-error fix types
+      onChange(value ? moment(value) : null, false);
+    },
+    [onChange]
+  );
+
+  const onRelativeDateChange = useCallback(
+    (value: RelativeDateValue) => {
+      // @ts-expect-error fix types
+      onChange(value, true);
+    },
+    [onChange]
+  );
+
+  const fakeWrapperRef = useRef<HTMLDivElement>(null);
+
+  const pickerValue = children || (
+    <FakeDateInputWrapper disabled={disabled} isPickerOpen={open}>
+      {!dateValueFormatted ? <EmptyValue>{placeholder}</EmptyValue> : <>{dateValueFormatted}</>}
+    </FakeDateInputWrapper>
+  );
+
+  const onDatePickerKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Tab" || e.key === "Enter") {
+        e.stopPropagation();
+      } else if (e.key === "Escape") {
+        if (fakeWrapperRef.current) {
+          const focusableElements = focusable(fakeWrapperRef.current);
+          if (focusableElements && focusableElements[0]) {
+            focusableElements[0].focus();
+          }
+        }
+      }
+      onKeyDown?.(e);
+    },
+    [onKeyDown]
+  );
+
+  const [activeButton, setActiveButton] = useState<"exact" | "relative">(
+    allowRelativeDate && (isRelativeValue || value === null) ? "relative" : "exact"
+  );
+
+  if (disabled) {
+    return pickerValue;
+  }
+
+  return (
+    <div ref={bypassedRef}>
+      <Popup
+        offset={[0, space.s6]}
+        trigger={
+          <div ref={fakeWrapperRef} onClick={stopPropagation}>
+            {pickerValue}
+          </div>
+        }
+        placement="bottom-start"
+        open={open}
+        onOpen={onOpen}
+        onClose={onClose}
+        popupContainerClassName={css`
+          z-index: 10001;
+        `}
+        renderInPortal={renderInPortal}
+        preventOverflowOptions={{
+          altAxis: true,
+        }}
+      >
+        {allowRelativeDate ? (
+          <div
+            className={css`
+              border-bottom: ${themeVars.separators.opacity5};
+            `}
+          >
+            <TabNavRoot>
+              <TabNavList
+                className={css`
+                  padding-left: ${space.s12}px;
+                  padding-right: ${space.s12}px;
+                  padding-top: ${space.s6}px;
+                  display: flex;
+                  width: 100%;
+                  justify-content: space-evenly;
+                `}
+              >
+                <TabNavLink
+                  className={tabNavLinkClassName}
+                  itemClassName={tabItemClassName}
+                  active={activeButton === "relative"}
+                  onSelect={() => setActiveButton("relative")}
+                >
+                  Relative
+                </TabNavLink>
+                <TabNavLink
+                  className={tabNavLinkClassName}
+                  itemClassName={tabItemClassName}
+                  active={activeButton === "exact"}
+                  onSelect={() => setActiveButton("exact")}
+                >
+                  Exact
+                </TabNavLink>
+              </TabNavList>
+            </TabNavRoot>
+          </div>
+        ) : null}
+        <div
+          style={allowRelativeDate ? {minWidth: 320} : undefined}
+          className={css`
+            width: 100%;
+          `}
+        >
+          {!allowRelativeDate || activeButton === "exact" ? (
+            <SingleDatePickerPopupContent
+              ref={ref}
+              {..._.omit(props, ["onChange", "value"])}
+              onChange={onDateChange}
+              value={!isRelativeValue && value ? (value as Moment).toDate() : null}
+              onKeyDown={onDatePickerKeyDown}
+            />
+          ) : (
+            <RelativeDatePicker
+              value={isRelativeValue ? (value as RelativeDateValue) : null}
+              onChange={onRelativeDateChange}
+              relativeDateToExactDate={relativeDateToExactDate}
+            />
+          )}
+        </div>
+      </Popup>
+    </div>
+  );
+});
+
+export const ControlledSingleDatePicker: ControlledSingleDatePickerWithForwardRefType =
+  withPopupControl(SingleDatePicker);

package/src/date-picker/styles.ts

@@ -0,0 +1,262 @@
+import {css} from "@linaria/core";
+import {inputOverrides} from "../antd/styles";
+import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
+
+export const selectedStyle = css`
+  ${inputOverrides.focus}
+`;
+export const disabledStyle = css`
+  ${inputOverrides.disabled}
+`;
+export const fakeDateInputStyle = css`
+  ${{
+    ...inputOverrides.main,
+    ...textStyles.regular,
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  }}
+`;
+export const activeClassName = css`
+  ${{
+    "&:hover": inputOverrides.hover,
+    "&:focus": inputOverrides.focus,
+  }}
+`;
+export const disabledClassName = css`
+  ${inputOverrides.disabled}
+`;
+export const selectedClassName = css`
+  background-color: ${themeVars.opacity.opacity20};
+  border-radius: 0;
+  border: none;
+`;
+export const selectedSingleDateClassName = css`
+  border-radius: ${border.radius12}px !important;
+  background-color: var(--rdp-accent-color-dark) !important;
+  color: ${themeVars.whiteColor} !important;
+`;
+export const startRangeClassName = css`
+  border-radius: var(--rdp-start-border-radius) !important;
+  background-color: var(--rdp-accent-color-dark) !important;
+  color: ${themeVars.whiteColor} !important;
+`;
+export const endRangeClassName = css`
+  border-radius: var(--rdp-end-border-radius) !important;
+  background-color: var(--rdp-accent-color-dark) !important;
+  color: ${themeVars.whiteColor} !important;
+`;
+export const todayClassName = css`
+  color: var(--rdp-accent-color) !important;
+  font-weight: ${fontWeight.semibold} !important;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: ${border.radius12}px;
+    border: 2px solid var(--rdp-accent-color);
+    z-index: 200;
+  }
+`;
+export const outsideClassName = css`
+  & span {
+    opacity: 0.4;
+  }
+`;
+export const weekendClassName = css`
+  /* Increase specificity to override default style, but not to override selected style */
+  &&& {
+    color: ${themeVars.accentTextColor};
+  }
+`;
+const hoverGradient = `${themeVars.transparent} 0%,
+      ${themeVars.opacity.opacity10} 40%,
+      ${themeVars.opacity.opacity20} 60%,
+      ${themeVars.opacity.opacity30} 100%`;
+const focusGradient = `${themeVars.transparent} 0%,
+      ${themeVars.opacity.opacity20} 40%,
+      ${themeVars.opacity.opacity40} 60%,
+      ${themeVars.opacity.opacity60} 100%`;
+export const startButtonClassName = css`
+  flex-grow: 1;
+  border-radius: var(--rdp-start-border-radius) !important;
+  mix-blend-mode: ${themeVars.inputBorderBlendMode};
+  border: none !important;
+
+  &:hover {
+    background: linear-gradient(-90deg, ${hoverGradient}) !important;
+  }
+
+  &:focus,
+  &:active {
+    background: linear-gradient(-90deg, ${focusGradient}) !important;
+  }
+`;
+export const endButtonClassName = css`
+  flex-grow: 1;
+  border-radius: var(--rdp-end-border-radius) !important;
+  mix-blend-mode: ${themeVars.inputBorderBlendMode};
+  border: none !important;
+
+  &:hover {
+    background: linear-gradient(90deg, ${hoverGradient}) !important;
+  }
+
+  &:focus,
+  &:active {
+    background: linear-gradient(90deg, ${focusGradient}) !important;
+  }
+`;
+export const datePickerStylesOverrideClassName = css`
+  .rdp {
+    --rdp-cell-size: 36px;
+    --rdp-start-border-radius: ${border.radius12}px 0 0 ${border.radius12}px;
+    --rdp-end-border-radius: 0 ${border.radius12}px ${border.radius12}px 0;
+
+    --rdp-accent-color: ${themeVars.opacity.opacity80};
+    --rdp-background-color: ${themeVars.opacity.opacity20};
+    --rdp-accent-color-dark: ${themeVars.opacity.opacity80};
+    --rdp-background-color-dark: ${themeVars.opacity.opacity35};
+    --rdp-outline: 2px solid var(--rdp-accent-color);
+    --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
+    z-index: 0;
+    position: relative;
+
+    margin: 0;
+  }
+
+  padding: ${space.s12}px;
+
+  .rdp-table,
+  .rdp-month {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .rdp-day {
+    ${textStyles.regular};
+    border: none;
+    color: ${themeVars.textColor};
+    border-radius: 0;
+  }
+
+  .rdp-day:focus {
+    border: none !important;
+  }
+
+  .rdp-day.${startRangeClassName}.${endRangeClassName} {
+    border-radius: ${border.radius12}px !important;
+  }
+
+  .rdp-day.${startRangeClassName}.${endRangeClassName}.${todayClassName} {
+    &::before {
+      border-radius: ${border.radius12}px !important;
+    }
+  }
+
+  .rdp-day.${startRangeClassName}.${outsideClassName},
+    .rdp-day.${endRangeClassName}.${outsideClassName},
+    .rdp-day.${startRangeClassName}.${outsideClassName}.${todayClassName},
+    .rdp-day.${endRangeClassName}.${outsideClassName}.${todayClassName},
+    .rdp-day.${startRangeClassName}.${todayClassName},
+    .rdp-day.${endRangeClassName}.${todayClassName},
+    .rdp-day.${selectedSingleDateClassName}.${todayClassName} {
+    color: ${themeVars.whiteColor} !important;
+
+    & span {
+      opacity: 1;
+    }
+  }
+
+  .rdp-day.${endRangeClassName}.${todayClassName} {
+    &::before {
+      border-radius: var(--rdp-end-border-radius) !important;
+    }
+  }
+
+  .rdp-day.${startRangeClassName}.${todayClassName} {
+    &::before {
+      border-radius: var(--rdp-start-border-radius) !important;
+    }
+  }
+
+  .rdp-day.${outsideClassName}.${todayClassName} {
+    color: var(--rdp-accent-color);
+
+    & span {
+      opacity: 1;
+    }
+  }
+
+  .range_start .rdp-button {
+    mix-blend-mode: multiply;
+  }
+
+  .range_end .rdp-button {
+    mix-blend-mode: multiply;
+  }
+
+  .rdp-head th {
+    ${textStyles.small};
+    color: ${themeVars.disabledTextColor};
+  }
+
+  .rdp-caption_label {
+    ${textStyles.heading4};
+    font-weight: ${fontWeight.semibold};
+  }
+
+  .rdp-nav_button {
+    border-radius: ${border.radius6}px;
+    width: ${space.s24}px;
+    height: ${space.s24}px;
+    border: none !important;
+    padding: ${space.s6}px !important;
+  }
+
+  .rdp-nav_icon {
+    color: ${themeVars.textColor};
+  }
+
+  .rdp-button.rdp-day {
+    border-radius: ${border.radius12}px;
+  }
+
+  .rdp-button.rdp-day.${selectedSingleDateClassName}.${outsideClassName} {
+    & span {
+      opacity: 1;
+    }
+  }
+`;
+export const dayWrapper = css`
+  display: flex;
+  height: 100%;
+  position: relative;
+`;
+export const dayContentClassName = css`
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const dayButtonsContainerClassName = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+`;

package/src/date-picker/types.ts

@@ -0,0 +1,56 @@
+import {Moment} from "moment";
+import {$TSFixMe} from "../tsfixme";
+import {ReactNode} from "react";
+
+export type RelativeDateValue = {isBeforeNow: boolean; unit: string; amount: number};
+
+export type MomentSingleDateProps<AllowRelativeDate extends boolean = false> = {
+  value: AllowRelativeDate extends true ? Moment | RelativeDateValue | null : Moment | null;
+  onChange: AllowRelativeDate extends true
+    ? (value: Moment | RelativeDateValue | null, isRelativeDate?: boolean) => void
+    : (value: Moment | null) => void;
+};
+
+export type NativeSingleDatePickerProps = {
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+};
+
+export type DatePickerCommonProps = {
+  showTime?: boolean;
+  showToday?: boolean;
+  showInput?: boolean;
+  header?: ReactNode;
+  children?: JSX.Element;
+  allowClear?: boolean;
+  bypassedRef?: React.Ref<$TSFixMe>;
+  disabled?: boolean;
+  renderInPortal?: boolean;
+  onKeyDown?: React.KeyboardEventHandler<$TSFixMe>;
+  placeholder: string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+  dateFormat?: string;
+  timeFormat?: string;
+  dateTimeFormat?: string;
+  weekends: number[];
+};
+
+export type MomentDateRangeProps = {
+  value: [Moment | null, Moment | null];
+  onChange: (momentDate: [Moment | null, Moment | null]) => void;
+};
+
+export type NativeDateRangePickerProps = {
+  value: [Date | null, Date | null];
+  onChange: (date: [Date | null, Date | null]) => void;
+};
+
+export type ControlledDatePickerProps = {open: boolean; onOpen: () => void; onClose: () => void};
+
+export type SingleDatePickerProps<IsRelativeDate extends boolean = false> = DatePickerCommonProps &
+  ControlledDatePickerProps &
+  MomentSingleDateProps<IsRelativeDate> & {
+    allowRelativeDate?: IsRelativeDate;
+  } & (IsRelativeDate extends true
+    ? {relativeDateToExactDate?: (value: RelativeDateValue) => string} // Required if IsRelativeDate is true
+    : {relativeDateToExactDate?: never}); // Undefined if IsRelativeDate is false;

package/src/date-picker/utils.ts

@@ -0,0 +1,110 @@
+import {datesSeparator, hourMinuteSeparator} from "./constants";
+import moment from "moment";
+import * as chrono from "chrono-node";
+import {
+  dateFormat as defaultDateFormat,
+  timeFormat as defaultTimeFormat,
+  dateTimeFormat as defaultDateTimeFormat,
+} from "../design-system";
+
+export const getLocaleSpecificChrono = () => {
+  // We use a single exception here - to support US date order, like m/d/y
+  if (navigator.language.toLowerCase().endsWith("-us")) {
+    return chrono.en;
+  }
+  // Otherwise, use european-style d/m/y
+  return chrono.en.GB;
+};
+
+export const getTimeIntervals = (value: string) => {
+  const timeSeparator = value.indexOf(hourMinuteSeparator);
+  return [timeSeparator - 2, timeSeparator + 6]; // 5 is for possible am/pm part
+};
+
+export const formatDateInputValue = (
+  value: Date | null,
+  options: {dateTimeFormat?: string; dateFormat?: string; showTime?: boolean} = {}
+) => {
+  const {showTime, dateFormat = defaultDateFormat, dateTimeFormat = defaultDateTimeFormat} = options;
+  const format = showTime ? dateTimeFormat : dateFormat;
+  return value ? moment(value).format(format) : "";
+};
+
+export const setTime = (date: Date | null, time: string, format: string = defaultTimeFormat) => {
+  if (!date) {
+    return null;
+  }
+  const timeValue = moment(time, format);
+  return moment(date).set({hour: timeValue.hour(), minute: timeValue.minute()}).toDate();
+};
+
+export const formatDateRangeInputValue = (
+  from: Date | null,
+  to: Date | null,
+  options: {showTime?: boolean; short?: boolean; dateFormat?: string; timeFormat?: string; dateTimeFormat?: string} = {}
+) => {
+  if (!from && !to) {
+    return "";
+  }
+  const {
+    showTime,
+    short,
+    dateFormat = defaultDateFormat,
+    timeFormat = defaultTimeFormat,
+    dateTimeFormat = defaultDateTimeFormat,
+  } = options;
+  const format = showTime ? dateTimeFormat : dateFormat;
+  const fromMoment = from ? moment(from) : null;
+  const toMoment = to ? moment(to) : null;
+  const sameDay = fromMoment && toMoment && fromMoment.isSame(toMoment, "day");
+  if (showTime && short && sameDay) {
+    return `${fromMoment.format(dateFormat)} ${fromMoment.format(timeFormat)}${datesSeparator}${toMoment.format(
+      timeFormat
+    )}`;
+  }
+  return `${fromMoment ? fromMoment.format(format) : "No Start Date"}${datesSeparator}${showTime ? "\n" : ""}${
+    toMoment ? toMoment.format(format) : "No End Date"
+  }`;
+};
+
+export const getDateRangeIntervals = (value: string) => {
+  const [startDate] = value.split(datesSeparator);
+
+  return {
+    startDateInterval: [0, startDate.length],
+    endDateInterval: [startDate.length + datesSeparator.length, value.length],
+  };
+};
+
+export const getDateTimeRangeIntervals = (value: string) => {
+  const [startDate, endDate] = value.split(datesSeparator);
+  if (!startDate || !endDate) {
+    return {
+      startDateInterval: null,
+      endDateInterval: null,
+    };
+  }
+  const timeSeparatorStart = startDate.indexOf(hourMinuteSeparator);
+  const timeSeparatorEnd = value.indexOf(datesSeparator) + datesSeparator.length + endDate.indexOf(hourMinuteSeparator);
+  return {
+    startTimeInterval: [timeSeparatorStart - 2, timeSeparatorStart + 3],
+    endTimeInterval: [timeSeparatorEnd - 2, timeSeparatorEnd + 3],
+  };
+};
+const currentMonth = moment().format("MMM");
+const dateRangeTimePlaceholders = [`today 12-14:00`, `next Friday 10pm - 12am`, `10 - 14 ${currentMonth}`];
+const dateRangePlaceholders = [`today - next Friday`, `9 - 12 ${currentMonth}`, `5 days ago - tomorrow`];
+const singleDateTimePlaceholders = [`today 12:00`, `next Friday 10pm`, `10 ${currentMonth} 14:00`];
+const singleDatePlaceholders = [`today`, `next Friday`, `10 ${currentMonth}`];
+
+export const getRandomPlaceholder = (showTime: boolean, isRange: boolean) => {
+  if (showTime) {
+    return isRange
+      ? dateRangeTimePlaceholders[Math.floor(Math.random() * dateRangeTimePlaceholders.length)]
+      : singleDateTimePlaceholders[Math.floor(Math.random() * dateRangeTimePlaceholders.length)];
+  } else {
+    return isRange
+      ? dateRangePlaceholders[Math.floor(Math.random() * dateRangePlaceholders.length)]
+      : singleDatePlaceholders[Math.floor(Math.random() * dateRangePlaceholders.length)];
+  }
+};