@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/input/FormErrorMessage.tsx

@@ -1,95 +0,0 @@
-import { Box, BoxProps, useFormControlContext } from "@chakra-ui/react";
-import React from "react";
-
-export type FormErrorMessageProps = BoxProps & {
-  /**
-   * The error message itself.
-   */
-  children: React.ReactNode;
-};
-/** An error message
- *
- * This component is used to show error messages related to a form input.
- * It should _always_ be used inside of a `FormControl` component.
- *
- * It will only render if the `isInvalid` prop of its enclosing `FormControl` component is set to true.
- *
- * ```tsx
- * <FormControl isInvalid={email === ""}>
- *    <Input label="E-mail" value={email} onChange={updateEmail} />
- *    <FormErrorMessage>This field is required</FormErrorMessage>
- * </FormControl>
- * ```
- *
- * If you're using a `FormHelperText` (or any other components inside of the `FormControl`), make sure to render the `FormErrorMessage` before those.
- * ```tsx
- * <FormControl isInvalid={email === ""}>
- *    <Input label="E-mail" value={email} onChange={updateEmail} />
- *    <FormErrorMessage>This field is required</FormErrorMessage>
- *    <FormHelperText>We don't share your email</FormHelperText>
- * </FormControl>
- * ```
- *
- * @see https://spor.vy.no/components/form-control
- */
-export const FormErrorMessage = ({
-  children,
-  ...boxProps
-}: FormErrorMessageProps) => {
-  const formControlContext = useFormControlContext();
-  if (!formControlContext) {
-    throw new Error(
-      "FormErrorMessage must be used within a FormControl component",
-    );
-  }
-  if (!formControlContext.isInvalid) {
-    return null;
-  }
-  const { ref, ...errorMessageProps } =
-    formControlContext.getErrorMessageProps();
-  return (
-    <Box position="relative" ref={ref}>
-      <Box
-        borderRadius="xs"
-        backgroundColor="lightRed"
-        color="darkGrey"
-        paddingX={1.5}
-        paddingY={1}
-        textStyle="xs"
-        width="fit-content"
-        position="absolute"
-        top={-0.5}
-        left={3}
-        zIndex="dropdown"
-        maxWidth="50ch"
-        {...errorMessageProps}
-        {...boxProps}
-      >
-        <Arrow position="absolute" top="-0.25em" left="1em" />
-        {children}
-      </Box>
-    </Box>
-  );
-};
-
-/** The arrow of the error message box */
-const Arrow = (props: BoxProps) => {
-  return (
-    <Box
-      {...(props as any)}
-      as="svg"
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      transform="rotate(45deg)"
-    >
-      <Box
-        as="path"
-        fill="lightRed"
-        d="M 0
-        0 Q 2.4 6 0 12 Q 6 9.6 12 12 Q 9.6 6 12 0 Q 6 2.4 0 0 z"
-      />
-    </Box>
-  );
-};

package/src/input/FormLabel.tsx

@@ -1,11 +0,0 @@
-import {
-  FormLabel as ChakraFormLabel,
-  FormLabelProps as ChakraFormLabelProps,
-  forwardRef,
-} from "@chakra-ui/react";
-import React from "react";
-
-export type FormLabelProps = ChakraFormLabelProps;
-export const FormLabel = forwardRef<FormLabelProps, "label">((props, ref) => {
-  return <ChakraFormLabel {...props} ref={ref} />;
-});

package/src/input/InfoSelect.tsx

@@ -1,274 +0,0 @@
-import {
-  Box,
-  chakra,
-  Flex,
-  FormLabel,
-  ResponsiveValue,
-  useFormControlProps,
-  useMultiStyleConfig,
-} from "@chakra-ui/react";
-import {
-  DropdownDownFill24Icon,
-  DropdownUpFill24Icon,
-} from "@vygruppen/spor-icon-react";
-import React, { useRef } from "react";
-import { HiddenSelect, useButton, useSelect } from "react-aria";
-import { Column, useSelectState } from "react-stately";
-import { createTexts, useTranslation } from "../";
-import { ListBox } from "./ListBox";
-import { Popover } from "./Popover";
-
-type InfoSelectProps<T extends object> = {
-  /**
-   * Either a render function accepting an item, and returning a <Item />,
-   * or a list of <Item />s.
-   *
-   * Render function example:
-   * ```tsx
-   * <Select items={items}>
-   *   {(item) => (
-   *     <Item key={item.value} value={item.value}>
-   *       {item.label}
-   *     </Item>
-   *   )}
-   * </Select>
-   * ```
-   *
-   * For this to work, the members in `items` need either a `key`
-   * or an `id` property.
-   *
-   * List of <Item />s example:
-   * ```tsx
-   * <Select label="Choose a color">
-   *   <Item>Green</Item>
-   *   <Item>Blue</Item>
-   *   <Item>Yellow</Item>
-   * </Select>
-   * ```
-   **/
-  children: React.ReactElement | ((item: T) => React.ReactElement);
-  /**
-   * The items to render
-   *
-   * If you have a dynamic list of items you want to display, you should use this prop instead of mapping them out. This is a performance optimization.
-   *
-   * You can render each item in a render function, passed in as `children`:
-   *
-   * ```tsx
-   * <Select items={items}>
-   *   {(item) => <div>{item.someProp}</div>}
-   * </Select>
-   * ```
-   */
-  items?: T[];
-  /** Callback for when something is selected */
-  onChange?: (value: string | number) => void;
-  value?: string | number;
-  defaultValue?: string | number;
-  /** Controlled open state
-   *
-   * Useful if you want to control the open state from outside the component.
-   */
-  isOpen?: boolean;
-  /** Callback for when the open state of the select box changes.
-   *
-   * Useful if you want to control the open state from outside the component.
-   */
-  onOpenChange?: (isOpen: boolean) => void;
-  /** The label describing the choice */
-  label: string;
-  /** Hide the label visually
-   *
-   * Should be used sparingly, as it makes the component less accessible.
-   * Useful for the label is obvious, like a phone number country code select.
-   */
-  isLabelSrOnly?: boolean;
-  /** The name of the select element */
-  name?: string;
-  /**
-   * What's shown if nothing is selected.
-   *
-   * Defaults to a localized version of "choose an option"
-   */
-  placeholder?: string;
-  /** The width of the select box.
-   *
-   * Defaults to the width of the selected content
-   */
-  width?: ResponsiveValue<string | number>;
-  /** The height of the select box.
-   *
-   * Defaults to "auto"
-   */
-  height?: ResponsiveValue<string | number>;
-  isDisabled?: boolean;
-  /** A list of disabled keys.
-   *
-   * ```tsx
-   * <Select label="Choose a color" disabledKeys={["blue", "yellow"]}>
-   *   <Item key="green">Green</Item>
-   *   <Item key="blue">Blue</Item>
-   *   <Item key="yellow">Yellow</Item>
-   * </Select>
-   * ```
-   **/
-  disabledKeys?: string[];
-  /** Whether or not the input is invalid */
-  "aria-invalid"?: boolean;
-  variant?: "base" | "floating";
-};
-/**
- * A styled select component.
- *
- * This select component lets you choose between a list of options.
- * Compared to the NativeSelect component, the InfoSelect component lets you style the options however you'd like – including both text, icons and other elements.
- *
- * ```tsx
- * <InfoSelect label="Choose a color">
- *   <SelectOption>Blue</SelectOption>
- *   <SelectOption>Yellow</SelectOption>
- *   <SelectOption>Green</SelectOption>
- * </InfoSelect>
- * ```
- *
- * Alternatvely, you can pass the items into the `items` prop, and create a render function for the items.
- *
- * ```tsx
- * <InfoSelect
- *   label="Choose a color"
- *   items={[
- *     { value: "#f00", label: "Red" },
- *     { value: "#0f0", label: "Green" },
- *     { value: "#00f", label: "Blue" },
- *   ]}
- * >
- *   {(item) => (
- *     <Item key={item.key}>
- *       {item.label}
- *     </Item>
- *   )}
- * </InfoSelect>
- * ```
- *
- * @see https://spor.vy.no/components/info-select
- */
-export function InfoSelect<T extends object>({
-  placeholder,
-  onChange,
-  value,
-  isLabelSrOnly,
-  defaultValue,
-  variant,
-  ...props
-}: InfoSelectProps<T>) {
-  const renamedProps = {
-    onSelectionChange: onChange,
-    selectedKey: value,
-    defaultSelectedKey: defaultValue,
-    ...props,
-  };
-  const state = useSelectState(renamedProps);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const listboxRef = useRef<HTMLUListElement>(null);
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
-    renamedProps,
-    state,
-    triggerRef,
-  );
-
-  const stateStyle = "completed";
-
-  const hasChosenValue = state.selectedItem !== null;
-
-  const styles = useMultiStyleConfig("InfoSelect", {
-    isOpen: state.isOpen,
-    isLabelSrOnly,
-    variant,
-    stateStyle,
-    hasChosenValue,
-  });
-  const { buttonProps } = useButton(triggerProps, triggerRef);
-  const { t } = useTranslation();
-  const formControl = useFormControlProps(props);
-
-  return (
-    <Box sx={styles.container}>
-      <HiddenSelect
-        state={state}
-        triggerRef={triggerRef}
-        label={props.label}
-        name={props.name}
-      />
-
-      <chakra.button
-        type="button"
-        ref={triggerRef}
-        sx={styles.button}
-        {...buttonProps}
-        data-attachable
-        aria-invalid={formControl.isInvalid}
-        aria-describedby={formControl["aria-describedby"]}
-      >
-        <chakra.div sx={styles.innerButton}>
-          <chakra.div
-            {...labelProps}
-            sx={{
-              ...styles.label,
-              ...(hasChosenValue && {
-                transform: "scale(0.825) translateY(-10px) translateX(-10%)",
-                transitionProperty: "var(--spor-transition-property-common)",
-                transitionDuration: "var(--spor-transition-duration-normal)",
-              }),
-            }}
-          >
-            {props.label}
-          </chakra.div>
-          <Box
-            {...valueProps}
-            h={isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px"}
-            hidden={!hasChosenValue}
-            transform={isLabelSrOnly ? "" : "scale(1) translateY(-12px)"}
-            transitionProperty={"var(--spor-transition-property-common)"}
-            transitionDuration={"var(--spor-transition-duration-normal)"}
-          >
-            {state.selectedItem
-              ? (state.selectedItem.textValue ?? state.selectedItem.rendered)
-              : (placeholder ?? t(texts.selectAnOption))}
-          </Box>
-        </chakra.div>
-        <Box sx={styles.arrowIcon}>
-          {state.isOpen ? <DropdownUpFill24Icon /> : <DropdownDownFill24Icon />}
-        </Box>
-      </chakra.button>
-
-      {state.isOpen && (
-        <Popover
-          state={state}
-          triggerRef={triggerRef}
-          // The minimum padding should be 0, because the popover always should be
-          // aligned with the trigger field regardless of the left padding in the container.
-          containerPadding={0}
-        >
-          <ListBox
-            {...menuProps}
-            state={state}
-            listBoxRef={listboxRef}
-            borderBottomRadius="sm"
-            variant={variant}
-          >
-            {props.children}
-          </ListBox>
-        </Popover>
-      )}
-    </Box>
-  );
-}
-
-const texts = createTexts({
-  selectAnOption: {
-    nb: "Velg et alternativ",
-    nn: "Velg eit alternativ",
-    sv: "Välj ett alternativ",
-    en: "Choose an option",
-  },
-});

package/src/input/InputElement.tsx

@@ -1,44 +0,0 @@
-import {
-  forwardRef,
-  InputElementProps as ChakraInputElementProps,
-  InputLeftElement as ChakraInputLeftElement,
-  InputRightElement as ChakraInputRightElement,
-} from "@chakra-ui/react";
-import React from "react";
-
-export type InputElementProps = ChakraInputElementProps;
-/**
- * Places an element inside the left side of an input field.
- *
- * Must be used inside of an `InputGroup` component, and before the `Input` component.
- *
- * ```tsx
- * <FormControl>
- *   <InputGroup>
- *     <InputLeftElement>🔎</InputLeftElement>
- *     <Input label="Search" />
- *   </InputGroup>
- * </FormControl>
- * ```
- */
-export const InputLeftElement = forwardRef<InputElementProps, "div">(
-  (props, ref) => <ChakraInputLeftElement {...props} ref={ref} />,
-);
-
-/**
- * Places an element inside the right side of an input field.
- *
- * Must be used inside of an `InputGroup` component, and after the `Input` component.
- *
- * ```tsx
- * <FormControl>
- *   <InputGroup>
- *     <Input label="Search" />
- *     <InputRightElement>🔎</InputRightElement>
- *   </InputGroup>
- * </FormControl>
- * ```
- */
-export const InputRightElement = forwardRef<InputElementProps, "div">(
-  (props, ref) => <ChakraInputRightElement {...props} ref={ref} />,
-);

package/src/input/RadioGroup.tsx

@@ -1,47 +0,0 @@
-import {
-  forwardRef,
-  RadioGroup as ChakraRadioGroup,
-  RadioGroupProps as ChakraRadioGroupProps,
-  Stack,
-  StackDirection,
-} from "@chakra-ui/react";
-import React from "react";
-
-export type RadioGroupProps = Exclude<
-  ChakraRadioGroupProps,
-  "colorScheme" | "size" | "variant"
-> & {
-  direction?: StackDirection;
-};
-/**
- * Radio groups are used to group several radio buttons together.
- *
- * You can pass the common `name` prop to the `RadioGroup`, instead of to each `Radio` component.
- *
- * ```tsx
- * <RadioGroup name="ticket">
- *   <Radio>Economy</Radio>
- *   <Radio>Business</Radio>
- *   <Radio>First Class</Radio>
- * </RadioGroup>
- * ```
- *
- * By default, radio buttons show up horizontally. If you want them to show up vertically, please specify the `direction="column"` prop.
- *
- * ```tsx
- * <RadioGroup name="ticket" direction="column">
- *   <Radio>Economy</Radio>
- *   <Radio>Business</Radio>
- *   <Radio>First Class</Radio>
- * </RadioGroup>
- * ```
- */
-export const RadioGroup = forwardRef<RadioGroupProps, "div">(
-  ({ children, direction = "row", ...rest }, ref) => {
-    return (
-      <ChakraRadioGroup {...rest} ref={ref}>
-        <Stack direction={direction}>{children}</Stack>
-      </ChakraRadioGroup>
-    );
-  },
-);

package/src/layout/Divider.tsx

@@ -1,27 +0,0 @@
-import {
-  BoxProps,
-  Divider as ChakraDivider,
-  DividerProps as ChakraDividerProps,
-  forwardRef,
-} from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-import React from "react";
-
-export type DividerProps = ChakraDividerProps & {
-  size?: "sm" | "md" | "lg";
-  variant?: "solid" | "dashed";
-};
-/** A dividing line, used to divide content.
- *
- * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
- *
- * ```tsx
- * <Divider marginTop={4} marginBottom={6} />
- * ```
- *
- * There are three different sizes available: `sm`, `md` and `lg`. The default is `md`.
- * There are two different variants available: `solid` and `dashed`. The default is `solid`.
- */
-export const Divider = forwardRef<BoxProps, As>((props, ref) => {
-  return <ChakraDivider {...props} ref={ref} />;
-});

package/src/layout/RadioCardGroup.tsx

@@ -1,79 +0,0 @@
-import { BoxProps, Stack } from "@chakra-ui/react";
-import React, { useState } from "react";
-import { FormLabel } from "../input";
-
-/**
- * RadioCardGroupContext is used to pass down the state and handlers to the RadioCard components.
- *
- * @see RadioCard
- */
-
-type RadioGroupContextProps = {
-  name: string;
-  selectedValue: string;
-  onChange: (value: string) => void;
-  variant?: "base" | "floating";
-  defaultValue?: string;
-  value?: string;
-};
-
-export const RadioCardGroupContext =
-  React.createContext<RadioGroupContextProps | null>(null);
-
-type RadioCardGroupProps = BoxProps & {
-  /** A string that will be assigned as the name attribute to all RadioCard components within the group. */
-  name: string;
-  /** The RadioCard components that make up the group. */
-  children: React.ReactNode;
-  /** Optional. Determines the style of the RadioCard. Can be either "base" or "floating". */
-  variant?: "base" | "floating";
-  /** Optional. Determines the direction of the group. Can be either "row" or "column". */
-  direction?: "row" | "column";
-  /** Optional. A label for the group. */
-  groupLabel?: string;
-  /** Optional. The default value of the RadioCard group. */
-  defaultValue?: string;
-  /** Optional. A function that will be called when the selected value changes. The function receives the value of the selected RadioCard. */
-  onChange?: (value: string) => void;
-};
-
-export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
-  children,
-  name,
-  variant = "base",
-  direction = "row",
-  groupLabel,
-  defaultValue,
-  onChange,
-  ...props
-}: RadioCardGroupProps) => {
-  const [selectedValue, setSelectedValue] = useState<string>(
-    defaultValue || "",
-  );
-
-  const handleChange = (value: string) => {
-    setSelectedValue(value);
-    onChange && onChange(value);
-  };
-
-  return (
-    <RadioCardGroupContext.Provider
-      value={{
-        name,
-        selectedValue,
-        onChange: handleChange,
-        variant,
-        defaultValue: defaultValue || "",
-      }}
-    >
-      <Stack as="fieldset" direction={direction} {...props}>
-        {groupLabel && (
-          <FormLabel as="legend" id={groupLabel}>
-            {groupLabel}
-          </FormLabel>
-        )}
-        {children}
-      </Stack>
-    </RadioCardGroupContext.Provider>
-  );
-};

package/src/layout/Stack.tsx

@@ -1,42 +0,0 @@
-import {
-  Stack as ChakraStack,
-  StackProps as ChakraStackProps,
-  forwardRef,
-} from "@chakra-ui/react";
-import React from "react";
-
-export type StackProps = Exclude<ChakraStackProps, "direction"> & {
-  flexDirection?: ChakraStackProps["direction"];
-};
-/**
- * Adds consistent spacing between elements
- *
- * ```tsx
- * <Stack>
- *   <Text>Here's a paragraph</Text>
- *   <Text>Here's another perfectly spaced paragraph</Text>
- * </Stack>
- * ```
- *
- * By default, the stack will be a column. You can change this by setting the `flexDirection` prop to any valid flex direction:
- * ```tsx
- * <Stack flexDirection="row">
- *   <Checkbox>Here's a checkbox</Checkbox>
- *   <Checkbox>Here's another checkbox, almost right next to the first one</Checkbox>
- * </Stack>
- * ```
- *
- * You can specify the spacing between elements with the `spacing` prop:
- *
- * ```tsx
- * <Stack spacing={4}>
- *   <StaticCard>Here's one card</StaticCard>
- *   <StaticCard>Here's another card, with a lot of space between it</StaticCard>
- * </Stack>
- * ```
- */
-export const Stack = forwardRef<StackProps, "div">(
-  ({ flexDirection, ...props }, ref) => {
-    return <ChakraStack {...props} direction={flexDirection} ref={ref} />;
-  },
-);

package/src/loader/SkeletonCircle.tsx

@@ -1,13 +0,0 @@
-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

@@ -1,14 +0,0 @@
-import {
-  SkeletonText as ChakraSkeletonText,
-  SkeletonTextProps as ChakraSkeletonTextProps,
-} from "@chakra-ui/react";
-import React from "react";
-
-export type SkeletonTextProps = ChakraSkeletonTextProps;
-
-/**
- * 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} />
-);