@vygruppen/spor-react 1.3.3 → 2.0.0

package/src/datepicker/DateRangePicker.tsx

@@ -0,0 +1,165 @@
+import {
+  Box,
+  BoxProps,
+  FormLabel,
+  InputGroup,
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  Portal,
+  ResponsiveValue,
+  useBreakpointValue,
+  useFormControlContext,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import { DateValue } from "@internationalized/date";
+import { useDateRangePickerState } from "@react-stately/datepicker";
+import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
+import React, { useRef } from "react";
+import {
+  AriaDateRangePickerProps,
+  I18nProvider,
+  useDateRangePicker,
+} from "react-aria";
+import { CalendarTriggerButton } from "./CalendarTriggerButton";
+import { DateField } from "./DateField";
+import { RangeCalendar } from "./RangeCalendar";
+import { StyledField } from "./StyledField";
+import { useCurrentLocale } from "./utils";
+
+type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
+  Pick<BoxProps, "minHeight"> & {
+    startLabel?: string;
+    endLabel?: string;
+    variant: ResponsiveValue<"simple" | "with-trigger">;
+  };
+/**
+ * A date range picker component.
+ *
+ * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ *
+ * ```tsx
+ * <DateRangePicker startLabel="From" endLabel="To" variant="simple" />
+ * ```
+ */
+export function DateRangePicker({
+  variant,
+  minHeight,
+  ...props
+}: DateRangePickerProps) {
+  const formControlProps = useFormControlContext();
+  const state = useDateRangePickerState({
+    ...props,
+    shouldCloseOnSelect: true,
+    isRequired: props.isRequired ?? formControlProps?.isRequired,
+    validationState: formControlProps.isInvalid ? "invalid" : "valid",
+  });
+  const ref = useRef(null);
+  const {
+    groupProps,
+    labelProps,
+    startFieldProps,
+    endFieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps,
+  } = useDateRangePicker(props, state, ref);
+
+  const responsiveVariant =
+    useBreakpointValue(typeof variant === "string" ? [variant] : variant) ??
+    "simple";
+
+  const styles = useMultiStyleConfig("Datepicker", {
+    variant: responsiveVariant,
+  });
+  const locale = useCurrentLocale();
+
+  const handleEnterClick = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !state.isOpen && responsiveVariant === "simple") {
+      // Don't submit the form
+      e.stopPropagation();
+      state.setOpen(true);
+    }
+  };
+
+  const onFieldClick = () => {
+    if (!hasTrigger) {
+      state.setOpen(true);
+    }
+  };
+
+  const hasTrigger = responsiveVariant === "with-trigger";
+
+  return (
+    <I18nProvider locale={locale}>
+      <Box position="relative" display="inline-flex" flexDirection="column">
+        {props.label && (
+          <FormLabel {...labelProps} sx={styles.inputLabel}>
+            {props.label}
+          </FormLabel>
+        )}
+        <Popover
+          {...dialogProps}
+          isOpen={state.isOpen}
+          onClose={() => state.setOpen(false)}
+          closeOnBlur
+          closeOnEsc
+          returnFocusOnClose
+        >
+          <InputGroup
+            {...groupProps}
+            ref={ref}
+            width="auto"
+            display="inline-flex"
+          >
+            <PopoverAnchor>
+              <StyledField
+                alignItems="center"
+                paddingX={3}
+                variant={responsiveVariant}
+                onClick={onFieldClick}
+                onKeyPress={handleEnterClick}
+                minHeight={minHeight}
+              >
+                {!hasTrigger && (
+                  <CalendarOutline24Icon mr={2} alignSelf="center" />
+                )}
+                <DateField
+                  {...startFieldProps}
+                  label={props.startLabel}
+                  labelProps={labelProps}
+                />
+                <Box as="span" aria-hidden="true" px="2">
+                  –
+                </Box>
+                <DateField
+                  {...endFieldProps}
+                  label={props.endLabel}
+                  labelProps={labelProps}
+                />
+              </StyledField>
+            </PopoverAnchor>
+            {hasTrigger && <CalendarTriggerButton {...buttonProps} />}
+          </InputGroup>
+          {state.isOpen && (
+            <Portal>
+              <PopoverContent
+                backgroundColor="white"
+                color="darkGrey"
+                boxShadow="md"
+                maxWidth="none"
+              >
+                <PopoverArrow backgroundColor="white" />
+                <PopoverBody>
+                  <RangeCalendar {...calendarProps} />
+                </PopoverBody>
+              </PopoverContent>
+            </Portal>
+          )}
+        </Popover>
+      </Box>
+    </I18nProvider>
+  );
+}

package/src/datepicker/DateTimeSegment.tsx

@@ -0,0 +1,56 @@
+import { Box } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import { useDateSegment } from "react-aria";
+import { DateFieldState, DateSegment } from "react-stately";
+
+type DateTimeSegmentProps = {
+  segment: DateSegment;
+  state: DateFieldState;
+};
+/**
+ * A date time segment is a part of a date or a time stamp.
+ *
+ * Examples could be the day, month, year, hour, minute, second, etc.
+ *
+ * This component should be used with the react-aria library, and is not meant to be used directly.
+ * */
+export const DateTimeSegment = ({ segment, state }: DateTimeSegmentProps) => {
+  const ref = useRef(null);
+
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return (
+    <Box
+      {...segmentProps}
+      ref={ref}
+      style={{
+        ...segmentProps.style,
+        fontVariantNumeric: "tabular-nums",
+        boxSizing: "content-box",
+      }}
+      paddingX="1px"
+      textAlign="end"
+      outline="none"
+      borderRadius="xs"
+      color={
+        segment.isPlaceholder
+          ? "dimGrey"
+          : segment.isEditable
+          ? "darkGrey"
+          : "osloGrey"
+      }
+      _focus={{
+        backgroundColor: "darkTeal",
+        color: "white",
+      }}
+    >
+      {isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text}
+    </Box>
+  );
+};
+
+const isPaddable = (segmentType: DateSegment["type"]) =>
+  segmentType === "month" ||
+  segmentType === "day" ||
+  segmentType === "hour" ||
+  segmentType === "minute" ||
+  segmentType === "second";

package/src/datepicker/RangeCalendar.tsx

@@ -0,0 +1,35 @@
+import { Box } from "@chakra-ui/react";
+import { createCalendar, DateValue } from "@internationalized/date";
+import { useRangeCalendarState } from "@react-stately/calendar";
+import React, { useRef } from "react";
+import {
+  RangeCalendarProps as ReactAriaRangeCalendarProps,
+  useRangeCalendar,
+} from "react-aria";
+import { CalendarGrid } from "./CalendarGrid";
+import { CalendarHeader } from "./CalendarHeader";
+import { useCurrentLocale } from "./utils";
+
+type RangeCalendarProps = ReactAriaRangeCalendarProps<DateValue>;
+export function RangeCalendar(props: RangeCalendarProps) {
+  const locale = useCurrentLocale();
+  const state = useRangeCalendarState({
+    ...props,
+    visibleDuration: { months: 2 },
+    locale,
+    createCalendar,
+  });
+
+  const ref = useRef(null);
+  const { calendarProps, title } = useRangeCalendar(props, state, ref);
+
+  return (
+    <Box {...calendarProps} ref={ref}>
+      <CalendarHeader state={state} title={title} />
+      <Box display="flex" gap="8">
+        <CalendarGrid state={state} />
+        <CalendarGrid state={state} offset={{ months: 1 }} />
+      </Box>
+    </Box>
+  );
+}

package/src/datepicker/StyledField.tsx

@@ -0,0 +1,31 @@
+import {
+  As,
+  Box,
+  BoxProps,
+  forwardRef,
+  useFormControlContext,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import React from "react";
+
+type StyledFieldProps = BoxProps & {
+  variant: "simple" | "with-trigger";
+};
+export const StyledField = forwardRef<StyledFieldProps, As>(
+  ({ children, variant, ...otherProps }, ref) => {
+    const { isInvalid } = useFormControlContext() ?? {
+      isInvalid: false,
+    };
+    const styles = useMultiStyleConfig("Datepicker", { variant });
+    return (
+      <Box
+        {...otherProps}
+        __css={styles.wrapper}
+        ref={ref}
+        aria-invalid={isInvalid}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

package/src/datepicker/TimeField.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex } from "@chakra-ui/react";
+import { CalendarDateTime, Time } from "@internationalized/date";
+import React, { useRef } from "react";
+import { AriaTimeFieldProps, useTimeField } from "react-aria";
+import { DateFieldState } from "react-stately";
+import { FormLabel } from "..";
+import { DateTimeSegment } from "./DateTimeSegment";
+import { getTimestampFromTime } from "./utils";
+
+type TimeFieldProps = AriaTimeFieldProps<Time> & {
+  state: DateFieldState;
+  label: string;
+  name?: string;
+};
+/** A time field component.
+ *
+ * This component lets the user choose a time based on regular user input.
+ * It shouldn't be used directly, but is used by the TimePicker component.
+ */
+export const TimeField = ({ state, ...props }: TimeFieldProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { labelProps, fieldProps } = useTimeField(props, state, ref);
+
+  return (
+    <Box>
+      <FormLabel
+        {...labelProps}
+        htmlFor={fieldProps.id}
+        marginBottom={0}
+        fontSize="mobile.xs"
+      >
+        {props.label}
+      </FormLabel>
+      <Flex {...fieldProps} ref={ref}>
+        {state.segments.map((segment) => (
+          <DateTimeSegment key={segment.type} segment={segment} state={state} />
+        ))}
+      </Flex>
+      <input
+        type="hidden"
+        value={getTimestampFromTime(state.value as CalendarDateTime | null)}
+        name={props.name}
+      />
+    </Box>
+  );
+};

package/src/datepicker/TimePicker.test.tsx

@@ -0,0 +1,74 @@
+import { Time } from "@internationalized/date";
+import { act, render } from "@testing-library/react";
+import React from "react";
+import { axe } from "vitest-axe";
+import { TimePicker } from "./TimePicker";
+
+describe("<TimePicker />", () => {
+  it("is accessible", async () => {
+    const { container } = render(<TimePicker />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("jumps backwards as expected", async () => {
+    const { getByLabelText, getByRole } = render(
+      <TimePicker defaultValue={new Time(13, 3)} />
+    );
+    const backwardsButton = getByLabelText("Bakover 30 minutter");
+    expect(getByRole("group")).toHaveTextContent("13:03");
+    act(() => {
+      backwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("13:00");
+    act(() => {
+      backwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("12:30");
+  });
+  it("jumps forwards as expected", async () => {
+    const { getByLabelText, getByRole } = render(
+      <TimePicker defaultValue={new Time(13, 53)} />
+    );
+    const forwardsButton = getByLabelText("Fremover 30 minutter");
+    expect(getByRole("group")).toHaveTextContent("13:53");
+    act(() => {
+      forwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("14:00");
+    act(() => {
+      forwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("14:30");
+  });
+  it("jumps backwards as expected when minuteInterval is set", async () => {
+    const { getByLabelText, getByRole } = render(
+      <TimePicker defaultValue={new Time(13, 3)} minuteInterval={15} />
+    );
+    const backwardsButton = getByLabelText("Bakover 15 minutter");
+    expect(getByRole("group")).toHaveTextContent("13:03");
+    act(() => {
+      backwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("13:00");
+    act(() => {
+      backwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("12:45");
+  });
+  it("jumps forwards as expected when minuteInterval is set", async () => {
+    const { getByLabelText, getByRole } = render(
+      <TimePicker defaultValue={new Time(13, 49)} minuteInterval={15} />
+    );
+
+    const forwardsButton = getByLabelText("Fremover 15 minutter");
+    expect(getByRole("group")).toHaveTextContent("13:49");
+    act(() => {
+      forwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("14:00");
+    act(() => {
+      forwardsButton.click();
+    });
+    expect(getByRole("group")).toHaveTextContent("14:15");
+  });
+});

package/src/datepicker/TimePicker.tsx

@@ -0,0 +1,196 @@
+import { BoxProps, useFormControlContext } from "@chakra-ui/react";
+import { CalendarDateTime } from "@internationalized/date";
+import { TimeValue } from "@react-types/datepicker";
+import {
+  DropdownLeftFill24Icon,
+  DropdownRightFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import React from "react";
+import { useTimeFieldState } from "react-stately";
+import { IconButton, createTexts, useTranslation } from "..";
+import { StyledField } from "./StyledField";
+import { TimeField } from "./TimeField";
+import { getCurrentTime, useCurrentLocale } from "./utils";
+
+type TimePickerProps = Omit<BoxProps, "defaultValue"> & {
+  /** The label. Defaults to a localized version of "Time" */
+  label?: string;
+  /** The name of the form field, if used in a regular form */
+  name?: string;
+  /** The controlled value, if any.
+   *
+   * A `new Time(hours, minutes)` should be passed
+   **/
+  value?: TimeValue;
+  /** A default value, if any.
+   *
+   * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+   **/
+  defaultValue?: TimeValue;
+  /** Callback for when the time changes */
+  onChange?: (value: TimeValue) => void;
+  /** The maxiumum number of minutes to move when the step buttons are used.
+   *
+   * Defaults to 30 minutes.
+   *
+   * An example: If the time is at 13:37 and the minuteInterval is 15, clicking the step forwards button will move the time to 13:45. Next click will move it to 14:00.
+   */
+  minuteInterval?: number;
+  /** Whether or not the field is disabled */
+  isDisabled?: boolean;
+};
+/** A time picker component.
+ *
+ * This lets the user select a time of day, either through typing it in, using the up and down arrows to select the hour and minute, or by clicking the step buttons to move the time forwards or backwards in pre-defined increments.
+ *
+ * ```tsx
+ * <TimePicker />
+ * ```
+ *
+ * It can also be controlled:
+ *
+ * ```tsx
+ * <TimePicker value={new Time(13, 37)} onChange={setTime} />
+ * ```
+ *
+ * Note that the TimePicker uses the `Time` class to represent the time. This is a class that is part of the `@internationalized/date` package.
+ *
+ * @see https://spor.vy.no/komponenter/timepicker
+ */
+export const TimePicker = ({
+  label: externalLabel,
+  value,
+  defaultValue = getCurrentTime(),
+  onChange = () => {},
+  minuteInterval = 30,
+  isDisabled: isDisabledExternally = false,
+  name,
+  ...boxProps
+}: TimePickerProps) => {
+  const { isDisabled: isFormControlDisabled, isInvalid: isFormControlInvalid } =
+    useFormControlContext() ?? {};
+  const isDisabled = isDisabledExternally ?? isFormControlDisabled ?? false;
+  const { t } = useTranslation();
+  const locale = useCurrentLocale();
+  const label = externalLabel ?? t(texts.time);
+  const state = useTimeFieldState({
+    value,
+    defaultValue,
+    onChange,
+    locale,
+    isDisabled,
+    label,
+    validationState: isFormControlInvalid ? "invalid" : "valid",
+  });
+
+  const dateTime = state.value as CalendarDateTime | null;
+
+  const handleBackwardsClick = () => {
+    if (!dateTime) {
+      return;
+    }
+    const minutesToSubtract =
+      dateTime.minute % minuteInterval || minuteInterval;
+    state.setValue(
+      state.value.subtract({
+        minutes: minutesToSubtract,
+      })
+    );
+  };
+  const handleForwardClick = () => {
+    if (!dateTime) {
+      return;
+    }
+    const minutesToAdd =
+      minuteInterval - (dateTime.minute % minuteInterval) || minuteInterval;
+    state.setValue(
+      state.value.add({
+        minutes: minutesToAdd,
+      })
+    );
+  };
+  const backwardsLabel = `${t(texts.backwards)} ${minuteInterval} ${t(
+    texts.minutes
+  )}`;
+  const forwardsLabel = `${t(texts.forwards)} ${minuteInterval} ${t(
+    texts.minutes
+  )}`;
+  const inputLabel = label ?? t(texts.time);
+  const ariaLabel = `${inputLabel} – ${t(
+    texts.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`)
+  )}`;
+  return (
+    <StyledField
+      variant="simple"
+      width="fit-content"
+      paddingX={2}
+      paddingY={1}
+      alignItems="center"
+      justifyContent="space-between"
+      gap={2}
+      opacity={isDisabled ? 0.5 : 1}
+      pointerEvents={isDisabled ? "none" : "auto"}
+      aria-disabled={isDisabled}
+      aria-live="assertive"
+      aria-label={ariaLabel}
+      {...boxProps}
+    >
+      <IconButton
+        variant="ghost"
+        size="xs"
+        borderRadius="xs"
+        aria-label={backwardsLabel}
+        title={backwardsLabel}
+        icon={<DropdownLeftFill24Icon />}
+        onClick={handleBackwardsClick}
+        isDisabled={isDisabled}
+        style={isDisabled ? { backgroundColor: "transparent" } : {}}
+      />
+      <TimeField label={label} state={state} name={name} />
+      <IconButton
+        variant="ghost"
+        size="xs"
+        borderRadius="xs"
+        aria-label={forwardsLabel}
+        title={forwardsLabel}
+        icon={<DropdownRightFill24Icon />}
+        onClick={handleForwardClick}
+        isDisabled={isDisabled}
+        style={isDisabled ? { backgroundColor: "transparent" } : {}}
+      />
+    </StyledField>
+  );
+};
+
+const texts = createTexts({
+  selectedTimeIs: (time) => ({
+    nb: `Valgt tidspunkt er ${time}`,
+    nn: `Valt tidspunkt er ${time}`,
+    en: `Selected time is ${time}`,
+    sv: `Vald tid är ${time}`,
+  }),
+  time: {
+    nb: "Tid",
+    nn: "Tid",
+    en: "Time",
+    sv: "Tid",
+  },
+  backwards: {
+    nb: "Bakover",
+    nn: "Bakover",
+    en: "Backwards",
+    sv: "Bakåt",
+  },
+  forwards: {
+    nb: "Fremover",
+    nn: "Fremover",
+    en: "Forward",
+    sv: "Framåt",
+  },
+  minutes: {
+    nb: "minutter",
+    nn: "minuttar",
+    en: "minutes",
+    sv: "minuter",
+  },
+});

package/src/datepicker/index.tsx

@@ -0,0 +1,4 @@
+export { Time } from "@internationalized/date";
+export * from "./DatePicker";
+export * from "./DateRangePicker";
+export * from "./TimePicker";

package/src/datepicker/utils.ts

@@ -0,0 +1,33 @@
+import { CalendarDateTime, parseTime } from "@internationalized/date";
+import { useTranslation } from "..";
+
+/**
+ * Returns the currently selected language as a BCF47 language tag.
+ * This is useful for passing into the react-aria hooks
+ */
+export const useCurrentLocale = () => {
+  const { language } = useTranslation();
+  switch (language) {
+    case "nb":
+      return "no";
+    case "nn":
+      return "no";
+    case "sv":
+      return "sv";
+    case "en":
+      return "en-GB";
+    default:
+      return "no";
+  }
+};
+
+/** Gets the current time as a Time object */
+export const getCurrentTime = () => {
+  const now = new Date();
+  return parseTime(now.toTimeString().split(" ")[0]);
+};
+
+/** Gets a readable timestamp from a given time object */
+export const getTimestampFromTime = (time: CalendarDateTime | null) => {
+  return `${time?.hour ?? 0}:${time?.minute ?? 0}`;
+};

package/src/i18n/index.tsx

@@ -0,0 +1,38 @@
+import { initLobot } from "@leile/lobo-t";
+
+export enum Language {
+  NorwegianBokmal = "nb",
+  NorwegianNynorsk = "nn",
+  Swedish = "sv",
+  English = "en",
+}
+
+export const { LanguageProvider, useTranslation } = initLobot<typeof Language>(
+  Language.NorwegianBokmal
+);
+
+type LanguageObject = {
+  [key in Language]: string;
+};
+type LanguageFunction = (...args: (string | number)[]) => LanguageObject;
+
+export type Translations = {
+  [key: string]: LanguageObject | LanguageFunction;
+};
+
+/** Utility function that creates type safe text objects with useTranslation
+ *
+ * ```tsx
+ * const texts = createTexts({
+ *  example: {
+ *   nb: "Eksempel",
+ *   nn: "Døme",
+ *   sv: "Exempel",
+ *   en: "Example",
+ *  }
+ * })
+ * ```
+ */
+export function createTexts<T extends Translations>(texts: T) {
+  return texts;
+}

package/src/image/index.tsx

@@ -0,0 +1,2 @@
+export { Image, Img } from "@chakra-ui/react";
+export type { ImageProps, ImgProps } from "@chakra-ui/react";