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

package/src/datepicker/datepicker.stories.mdx

@@ -0,0 +1,467 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="ds-react/Datepicker" />
+
+# DatePicker
+
+Datepicker er nå klar for testing (Men fortsatt veldig WIP)! Komponenten har ikke blitt ordentlig testet enda, da både kode og UU så bør ikke brukes i prod.
+
+## Single
+
+Default-løsning er `mode="single"`. Bare en dag kan velges om gangen da. Bruk `required`-prop hvis bruker MÅ velge en dato
+
+```jsx
+<DatePicker onSelect={(date?: Date) => handleDates(date)}>
+  <DatePicker.Input label="Velg dato" />
+</DatePicker>
+
+<DatePicker mode="single" onSelect={(date?: Date) => handleDates(date)}>
+  <DatePicker.Input label="Velg dato" />
+</DatePicker>
+```
+
+## Multiple
+
+`mode="multiple"` gir muligheten til å velge flere dager. Siden man ikke kan vise flere dager i samme input-felt,
+bør lukke/åpne interaksjonen ikke være `<DatePicker.Input />`
+
+```jsx
+<DatePicker
+  mode="multiple"
+  open={toggleOpen}
+  onClose={() => setToggleOpen(false)}
+  onSelect={(dates?: Date[]) => handleDates(dates)}
+  min={2}
+  max={5}
+>
+  <Button onClick={() => setToggleOpen((x) => !x)}>Velg dager</Button>
+</DatePicker>
+```
+
+## Range
+
+`mode="range"` gir muligheten til å velge en periode `{from:Date, to?:Date}`. Bruk da to inputfelt for å vise from/to
+
+```jsx
+<DatePicker mode="range" onSelect={(dates?: DateRange) => handleDates(dates)}>
+  <DatePicker.Input label="Fra" />
+  <DatePicker.Input label="Til" />
+</DatePicker>
+```
+
+## useDatepicker
+
+For at du ikke skal måtte styre all logikken med date-formatering, fokus, onChange etc har vi egne hooks for dette.
+
+`useDatepicker` håndterer alt av Dato-formatering, onChange i input-felter og alle nødvendige datepicker og input-props
+
+obs! Du må selv validere valget, evt legge til feilmeldinger i input.
+
+```jsx
+export const demo = () => {
+  const { dayPickerProps, selectedDay, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+  });
+
+  useEffect(() => {
+    selectedDay && isValidDate(selectedDay) && console.log(selectedDay);
+  }, [selectedDay]);
+
+  return (
+    <DatePicker {...dayPickerProps}>
+      <DatePicker.Input {...inputProps} label="Velg dato" />
+    </DatePicker>
+  );
+};
+```
+
+## useRangeDatepicker
+
+`useRangeDatepicker` har sammen funksjonen som `useDatepicker`, men med muligheten for to inputfelt
+
+```jsx
+export const demo = () => {
+  const { dayPickerProps, fromInputProps, toInputProps, selectedRange } =
+    useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+    });
+
+  useEffect(() => {
+    selectedRange && console.log(selectedRange);
+  }, [selectedRange]);
+
+  return (
+    <DatePicker
+      {...dayPickerProps}
+      classNames={{ wrapper: "input-wrapper-styling" }}
+    >
+      <DatePicker.Input {...fromInputProps} label="Fra" />
+      <DatePicker.Input {...toInputProps} label="Til" />
+    </DatePicker>
+  );
+};
+```
+
+## Standalone
+
+I noen tilfeller ønsker man å alltid vise DatePicker uten popover, og kan da bruke `Standalone`-versjonen
+
+```jsx
+<DatePicker.Standalone />
+```
+
+## showWeekNumber
+
+Viser ukenummer i venstre-spalte. Obs! DatePicker tar allerede mye plass på mobil, så bør brukes forsiktig
+
+```jsx
+<DatePicker showWeekNumber>
+  <DatePicker.Input label="Velg dato" />
+</DatePicker>
+```
+
+## yearSelector
+
+Gir muligheten til å velge år + månede i en `<Select/>`. Vises bare hvis `fromDate` og `toDate` er satt, da man ikke bør vise uendelig med valg.
+
+```jsx
+<DatePicker
+  yearSelector
+  fromDate={new Date("Aug 23 2018")}
+  toDate={new Date("Aug 23 2022")}
+>
+  <DatePicker.Input label="Velg dato" />
+</DatePicker>
+```
+
+## disable-dager
+
+Disabled-prop bruker en [Matcher](https://react-day-picker.js.org/api/types/Matcher), som gir mye fleksibilitet når man skal disable dager
+
+Kan også sette `disableWeekends`-prop for å sette lørdag + søndag som disabled
+
+```jsx
+const disabledDays = [
+  new Date("Aug 10 2022"),
+  { from: new Date("Aug 31 2022"), to: new Date("Sep 8 2022") },
+  (day: Date) => isDisabled(date),
+];
+
+<DatePicker disabled={disabledDays}>
+  <DatePicker.Input label="Velg dato" />
+</DatePicker>;
+```
+
+## locale
+
+DatePicker har innebygd støtte for nb, nn og en(gb)
+
+```jsx
+<DatePicker locale="en">
+  <DatePicker.Input label="Pick a date" />
+</DatePicker>
+```
+
+## Validering
+
+```jsx
+export const Validering = () => {
+  const { dayPickerProps, selectedDay, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+  });
+
+  const [errorState, setErrorState] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!selectedDay || !isValidDate(selectedDay)) return;
+    isSaturday(selectedDay) <- Utility-funksjon i date-fns
+      ? setErrorState(
+          "NAV-kontoret er ikke åpent på lørdager. Velg en annen dag."
+        )
+      : setErrorState(null);
+  }, [selectedDay]);
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...dayPickerProps}>
+        <DatePicker.Input
+          error={errorState}
+          {...inputProps}
+          label="Velg dato"
+        />
+      </DatePicker>
+    </div>
+  );
+};
+```
+
+## Typer
+
+### Datepicker
+
+```ts
+/**
+ * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle,
+ * or make your own with the open/onClose props
+ */
+children?: React.ReactNode;
+/**
+ * Changes datepicker locale
+ * @default "nb" (norsk bokmål)
+ */
+locale?: "nb" | "nn" | "en";
+/**
+ * The earliest Date available for the user to pick from
+ */
+fromDate?: Date;
+/**
+ * The latest Date available for the user to pick from
+ */
+toDate?: Date;
+/**
+ * Adds a `Select` for picking Year and Month
+ * Needs `fromDate` + `toDate` to be set!
+ * @default false
+ */
+yearSelector?: boolean;
+/**
+ * Apply the disabled modifier to the matching days.
+ * {@link https://react-day-picker.js.org/api/types/Matcher | Matcher type-definition}
+ */
+disabled?: Matcher[];
+/**
+ * Disable saturday and sunday.
+ * @default false
+ */
+disableWeekends?: boolean;
+/**
+ * Shows week numbers in left-column
+ * Use with caution, takes up valuable screenspace in small screens!
+ * @default false
+ */
+showWeekNumber?: boolean;
+/**
+ * Open state for user-controlled state
+ * @remark Controlled by component by default
+ */
+open?: boolean;
+/**
+ * onClose callback for user-controlled state
+ */
+onClose?: () => void;
+/**
+ * onOpenToggle callback for user-controlled-state
+ * @remark only called if `<DatePicker.Input />` is used
+ */
+onOpenToggle?: () => void;
+/**
+ * Classnames for adding classes
+ */
+classNames?: {
+    /**
+     * Children wrapper
+     */
+    wrapper?: string;
+    /**
+     * DatePicker-wrapper
+     */
+    datepicker?: string;
+};
+
+/**
+ * For avansert bruk
+ * @private
+ */
+month?: Date;
+onMonthChange?: MonthChangeEventHandler;
+today?: Date;
+onDayClick?: DayClickEventHandler;
+```
+
+### Datepicker.Standalone
+
+```ts
+/**
+ * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle,
+ * or make your own with the open/onClose props
+ */
+children?: React.ReactNode;
+/**
+ * Changes datepicker locale
+ * @default "nb" (norsk bokmål)
+ */
+locale?: "nb" | "nn" | "en";
+/**
+ * The earliest Date available for the user to pick from
+ */
+fromDate?: Date;
+/**
+ * The latest Date available for the user to pick from
+ */
+toDate?: Date;
+/**
+ * Adds a `Select` for picking Year and Month
+ * Needs `fromDate` + `toDate` to be set!
+ * @default false
+ */
+yearSelector?: boolean;
+/**
+ * Apply the disabled modifier to the matching days.
+ * {@link https://react-day-picker.js.org/api/types/Matcher | Matcher type-definition}
+ */
+disabled?: Matcher[];
+/**
+ * Disable saturday and sunday.
+ * @default false
+ */
+disableWeekends?: boolean;
+/**
+ * Shows week numbers in left-column
+ * Use with caution, takes up valuable screenspace in small screens!
+ * @default false
+ */
+showWeekNumber?: boolean;
+className?: string;
+
+/**
+ * For avansert bruk
+ * @private
+ */
+month?: Date;
+onMonthChange?: MonthChangeEventHandler;
+today?: Date;
+onDayClick?: DayClickEventHandler;
+```
+
+### DatePicker.Input
+
+```ts
+/**
+ * Input label
+ */
+label: React.ReactNode;
+/**
+ * Shows label and description for screenreaders-only
+ * @default false
+ */
+hideLabel?: boolean;
+/**
+ * Changes padding and font-sizes
+ * @default medium
+ */
+size?: "medium" | "small";
+/**
+ * @private
+ */
+wrapperRef: React.RefObject<HTMLDivElement>
+```
+
+### useDatepicker
+
+```ts
+export interface UseDatepickerOptions
+  extends Pick<
+    DatePickerProps,
+    | "locale"
+    | "fromDate"
+    | "toDate"
+    | "today"
+    | "toDate"
+    | "fromDate"
+    | "toDate"
+  > {
+  /** The initially selected date */
+  defaultSelected?: Date;
+  /** Make the selection required. */
+  required?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
+}
+interface UseDatepickerValue {
+  /**
+   * Use: <DatePicker {...dayPickerProps}/>
+   */
+  dayPickerProps: DatePickerProps;
+  /**
+   * Use: <DatePicker.Input {...inputProps}/>
+   */
+  inputProps: Pick<
+    DatePickerInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Resets all states
+   */
+  reset: () => void;
+  /**
+   * Selected Date callback
+   */
+  selectedDay?: Date;
+  /**
+   * Manually set selected day if needed
+   */
+  setSelected: (date?: Date) => void;
+}
+```
+
+### useRangeDatepicker
+
+```ts
+export interface UseRangeDatepickerOptions
+  extends Pick<
+    DatePickerProps,
+    | "locale"
+    | "fromDate"
+    | "toDate"
+    | "today"
+    | "toDate"
+    | "fromDate"
+    | "toDate"
+  > {
+  /** The initially selected date */
+  defaultSelected?: DateRange;
+  /** Make the selection required. */
+  required?: boolean;
+  /**
+   * Opens datepicker on input-focus
+   * @default true
+   */
+  openOnFocus?: boolean;
+}
+
+interface UseRangeDatepickerValue {
+  /**
+   * Use: <DatePicker {...dayPickerProps}/>
+   */
+  dayPickerProps: DatePickerProps;
+  /**
+   * Use: <DatePicker.Input label="from" {...fromInputProps}/>
+   */
+  fromInputProps: Pick<
+    DatePickerInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Use: <DatePicker.Input label="to" {...toInputProps}/>
+   */
+  toInputProps: Pick<
+    DatePickerInputProps,
+    "onChange" | "onFocus" | "onBlur" | "value"
+  >;
+  /**
+   * Resets all states
+   */
+  reset: () => void;
+  /**
+   * Selected range-callback
+   */
+  selectedRange?: DateRange;
+  /**
+   * Manually set selected range if needed
+   */
+  setSelected: (date?: DateRange) => void;
+}
+```

package/src/datepicker/datepicker.stories.tsx

@@ -0,0 +1,257 @@
+import { isSaturday } from "date-fns";
+import React, { useEffect, useId, useState } from "react";
+import { DatePicker, useDatepicker, useRangeDatepicker } from "..";
+import { Button } from "../..";
+import { isValidDate } from "./utils";
+
+const disabledDays = [
+  new Date("Aug 10 2022"),
+  { from: new Date("Aug 31 2022"), to: new Date("Sep 8 2022") },
+];
+
+export default {
+  title: "ds-react/Datepicker",
+  component: DatePicker,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    locale: {
+      control: {
+        type: "radio",
+        options: ["nb", "nn", "en"],
+      },
+    },
+    mode: {
+      defaultValue: "single",
+      control: {
+        type: "radio",
+        options: ["single", "multiple", "range"],
+      },
+    },
+  },
+};
+
+export const Default = (props) => {
+  const [open, setOpen] = useState(false);
+
+  const rangeCtx = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2020"),
+    toDate: new Date("Aug 23 2023"),
+    openOnFocus: props.openOnFocus,
+  });
+
+  const singleCtx = useDatepicker({
+    fromDate: new Date("Aug 23 2020"),
+    toDate: new Date("Aug 23 2023"),
+    openOnFocus: props.openOnFocus,
+  });
+
+  const newProps = {
+    ...(!props.inputfield || props.mode === "multiple"
+      ? {
+          open,
+          onClose: () => setOpen(false),
+          fromDate: new Date("Aug 23 2020"),
+          toDate: new Date("Aug 23 2023"),
+        }
+      : {}),
+  };
+
+  const Comp = !props.standalone ? DatePicker : DatePicker.Standalone;
+
+  return (
+    <div>
+      <Comp
+        locale={props?.locale}
+        yearSelector={props?.yearSelector}
+        disableWeekends={props?.disableWeekends}
+        showWeekNumber={props.showWeekNumber}
+        mode={props.mode}
+        {...(props.mode === "single"
+          ? singleCtx.dayPickerProps
+          : props.mode === "range"
+          ? rangeCtx.dayPickerProps
+          : {})}
+        {...newProps}
+      >
+        {!props.standalone && (
+          <>
+            {props.inputfield && props.mode !== "multiple" ? (
+              <>
+                {props.mode === "range" ? (
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <DatePicker.Input
+                      label="Fra"
+                      size={props?.size}
+                      {...rangeCtx.fromInputProps}
+                    />
+                    <DatePicker.Input
+                      label="Til"
+                      size={props?.size}
+                      {...rangeCtx.toInputProps}
+                    />
+                  </div>
+                ) : (
+                  <>
+                    <DatePicker.Input
+                      label="Velg dato"
+                      size={props?.size}
+                      {...singleCtx.inputProps}
+                    />
+                  </>
+                )}
+              </>
+            ) : (
+              <Button onClick={() => setOpen((x) => !x)}>
+                Åpne datovelger
+              </Button>
+            )}
+          </>
+        )}
+      </Comp>
+    </div>
+  );
+};
+
+Default.args = {
+  yearSelector: false,
+  disableWeekends: false,
+  showWeekNumber: false,
+  inputfield: true,
+  standalone: false,
+  openOnFocus: true,
+};
+
+export const YearSelector = (props) => (
+  <div>
+    <DatePicker
+      yearSelector
+      fromDate={new Date("Aug 23 2018")}
+      toDate={new Date("Aug 23 2022")}
+    >
+      <DatePicker.Input label="Velg dato" size={props.size}></DatePicker.Input>
+    </DatePicker>
+  </div>
+);
+
+export const DisabledDays = (props) => (
+  <div>
+    <DatePicker disabled={disabledDays} disableWeekends locale="en">
+      <DatePicker.Input label="Velg dato" size={props.size}></DatePicker.Input>
+    </DatePicker>
+  </div>
+);
+
+export const ShowWeekNumber = (props) => (
+  <div>
+    <DatePicker showWeekNumber>
+      <DatePicker.Input label="Velg dato" size={props.size}></DatePicker.Input>
+    </DatePicker>
+  </div>
+);
+
+export const UseDatepicker = () => {
+  const { dayPickerProps, selectedDay, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    locale: "en",
+    openOnFocus: true,
+  });
+
+  useEffect(() => {
+    selectedDay && isValidDate(selectedDay) && console.log(selectedDay);
+  }, [selectedDay]);
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...dayPickerProps}>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseRangedDatepicker = () => {
+  const { dayPickerProps, fromInputProps, toInputProps, selectedRange } =
+    useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+      openOnFocus: true,
+    });
+
+  useEffect(() => {
+    selectedRange && console.log(selectedRange);
+  }, [selectedRange]);
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...dayPickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const NoPopover = () => (
+  <div>
+    <DatePicker.Standalone />
+  </div>
+);
+
+export const UserControlled = () => {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+
+  return (
+    <div>
+      <DatePicker
+        mode="multiple"
+        open={open}
+        onClose={() => setOpen(false)}
+        id={id}
+      >
+        <Button
+          aria-controls={id}
+          aria-haspopup="grid"
+          onClick={() => setOpen((x) => !x)}
+        >
+          Legg til dager
+        </Button>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const Validering = () => {
+  const { dayPickerProps, selectedDay, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+  });
+
+  const [errorState, setErrorState] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!selectedDay || !isValidDate(selectedDay)) return;
+    isSaturday(selectedDay)
+      ? setErrorState(
+          "NAV-kontoret er ikke åpent på lørdager. Velg en annen dag."
+        )
+      : setErrorState(null);
+  }, [selectedDay]);
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...dayPickerProps}>
+        <DatePicker.Input
+          error={errorState}
+          {...inputProps}
+          label="Velg dato"
+        />
+      </DatePicker>
+    </div>
+  );
+};

package/src/datepicker/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useDatepicker } from "./useDatepicker";
+export { useRangeDatepicker } from "./useRangeDatepicker";