@fibery/ui-kit 1.35.0 → 1.36.1

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

@@ -0,0 +1,90 @@
+import {DatePickerCommonProps, NativeSingleDatePickerProps} from "./types";
+import {forwardRef, useCallback, useMemo, useRef, useState} from "react";
+import {DayPicker} from "react-day-picker";
+import enGB from "date-fns/locale/en-GB";
+import {SingleDateInput} from "./single-date-input";
+import {copyTime} from "./day-with-start-end-buttons";
+import {formatDateInputValue, getRandomPlaceholder} from "./utils";
+import {
+  datePickerStylesOverrideClassName,
+  outsideClassName,
+  selectedSingleDateClassName,
+  todayClassName,
+  weekendClassName,
+} from "./styles";
+import {getWeekendsForMonth} from "./get-weekends-for-month";
+
+export const SingleDatePickerPopupContent = forwardRef<
+  {setValue: (value: string) => void},
+  DatePickerCommonProps & NativeSingleDatePickerProps
+>(function SingleDatePickerPopupContent(props, ref) {
+  const {
+    value,
+    onChange,
+    disabled = false,
+    showTime = false,
+    allowClear = true,
+    dateFormat,
+    timeFormat,
+    dateTimeFormat,
+    onKeyDown,
+    bypassedRef,
+    weekStartsOn,
+    weekends,
+  } = props;
+  const [month, setMonth] = useState(value || new Date());
+  const dateValue = value;
+  const onDayClick = useCallback(
+    (date: Date) => {
+      onChange(copyTime(dateValue, date));
+    },
+    [dateValue, onChange]
+  );
+
+  const inputValue = formatDateInputValue(value, {showTime, dateFormat, dateTimeFormat});
+  const placeholder = useRef<string>(`e.g. ${getRandomPlaceholder(showTime, false)}`);
+
+  const weekendsForMonth = useMemo(() => getWeekendsForMonth(month, weekends), [month, weekends]);
+
+  return (
+    <div className={datePickerStylesOverrideClassName} ref={bypassedRef} onKeyDown={onKeyDown}>
+      <SingleDateInput
+        ref={ref}
+        value={dateValue}
+        showTime={showTime}
+        dateFormat={dateFormat}
+        timeFormat={timeFormat}
+        dateTimeFormat={dateTimeFormat}
+        onMonthChange={setMonth}
+        onChange={onChange}
+        initialInputValue={inputValue}
+        allowClear={allowClear}
+        disabled={disabled}
+        placeholder={placeholder.current}
+        autoFocus
+      />
+      <DayPicker
+        mode={"single"}
+        numberOfMonths={1}
+        showOutsideDays
+        month={month}
+        onMonthChange={setMonth}
+        modifiers={{
+          weekend: weekendsForMonth,
+        }}
+        modifiersClassNames={{
+          selected: selectedSingleDateClassName,
+          today: todayClassName,
+          outside: outsideClassName,
+          weekend: weekendClassName,
+        }}
+        selected={dateValue || undefined}
+        onDayClick={onDayClick}
+        disabled={disabled}
+        locale={enGB}
+        weekStartsOn={weekStartsOn}
+        fixedWeeks
+      />
+    </div>
+  );
+});

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;