@arkitektbedriftene/fe-lib 0.3.12 → 0.3.14

package/src/lib/oidc/oidc.tsx

@@ -1,248 +0,0 @@
-import { SigninRedirectArgs, User, UserManager } from "oidc-client-ts";
-import {
-  Context,
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-export * from "oidc-client-ts";
-export * from "./impersonate";
-export * from "./firmAccess"
-
-export type AuthState = {
-  user: User | null;
-  isLoading: boolean;
-  isAuthenticated: boolean;
-  isError: boolean;
-  error: Error | null;
-};
-
-export type AuthContextData = {
-  state: AuthState;
-  handleSigninCallback: () => Promise<User | undefined>;
-  redirectToSignin: UserManager["signinRedirect"];
-};
-
-export type AuthProviderConfig = {
-  onSigninComplete: (user: User | null) => void;
-};
-
-const AuthProviderCore = ({
-  userManager,
-  context,
-  children,
-}: {
-  userManager: UserManager;
-  context: Context<AuthContextData | null>;
-  children: ReactNode;
-}) => {
-  const [state, setState] = useState<AuthState>({
-    user: null,
-    isLoading: true,
-    isAuthenticated: false,
-    isError: false,
-    error: null,
-  });
-
-  // Initialize on first render
-  const isInitialized = useRef(false);
-  useEffect(() => {
-    if (isInitialized.current) {
-      return;
-    }
-    isInitialized.current = true;
-
-    void (async () => {
-      try {
-        const user = await userManager.getUser();
-        setState({
-          user,
-          isLoading: false,
-          isAuthenticated: user ? !user.expired : false,
-          isError: false,
-          error: null,
-        });
-      } catch (error) {
-        setState({
-          user: null,
-          isLoading: false,
-          isAuthenticated: false,
-          isError: true,
-          error:
-            error instanceof Error
-              ? error
-              : new Error("Unknown error during auth"),
-        });
-      }
-    })();
-  }, [userManager]);
-
-  // Set up UserManager events
-  useEffect(() => {
-    const onUserLoaded = (user: User) => {
-      setState({
-        user,
-        isLoading: false,
-        isAuthenticated: !user.expired,
-        isError: false,
-        error: null,
-      });
-    };
-    userManager.events.addUserLoaded(onUserLoaded);
-
-    const onUserUnloaded = () => {
-      setState({
-        ...state,
-        user: null,
-        isAuthenticated: false,
-      });
-    };
-    userManager.events.addUserUnloaded(onUserUnloaded);
-
-    const onSilentRenewError = (error: Error) => {
-      setState({
-        ...state,
-        isLoading: false,
-        isError: true,
-        error,
-      });
-    };
-    userManager.events.addSilentRenewError(onSilentRenewError);
-
-    return () => {
-      userManager.events.removeUserLoaded(onUserLoaded);
-      userManager.events.removeUserUnloaded(onUserUnloaded);
-      userManager.events.removeSilentRenewError(onSilentRenewError);
-    };
-  }, [userManager]);
-
-  const handleSigninCallback = useCallback(async () => {
-    const user = await userManager.signinCallback();
-
-    setState({
-      user: user ?? null,
-      isLoading: false,
-      isAuthenticated: user ? !user.expired : false,
-      isError: false,
-      error: null,
-    });
-
-    return user ?? undefined;
-  }, [userManager]);
-
-  const redirectToSignin = useCallback(
-    async (args?: SigninRedirectArgs | undefined) => {
-      try {
-        await userManager.signinRedirect(args);
-      } catch (error) {
-        console.error(error);
-      }
-    },
-    [userManager]
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      state,
-      handleSigninCallback,
-      redirectToSignin,
-    }),
-    [state, handleSigninCallback, redirectToSignin]
-  );
-
-  return <context.Provider value={contextValue}>{children}</context.Provider>;
-};
-
-const useAuthContextCore = (context: Context<AuthContextData | null>) => {
-  const contextData = useContext(context);
-  if (!contextData) {
-    throw new Error("useAuthContext must be used within an AuthProvider");
-  }
-  return contextData;
-};
-
-const useAuthStateCore = (context: Context<AuthContextData | null>) => {
-  const { state } = useAuthContextCore(context);
-  return state;
-};
-
-const useSigninCallbackCore = (
-  context: Context<AuthContextData | null>,
-  onDone?: (user?: User) => void
-) => {
-  const { state, handleSigninCallback } = useAuthContextCore(context);
-
-  const isInitialized = useRef(false);
-  useEffect(() => {
-    // Only run once
-    if (isInitialized.current) {
-      return;
-    }
-    isInitialized.current = true;
-    handleSigninCallback()
-      // Wait for state to update
-      // Otherwise any navigation that happens in onDone will
-      // happen before the state update and the user will be
-      // redirected to the signin page again.
-      .then(
-        (u) =>
-          new Promise<User | undefined>((resolve) =>
-            setTimeout(() => resolve(u), 0)
-          )
-      )
-      .then((u) => onDone?.(u));
-  }, [handleSigninCallback]);
-
-  return state;
-};
-
-export const createAuthContext = (userManager: UserManager) => {
-  const AuthContext = createContext<AuthContextData | null>(null);
-
-  const AuthProvider = ({ children }: { children: ReactNode }) => {
-    return (
-      <AuthProviderCore userManager={userManager} context={AuthContext}>
-        {children}
-      </AuthProviderCore>
-    );
-  };
-
-  const useAuthContext = () => useAuthContextCore(AuthContext);
-  const useAuthState = () => useAuthStateCore(AuthContext);
-
-  /**
-   * Hook to handle the signin callback. Use this on the signin callback page.
-   * @param onDone Optional callback to run after signin is complete. Useful to redirect to a different page.
-   */
-  const useSigninCallback = (onDone?: (user?: User) => void) =>
-    useSigninCallbackCore(AuthContext, onDone);
-
-  /**
-   * Async function to get the access token for the current user
-   * outside of a React component.
-   *
-   * Useful for prefetching data in React Router or similar.
-   */
-  const getAccessToken = async () => {
-    const user = await userManager.getUser();
-    if (!user) {
-      return null;
-    }
-    return user.access_token;
-  };
-
-  return {
-    AuthContext,
-    AuthProvider,
-    useAuthContext,
-    useAuthState,
-    useSigninCallback,
-    getAccessToken,
-  };
-};

package/src/lib/rich-text/Editor.tsx

@@ -1,137 +0,0 @@
-import { useRef, type ReactNode, useMemo, type ReactElement } from "react";
-import { Box, Spinner, styled } from "../ui/ui";
-import { type InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import { lexicalTheme } from "./theme";
-import { useHasFocusWithin, richTextContext } from "./editorContext";
-
-const Container = styled("div", {
-  border: "1px solid $borderDarker",
-  borderRadius: "$md",
-  position: "relative",
-  backgroundColor: "white",
-
-  "&:hover": {
-    borderColor: "$gray200",
-  },
-
-  variants: {
-    hasFocus: {
-      true: {
-        boxShadow: "$md",
-        borderColor: "$gray200",
-      },
-    },
-    hideBorder: {
-      true: {
-        border: "none",
-      },
-    },
-  },
-
-  compoundVariants: [
-    {
-      hasFocus: true,
-      hideBorder: true,
-      css: {
-        boxShadow: "none",
-      },
-    },
-  ],
-});
-
-const EditorSpinner = ({
-  isLoading,
-}: {
-  isLoading: boolean;
-}) => {
-  return (
-    <Box
-      css={{
-        visibility: isLoading ? "visible" : "hidden",
-        position: "absolute",
-        bottom: "1rem",
-        right: "1rem",
-        display: "flex",
-      }}
-    >
-      <Spinner />
-    </Box>
-  );
-};
-
-export const RichTextEditor = ({
-  isLoading,
-  children,
-  placeholderText,
-  nodes,
-  plugins,
-  toolbar,
-  content,
-  hideBorder,
-  onBlur,
-}: {
-  isLoading: boolean;
-  children: ReactNode;
-  placeholderText?: string;
-  nodes: InitialConfigType["nodes"];
-  plugins?: ReactNode;
-  toolbar?: ReactNode;
-  content: ReactElement;
-  hideBorder?: boolean;
-  onBlur?: () => void;
-}) => {
-  const { hasFocus, attributes } = useHasFocusWithin({ onBlur });
-  const editorRef = useRef<HTMLDivElement>(null);
-  const contextValue = useMemo(() => ({ hasFocus, editorRef }), [hasFocus]);
-
-  return (
-    <richTextContext.Provider value={contextValue}>
-      <LexicalComposer
-        initialConfig={{
-          namespace: "CommentEditor",
-          onError: (error) => {
-            console.error(error);
-          },
-          theme: lexicalTheme,
-          nodes,
-          editable: true,
-        }}
-      >
-        <Container
-          ref={editorRef}
-          hasFocus={hasFocus}
-          hideBorder={hideBorder}
-          {...attributes}
-        >
-          <RichTextPlugin
-            contentEditable={content}
-            placeholder={
-              placeholderText ? (
-                <Box
-                  css={{
-                    position: "absolute",
-                    top: "$4",
-                    left: "$4",
-                    color: "$gray500",
-                    pointerEvents: "none",
-                    fontSize: "$sm",
-                  }}
-                >
-                  {placeholderText}
-                </Box>
-              ) : null
-            }
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          {plugins}
-          <EditorSpinner isLoading={isLoading} />
-          {toolbar}
-        </Container>
-        {/* biome-ignore lint/complexity/noUselessFragments: <explanation> */}
-        <>{children}</>
-      </LexicalComposer>
-    </richTextContext.Provider>
-  );
-};

package/src/lib/rich-text/config.ts

@@ -1,16 +0,0 @@
-import { AutoLinkNode, LinkNode } from "@lexical/link";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-
-export const defaultNodes = [
-  HeadingNode,
-  QuoteNode,
-  ListNode,
-  ListItemNode,
-  AutoLinkNode,
-  LinkNode,
-  TableNode,
-  TableRowNode,
-  TableCellNode,
-];

package/src/lib/rich-text/editorContext.ts

@@ -1,34 +0,0 @@
-import { type RefObject, createContext, useCallback, useContext, useRef, useState } from "react";
-
-export const richTextContext = createContext({ hasFocus: false, editorRef: { current: null } } as { hasFocus: boolean, editorRef: RefObject<HTMLElement | null> });
-
-export const useHasFocusWithin = ({ onBlur }: { onBlur?: () => void }) => {
-  const [hasFocus, setHasFocus] = useState(false);
-  const blurTimeout = useRef<number | null>(null);
-
-  const handleFocus = useCallback(() => {
-    setHasFocus(true);
-    if (blurTimeout.current) {
-      window.clearTimeout(blurTimeout.current);
-    }
-  }, []);
-
-  const handleBlur = useCallback(() => {
-    blurTimeout.current = window.setTimeout(() => {
-      setHasFocus(false);
-      onBlur?.();
-    }, 0);
-  }, [onBlur]);
-
-  return {
-    hasFocus,
-    attributes: {
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-    },
-  };
-};
-
-export const useRichTextContext = () => {
-  return useContext(richTextContext);
-}

package/src/lib/rich-text/rich-text.ts

@@ -1,4 +0,0 @@
-export * from './state'
-export * from './config'
-export * from './Editor'
-export * from './editorContext'

package/src/lib/rich-text/state.ts

@@ -1,62 +0,0 @@
-import { createHeadlessEditor } from "@lexical/headless";
-import { $generateHtmlFromNodes } from "@lexical/html";
-import { $createParagraphNode, $createTextNode, $getRoot, type CreateEditorArgs, type SerializedEditorState } from "lexical";
-import { trimState } from "./trim";
-
-export const isJSON = (str: string) => {
-  return str[0] === "{";
-};
-
-export const stateToHTML = (
-  state: SerializedEditorState | string | null | undefined,
-  nodes: CreateEditorArgs["nodes"],
-  options?: {
-    maxLines?: number | null;
-    onlyMainContent?: boolean;
-  },
-): {
-  html: string;
-  trimCount: number;
-} => {
-  let trimCount = 0;
-
-  const headlessEditor = createHeadlessEditor({
-    nodes,
-    editable: false,
-  });
-
-  if (state) {
-    try {
-      if (typeof state === "string" && !isJSON(state)) {
-        // We have a string, but it's not JSON. We will assume it is plain text
-        // and create a paragraph node with the text.
-        headlessEditor.update(() => {
-          const root = $getRoot();
-          const p = $createParagraphNode();
-          p.append($createTextNode(state.trim()));
-          root.append(p);
-        });
-      } else {
-        const parsed = headlessEditor.parseEditorState(state, () => {
-          trimCount = trimState({
-            editor: headlessEditor,
-            maxLines: options?.maxLines,
-          });
-        });
-        if (!parsed.isEmpty()) {
-          headlessEditor.setEditorState(parsed);
-        }
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  let html = "";
-
-  headlessEditor.update(() => {
-    html = $generateHtmlFromNodes(headlessEditor);
-  });
-
-  return { html, trimCount };
-};

package/src/lib/rich-text/theme.ts

@@ -1,41 +0,0 @@
-import type { EditorThemeClasses } from "lexical";
-import { css } from "../ui/ui";
-
-const boldCss = css({
-  fontWeight: "bold",
-});
-
-const italicCss = css({
-  fontStyle: "italic",
-});
-
-const underlineCss = css({
-  textDecoration: "underline",
-});
-
-const nestedListItem = css({
-  listStyleType: "none",
-});
-
-// TODO: Improve
-const quoteCss = css({
-  borderLeft: "4px solid #ccc",
-  color: "#666",
-  fontStyle: "italic",
-  margin: "1.5em 10px",
-  padding: "0.5em 10px",
-});
-
-export const lexicalTheme: EditorThemeClasses = {
-  quote: quoteCss().className,
-  text: {
-    bold: boldCss().className,
-    italic: italicCss().className,
-    underline: underlineCss().className,
-  },
-  list: {
-    nested: {
-      listitem: nestedListItem().className,
-    },
-  },
-};

package/src/lib/rich-text/trim.ts

@@ -1,79 +0,0 @@
-import { $getRoot, type LexicalEditor, ParagraphNode } from "lexical";
-import { trimTextContentFromAnchor } from "@lexical/selection";
-
-const findTrimPoint = ({
-  text,
-  maxChars,
-  maxLines,
-}: {
-  text: string;
-  maxChars?: number | null;
-  maxLines?: number | null;
-}) => {
-  if (text.length === 0) {
-    return 0;
-  }
-
-  const hasMaxLines = typeof maxLines === "number";
-  const hasMaxChars = typeof maxChars === "number";
-
-  if (!hasMaxLines && !hasMaxChars) {
-    return text.length;
-  }
-
-  let lineIndex = 0;
-  let charIndex = 0;
-  while (
-    charIndex < text.length &&
-    (!hasMaxLines || lineIndex < maxLines) &&
-    (!hasMaxChars || charIndex < maxChars)
-  ) {
-    const char = text[charIndex];
-
-    if (char === "\n") {
-      lineIndex++;
-    }
-    charIndex++;
-  }
-
-  const newText = text.slice(0, charIndex);
-
-  return newText.length;
-};
-
-export const trimState = ({
-  editor,
-  maxChars,
-  maxLines,
-}: {
-  editor: LexicalEditor;
-  maxChars?: number | null;
-  maxLines?: number | null;
-}) => {
-  const rootNode = $getRoot();
-  const text = rootNode.getTextContent();
-
-  const i = findTrimPoint({ text, maxChars, maxLines });
-  const trimCount = text.length - i;
-
-  const selection = rootNode.select();
-  const anchor = selection.anchor;
-  trimTextContentFromAnchor(editor, anchor, trimCount);
-
-  // Remove the last paragraph if it's empty.
-  const lastChild = rootNode.getLastChild();
-  if (lastChild instanceof ParagraphNode && lastChild.getChildrenSize() === 0) {
-    lastChild.remove();
-  }
-
-  // if (trimCount > 0) {
-  //   // Append an ellipsis to the last text node is we can find it.
-  //   const lastNonRootNode = rootNode.getLastDescendant();
-
-  //   if (lastNonRootNode instanceof TextNode) {
-  //     lastNonRootNode.getParent()?.append($createTextNode("... Les mer"));
-  //   }
-  // }
-
-  return trimCount;
-};

package/src/lib/ui/components/Alert.tsx

@@ -1,63 +0,0 @@
-import { styled } from "../stitches.config";
-import { forwardRef } from "react";
-
-const AlertStyled = styled("div", {
-  padding: "$3",
-  borderRadius: "$md",
-
-  variants: {
-    color: {
-      warning: {
-        background: "$yellow200",
-        border: "1px solid $yellow400",
-        color: "$yellow900",
-      },
-      danger: {
-        background: "$red200",
-        border: "1px solid $red400",
-        color: "$red900",
-      },
-      info: {
-        background: "$blue200",
-        border: "1px solid $blue400",
-        color: "$blue900",
-      },
-      success: {
-        background: "$green200",
-        border: "1px solid $green400",
-        color: "$green900",
-      },
-    },
-    size: {
-      sm: {
-        fontSize: "$sm",
-      },
-      md: {
-        fontSize: "$md",
-      },
-    },
-  },
-
-  defaultVariants: {
-    color: "info",
-    size: "md",
-  },
-});
-
-type AlertProps = React.ComponentProps<typeof AlertStyled> & {
-  as?: React.ElementType;
-}
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <AlertStyled
-        ref={ref}
-        role="alert"
-        {...props}
-      >
-        {children}
-      </AlertStyled>
-    );
-  },
-);