@vygruppen/spor-react 1.3.4 → 2.0.0

package/src/link/TextLink.tsx

@@ -0,0 +1,45 @@
+import {
+  Link as ChakraLink,
+  LinkProps as ChakraLinkProps,
+  forwardRef,
+} from "@chakra-ui/react";
+import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+import { createTexts, useTranslation } from "..";
+
+type LinkProps = Omit<ChakraLinkProps, "variant"> & {
+  variant?: "primary" | "secondary" | "tertiary";
+};
+/** Link to different sites or parts of site
+ *
+ * You can specify the `variant` prop to get different link designs. `tertiary` should only be used on dark backgrounds.
+ */
+export const TextLink = forwardRef<LinkProps, "a">(
+  ({ children, ...props }, ref) => {
+    const { t } = useTranslation();
+    const isExternal =
+      props.isExternal !== undefined
+        ? props.isExternal
+        : Boolean(props.href?.match(/^https?:\/\//));
+    return (
+      <ChakraLink {...props} ref={ref} isExternal={isExternal}>
+        {children}
+        {isExternal && (
+          <LinkOutOutline24Icon
+            marginLeft={0.5}
+            aria-label={t(texts.externalLink)}
+          />
+        )}
+      </ChakraLink>
+    );
+  }
+);
+
+const texts = createTexts({
+  externalLink: {
+    nb: "Ekstern lenke",
+    nn: "Ekstern lenke",
+    sv: "Extern länk",
+    en: "External link",
+  },
+});

package/src/link/index.tsx

@@ -0,0 +1 @@
+export * from "./TextLink";

package/src/loader/ClientOnly.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useHydrated } from "./useHydrated";
+
+type ClientOnlyProps = {
+  /** A function that renders the client-side only component */
+  children: () => React.ReactNode;
+  /** An optional fallback to render in place on the server */
+  fallback?: React.ReactNode;
+};
+
+/**
+ * Render the children only after the JS has loaded client-side. Use an optional
+ * fallback component if the JS is not yet loaded.
+ *
+ * Example: Render a Chart component if JS loads, renders a simple FakeChart
+ * component server-side or if there is no JS. The FakeChart can have only the
+ * UI without the behavior or be a loading spinner or skeleton.
+ * ```tsx
+ * return (
+ *   <ClientOnly fallback={<FakeChart />}>
+ *     {() => <Chart />}
+ *   </ClientOnly>
+ * );
+ * ```
+ */
+export const ClientOnly = ({ children, fallback = null }: ClientOnlyProps) => {
+  const isHydrated = useHydrated();
+  return <>{isHydrated ? children() : fallback}</>;
+};

package/src/loader/ColorInlineLoader.tsx

@@ -0,0 +1,27 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { inlineLoaderColorData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type ColorInlineLoaderProps = Exclude<BoxProps, "children">;
+/**
+ * Loading component that works well in bounded contexts, like inside a button.
+ *
+ * This component should only be used on light backgrounds with low saturation (e.g. white, light grey etc.). For colored backgrounds, please use the LightInlineLoader component.
+ */
+export const ColorInlineLoader = ({
+  width,
+  maxWidth,
+  ...props
+}: ColorInlineLoaderProps) => {
+  return (
+    <Center {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={inlineLoaderColorData} />}
+        </ClientOnly>
+      </Box>
+    </Center>
+  );
+};

package/src/loader/ColorSpinner.tsx

@@ -0,0 +1,44 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { spinnerColorData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type SpinnerProps = BoxProps;
+export type ColorSpinnerProps = SpinnerProps;
+/** A circular spinner
+ *
+ * Can be used in place of a loading animation, or for reloading app state, for instance.
+ *
+ * ```tsx
+ * <ColorSpinner width="64px" height="64px" />
+ * ```
+ *
+ * You can also pass an explanatory text as `children`:
+ *
+ * ```tsx
+ * <ColorSpinner>
+ *   Hold your horses
+ * </ColorSpinner>
+ */
+export const ColorSpinner = ({
+  children,
+  width,
+  maxWidth,
+  ...props
+}: SpinnerProps) => {
+  return (
+    <Center flexDirection="column" {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={spinnerColorData} />}
+        </ClientOnly>
+      </Box>
+      {children && (
+        <Box mt={3} fontWeight="bold">
+          {children}
+        </Box>
+      )}
+    </Center>
+  );
+};

package/src/loader/ContentLoader.tsx

@@ -0,0 +1,27 @@
+import { Box, BoxProps } from "@chakra-ui/react";
+import { contentLoaderData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type ContentLoaderProps = BoxProps;
+/**
+ * ContentLoader is a component that renders a loading animation.
+ * It should mostly be used for
+ */
+export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
+  return (
+    <Box {...props}>
+      <Box maxWidth="140px" mx="auto">
+        <ClientOnly>
+          {() => <Lottie animationData={contentLoaderData} />}
+        </ClientOnly>
+      </Box>
+      {children && (
+        <Box textAlign="center" fontWeight="bold">
+          {children}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/loader/DarkFullScreenLoader.tsx

@@ -0,0 +1,23 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { fullScreenLoaderWhiteData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+type DarkFullScreenLoaderProps = BoxProps;
+
+export const DarkFullScreenLoader = ({
+  width,
+  maxWidth,
+  ...props
+}: DarkFullScreenLoaderProps) => {
+  return (
+    <Center height="100%" background="darkTeal" {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={fullScreenLoaderWhiteData} />}
+        </ClientOnly>
+      </Box>
+    </Center>
+  );
+};

package/src/loader/DarkInlineLoader.tsx

@@ -0,0 +1,25 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type DarkInlineLoaderProps = Exclude<BoxProps, "children">;
+/**
+ * Loading component that works well in bounded contexts, like inside a button.
+ */
+export const DarkInlineLoader = ({
+  width,
+  maxWidth,
+  ...props
+}: DarkInlineLoaderProps) => {
+  return (
+    <Center {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={inlineLoaderDarkData} />}
+        </ClientOnly>
+      </Box>
+    </Center>
+  );
+};

package/src/loader/DarkSpinner.tsx

@@ -0,0 +1,43 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { spinnerDarkData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type DarkSpinnerProps = BoxProps;
+/** A circular spinner
+ *
+ * Can be used in place of a loading animation, or for reloading app state, for instance.
+ *
+ * ```tsx
+ * <DarkSpinner width="64px" height="64px" />
+ * ```
+ *
+ * You can also pass an explanatory text as `children`:
+ *
+ * ```tsx
+ * <DarkSpinner>
+ *   Hold your horses
+ * </DarkSpinner>
+ */
+export const DarkSpinner = ({
+  children,
+  width,
+  maxWidth,
+  ...props
+}: DarkSpinnerProps) => {
+  return (
+    <Center flexDirection="column" {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={spinnerDarkData} />}
+        </ClientOnly>
+      </Box>
+      {children && (
+        <Box mt={3} fontWeight="bold">
+          {children}
+        </Box>
+      )}
+    </Center>
+  );
+};

package/src/loader/LightFullScreenLoader.tsx

@@ -0,0 +1,23 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+type LightFullScreenLoaderProps = BoxProps;
+
+export const LightFullScreenLoader = ({
+  width,
+  maxWidth,
+  ...props
+}: LightFullScreenLoaderProps) => {
+  return (
+    <Center height="100%" background="white" {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={fullScreenLoaderBlackData} />}
+        </ClientOnly>
+      </Box>
+    </Center>
+  );
+};

package/src/loader/LightInlineLoader.tsx

@@ -0,0 +1,25 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { inlineLoaderLightData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type LightInlineLoaderProps = Exclude<BoxProps, "children">;
+/**
+ * Loading component that works well in bounded contexts, like inside a button.
+ */
+export const LightInlineLoader = ({
+  width,
+  maxWidth,
+  ...props
+}: LightInlineLoaderProps) => {
+  return (
+    <Center {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>
+          {() => <Lottie animationData={inlineLoaderLightData} />}
+        </ClientOnly>
+      </Box>
+    </Center>
+  );
+};

package/src/loader/LightSpinner.tsx

@@ -0,0 +1,41 @@
+import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { spinnerLightData } from "@vygruppen/spor-loader";
+import React from "react";
+import { ClientOnly } from "./ClientOnly";
+import Lottie from "./Lottie";
+
+export type LightSpinnerProps = BoxProps;
+/** A circular spinner
+ *
+ * Can be used in place of a loading animation, or for reloading app state, for instance.
+ *
+ * ```tsx
+ * <LightSpinner width="64px" height="64px" />
+ * ```
+ *
+ * You can also pass an explanatory text as `children`:
+ *
+ * ```tsx
+ * <LightSpinner>
+ *   Hold your horses
+ * </LightSpinner>
+ */
+export const LightSpinner = ({
+  children,
+  width,
+  maxWidth,
+  ...props
+}: LightSpinnerProps) => {
+  return (
+    <Center flexDirection="column" {...props}>
+      <Box width={width} maxWidth={maxWidth}>
+        <ClientOnly>{() => <Lottie animationData={spinnerLightData} />}</ClientOnly>
+      </Box>
+      {children && (
+        <Box mt={3} fontWeight="bold">
+          {children}
+        </Box>
+      )}
+    </Center>
+  );
+};

package/src/loader/Lottie.tsx

@@ -0,0 +1,10 @@
+import { useLottie } from "lottie-react";
+import React from "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}</>;
+}

package/src/loader/ProgressBar.tsx

@@ -0,0 +1,128 @@
+import { Box, BoxProps, Flex, Text } from "@chakra-ui/react";
+import React from "react";
+import { useProgressBar } from "react-aria";
+import { createTexts, useTranslation } from "..";
+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"];
+
+  /** 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;
+};
+
+/**
+ * Shows the progress of a loading process.
+ *
+ * You can pass the amount of progress with the `value` prop:
+ *
+ * ```tsx
+ * <ProgressBar value={50} />
+ * ```
+ *
+ *  You can also pass a label to show below the loader:
+ *
+ * ```tsx
+ * <ProgressBar value={50} label="Loading..." />
+ * ```
+ *
+ * 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.
+ *
+ * ```tsx
+ * <ProgressBar value={50} label={["Loading...", "Almost there..."]} />
+ * ```
+ *
+ * If you don't pass a label, you should pass an `aria-label` prop:
+ *
+ * ```tsx
+ * <ProgressBar value={50} aria-label="Loading..." />
+ * ```
+ */
+export const ProgressBar = ({
+  value,
+  label,
+  labelRotationDelay = 5000,
+  height = "0.5rem",
+  width = "100%",
+  "aria-label": ariaLabel,
+  ...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)),
+  });
+  return (
+    <>
+      <Box
+        {...progressBarProps}
+        title={t(texts.label(value))}
+        minWidth="100px"
+        {...rest}
+      >
+        <Flex
+          backgroundColor="coralGreen"
+          borderRadius="sm"
+          width={width}
+          justifyContent="flex-start"
+          marginX="auto"
+        >
+          <Box
+            backgroundColor="greenHaze"
+            borderRadius="sm"
+            height={height}
+            width={`${value}%`}
+            maxWidth="100%"
+            transition="width .2s ease-out"
+          />
+        </Flex>
+        {currentLoadingText && (
+          <Text
+            textAlign="center"
+            marginTop={2}
+            fontWeight="bold"
+            {...labelProps}
+          >
+            {currentLoadingText}
+          </Text>
+        )}
+      </Box>
+    </>
+  );
+};
+
+const texts = createTexts({
+  label: (value) => ({
+    nb: `${value}% ferdig`,
+    nn: `${value}% ferdig`,
+    sv: `${value}% klart`,
+    en: `${value}% done`,
+  }),
+});

package/src/loader/ProgressLoader.tsx

@@ -0,0 +1,140 @@
+import { Box, BoxProps, Text } from "@chakra-ui/react";
+import React, { useId, useRef } from "react";
+import { useProgressBar } from "react-aria";
+import { createTexts, useTranslation } from "..";
+import { useRotatingLabel } from "./useRotatingLabel";
+
+type ProgressLoaderProps = BoxProps & {
+  /** The percentage of progress made.
+   *
+   * The value must be between 0 and 100 */
+  value: number;
+  /** The width of the progress bar.
+   *
+   * Defaults to the width of its container
+   **/
+  width?: BoxProps["width"];
+
+  /** 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;
+};
+
+/**
+ * Shows the progress of a loading process.
+ *
+ * You can pass the amount of progress with the `value` prop:
+ *
+ * ```tsx
+ * <ProgressLoader value={50} />
+ * ```
+ *
+ * You can also pass a label to show below the loader:
+ *
+ * ```tsx
+ * <ProgressLoader value={50} label="Loading..." />
+ * ```
+ *
+ * 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.
+ *
+ * ```tsx
+ * <ProgressLoader value={50} label={["Loading...", "Almost done..."]} />
+ * ```
+ *
+ * If you don't pass a label, you should pass an `aria-label` prop:
+ *
+ * ```tsx
+ * <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,
+    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>
+  );
+};
+
+const texts = createTexts({
+  fallbackLabel: (value) => ({
+    nb: `${value}% ferdig`,
+    nn: `${value}% ferdig`,
+    sv: `${value}% klart`,
+    en: `${value}% done`,
+  }),
+});

package/src/loader/Skeleton.tsx

@@ -0,0 +1,16 @@
+import {
+  BoxProps,
+  forwardRef,
+  Skeleton as ChakraSkeleton,
+} 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} />
+));

package/src/loader/SkeletonCircle.tsx

@@ -0,0 +1,13 @@
+import {
+  BoxProps,
+  SkeletonCircle as ChakraSkeletonCircle,
+} from "@chakra-ui/react";
+import React from "react";
+
+export type SkeletonCircleProps = BoxProps;
+/**
+ * SkeletonCircle renders a loading animation for a given circle. It works great as a placeholder to avoid layout shifts.
+ */
+export const SkeletonCircle = (props: SkeletonCircleProps) => (
+  <ChakraSkeletonCircle boxSize={6} borderRadius="50%" {...props} />
+);

package/src/loader/SkeletonText.tsx

@@ -0,0 +1,10 @@
+import { BoxProps, SkeletonText as ChakraSkeletonText } from "@chakra-ui/react";
+import React from "react";
+
+export type SkeletonTextProps = BoxProps;
+/**
+ * SkeletonText renders a loading animation for a given text. It works great as a placeholder to avoid layout shifts.
+ */
+export const SkeletonText = (props: SkeletonTextProps) => (
+  <ChakraSkeletonText boxSize={6} {...props} />
+);