@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/typography/Code.tsx

@@ -1,32 +1,20 @@
+"use client";
+
+import React from "react"; // Added explicit React import
 import {
+  chakra,
   Code as ChakraCode,
-  CodeProps as ChakraCodeProps,
-  forwardRef,
+  CodeProps,
+  RecipeVariantProps,
 } from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-import React from "react";
+import { codeRecipie } from "../theme/recipes/code";
+
+type CodeVariantProps = RecipeVariantProps<typeof codeRecipie> & CodeProps;
+
+const StyledCode = chakra(ChakraCode, codeRecipie);
 
-export type CodeProps = ChakraCodeProps & {
-  /**
-   * The color scheme of the inline code.
-   */
-  colorScheme?:
-    | "yellow"
-    | "light-yellow"
-    | "red"
-    | "green"
-    | "orange"
-    | "blue"
-    | "grey"
-    | "white";
-  /** The design variant – "solid" by default.
-   *
-   * Can be specified as `outline` to render a border around the badge. */
-  variant?: "solid" | "outline";
-};
-/**
- * Shows inline code.
- */
-export const Code = forwardRef<CodeProps, As>((props, ref) => (
-  <ChakraCode {...props} ref={ref} />
-));
+export const Code = React.forwardRef<HTMLElement, CodeVariantProps>(
+  function Code(props, ref) {
+    return <StyledCode {...props} ref={ref} />;
+  },
+);

package/src/typography/Heading.tsx

@@ -1,17 +1,19 @@
+"use client";
 import {
   HeadingProps as ChakraHeadingProps,
+  ConditionalValue,
   Text,
-  useColorModeValue,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef } from "react";
 import { slugify } from "..";
-import type { textStyles } from "../theme/foundations";
 
 export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
   /** The heading level, e.g. h1, h2, h3... **/
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   /** The size and style of the heading. Defaults to xl-display */
-  variant?: keyof typeof textStyles;
+  variant?: ConditionalValue<
+    "sm" | "md" | "lg" | "2xl" | "xl-display" | "xl-sans" | "xs"
+  >;
   /** If true, generate an ID based on the children */
   autoId?: boolean;
 };
@@ -38,18 +40,31 @@ export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
  * <Heading as="h1" autoId>Page heading</Heading> // Will set id="page-heading"
  * ```
  */
-export const Heading = ({
-  as,
-  variant = "xl-display",
-  autoId = false,
-  id: externalId,
-  ...props
-}: HeadingProps) => {
-  const id =
-    externalId ??
-    (autoId && typeof props.children === "string"
-      ? slugify(props.children)
-      : undefined);
-  const color = useColorModeValue("text.primary.light", "text.primary.dark");
-  return <Text as={as} textStyle={variant} id={id} color={color} {...props} />;
-};
+
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+  function Heading(props, ref) {
+    const {
+      as,
+      variant = "xl-display",
+      autoId = false,
+      id: externalId,
+      ...rest
+    } = props;
+
+    const id =
+      (externalId ?? (autoId && typeof rest.children === "string"))
+        ? slugify(rest.children as string)
+        : undefined;
+
+    return (
+      <Text
+        as={as}
+        textStyle={variant}
+        id={id}
+        color={"text"}
+        ref={ref}
+        {...rest}
+      />
+    );
+  },
+);

package/src/typography/Text.tsx

@@ -1,14 +1,15 @@
+"use client";
 import {
   Text as ChakraText,
   TextProps as ChakraTextProps,
-  forwardRef,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef } from "react";
 
 export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
   /** The size and style of the text.
    *
-   * Defaults to "sm" */
+   * Defaults to "sm"
+   * textStyle values are: "sm" | "md" | "lg" | "2xl" | "xl-display" | "xl-sans" | "xs" */
   variant?: ChakraTextProps["textStyle"];
 };
 
@@ -19,8 +20,10 @@ export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
  * <Text>Welcome to this paragraph of text.</Text>
  * ```
  */
-export const Text = forwardRef<TextProps, "p">(
-  ({ variant = "sm", ...props }, ref) => {
-    return <ChakraText {...props} textStyle={variant} ref={ref} />;
+
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+  function Text(props, ref) {
+    const { variant = "sm", ...rest } = props;
+    return <ChakraText {...rest} textStyle={variant} ref={ref} />;
   },
 );

package/src/typography/{index.tsx → index.ts}

@@ -1,3 +1,4 @@
+export { Em, Kbd } from "@chakra-ui/react";
 export * from "./Badge";
 export * from "./Code";
 export * from "./Heading";

package/src/util/externals.tsx

@@ -1,36 +1,22 @@
 /** This file works as a proxy for all Chakra UI exports */
 export {
-  DarkMode,
-  LightMode,
   Portal,
-  defineStyleConfig,
-  extendTheme,
   useBreakpointValue,
   useClipboard,
-  useColorMode,
-  useColorModePreference,
-  useColorModeValue,
   useControllableProp,
   useDisclosure,
-  useMergeRefs,
-  useOutsideClick,
-  usePrefersReducedMotion,
-  useTheme,
+  useMediaQuery,
   useToken,
+  defineRecipe,
+  defineStyle,
+  For,
+  FormatNumber,
+  FormatByte,
+  LocaleProvider,
+  Show,
+  VisuallyHidden,
+  createListCollection,
+  useCheckbox,
 } from "@chakra-ui/react";
-export type {
-  CSSWithMultiValues,
-  ComponentStyleConfig,
-  PortalProps,
-  UseClipboardOptions,
-  UseDisclosureProps,
-  UseOutsideClickProps,
-} from "@chakra-ui/react";
-import { useMediaQuery as useMediaQueryChakra } from "@chakra-ui/react";
-
-/**
- * @deprecated useMediaQuery is deprecated. Use CSS only to determine the media query. - SSR is not supported and usage of useMediaQuery for rendering will cause hydration errors.
- */
-export const useMediaQuery = useMediaQueryChakra;
-
-export { useSize } from "@chakra-ui/react-use-size";
+export { useMap, useOnClickOutside, useIsClient } from "usehooks-ts";
+export type { PortalProps, UseDisclosureProps } from "@chakra-ui/react";

package/tsconfig.json

@@ -3,6 +3,10 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "rootDir": "."
+    "rootDir": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true
   }
 }

package/src/accordion/Accordion.test.tsx

@@ -1,20 +0,0 @@
-import { act, render } from "@testing-library/react";
-import React from "react";
-import { axe } from "vitest-axe";
-import { Accordion } from "./Accordion";
-import { ExpandableItem } from "./Expandable";
-
-describe("<Accordion />", () => {
-  it("is accessible", async () => {
-    const { container, getByRole } = render(
-      <Accordion>
-        <ExpandableItem title="Title">Content</ExpandableItem>
-      </Accordion>,
-    );
-    await act(async () => {
-      expect(await axe(container)).toHaveNoViolations();
-      getByRole("button").click();
-      expect(await axe(container)).toHaveNoViolations();
-    });
-  });
-});

package/src/alert/BaseAlert.test.tsx

@@ -1,37 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import { axe } from "vitest-axe";
-import { BaseAlert } from "./BaseAlert";
-
-describe("<BaseAlert />", () => {
-  it("is accessible as variant='success'", async () => {
-    const { container } = render(
-      <BaseAlert variant="success">Test text</BaseAlert>,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-  it("is accessible as variant='info'", async () => {
-    const { container } = render(
-      <BaseAlert variant="info">Test text</BaseAlert>,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-  it("is accessible as variant='warning'", async () => {
-    const { container } = render(
-      <BaseAlert variant="warning">Test text</BaseAlert>,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-  it("is accessible as variant='error'", async () => {
-    const { container } = render(
-      <BaseAlert variant="error">Test text</BaseAlert>,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-  it("is accessible as variant='alt-transport'", async () => {
-    const { container } = render(
-      <BaseAlert variant="alt-transport">Test text</BaseAlert>,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/alert/BaseAlert.tsx

@@ -1,34 +0,0 @@
-import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
-
-export type BaseAlertProps = BoxProps & {
-  /** The color scheme and icon of the alert */
-  variant:
-    | "info"
-    | "success"
-    | "warning"
-    | "alt-transport"
-    | "error"
-    | "service"
-    | "global-deviation";
-  /** The body content of the alert */
-  children: React.ReactNode;
-  /** The title of the alert */
-  title?: string;
-};
-
-/**
- * A base alert box component. Should only be composed by other alert components.
- */
-export const BaseAlert = ({
-  variant,
-  children,
-  ...boxProps
-}: BaseAlertProps) => {
-  const styles = useMultiStyleConfig("Alert", { variant });
-  return (
-    <Box __css={styles.container} {...boxProps}>
-      {children}
-    </Box>
-  );
-};

package/src/alert/ClosableAlert.test.tsx

@@ -1,37 +0,0 @@
-import { act, render } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { axe } from "vitest-axe";
-import { ClosableAlert } from ".";
-
-describe("<ClosableAlert />", () => {
-  it("closes when you click the close button", async () => {
-    const { getByRole, queryByRole } = render(
-      <ClosableAlert variant="info">Test text</ClosableAlert>,
-    );
-    act(() => {
-      getByRole("button").click();
-    });
-    expect(queryByRole("button")).not.toBeInTheDocument();
-  });
-
-  it("calls the onClose prop when closed", () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <ClosableAlert variant="info" onClose={handleClick}>
-        Test text
-      </ClosableAlert>,
-    );
-    act(() => {
-      getByRole("button").click();
-    });
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it("is accessible", async () => {
-    const { container } = render(
-      <ClosableAlert variant="info">Test text</ClosableAlert>,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/alert/ClosableAlert.tsx

@@ -1,85 +0,0 @@
-import {
-  Box,
-  Flex,
-  useDisclosure,
-  useMultiStyleConfig,
-} from "@chakra-ui/react";
-import { CloseFill18Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
-import { IconButton } from "../button";
-import { createTexts, useTranslation } from "../i18n";
-import { AlertIcon } from "./AlertIcon";
-import { BaseAlert, BaseAlertProps } from "./BaseAlert";
-
-type ClosableAlertProps = BaseAlertProps & {
-  /** Callback for when the close button is clicked */
-  onClose?: () => void;
-};
-/**
- * A closable alert component.
- *
- * A regular alert with a close button that can be used to dismiss the alert.
- *
- * ```tsx
- * <ClosableAlert variant="info" title="Nice to know">
- *   <Text>Some info here</Text>
- * </ClosableAlert>
- * ```
- *
- * You can also pass in an optional `onClose` callback, for things like analytics.
- *
- * ```tsx
- * <ClosableAlert
- *   variant="info"
- *   title="Nice to know"
- *   onClose={() => analytics.track('alert-closed')}
- * >
- *   <Text>Some info here</Text>
- * </ClosableAlert>
- */
-export const ClosableAlert = ({
-  variant,
-  title,
-  children,
-  onClose: externalOnClose = () => {},
-  ...boxProps
-}: ClosableAlertProps) => {
-  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
-  const styles = useMultiStyleConfig("Alert", { variant });
-  const { t } = useTranslation();
-  if (!isOpen) {
-    return null;
-  }
-
-  const handleClose = () => {
-    externalOnClose();
-    onClose();
-  };
-
-  return (
-    <BaseAlert variant={variant} {...boxProps}>
-      <IconButton
-        variant="ghost"
-        size="sm"
-        onClick={handleClose}
-        icon={<CloseFill18Icon />}
-        aria-label={t(texts.close)}
-        sx={styles.closeButton}
-      />
-      <AlertIcon variant={variant} />
-      <Flex direction="column" gap={title ? 2 : undefined} textAlign="left">
-        {title && <Box fontWeight="bold">{title}</Box>}
-        <Box marginRight={1}>{children}</Box>
-      </Flex>
-    </BaseAlert>
-  );
-};
-
-const texts = createTexts({
-  close: {
-    nb: "Lukk",
-    nn: "Lukk",
-    sv: "Dölj",
-    en: "Close",
-  },
-});

package/src/alert/ExpandableAlert.test.tsx

@@ -1,84 +0,0 @@
-import { act, render, waitFor } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { axe } from "vitest-axe";
-import { ExpandableAlert } from ".";
-
-describe("<ExpandableAlert />", () => {
-  it("works as an expandable", async () => {
-    const { getByRole, getByText } = render(
-      <ExpandableAlert variant="info" title="Title">
-        Test text
-      </ExpandableAlert>,
-    );
-    await waitFor(() => expect(getByText("Test text")).not.toBeVisible());
-    act(() => {
-      getByRole("button").click();
-    });
-    await waitFor(() => expect(getByText("Test text")).toBeVisible());
-    act(() => {
-      getByRole("button").click();
-    });
-    await waitFor(() => expect(getByText("Test text")).not.toBeVisible());
-  });
-
-  it("calls onToggle when toggled", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <ExpandableAlert variant="info" title="Title" onToggle={handleClick}>
-        Test text
-      </ExpandableAlert>,
-    );
-
-    act(() => {
-      getByRole("button").click();
-    });
-    expect(handleClick).toHaveBeenCalledTimes(1);
-    expect(handleClick).lastCalledWith(true);
-
-    act(() => {
-      getByRole("button").click();
-    });
-    expect(handleClick).toHaveBeenCalledTimes(2);
-    expect(handleClick).lastCalledWith(false);
-  });
-
-  it("lets you set the heading level", async () => {
-    const { queryByRole, rerender } = render(
-      <ExpandableAlert variant="info" title="Title" headingLevel="h2">
-        Test text
-      </ExpandableAlert>,
-    );
-    expect(queryByRole("heading", { level: 2 })).toBeInTheDocument();
-    rerender(
-      <ExpandableAlert variant="info" title="Title" headingLevel="h3">
-        Test text
-      </ExpandableAlert>,
-    );
-    expect(queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
-    expect(queryByRole("heading", { level: 3 })).toBeInTheDocument();
-  });
-
-  it("is accessible in all states", async () => {
-    const { container, getByRole } = render(
-      <ExpandableAlert variant="info" title="Title">
-        Test text
-      </ExpandableAlert>,
-    );
-    await act(async () => {
-      expect(await axe(container)).toHaveNoViolations();
-    });
-    act(() => {
-      getByRole("button").click();
-    });
-    await act(async () => {
-      expect(await axe(container)).toHaveNoViolations();
-    });
-    act(() => {
-      getByRole("button").click();
-    });
-    await act(async () => {
-      expect(await axe(container)).toHaveNoViolations();
-    });
-  });
-});

package/src/alert/StaticAlert.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { AlertIcon } from "./AlertIcon";
-import { BaseAlert, BaseAlertProps } from "./BaseAlert";
-import { Box, Flex } from "@chakra-ui/react";
-
-type StaticAlertProps = BaseAlertProps;
-
-/**
- * A static alert component.
- *
- * This alert component cannot be closed, nor dismissed.
- *
- * ```tsx
- * <StaticAlert variant="info" title="Nice to know">
- *   Thomas the Train was originally only a wooden toy made for the creator’s son.
- * </StaticAlert>
- * ```
- */
-export const StaticAlert = ({
-  children,
-  title,
-  ...props
-}: StaticAlertProps) => {
-  return (
-    <BaseAlert {...props}>
-      <AlertIcon variant={props.variant} />
-      <Flex direction="column" gap={title ? 2 : undefined} textAlign="left">
-        {title && <Box fontWeight="bold">{title}</Box>}
-        <Box>{children}</Box>
-      </Flex>
-    </BaseAlert>
-  );
-};

package/src/button/Button.test.tsx

@@ -1,23 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { axe } from "vitest-axe";
-import { Button } from ".";
-
-describe("<Button />", () => {
-  it("works like a button", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <Button variant="primary" onClick={handleClick}>
-        Click me
-      </Button>,
-    );
-    getByRole("button").click();
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it("is accessible", async () => {
-    const { container } = render(<Button variant="primary">Click me</Button>);
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/datepicker/TimePicker.test.tsx

@@ -1,74 +0,0 @@
-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/input/FormControl.tsx

@@ -1,2 +0,0 @@
-export { FormControl } from "@chakra-ui/react";
-export type { FormControlProps } from "@chakra-ui/react";