@biblioteksentralen/react 1.0.0-beta.1

package/dist/styles/chakraTheme/InputStyles.js

@@ -0,0 +1,39 @@
+import { mode } from "@chakra-ui/theme-tools";
+export var InputStyles = {
+    baseStyle: function (props) { return ({
+        field: {
+            _placeholder: {
+                color: mode("gray.500", "whiteAlpha.500")(props),
+            },
+        },
+    }); },
+    variants: {
+        filled: function (props) { return ({
+            field: {
+                bg: mode("gray.200", "whiteAlpha.100")(props),
+                _hover: {
+                    bg: mode("gray.300", "whiteAlpha.200")(props),
+                },
+            },
+        }); },
+        outline: function (props) { return ({
+            field: {
+                borderColor: mode("gray.300", "whiteAlpha.300")(props),
+                _hover: {
+                    borderColor: mode("gray.400", "whiteAlpha.400")(props),
+                },
+            },
+        }); },
+        flushed: function (props) { return ({
+            field: {
+                borderColor: mode("gray.300", "whiteAlpha.300")(props),
+                _hover: {
+                    borderColor: mode("gray.400", "whiteAlpha.400")(props),
+                },
+            },
+        }); },
+    },
+    defaultProps: {
+        variant: "filled",
+    },
+};

package/dist/styles/chakraTheme/LinkStyles.d.ts

@@ -0,0 +1,3 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+export type CustomLinkVariants = "plain";
+export declare const LinkStyles: ComponentStyleConfig;

package/dist/styles/chakraTheme/LinkStyles.js

@@ -0,0 +1,17 @@
+var variants = {
+    plain: {
+        textDecoration: "none",
+        _hover: {
+            textDecoration: "underline",
+        },
+    },
+};
+export var LinkStyles = {
+    baseStyle: {
+        textDecoration: "underline",
+        _hover: {
+            textDecoration: "none",
+        },
+    },
+    variants: variants,
+};

package/dist/styles/chakraTheme/ModalStyles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+export declare const ModalStyles: ComponentStyleConfig;

package/dist/styles/chakraTheme/ModalStyles.js

@@ -0,0 +1,10 @@
+export var ModalStyles = {
+    baseStyle: {
+        // Fix for modal height on Safari iOS:
+        // https://github.com/chakra-ui/chakra-ui/issues/4680#issuecomment-1301640929
+        dialogContainer: {
+            "@supports(height: -webkit-fill-available)": {},
+            height: "100%",
+        },
+    },
+};

package/dist/styles/chakraTheme/SpinnerStyles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+export declare const SpinnerStyles: ComponentStyleConfig;

package/dist/styles/chakraTheme/SpinnerStyles.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { colors } from "@biblioteksentralen/utils";
+import { Spinner } from "@chakra-ui/react";
+export var SpinnerStyles = {};
+Spinner.defaultProps = __assign(__assign({}, Spinner.defaultProps), { speed: ".8s", color: colors.accentBlueMedium, emptyColor: "rgba(0,0,0,.2)", thickness: ".175em" });

package/dist/styles/chakraTheme/biblioteksentralenChakraTheme.d.ts

@@ -0,0 +1,2 @@
+import { ChakraTheme } from "@chakra-ui/theme";
+export declare const biblioteksentralenChakraTheme: Partial<ChakraTheme>;

package/dist/styles/chakraTheme/biblioteksentralenChakraTheme.js

@@ -0,0 +1,32 @@
+import { ButtonStyles } from "./ButtonStyles";
+import { CheckboxStyles } from "./CheckboxStyles";
+import { ContainerStyles } from "./ContainerStyles";
+import { HeadingStyles } from "./HeadingStyles";
+import { InputStyles } from "./InputStyles";
+import { LinkStyles } from "./LinkStyles";
+import { ModalStyles } from "./ModalStyles";
+import { SpinnerStyles } from "./SpinnerStyles";
+import { sizes } from "./sizes";
+export var biblioteksentralenChakraTheme = {
+    styles: {
+        global: {
+            html: {
+                fontSize: { base: "112.5%", md: "120%" },
+                // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
+                // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
+                "&:focus-within": { scrollBehavior: "smooth !important" },
+            },
+        },
+    },
+    components: {
+        Heading: HeadingStyles,
+        Spinner: SpinnerStyles,
+        Link: LinkStyles,
+        Button: ButtonStyles,
+        Input: InputStyles,
+        Container: ContainerStyles,
+        Modal: ModalStyles,
+        Checkbox: CheckboxStyles,
+    },
+    sizes: sizes,
+};

package/dist/styles/chakraTheme/sizes.d.ts

@@ -0,0 +1,8 @@
+export declare const sizes: {
+    container: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};

package/dist/styles/chakraTheme/sizes.js

@@ -0,0 +1,9 @@
+var container = {
+    sm: "40rem",
+    md: "48rem",
+    lg: "56rem", // Forsøker 56rem som standardbredde etter testing med Katrine
+    xl: "80rem",
+};
+export var sizes = {
+    container: container,
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@biblioteksentralen/react",
+  "version": "1.0.0-beta.1",
+  "description": "React library for reusable code in Biblioteksentralens js-apps",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "Biblioteksentralen",
+  "license": "MIT",
+  "private": false,
+  "prettier": {
+    "printWidth": 120
+  },
+  "lint-staged": {
+    "*.{js,css,md,ts,tsx}": "prettier --write"
+  },
+  "dependencies": {
+    "@chakra-ui/anatomy": "^2.2.2",
+    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/theme": "^3.3.1",
+    "@chakra-ui/theme-tools": "^2.1.2",
+    "date-fns": "^3.0.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@biblioteksentralen/icons": "1.0.0-beta.4",
+    "@biblioteksentralen/utils": "1.0.0-beta.5",
+    "@biblioteksentralen/types": "1.0.0-beta.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "test": "vitest --watch=false",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf node_modules",
+    "build": "rm -rf dist && tsc"
+  }
+}

package/src/BiblioteksentralenProvider.tsx

@@ -0,0 +1,16 @@
+import { ChakraProvider, ChakraTheme, extendTheme } from "@chakra-ui/react";
+import React, { ReactNode } from "react";
+import { biblioteksentralenChakraTheme } from "./styles/chakraTheme/biblioteksentralenChakraTheme";
+
+interface Props {
+  children: ReactNode;
+  customTheme?: Partial<ChakraTheme>;
+}
+
+const emptyTheme = {};
+
+export const BiblioteksentralenProvider = (props: Props) => (
+  <ChakraProvider theme={extendTheme(biblioteksentralenChakraTheme, props.customTheme ?? emptyTheme)}>
+    {props.children}
+  </ChakraProvider>
+);

package/src/components/Alert.tsx

@@ -0,0 +1,60 @@
+import { BsCheckCircle, BsExclamationCircle, BsXCircle, InformationIcon } from "@biblioteksentralen/icons";
+import { colors } from "@biblioteksentralen/utils";
+import { AlertProps, Box, Flex, FlexProps } from "@chakra-ui/react";
+import React, { ReactNode } from "react";
+
+type Status = Exclude<AlertProps["status"], undefined | "loading">;
+type Variants = "inline";
+
+const colorLookup: Record<Status, { bg: string; color: string }> = {
+  info: { bg: colors.lightBlue, color: colors.accentBlueMedium },
+  warning: { bg: colors.alertYellow, color: colors.statusYellow },
+  success: { bg: "green.100", color: "green.600" },
+  error: { bg: colors.alertRed, color: colors.statusRed },
+};
+
+const iconLookup: Record<Status, React.ReactElement> = {
+  info: <InformationIcon role="img" aria-label="Informasjon" />,
+  warning: <BsExclamationCircle role="img" aria-label="Advarsel" />,
+  success: <BsCheckCircle role="img" aria-label="Suksess" />,
+  error: <BsXCircle role="img" aria-label="Feil" />,
+};
+
+interface Props extends FlexProps {
+  children: ReactNode;
+  status: Status;
+  variant?: Variants;
+}
+
+const variantStyles: Record<Variants, FlexProps> = {
+  inline: {
+    borderColor: "transparent",
+    backgroundColor: "transparent",
+    padding: "0",
+  },
+};
+
+export function Alert({ status, children, variant, ...rest }: Props) {
+  const colors = colorLookup[status];
+  return (
+    <Flex
+      role="alert"
+      flexWrap="wrap"
+      alignItems="center"
+      gridGap="0.5rem 1rem"
+      background="white"
+      border={`0.1rem solid`}
+      borderColor={colors.color}
+      backgroundColor={colors.bg}
+      padding="0.75rem"
+      borderRadius="0.3rem"
+      {...(variant ? variantStyles[variant] : {})}
+      {...rest}
+    >
+      <Box color={colors.color} flex="0 0" marginLeft="auto" marginRight="auto" lineHeight="1" fontSize="1.5em">
+        {iconLookup[status]}
+      </Box>
+      <Box flex="1">{children}</Box>
+    </Flex>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Button as ChakraButton, ButtonProps, ComponentWithAs } from "@chakra-ui/react";
+import { Modify } from "@biblioteksentralen/types";
+import { CustomButtonVariants } from "../styles/chakraTheme/ButtonStyles";
+
+/**
+ * Re-exporting chackras Button with a customised types
+ * This causes both chakras native variants and our home-made variants to show up in auto-complete
+ */
+type ButtonVariants = ButtonProps["variant"] | CustomButtonVariants;
+export const Button = ChakraButton as ComponentWithAs<"button", Modify<ButtonProps, { variant?: ButtonVariants }>>;

package/src/components/ConditionalWrapper.tsx

@@ -0,0 +1,13 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  wrapper: FunctionComponent<{ children: ReactNode }>;
+  condition: boolean;
+};
+
+/**
+ * Conditionally wrapps children with a component. If conditions are not met children mounted without the wrapper.
+ */
+export const ConditionalWrapper: FunctionComponent<Props> = ({ condition, children, wrapper: Wrapper }) =>
+  condition ? <Wrapper>{children}</Wrapper> : <>{children}</>;

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,60 @@
+import { isDevelopment } from "@biblioteksentralen/utils";
+import { Box, BoxProps } from "@chakra-ui/react";
+import React, { ErrorInfo, ReactNode } from "react";
+import { Alert } from "./Alert";
+
+interface Props {
+  boundaryName?: string;
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+const StyledPre = (props: BoxProps) => (
+  <Box as="pre" paddingTop="0.5rem" wordBreak="break-all" whiteSpace="pre-wrap" fontSize="0.8rem" {...props} />
+);
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    this.setState({ hasError: true, error, errorInfo });
+    console.error(error, { errorInfo, boundaryName: this.props.boundaryName });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      const stackTrace = this.state.errorInfo?.componentStack;
+      const errormsg = this.state.error?.message;
+      const info = this.props.boundaryName;
+
+      return (
+        <div>
+          <Alert status="error">
+            <p>Beklager, det skjedde en teknisk feil.</p>
+            {isDevelopment() && (stackTrace || errormsg) && (
+              <div>
+                <StyledPre>{errormsg || ""}</StyledPre>
+                <StyledPre>{info || ""}</StyledPre>
+                <StyledPre>{stackTrace || ""}</StyledPre>
+              </div>
+            )}
+          </Alert>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/HashLinkTarget.tsx

@@ -0,0 +1,51 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+
+interface Props {
+  id: string;
+  /**
+   * angir hvor mye luft til vil ha over HashLinkTarget ved bruk av hash-lenke, eks '4rem'
+   */
+  spaceAbove?: string;
+  /**
+   * angir om du vil ha fokusramme rundt komponenten som mounter HashLinkTarget. Da må komponenten du wrapper med ha position: relative | absolute el
+   */
+  focusOnParent?: boolean;
+}
+
+const focusOnRelativeParentStyle = {
+  "&:focus-within": {
+    position: "static",
+    boxShadow: "none",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%",
+      pointerEvents: "none",
+      borderRadius: "0.25rem",
+      boxShadow: "var(--chakra-shadows-outline)",
+    },
+  },
+};
+
+/*
+ * Komponent som sørger for luft over anchors (elementer man kan lenke til med hash-lenker feks <a href="#min-overskrift">Ta meg til overskrift</a>)
+ */
+export function HashLinkTarget(props: Props) {
+  return (
+    <Box position="relative" sx={props.focusOnParent ? focusOnRelativeParentStyle : undefined}>
+      <Box
+        id={props.id}
+        tabIndex={props.focusOnParent ? -1 : undefined}
+        position="absolute"
+        top={`-${props.spaceAbove || "2.5rem"}`}
+        _focus={{
+          boxShadow: "none !important",
+        }}
+      />
+    </Box>
+  );
+}

package/src/components/HideWithCSS.tsx

@@ -0,0 +1,22 @@
+import { Box, BoxProps, ThemeTypings } from "@chakra-ui/react";
+import React, { FunctionComponent, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  above?: ThemeTypings["breakpoints"];
+  below?: ThemeTypings["breakpoints"];
+} & Omit<BoxProps, "display">;
+
+/** Chakras <Hide /> component uses client side javascript to hide components. Causes components to flash on mobile while loading */
+export const HideWithCSS: FunctionComponent<Props> = ({ children, above, below, ...chakraProps }) => {
+  const display: BoxProps["display"] = {
+    ...(!!below ? { base: "none", [below]: "block" } : {}),
+    ...(!!above ? { [above]: "none" } : {}),
+  };
+
+  return (
+    <Box {...chakraProps} display={display}>
+      {children}
+    </Box>
+  );
+};

package/src/components/Input.tsx

@@ -0,0 +1,37 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  FormLabelProps,
+  Input as ChakraInput,
+  InputProps,
+} from "@chakra-ui/react";
+import React, { forwardRef } from "react";
+import { VisuallyHidden } from "./VisuallyHidden";
+
+interface Props extends InputProps {
+  label: string;
+  hideLabel?: boolean;
+  labelProps?: FormLabelProps;
+  helperText?: string;
+  errorMessage?: string;
+}
+
+/**
+ * Creating custom input-component to make sure label is always set (for accessibility)
+ * Also handles some common needs (helper text and error message. For more advanced input-components we leave it to the consumers to compose custom input-components based on Chakra
+ */
+export const Input = forwardRef((props: Props, ref) => {
+  const { labelProps, label, helperText, errorMessage, hideLabel, ...inputProps } = props;
+  return (
+    <FormControl isInvalid={!!errorMessage}>
+      <FormLabel marginBottom=".25em" {...labelProps}>
+        {hideLabel ? <VisuallyHidden>{label}</VisuallyHidden> : label}
+      </FormLabel>
+      <ChakraInput ref={ref} {...inputProps} />
+      {errorMessage && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+});

package/src/components/Link.tsx

@@ -0,0 +1,10 @@
+import { Modify } from "@biblioteksentralen/types";
+import { Link as ChakraLink, ComponentWithAs, LinkProps } from "@chakra-ui/react";
+import { CustomLinkVariants } from "../styles/chakraTheme/LinkStyles";
+
+/**
+ * Re-exporting chackras Link with a customised types
+ * This causes both chakras native variants and our home-made variants to show up in auto-complete
+ */
+type LinkVariants = LinkProps["variant"] | CustomLinkVariants;
+export const Link = ChakraLink as ComponentWithAs<"a", Modify<LinkProps, { variant?: LinkVariants }>>;

package/src/components/VisuallyHidden.tsx

@@ -0,0 +1,36 @@
+import React, { HTMLAttributes, ReactNode, useEffect } from "react";
+import { VisuallyHidden as ChakraVisuallyHidden } from "@chakra-ui/react";
+import { isDevelopment } from "@biblioteksentralen/utils";
+
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+// https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
+export function VisuallyHidden({ children, ...rest }: Props) {
+  const [forceShow, setForceShow] = React.useState(false);
+
+  useEffect(() => {
+    if (isDevelopment()) {
+      const handleKeyDown = (ev: KeyboardEvent) => {
+        if (ev.key === "Alt") {
+          setForceShow(true);
+        }
+      };
+      const handleKeyUp = (ev: KeyboardEvent) => {
+        if (ev.key === "Alt") {
+          setForceShow(false);
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("keyup", handleKeyUp);
+      };
+    }
+  }, []);
+
+  // position="fixed" løser bug der visually hidden ikke hindret tekst fra å ta plass i bredden
+  return forceShow ? <span>{children}</span> : <ChakraVisuallyHidden position="fixed">{children}</ChakraVisuallyHidden>;
+}

package/src/components/withErrorBoundary.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+export const withErrorBoundary = <Props,>(Component: React.ComponentType<Props>, boundaryName: string) => {
+  return React.forwardRef((props: Props, ref) => (
+    <ErrorBoundary boundaryName={boundaryName}>
+      <Component {...props} ref={ref} />
+    </ErrorBoundary>
+  ));
+};

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from "@chakra-ui/react"; // Exports Chakra components first to override some components later
+export { Alert } from "./components/Alert"; // Overrides Chakras Alert
+export { Button } from "./components/Button"; // Overrides Chakras Button
+export { ConditionalWrapper } from "./components/ConditionalWrapper"; // Overrides Chakras Input
+export { HideWithCSS } from "./components/HideWithCSS"; // Overrides Chakras HideWithCSS
+export { Input } from "./components/Input"; // Overrides Chakras Input
+export { Link } from "./components/Link"; // Overrides Chakras Link
+export { VisuallyHidden } from "./components/VisuallyHidden"; // Overrides Chakras VisuallyHidden
+
+export { ErrorBoundary } from "./components/ErrorBoundary";
+export { HashLinkTarget } from "./components/HashLinkTarget";
+export { withErrorBoundary } from "./components/withErrorBoundary";
+
+export { biblioteksentralenChakraTheme } from "./styles/chakraTheme/biblioteksentralenChakraTheme";

package/src/styles/chakraTheme/ButtonStyles.ts

@@ -0,0 +1,55 @@
+import { colors } from "@biblioteksentralen/utils";
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+import { SystemStyleInterpolation } from "@chakra-ui/theme-tools";
+
+export type CustomButtonVariants = "primary" | "secondary" | "tertiary";
+
+const variants: Record<CustomButtonVariants, SystemStyleInterpolation> = {
+  primary: {
+    backgroundColor: colors.black,
+    color: "white",
+    _hover: {
+      backgroundColor: "hsla(0deg, 0%, 70%, 1)",
+      color: "black",
+    },
+  },
+  secondary: {
+    borderColor: "currentColor",
+    backgroundColor: "transparent",
+    color: "currentColor",
+    _hover: {
+      backgroundColor: "hsla(0deg, 0%, 50%, 0.15)",
+    },
+  },
+  tertiary: {
+    backgroundColor: "transparent",
+    color: "currentColor",
+    _hover: {
+      backgroundColor: "hsla(0deg, 0%, 50%, 0.15)",
+      color: "currentColor",
+    },
+  },
+};
+
+export const ButtonStyles: ComponentStyleConfig = {
+  baseStyle: {
+    border: "transparent 0.1em solid",
+    borderRadius: "0.35em",
+    fontWeight: 600,
+    _disabled: {
+      backgroundColor: `${colors.grey45} !important`,
+      color: "white !important",
+      opacity: 1,
+    },
+  },
+  sizes: {
+    sm: {
+      padding: "0.2em 0.5em",
+      fontSize: "1rem",
+    },
+  },
+  variants: variants,
+  defaultProps: {
+    variant: "primary",
+  },
+};

package/src/styles/chakraTheme/CheckboxStyles.ts

@@ -0,0 +1,19 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { checkboxAnatomy } from "@chakra-ui/anatomy";
+
+const { definePartsStyle, defineMultiStyleConfig: defineMultiStyleConfigWithTypeIssue } = createMultiStyleConfigHelpers(
+  checkboxAnatomy.keys
+);
+
+// https://github.com/pnpm/pnpm/issues/6089#issuecomment-1433207437
+const defineMultiStyleConfig: ReturnType<typeof createMultiStyleConfigHelpers>["defineMultiStyleConfig"] =
+  defineMultiStyleConfigWithTypeIssue;
+
+const baseStyle = definePartsStyle({
+  control: {
+    background: "white",
+  },
+});
+
+// https://github.com/pnpm/pnpm/issues/6089#issuecomment-1433207437
+export const CheckboxStyles: ReturnType<typeof defineMultiStyleConfig> = defineMultiStyleConfig({ baseStyle });

package/src/styles/chakraTheme/ContainerStyles.ts

@@ -0,0 +1,7 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+
+export const ContainerStyles: ComponentStyleConfig = {
+  baseStyle: {
+    px: ".75rem", // Padding left/right
+  },
+};

package/src/styles/chakraTheme/HeadingStyles.ts

@@ -0,0 +1,7 @@
+import { ComponentStyleConfig } from "@chakra-ui/theme";
+
+export const HeadingStyles: ComponentStyleConfig = {
+  baseStyle: {
+    fontWeight: "600",
+  },
+};