@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/loader/LightInlineLoader.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderLightData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -14,12 +15,19 @@ export const LightInlineLoader = ({
   ...props
 }: LightInlineLoaderProps) => {
   return (
-    <Center {...props}>
+    <Center
+      height="100%"
+      background="white"
+      role="status"
+      aria-live="polite"
+      {...props}
+    >
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={inlineLoaderLightData} />}
+          <Lottie animationData={inlineLoaderLightData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/LightSpinner.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -27,12 +28,13 @@ export const LightSpinner = ({
   ...props
 }: LightSpinnerProps) => {
   return (
-    <Center flexDirection="column" {...props}>
+    <Center flexDirection="column" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={spinnerLightData} />}
+          <Lottie animationData={spinnerLightData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
       {children && (
         <Box marginTop={3} fontWeight="bold">
           {children}

package/src/loader/Lottie.tsx

@@ -1,10 +1,10 @@
-import { useLottie } from "lottie-react";
 import React from "react";
 
+import ReactLottie from "lottie-react";
+
 /**
  * A wrapper around Lottie to make it tree-shakeable for SSR.
  */
 export default function Lottie({ animationData }: { animationData: any }) {
-  const { View } = useLottie({ animationData, loop: true });
-  return <>{View}</>;
+  return <ReactLottie animationData={animationData} />;
 }

package/src/loader/ProgressBar.tsx

@@ -1,40 +1,50 @@
-import { Box, BoxProps, Text, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
-import { useProgressBar } from "react-aria";
-import { createTexts, useTranslation } from "..";
+"use client";
+import {
+  BoxProps,
+  Progress,
+  UseProgressProps,
+  RecipeVariantProps,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { progressBarRecipe } from "../theme/slot-recipes/progress-bar";
 import { useRotatingLabel } from "./useRotatingLabel";
 
-type ProgressBarProps = BoxProps & {
-  /** The percentage of progress made.
-   *
-   * The value must be between 0 and 100 */
-  value: number;
-  /** The height of the progress bar.
-   * Defaults to .5rem
-   **/
-  height?: BoxProps["height"];
-  /** The width of the progress bar.
-   *
-   * Defaults to the width of its container
-   **/
-  width?: BoxProps["width"];
+type ProgressBarVariants = RecipeVariantProps<typeof progressBarRecipe>;
 
-  /** Pass if no label is passed to the label */
-  "aria-label": string;
-  /** Optional text shown below the loader.
-   *
-   * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
-   */
-  label: string | string[];
-  /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
-   *
-   * Defaults to 5000 (5 seconds).
-   */
-  labelRotationDelay?: number;
+export type ProgressBarProps = BoxProps &
+  UseProgressProps &
+  PropsWithChildren<ProgressBarVariants> & {
+    children: React.ReactNode;
+    /** The height of the progress bar.
+     * Defaults to .5rem
+     **/
+    height?: BoxProps["height"];
+    /** The width of the progress bar.
+     *
+     * Defaults to the width of its container
+     **/
+    width?: BoxProps["width"];
 
-  /** Pass to disable the color of the component */
-  isActive?: boolean;
-};
+    /** Pass if no label is passed to the label */
+    "aria-label": string;
+    /** Optional text shown below the loader.
+     *
+     * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
+     */
+    label: string | string[];
+    /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
+     *
+     * Defaults to 5000 (5 seconds).
+     */
+    labelRotationDelay?: number;
+
+    /** Pass to disable the color of the component */
+    isActive?: boolean;
+
+    /** Pass to show the value text */
+    showValueText?: boolean;
+  };
 
 /**
  * Shows the progress of a loading process.
@@ -63,57 +73,46 @@ type ProgressBarProps = BoxProps & {
  * <ProgressBar value={50} aria-label="Loading..." />
  * ```
  */
-export const ProgressBar = ({
-  value,
-  label,
-  labelRotationDelay = 5000,
-  height = "0.5rem",
-  width = "100%",
-  "aria-label": ariaLabel,
-  isActive = true,
-  ...rest
-}: ProgressBarProps) => {
-  const { t } = useTranslation();
-  const currentLoadingText = useRotatingLabel({
-    label,
-    delay: labelRotationDelay,
-  });
-  const { labelProps, progressBarProps } = useProgressBar({
-    isIndeterminate: value === undefined,
-    value,
-    "aria-label": ariaLabel || t(texts.label(value)),
-  });
-  const styles = useMultiStyleConfig("ProgressBar", { isActive });
-  return (
-    <>
-      <Box
-        {...progressBarProps}
-        title={t(texts.label(value))}
-        __css={styles.container}
-        {...rest}
-      >
-        <Box width={width} __css={styles.background}>
-          <Box
-            __css={styles.progress}
-            height={height}
-            width={isActive ? `${value}%` : "100%"}
-          />
-        </Box>
-        {currentLoadingText && (
-          <Text sx={styles.description} {...labelProps}>
+
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  (
+    {
+      value,
+      colorPalette = "white",
+      label,
+      labelRotationDelay = 5000,
+      isActive = true,
+      showValueText = false,
+      height = "0.5rem",
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const recipe = useSlotRecipe({ key: "progressbar" });
+    const styles = recipe({});
+    const currentLoadingText = useRotatingLabel({
+      label,
+      delay: labelRotationDelay,
+    });
+
+    return (
+      <Progress.Root css={styles.container} ref={ref} value={value} {...rest}>
+        <Progress.Track
+          height={height}
+          css={isActive ? styles.background : styles.disabledBackground}
+        >
+          <Progress.Range css={styles.progress} />
+        </Progress.Track>
+
+        {label && (
+          <Progress.Label css={styles.description}>
             {currentLoadingText}
-          </Text>
+          </Progress.Label>
         )}
-      </Box>
-    </>
-  );
-};
 
-const texts = createTexts({
-  label: (value) => ({
-    nb: `${value}% ferdig`,
-    nn: `${value}% ferdig`,
-    sv: `${value}% klart`,
-    en: `${value}% done`,
-  }),
-});
+        {showValueText && <Progress.ValueText>{value}%</Progress.ValueText>}
+      </Progress.Root>
+    );
+  },
+);

package/src/loader/ProgressLoader.tsx

@@ -1,10 +1,22 @@
-import { Box, BoxProps, Text } from "@chakra-ui/react";
-import React, { useId, useRef } from "react";
+"use client";
+import {
+  Box,
+  BoxProps,
+  chakra,
+  RecipeVariantProps,
+  Text,
+} from "@chakra-ui/react";
+import React, { forwardRef, useId, useRef, useState, useEffect } from "react";
 import { useProgressBar } from "react-aria";
 import { createTexts, useTranslation } from "..";
 import { useRotatingLabel } from "./useRotatingLabel";
+import { progressLoaderRecipe } from "../theme/recipes/progress-loader";
+export type ProgressLoaderVariantProps = RecipeVariantProps<
+  typeof progressLoaderRecipe
+>;
 
-type ProgressLoaderProps = BoxProps & {
+export type ProgressLoaderProps = BoxProps & {
+  children: React.ReactNode;
   /** The percentage of progress made.
    *
    * The value must be between 0 and 100 */
@@ -29,6 +41,29 @@ type ProgressLoaderProps = BoxProps & {
   labelRotationDelay?: number;
 };
 
+/**
+ * Custom hook to calculate the total length of an SVG path and progress offset.
+ * @param value The percentage of progress made (0-100).
+ * @returns A ref for the path element, the calculated path length, and the progress offset.
+ */
+const usePathLength = (value: number) => {
+  const pathRef = useRef<SVGPathElement>(null);
+  const [pathLength, setPathLength] = useState(0);
+
+  useEffect(() => {
+    if (pathRef.current) {
+      const totalLength = pathRef.current.getTotalLength();
+      setPathLength(totalLength);
+    }
+  }, []);
+
+  const progressOffset = ((value - 100) / 100) * pathLength;
+
+  return { pathRef, pathLength, progressOffset };
+};
+
+const ProgressLoaderWrapper = chakra("div", progressLoaderRecipe);
+
 /**
  * Shows the progress of a loading process.
  *
@@ -56,79 +91,89 @@ type ProgressLoaderProps = BoxProps & {
  * <ProgressLoader value={50} aria-label="Fetching your trips..." />
  * ```
  */
-export const ProgressLoader = ({
-  value,
-  label,
-  labelRotationDelay = 5000,
-  "aria-label": ariaLabel,
-  width,
-  ...rest
-}: ProgressLoaderProps) => {
-  const { t } = useTranslation();
-  const currentLoadingText = useRotatingLabel({
-    label,
-    delay: labelRotationDelay,
-  });
-  const { labelProps, progressBarProps } = useProgressBar({
-    isIndeterminate: value === undefined,
+
+export const ProgressLoader = forwardRef<HTMLDivElement, ProgressLoaderProps>(
+  ({
     value,
-    "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
-  });
-  const pathRef = useRef<SVGPathElement>(null);
-  const progressPathLength = pathRef.current?.getTotalLength() ?? 0;
-  const progress = ((value - 100) / 100) * progressPathLength;
-  const id = useId();
-  return (
-    <Box {...progressBarProps} minWidth="100px" width={width} {...rest}>
-      <Box as="svg" viewBox="0 0 246 78" fill="none">
-        <Box
-          as="path"
-          id={`${id}-start-dot`}
-          d="M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z"
-          fill="#FFB466"
-        />
-        <Box
-          as="path"
-          id={`${id}-track`}
-          d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
-          stroke="coralGreen"
-          strokeWidth="13.6469"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <Box
-          as="path"
-          id={`${id}-progress`}
-          d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
-          stroke="greenHaze"
-          strokeWidth="13.6469"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeDasharray={progressPathLength}
-          strokeDashoffset={progress}
-          transition="stroke-dashoffset .2s ease-out"
-          ref={pathRef as any}
-        />
-        <Box
-          as="path"
-          id={`${id}-end-dot`}
-          d="M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z"
-          fill="#688CBA"
-        />
-      </Box>
-      {currentLoadingText && (
-        <Text
-          textAlign="center"
-          marginTop={2}
-          fontWeight="bold"
-          {...labelProps}
-        >
-          {currentLoadingText}
-        </Text>
-      )}
-    </Box>
-  );
-};
+    label,
+    labelRotationDelay = 5000,
+    "aria-label": ariaLabel,
+    width,
+    ...rest
+  }: ProgressLoaderProps) => {
+    const { t } = useTranslation();
+    const currentLoadingText = useRotatingLabel({
+      label,
+      delay: labelRotationDelay,
+    });
+    const { labelProps, progressBarProps } = useProgressBar({
+      isIndeterminate: value === undefined,
+      value,
+      "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
+    });
+    const {
+      pathRef,
+      pathLength: progressPathLength,
+      progressOffset,
+    } = usePathLength(value);
+
+    const id = useId();
+
+    return (
+      <ProgressLoaderWrapper
+        {...progressBarProps}
+        width={width}
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label={ariaLabel ?? t(texts.fallbackLabel(value ?? "?"))}
+        {...rest}
+      >
+        <chakra.svg as="svg" viewBox="0 0 246 78" fill="none">
+          <path
+            id={`${id}-start-dot`}
+            d="M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z"
+            fill="#FFB466"
+          />
+          <path
+            id={`${id}-track`}
+            d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
+            strokeWidth="13.6469"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id={`${id}-progress`}
+            d="M204.911 39.1156C204.911 39.1156 175.012 46.8319 157.651 30.4354C140.29 14.0388 121 21.7547 110.391 47.6529C103.22 65.157 78.9634 67.0859 67.9533 47.6529C59.8376 33.3287 36.125 37.1866 36.125 37.1866"
+            strokeWidth="13.6469"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray={progressPathLength}
+            strokeDashoffset={progressOffset}
+            style={{ transition: "stroke-dashoffset .2s ease-out" }}
+            ref={pathRef}
+          />
+          <path
+            id={`${id}-end-dot`}
+            d="M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z"
+            fill="#688CBA"
+          />
+        </chakra.svg>
+        {currentLoadingText && (
+          <Text
+            textAlign="center"
+            marginTop={2}
+            fontWeight="bold"
+            {...labelProps}
+          >
+            {currentLoadingText}
+          </Text>
+        )}
+      </ProgressLoaderWrapper>
+    );
+  },
+);
 
 const texts = createTexts({
   fallbackLabel: (value) => ({

package/src/loader/Skeleton.tsx

@@ -1,22 +1,97 @@
+"use client";
+import { skeletonRecipe } from "@/theme/recipes/skeleton";
+import type {
+  SkeletonProps as ChakraSkeletonProps,
+  CircleProps,
+  RecipeVariantProps,
+} from "@chakra-ui/react";
 import {
-  BoxProps,
-  forwardRef,
   Skeleton as ChakraSkeleton,
+  Circle,
+  Stack,
+  useRecipe,
 } from "@chakra-ui/react";
-import React from "react";
-
-export type SkeletonProps = BoxProps & {
-  isLoaded?: boolean;
-};
-/**
- * Skeleton renders a loading animation for a given box. It works great as a placeholder to avoid layout shifts.
- */
-export const Skeleton = forwardRef<SkeletonProps, "div">((props, ref) => (
-  <ChakraSkeleton
-    {...props}
-    ref={ref}
-    aria-busy="true"
-    aria-hidden="true"
-    role="alert"
-  />
-));
+import * as React from "react";
+import { forwardRef } from "react";
+
+type SkeletonVariantProps = RecipeVariantProps<typeof skeletonRecipe>;
+
+export type SkeletonCircleProps = ChakraSkeletonProps &
+  SkeletonVariantProps & {
+    size?: CircleProps["size"];
+  };
+
+export const SkeletonCircle = React.forwardRef<
+  HTMLDivElement,
+  SkeletonCircleProps
+>(function SkeletonCircle(props, ref) {
+  const recipe = useRecipe({ recipe: skeletonRecipe });
+
+  const [recipeProps, restProps] = recipe.splitVariantProps({
+    loading: true,
+    variant: "pulse",
+    ...props,
+  });
+
+  const { size, css, ...rest } = restProps;
+
+  return (
+    <Circle size={size} asChild ref={ref}>
+      <ChakraSkeleton css={{ ...recipe(recipeProps), ...css }} {...rest} />
+    </Circle>
+  );
+});
+
+export type SkeletonTextProps = ChakraSkeletonProps &
+  SkeletonVariantProps & {
+    noOfLines?: number;
+  };
+
+export const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    const recipe = useRecipe({ recipe: skeletonRecipe });
+    const [recipeProps, restProps] = recipe.splitVariantProps({
+      loading: true,
+      variant: "pulse",
+      ...props,
+    });
+    const { noOfLines = 3, height = "0.5rem", gap, css, ...rest } = restProps;
+
+    return (
+      <Stack gap={gap} width="full" ref={ref}>
+        {Array.from({ length: noOfLines }).map((_, index) => (
+          <ChakraSkeleton
+            height={height}
+            css={{ ...recipe(recipeProps), ...css }}
+            key={index}
+            _last={{ maxW: "80%" }}
+            {...rest}
+          />
+        ))}
+      </Stack>
+    );
+  },
+);
+
+export type SkeletonProps = ChakraSkeletonProps & SkeletonVariantProps;
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonTextProps>(
+  function SkeletonText(props, ref) {
+    const recipe = useRecipe({ recipe: skeletonRecipe });
+    const [recipeProps, restProps] = recipe.splitVariantProps({
+      loading: true,
+      variant: "pulse",
+      ...props,
+    });
+
+    const { css, ...rest } = restProps;
+
+    return (
+      <ChakraSkeleton
+        ref={ref}
+        css={{ ...recipe(recipeProps), ...css }}
+        {...rest}
+      />
+    );
+  },
+);

package/src/loader/index.tsx

@@ -10,5 +10,3 @@ export * from "./LightSpinner";
 export * from "./ProgressBar";
 export * from "./ProgressLoader";
 export * from "./Skeleton";
-export * from "./SkeletonCircle";
-export * from "./SkeletonText";

package/src/loader/useHydrated.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useState } from "react";
 
 // Lifted from remix-utils

package/src/loader/useRotatingLabel.tsx

@@ -1,5 +1,6 @@
-import { useInterval } from "@chakra-ui/react";
+"use client";
 import { useMemo, useState } from "react";
+import { useInterval } from "usehooks-ts";
 
 type UseRotatingLabelArgs = {
   label?: string | string[];