@navikt/ds-react 1.2.2 → 1.3.0-alpha.0

package/src/datepicker/utils/dates-disabled.ts

@@ -0,0 +1,26 @@
+import { isSameDay } from "date-fns";
+import { isDateRange } from "react-day-picker";
+
+// TODO: ((date: Date) => boolean)
+export const disableDate = (
+  disabledSelection: Date | Array<any>,
+  date: Date
+): boolean => {
+  let result: boolean = false;
+  if (disabledSelection instanceof Date) {
+    return isSameDay(disabledSelection, date);
+  } else if (disabledSelection instanceof Array) {
+    for (let i = 0; i < disabledSelection.length; i++) {
+      const selection = disabledSelection[i];
+      if (isDateRange(selection)) {
+        if (selection.from && selection.to) {
+          result = date >= selection.from && date <= selection.to;
+        }
+      } else if (selection instanceof Date) {
+        result = isSameDay(selection, date);
+      }
+      if (result) break;
+    }
+  }
+  return result;
+};

package/src/datepicker/utils/format-date.ts

@@ -0,0 +1,5 @@
+import { format } from "date-fns";
+import { INPUT_DATE_STRING_FORMAT } from "./parse-date";
+
+export const formatDateForInput = (date: Date, locale: Locale) =>
+  format(date, INPUT_DATE_STRING_FORMAT, { locale });

package/src/datepicker/utils/get-dates.ts

@@ -0,0 +1,44 @@
+import {
+  isSameYear,
+  setMonth,
+  setYear,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
+
+export const getMonths = (start: Date, end: Date, current: Date): Date[] => {
+  const dropdownMonths: Date[] = [];
+
+  if (isSameYear(start, end)) {
+    const date = startOfMonth(start);
+    for (let month = start.getMonth(); month <= end.getMonth(); month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else if (isSameYear(current, end)) {
+    const date = startOfMonth(new Date());
+    for (let month = 0; month <= end.getMonth(); month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else if (isSameYear(current, start)) {
+    const date = startOfMonth(start);
+    for (let month = date.getMonth(); month <= 11; month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  } else {
+    const date = startOfMonth(new Date());
+    for (let month = 0; month <= 11; month++) {
+      dropdownMonths.push(setMonth(date, month));
+    }
+  }
+  return dropdownMonths;
+};
+
+export const getYears = (start: Date, end: Date): Date[] => {
+  const years: Date[] = [];
+  const fromYear = start.getFullYear();
+  const toYear = end.getFullYear();
+  for (let year = fromYear; year <= toYear; year++) {
+    years.push(setYear(startOfYear(new Date()), year));
+  }
+  return years;
+};

package/src/datepicker/utils/index.ts

@@ -0,0 +1,6 @@
+export { formatDateForInput } from "./format-date";
+export { getMonths, getYears } from "./get-dates";
+export { labelMonthDropdown, labelYearDropdown, labels } from "./labels";
+export { INPUT_DATE_STRING_FORMAT, parseDate } from "./parse-date";
+export { getLocaleFromString } from "./locale";
+export { isValidDate } from "./valid-date";

package/src/datepicker/utils/labels.ts

@@ -0,0 +1,58 @@
+import { Labels, NavButtonLabel } from "react-day-picker";
+
+const labelNext: NavButtonLabel = (date, options) => {
+  switch (options?.locale?.code) {
+    case "nb":
+      return "Gå til neste månede";
+    case "nn":
+      return "Gå til neste månede";
+    case "en":
+      return "Go to next month";
+    default:
+      return "Gå til neste månede";
+  }
+};
+
+const labelPrevious: NavButtonLabel = (date, options) => {
+  switch (options?.locale?.code) {
+    case "nb":
+      return "Gå til forrige månede";
+    case "nn":
+      return "Gå til forrige månede";
+    case "en":
+      return "Go to previous month";
+    default:
+      return "Gå til forrige månede";
+  }
+};
+
+export const labelYearDropdown = (locale: Locale) => {
+  switch (locale?.code) {
+    case "nb":
+      return "År";
+    case "nn":
+      return "År";
+    case "en":
+      return "Year";
+    default:
+      return "År";
+  }
+};
+
+export const labelMonthDropdown = (locale: Locale) => {
+  switch (locale?.code) {
+    case "nb":
+      return "Månede";
+    case "nn":
+      return "Månede";
+    case "en":
+      return "Month";
+    default:
+      return "Månede";
+  }
+};
+
+export const labels: Partial<Labels> = {
+  labelNext,
+  labelPrevious,
+};

package/src/datepicker/utils/locale.ts

@@ -0,0 +1,15 @@
+import enGB from "date-fns/locale/en-GB";
+import nb from "date-fns/locale/nb";
+import nn from "date-fns/locale/nn";
+
+/** @private */
+export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
+  switch (locale) {
+    case "nn":
+      return nn;
+    case "en":
+      return enGB;
+    default:
+      return nb;
+  }
+};

package/src/datepicker/utils/parse-date.ts

@@ -0,0 +1,28 @@
+import { parse } from "date-fns";
+import { isValidDate } from "./valid-date";
+
+export const INPUT_DATE_STRING_FORMAT = "dd.MM.yyyy";
+
+const ALLOWED_INPUT_FORMATS = [
+  "ddMMyy",
+  "d.M.yy",
+  "dd.MM.yy",
+  "dd/MM/yy",
+  "dd-MM-yy",
+  INPUT_DATE_STRING_FORMAT,
+  "ddMMyyyy",
+  "dd/MM/yyyy",
+  "dd-MM-yyyy",
+  "d.M.yyyy",
+];
+
+export const parseDate = (date: string, today: Date, locale: Locale) => {
+  let parsed;
+  for (const format of ALLOWED_INPUT_FORMATS) {
+    parsed = parse(date, format, today, { locale });
+    if (isValidDate(parsed)) {
+      return parsed;
+    }
+  }
+  return parsed;
+};

package/src/datepicker/utils/valid-date.ts

@@ -0,0 +1,4 @@
+/** @private */
+export function isValidDate(day: Date): boolean {
+  return !isNaN(day.getTime());
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./accordion";
 export * from "./alert";
 export * from "./button";
+export * from "./datepicker";
 export * from "./form";
 export * from "./grid";
 export * from "./help-text";

package/src/monthpicker/MonthPicker.tsx

@@ -0,0 +1,238 @@
+import { Left, Right } from "@navikt/ds-icons";
+import cl from "clsx";
+import {
+  compareAsc,
+  format,
+  isSameYear,
+  setMonth,
+  setYear,
+  startOfMonth,
+  startOfYear,
+} from "date-fns";
+import NB from "date-fns/locale/nb";
+import React, { forwardRef, useState } from "react";
+import { RootProvider, useDayPicker, useNavigation } from "react-day-picker";
+import { BodyShort, Select } from "..";
+import { dateIsInCurrentMonth, dateIsSelected } from "./utils/check-dates";
+
+export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  mode?: "month";
+  /**
+   * The earliest day to start the month navigation.
+   */
+  fromDate?: Date;
+  /**
+   * The latest day to end the month navigation.
+   */
+  toDate?: Date;
+  /**
+   * Changes monthpicker locale
+   * @default "nb" (norsk bokmål)
+   */
+  locale?: "nb" | "nn" | "en";
+  /**
+   * Adds a `Select` for picking Year
+   * Needs `fromDate` + `toDate` to be set!
+   * @default false
+   */
+  yearSelector?: boolean;
+}
+
+const TestCaption = ({
+  selected,
+  onSelect,
+  isValidYearSelector,
+  yearSelector,
+}: {
+  selected: Date;
+  onSelect: (m: Date) => void;
+  isValidYearSelector: boolean;
+  yearSelector: boolean;
+}) => {
+  const { nextMonth, previousMonth } = useNavigation();
+  const {
+    fromDate,
+    toDate,
+    formatters: { formatYearCaption },
+    locale,
+  } = useDayPicker();
+
+  const [yearState, setYearState] = useState<Date>(selected);
+  const years: Date[] = [];
+
+  if (yearSelector && fromDate && toDate) {
+    const fromYear = fromDate.getFullYear();
+    const toYear = toDate.getFullYear();
+    for (let year = fromYear; year <= toYear; year++) {
+      years.push(setYear(startOfYear(new Date()), year));
+    }
+  }
+
+  const handleYearChange = (e) => {
+    const newMonth = setYear(startOfMonth(selected), Number(e.target.value));
+    setYearState(newMonth);
+    onSelect(newMonth);
+  };
+
+  const handleButtonClick = (val) => {
+    const newMonth = setYear(
+      startOfMonth(selected),
+      yearState.getFullYear() + val
+    );
+    setYearState(newMonth);
+    onSelect(newMonth);
+  };
+
+  return (
+    <div className="navds-monthpicker__caption">
+      <button
+        className="navds-monthpicker__caption-button"
+        disabled={!previousMonth}
+        onClick={() =>
+          years.some((x) => yearState.getFullYear() - 1 === x.getFullYear()) &&
+          handleButtonClick(-1)
+        }
+      >
+        <Left aria-hidden />
+      </button>
+
+      {isValidYearSelector ? (
+        <Select
+          label="velg år"
+          hideLabel
+          value={selected?.getFullYear()}
+          onChange={handleYearChange}
+          style={{ width: "79px" }}
+        >
+          {years.map((year) => (
+            <option key={year.getFullYear()} value={year.getFullYear()}>
+              {formatYearCaption(year, { locale })}
+            </option>
+          ))}
+        </Select>
+      ) : (
+        <span className="navds-monthpicker__year-label" aria-live="polite">
+          {yearState.getFullYear()}
+        </span>
+      )}
+      <button
+        className="navds-monthpicker__caption-button"
+        disabled={!nextMonth}
+        onClick={() =>
+          years.some((x) => yearState.getFullYear() + 1 === x.getFullYear()) &&
+          handleButtonClick(1)
+        }
+      >
+        <Right aria-hidden />
+      </button>
+    </div>
+  );
+};
+
+const MonthSelector = ({
+  onSelect,
+  selected,
+}: {
+  onSelect: (m: Date) => void;
+  selected: Date;
+}) => {
+  const months: Date[] = [];
+  const {
+    fromDate,
+    toDate,
+    formatters: { formatYearCaption, formatMonthCaption },
+    locale,
+  } = useDayPicker();
+
+  if (!fromDate) return <></>;
+  if (!toDate) return <></>;
+
+  if (isSameYear(fromDate, toDate)) {
+    const date = startOfMonth(fromDate);
+    for (let month = fromDate.getMonth(); month <= toDate.getMonth(); month++) {
+      months.push(setMonth(date, month));
+    }
+  } else {
+    const date = startOfMonth(new Date());
+    for (let month = 0; month <= 11; month++) {
+      months.push(setMonth(date, month));
+    }
+  }
+
+  const hideMonth = (month: Date) => {
+    return compareAsc(month, fromDate) === -1;
+  };
+  return (
+    <BodyShort as="div" className="navds-monthpicker__months">
+      {months.map((x: Date, y) => {
+        return (
+          <button
+            key={x.toDateString()}
+            onClick={() =>
+              onSelect(setYear(startOfMonth(x), Number(selected.getFullYear())))
+            }
+            className={cl("navds-monthpicker__month", {
+              "navds-monthpicker__month--hidden": hideMonth(x),
+              "navds-monthpicker__month--current": dateIsInCurrentMonth(
+                x,
+                selected
+              ),
+              "navds-monthpicker__month--selected": dateIsSelected(x, selected),
+            })}
+          >
+            <span aria-hidden="true">
+              {format(new Date(x), "LLL", { locale })
+                .replace(".", "")
+                .substring(0, 3)}
+            </span>
+            <span className="navds-sr-only">
+              {format(new Date(x), "LLLL", { locale })}
+            </span>
+          </button>
+        );
+      })}
+    </BodyShort>
+  );
+};
+
+export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
+  (
+    {
+      children,
+      yearSelector = false,
+      fromDate = new Date(),
+      toDate = new Date("Sep 27 2032"),
+    },
+    ref
+  ) => {
+    const [selected, setSelected] = React.useState<Date>(new Date());
+
+    const isValidYearSelector =
+      yearSelector && fromDate && toDate ? true : false;
+
+    return (
+      <RootProvider
+        locale={NB}
+        selected={selected}
+        className="navds-monthpicker-month"
+        toDate={toDate}
+        fromDate={fromDate}
+      >
+        <div className="navds-monthpicker__wrapper">
+          <TestCaption
+            selected={selected}
+            onSelect={setSelected}
+            yearSelector={yearSelector}
+            isValidYearSelector={isValidYearSelector}
+          />
+          <MonthSelector onSelect={setSelected} selected={selected} />
+        </div>
+      </RootProvider>
+    );
+  }
+);
+
+export default MonthPicker;
+
+export const F = "";

package/src/monthpicker/index.ts

@@ -0,0 +1,2 @@
+export { default as MonthPicker } from "./MonthPicker";
+export { MonthPickerProps } from "./MonthPicker";

package/src/monthpicker/monthpicker.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import MonthPicker from "./MonthPicker";
+
+export default {
+  title: "ds-react/Monthpicker",
+  component: MonthPicker,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
+};
+
+export const Default = (props) => {
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker />
+    </div>
+  );
+};
+
+export const YearSelector = (props) => {
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker
+        yearSelector
+        fromDate={new Date()}
+        toDate={new Date("Sep 27 2032")}
+      />
+    </div>
+  );
+};

package/src/monthpicker/utils/__tests__/check-dates.test.ts

@@ -0,0 +1,34 @@
+import { dateIsInCurrentMonth, dateIsSelected } from "../check-dates";
+
+const selectedDate = new Date("Feb 1 1994");
+
+describe("Returns if date is in current month", () => {
+  test("Date should be within current month (true)", () => {
+    expect(dateIsInCurrentMonth(new Date(), new Date())).toBeTruthy();
+  });
+
+  test("Date should not be within current month (false)", () => {
+    expect(
+      dateIsInCurrentMonth(new Date("Sep 2 2021"), selectedDate)
+    ).toBeFalsy();
+    expect(
+      dateIsInCurrentMonth(new Date("Sep 1 2021"), selectedDate)
+    ).toBeFalsy();
+    expect(
+      dateIsInCurrentMonth(new Date("Sep 30 2021"), selectedDate)
+    ).toBeFalsy();
+  });
+});
+
+describe("Returns if date is selected", () => {
+  test("Date should be selected (true)", () => {
+    expect(dateIsSelected(new Date("Feb 1 1994"), selectedDate)).toBeTruthy();
+  });
+  test("Date should not be selected (false)", () => {
+    expect(dateIsSelected(new Date("Mar 1 1994"), selectedDate)).toBeFalsy();
+    expect(
+      dateIsInCurrentMonth(new Date("Des 15 2018"), selectedDate)
+    ).toBeFalsy();
+    expect(dateIsSelected(new Date("Jul 9 2033"), selectedDate)).toBeFalsy();
+  });
+});

package/src/monthpicker/utils/__tests__/handle-selected.test.ts

@@ -0,0 +1,87 @@
+import {
+  updateWithoutYearSelector,
+  updateWithYearSelector,
+  hasNextYear,
+} from "../handle-selected";
+
+const years = [
+  new Date(),
+  new Date("Aug 5 2023"),
+  new Date("Aug 5 2024"),
+  new Date("Aug 5 2025"),
+  new Date("Aug 5 2026"),
+  new Date("Aug 5 2027"),
+  new Date("Aug 5 2028"),
+  new Date("Aug 5 2029"),
+];
+
+describe("Returns date with updated year without selector", () => {
+  test("Date should be incremented with 1 year (Date)", () => {
+    expect(updateWithoutYearSelector(new Date(), 1).getFullYear()).toEqual(
+      2023
+    );
+  });
+  test("Date should be decremented with 1 year (Date)", () => {
+    expect(updateWithoutYearSelector(new Date(), -1).getFullYear()).toEqual(
+      2021
+    );
+  });
+});
+
+describe("Returns updated sekected date with selector", () => {
+  test("Date should be incremented with 1 years (2024)", () => {
+    expect(
+      updateWithYearSelector(
+        new Date("Aug 5 2023"),
+        new Date("Aug 5 2023"),
+        years,
+        1
+      ).getFullYear()
+    ).toEqual(2024);
+  });
+  test("Date should be incremented with 5 years (2028)", () => {
+    expect(
+      updateWithYearSelector(
+        new Date("Aug 5 2023"),
+        new Date("Aug 5 2023"),
+        years,
+        5
+      ).getFullYear()
+    ).toEqual(2028);
+  });
+  test("Date should be decremented with 5 years (Date)", () => {
+    expect(
+      updateWithYearSelector(
+        new Date("Aug 5 2028"),
+        new Date("Aug 5 2023"),
+        years,
+        -5
+      ).getFullYear()
+    ).toEqual(2023);
+  });
+  test("Date should be incremented with 1 years (Date)", () => {
+    expect(
+      updateWithYearSelector(
+        new Date("Aug 5 2023"),
+        new Date("Aug 5 2023"),
+        years,
+        -1
+      ).getFullYear()
+    ).toEqual(2022);
+  });
+});
+
+describe("Returns if year is at start or end of range", () => {
+  test("Should have next year (true)", () => {
+    expect(hasNextYear(new Date(), years, 1)).toBeTruthy();
+  });
+  test("Should have previous year (true)", () => {
+    expect(hasNextYear(new Date("Aug 3 2023"), years, -1)).toBeTruthy();
+  });
+  test("Should not have next year (false)", () => {
+    expect(hasNextYear(new Date("Aug 3 2029"), years, 1)).toBeFalsy();
+  });
+  test("Should not have previous year (false)", () => {
+    expect(hasNextYear(new Date(), years, -1)).toBeFalsy();
+  });
+});

package/src/monthpicker/utils/check-dates.ts

@@ -0,0 +1,15 @@
+import { isThisMonth, setYear, isSameMonth } from "date-fns";
+
+export const dateIsInCurrentMonth = (
+  date: Date,
+  dateToCompare: Date
+): boolean => {
+  return isThisMonth(setYear(date, Number(dateToCompare.getFullYear())));
+};
+
+export const dateIsSelected = (date: Date, selectedDate: Date): boolean => {
+  return isSameMonth(
+    setYear(date, Number(selectedDate.getFullYear())),
+    selectedDate
+  );
+};

package/src/monthpicker/utils/handle-selected.ts

@@ -0,0 +1,26 @@
+import { startOfMonth, setYear } from "date-fns";
+
+export const updateWithoutYearSelector = (
+  yearState: Date,
+  val: number
+): Date => {
+  const newYear = Number(yearState.getFullYear() + val);
+  return setYear(yearState, newYear);
+};
+
+export const updateWithYearSelector = (
+  yearState: Date,
+  selected: Date,
+  years: Date[],
+  val: number
+): Date => {
+  return setYear(startOfMonth(selected), yearState.getFullYear() + val);
+};
+
+export const hasNextYear = (
+  yearState: Date,
+  years: Date[],
+  val: any
+): boolean => {
+  return years.some((x) => yearState.getFullYear() + val === x.getFullYear());
+};