@ndla/ui 56.0.34-alpha.0 → 56.0.35-alpha.0

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -1,282 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Meta, StoryFn } from "@storybook/react";
-import { CloseLine } from "@ndla/icons/action";
-import { CheckLine } from "@ndla/icons/editor";
-import {
-  FieldErrorMessage,
-  FieldInput,
-  FieldLabel,
-  FieldRoot,
-  FieldHelper,
-  IconButton,
-  InputContainer,
-  Spinner,
-} from "@ndla/primitives";
-import { HStack, styled } from "@ndla/styled-system/jsx";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-import { flattenFolders } from "./helperFunctions";
-import { TreeStructure, TreeStructureProps } from "./TreeStructure";
-
-const Container = styled("div", {
-  base: {
-    display: "flex",
-    maxWidth: "surface.large",
-    maxHeight: "surface.small",
-  },
-});
-
-const MY_FOLDERS_ID = "folders";
-
-const targetResource: TreeStructureProps["targetResource"] = {
-  id: "test-resource",
-  resourceId: "123",
-  resourceType: "concept",
-  tags: [],
-  path: "",
-  created: "",
-};
-
-const STRUCTURE_EXAMPLE: IFolder[] = [
-  {
-    id: "1",
-    name: "Mine favoritter",
-    status: "private",
-    breadcrumbs: [{ id: "1", name: "Mine Favoritter" }],
-    resources: [targetResource],
-    created: "2023-03-03T08:40:23.444Z",
-    updated: "2023-03-03T08:40:23.444Z",
-    subfolders: [
-      {
-        id: "2",
-        name: "Eksamen",
-        status: "shared",
-        breadcrumbs: [
-          { id: "1", name: "Mine Favoritter" },
-          { id: "2", name: "Eksamen" },
-        ],
-        created: "2023-03-03T08:40:23.444Z",
-        updated: "2023-03-03T08:40:23.444Z",
-        resources: [],
-        subfolders: [
-          {
-            id: "3",
-            name: "Eksamens oppgaver",
-            status: "shared",
-            breadcrumbs: [
-              { id: "1", name: "Mine Favoritter" },
-              { id: "2", name: "Eksamen" },
-              { id: "3", name: "Eksamens oppgaver" },
-            ],
-            resources: [],
-            subfolders: [],
-            created: "2023-03-03T08:40:23.444Z",
-            updated: "2023-03-03T08:40:23.444Z",
-          },
-          {
-            id: "4",
-            name: "Eksamen 2022",
-            status: "private",
-            breadcrumbs: [
-              { id: "1", name: "Mine Favoritter" },
-              { id: "2", name: "Eksamen" },
-              { id: "4", name: "Eksamen 2022" },
-            ],
-            resources: [],
-            subfolders: [],
-            created: "2023-03-03T08:40:23.444Z",
-            updated: "2023-03-03T08:40:23.444Z",
-          },
-        ],
-      },
-      {
-        id: "5",
-        name: "Oppgaver",
-        status: "shared",
-        breadcrumbs: [
-          { id: "1", name: "Mine Favoritter" },
-          { id: "5", name: "Oppgaver" },
-        ],
-        resources: [],
-        subfolders: [],
-        created: "2023-03-03T08:40:23.444Z",
-        updated: "2023-03-03T08:40:23.444Z",
-      },
-    ],
-  },
-];
-
-const FOLDER_TREE_STRUCTURE: IFolder[] = [
-  {
-    id: MY_FOLDERS_ID,
-    name: "Mine mapper",
-    status: "private",
-    breadcrumbs: [],
-    resources: [],
-    subfolders: [...STRUCTURE_EXAMPLE],
-    created: "2023-03-03T08:40:23.444Z",
-    updated: "2023-03-03T08:40:23.444Z",
-  },
-];
-
-export default {
-  title: "Components/TreeStructure",
-  tags: ["autodocs"],
-  component: TreeStructure,
-  parameters: {
-    inlineStories: true,
-  },
-  args: {
-    defaultOpenFolders: [MY_FOLDERS_ID],
-    targetResource: targetResource,
-    label: "Velg mappe",
-    maxLevel: 5,
-    // eslint-disable-next-line no-console
-    onSelectFolder: console.log,
-  },
-  argTypes: {
-    folders: { control: false },
-  },
-} as Meta<typeof TreeStructure>;
-
-export const Default: StoryFn<typeof TreeStructure> = ({ ...args }) => {
-  const [structure, setStructure] = useState<IFolder[]>(FOLDER_TREE_STRUCTURE);
-
-  return (
-    <Container>
-      <TreeStructure
-        {...args}
-        folders={structure}
-        newFolderInput={({ parentId, onCancel, onCreate }) => (
-          <NewFolder
-            structure={structure}
-            setStructure={setStructure}
-            parentId={parentId}
-            onCancel={onCancel}
-            onCreate={onCreate}
-          />
-        )}
-      />
-    </Container>
-  );
-};
-
-interface NewFolderProps {
-  parentId: string;
-  structure: IFolder[];
-  setStructure: Dispatch<SetStateAction<IFolder[]>>;
-  onCancel?: () => void;
-  onCreate?: (folder: IFolder) => void;
-}
-
-const generateNewFolder = (name: string, id: string, breadcrumbs: { id: string; name: string }[]): IFolder => ({
-  id,
-  name,
-  status: "private",
-  subfolders: [],
-  breadcrumbs: breadcrumbs.concat({ name, id }),
-  resources: [],
-  created: "2023-03-03T08:40:23.444Z",
-  updated: "2023-03-03T08:40:23.444Z",
-});
-
-const NewFolder = ({ parentId, onCancel, structure, setStructure, onCreate }: NewFolderProps) => {
-  const [name, setName] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  const { t } = useTranslation();
-
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const onSave = async () => {
-    if (error) {
-      return;
-    }
-    if (name === "") {
-      return;
-    }
-    setLoading(true);
-    await new Promise((resolve) => setTimeout(resolve, 3000));
-    setLoading(false);
-    const flattenedStructure = flattenFolders(structure);
-    const targetFolder = flattenedStructure.find((folder) => folder.id === parentId);
-    const newFolderId = (flattenedStructure.length + 1).toString();
-    const newFolder = generateNewFolder(name, newFolderId, targetFolder?.breadcrumbs ?? []);
-    if (targetFolder) {
-      setStructure((oldStructure) => {
-        targetFolder.subfolders.unshift(newFolder);
-        return oldStructure;
-      });
-    } else {
-      setStructure((old) => [newFolder].concat(old));
-    }
-    onCreate?.(newFolder);
-  };
-
-  useEffect(() => {
-    if (name.length === 0) {
-      setError("Navn er påkrevd");
-    } else {
-      setError("");
-    }
-  }, [name]);
-
-  return (
-    <FieldRoot required invalid={!!error}>
-      <FieldLabel srOnly>Mine mapper</FieldLabel>
-      <FieldErrorMessage>{error}</FieldErrorMessage>
-      <InputContainer>
-        <FieldInput
-          autoComplete="off"
-          disabled={loading}
-          ref={inputRef}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
-          name="name"
-          placeholder="Skriv inn mappenavn"
-          onChange={(e) => {
-            if (!loading) {
-              setName(e.currentTarget.value);
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") {
-              e.preventDefault();
-              onCancel?.();
-            } else if (e.key === "Enter") {
-              e.preventDefault();
-              onSave();
-            }
-          }}
-        />
-        <HStack gap="3xsmall">
-          {!loading ? (
-            <>
-              {!error && (
-                <IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
-                  <CheckLine />
-                </IconButton>
-              )}
-              <IconButton aria-label={t("close")} title={t("close")} variant="tertiary" onClick={onCancel}>
-                <CloseLine />
-              </IconButton>
-            </>
-          ) : (
-            <FieldHelper>
-              <Spinner size="small" aria-label={t("loading")} />
-            </FieldHelper>
-          )}
-        </HStack>
-      </InputContainer>
-    </FieldRoot>
-  );
-};

package/src/TreeStructure/TreeStructure.tsx

@@ -1,354 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { KeyboardEvent, useCallback, useMemo, useRef, useState } from "react";
-import { flushSync } from "react-dom";
-import { useTranslation } from "react-i18next";
-import { useTreeView, usePopoverContext, type PopoverOpenChangeDetails } from "@ark-ui/react";
-import { AddLine, HeartFill } from "@ndla/icons/action";
-import { ArrowDownShortLine, ArrowRightShortLine } from "@ndla/icons/common";
-import { FolderUserLine } from "@ndla/icons/contentType";
-import { FolderLine } from "@ndla/icons/editor";
-import {
-  Button,
-  IconButton,
-  PopoverContent,
-  PopoverRoot,
-  PopoverTrigger,
-  Tree,
-  TreeBranch,
-  TreeBranchContent,
-  TreeBranchControl,
-  TreeBranchIndicator,
-  TreeBranchText,
-  TreeBranchTrigger,
-  TreeItem,
-  TreeItemText,
-  TreeLabel,
-  TreeRootProvider,
-} from "@ndla/primitives";
-import { HStack, Stack, styled } from "@ndla/styled-system/jsx";
-import { IFolder, IResource } from "@ndla/types-backend/myndla-api";
-import { flattenFolders } from "./helperFunctions";
-import { NewFolderInputFunc } from "./types";
-
-export const MAX_LEVEL_FOR_FOLDERS = 5;
-
-export interface TreeStructureProps {
-  loading?: boolean;
-  targetResource?: IResource;
-  defaultOpenFolders?: string[];
-  folders: IFolder[];
-  label?: string;
-  maxLevel?: number;
-  newFolderInput?: NewFolderInputFunc;
-  onSelectFolder?: (id: string) => void;
-  ariaDescribedby?: string;
-}
-
-const StyledButton = styled(Button, {
-  base: {
-    width: "100%",
-    justifyContent: "space-between",
-    "& span": {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-    },
-  },
-});
-
-const StyledHStack = styled(HStack, {
-  base: {
-    overflow: "hidden",
-  },
-});
-
-const StyledHeartFill = styled(HeartFill, {
-  base: {
-    color: "icon.strong",
-  },
-});
-
-const StyledFolderLine = styled(FolderLine, {
-  base: {
-    color: "icon.strong",
-  },
-});
-
-const StyledFolderUserLine = styled(FolderUserLine, {
-  base: {
-    color: "icon.strong",
-  },
-});
-
-const StyledTreeRootProvider = styled(TreeRootProvider, {
-  base: {
-    width: "100%",
-    maxHeight: "inherit",
-  },
-});
-
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    overflow: "auto",
-    maxHeight: "inherit",
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall",
-  },
-});
-
-const LabelHStack = styled(HStack, {
-  base: {
-    width: "100%",
-  },
-});
-
-export const TreeStructure = ({
-  folders,
-  defaultOpenFolders,
-  newFolderInput,
-  label,
-  targetResource,
-  loading,
-  maxLevel = MAX_LEVEL_FOR_FOLDERS,
-  onSelectFolder,
-  ariaDescribedby,
-}: TreeStructureProps) => {
-  const [open, setOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(defaultOpenFolders?.[defaultOpenFolders?.length - 1] ?? "");
-  const [expandedValue, setExpandedValue] = useState<string[]>(defaultOpenFolders ?? []);
-  const [focusedValue, setFocusedValue] = useState<string | null>(selectedValue);
-  const [newFolderParentId, setNewFolderParentId] = useState<string | null>(null);
-  const newFolderButtonRef = useRef<HTMLButtonElement>(null);
-  const { t } = useTranslation();
-  const rootFolderIds = useMemo(() => folders.map((folder) => folder.id), [folders]);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  const selectedFolder = useMemo(() => {
-    return flattenFolders(folders).find((folder) => folder.id === selectedValue);
-  }, [folders, selectedValue]);
-
-  const disableCreateFolder = useMemo(() => {
-    return (selectedFolder?.breadcrumbs.length ?? 0) > maxLevel - 1;
-  }, [maxLevel, selectedFolder?.breadcrumbs.length]);
-
-  const onOpenChange = useCallback((details: PopoverOpenChangeDetails) => {
-    setOpen(details.open);
-    if (!details.open) {
-      setNewFolderParentId(null);
-    }
-  }, []);
-
-  const onKeyDown = useCallback((e: KeyboardEvent<HTMLElement>) => {
-    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-      e.stopPropagation();
-      setOpen(true);
-    }
-  }, []);
-
-  const onShowInput = useCallback(() => {
-    if (disableCreateFolder) return;
-    const flattenedFolders = flattenFolders(folders);
-    const folder = flattenedFolders.find((folder) => folder.id === selectedValue);
-    const newExpandedIds = rootFolderIds.concat(folder?.breadcrumbs.map((bc) => bc.id) ?? []);
-    setOpen(true);
-    setExpandedValue((prev) => Array.from(new Set([...prev, ...newExpandedIds])));
-    setNewFolderParentId(selectedValue);
-  }, [disableCreateFolder, folders, rootFolderIds, selectedValue]);
-
-  const treeView = useTreeView({
-    focusedValue,
-    onFocusChange: (details) => !!details.focusedValue && setFocusedValue(details.focusedValue),
-    expandedValue,
-    onExpandedChange: (details) => setExpandedValue(details.expandedValue),
-    selectedValue: [selectedValue],
-    onSelectionChange: (details) => {
-      // TODO: This is currently a bug in zag. The TreeView component simply expects the already selected value to remain selected. As such, always choose the "last" selected value.
-      const val = details.selectedValue[details.selectedValue.length - 1];
-      if (!val) return;
-      if (val === selectedValue && details.focusedValue === selectedValue) {
-        setOpen(false);
-        return;
-      }
-      setSelectedValue(val);
-      onSelectFolder?.(val);
-    },
-    expandOnClick: false,
-  });
-
-  const onCreateFolder = useCallback(
-    (folder: IFolder | undefined) => {
-      if (!folder) return;
-      const focus = treeView.focusItem;
-      const expand = treeView.expand;
-      const select = treeView.select;
-      flushSync(() => {
-        setOpen(true);
-      });
-      flushSync(() => {
-        expand(folder.breadcrumbs.map((bc) => bc.id));
-      });
-      flushSync(() => {
-        select([folder.id]);
-      });
-      flushSync(() => {
-        focus(folder.id);
-      });
-      setNewFolderParentId(null);
-    },
-    [treeView.expand, treeView.focusItem, treeView.select],
-  );
-
-  const onAnimationEnd = useCallback(() => {
-    if (open && focusedValue) {
-      document.getElementById(focusedValue)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }
-  }, [focusedValue, open]);
-
-  const onCancelFolder = useCallback(() => {
-    if (!selectedFolder) return;
-    const focusFunc = selectedFolder.subfolders.length ? treeView.focusBranch : treeView.focusItem;
-    focusFunc(selectedFolder.id);
-    setNewFolderParentId(null);
-  }, [selectedFolder, treeView.focusBranch, treeView.focusItem]);
-
-  const addTooltip = loading
-    ? t("loading")
-    : disableCreateFolder
-      ? t("treeStructure.maxFoldersAlreadyAdded")
-      : t("myNdla.newFolderUnder", { folderName: selectedFolder?.name });
-
-  return (
-    <StyledTreeRootProvider value={treeView} asChild {...treeView.getRootProps()}>
-      <Stack align="flex-end">
-        <LabelHStack gap="xsmall" justify="space-between">
-          <TreeLabel>{label}</TreeLabel>
-          <Button
-            size="small"
-            variant="tertiary"
-            ref={newFolderButtonRef}
-            aria-disabled={disableCreateFolder}
-            title={addTooltip}
-            aria-label={addTooltip}
-            loading={loading}
-            onClick={onShowInput}
-          >
-            <AddLine />
-            {t("myNdla.newFolder")}
-          </Button>
-        </LabelHStack>
-        <PopoverRoot
-          open={open}
-          positioning={{ sameWidth: true }}
-          onOpenChange={onOpenChange}
-          persistentElements={[() => newFolderButtonRef.current]}
-          initialFocusEl={() => contentRef.current?.querySelector("input") ?? null}
-        >
-          <PopoverTrigger asChild>
-            <StyledButton
-              variant="secondary"
-              onKeyDown={onKeyDown}
-              aria-haspopup="tree"
-              role="combobox"
-              aria-describedby={ariaDescribedby}
-              aria-activedescendant={focusedValue ?? undefined}
-            >
-              <span>{selectedFolder?.name}</span>
-              <ArrowDownShortLine />
-            </StyledButton>
-          </PopoverTrigger>
-          <StyledPopoverContent onAnimationEnd={onAnimationEnd} ref={contentRef}>
-            {!!newFolderParentId &&
-              newFolderInput?.({ parentId: newFolderParentId, onCreate: onCreateFolder, onCancel: onCancelFolder })}
-            <Tree>
-              {folders.map((folder) => (
-                <TreeStructureItem key={folder.id} folder={folder} targetResource={targetResource} />
-              ))}
-            </Tree>
-          </StyledPopoverContent>
-        </PopoverRoot>
-      </Stack>
-    </StyledTreeRootProvider>
-  );
-};
-
-interface TreeStructureItemProps {
-  folder: IFolder;
-  targetResource?: IResource;
-}
-
-const TreeStructureItem = ({ folder, targetResource }: TreeStructureItemProps) => {
-  const { t } = useTranslation();
-  const { setOpen } = usePopoverContext();
-  const containsResource =
-    targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
-
-  const FolderIcon = folder.status === "shared" ? StyledFolderUserLine : StyledFolderLine;
-
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLElement>) => {
-      if (e.key === "Enter") {
-        setOpen(false);
-      }
-    },
-    [setOpen],
-  );
-
-  if (!folder.subfolders.length) {
-    return (
-      <TreeItem key={folder.id} value={folder.id} onKeyDown={onKeyDown} id={folder.id}>
-        <StyledHStack gap="xsmall" justify="space-between">
-          <StyledHStack gap="xxsmall" justify="center">
-            <FolderIcon />
-            <TreeItemText>{folder.name}</TreeItemText>
-          </StyledHStack>
-          {containsResource && <StyledHeartFill title={t("myNdla.alreadyInFolder")} />}
-        </StyledHStack>
-      </TreeItem>
-    );
-  }
-
-  const ariaLabel = folder.status === "shared" ? `${folder.name}. ${t("myNdla.folder.sharing.shared")}` : folder.name;
-
-  return (
-    <TreeBranch key={folder.id} value={folder.id} id={folder.id}>
-      <TreeBranchControl onKeyDown={onKeyDown} asChild>
-        <StyledHStack gap="xsmall" justify="space-between">
-          <StyledHStack gap="xxsmall" justify="center">
-            <IconButton variant="clear" asChild>
-              <TreeBranchTrigger>
-                <TreeBranchIndicator asChild>
-                  <ArrowRightShortLine />
-                </TreeBranchIndicator>
-              </TreeBranchTrigger>
-            </IconButton>
-            <FolderIcon />
-            <TreeBranchText aria-label={ariaLabel} title={ariaLabel}>
-              {folder.name}
-            </TreeBranchText>
-          </StyledHStack>
-          {containsResource && (
-            <StyledHeartFill
-              title={t("myNdla.alreadyInFolder")}
-              aria-label={t("myNdla.alreadyInFolder")}
-              aria-hidden={false}
-            />
-          )}
-        </StyledHStack>
-      </TreeBranchControl>
-      <TreeBranchContent>
-        {folder.subfolders.map((subfolder) => (
-          <TreeStructureItem key={subfolder.id} folder={subfolder} targetResource={targetResource} />
-        ))}
-      </TreeBranchContent>
-    </TreeBranch>
-  );
-};

package/src/TreeStructure/helperFunctions.ts

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { IFolder } from "@ndla/types-backend/myndla-api";
-
-export const flattenFolders = (folders: IFolder[], openFolders?: string[]): IFolder[] => {
-  return folders.reduce((acc, { subfolders, id, ...rest }) => {
-    if (!subfolders || (openFolders && !openFolders.includes(id))) {
-      return acc.concat({ subfolders, id, ...rest });
-    }
-    return acc.concat({ subfolders, id, ...rest }, flattenFolders(subfolders, openFolders));
-  }, [] as IFolder[]);
-};

package/src/TreeStructure/index.ts

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export type { TreeStructureProps } from "./TreeStructure";
-export { TreeStructure } from "./TreeStructure";

package/src/TreeStructure/types.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { ReactNode } from "react";
-import { IFolder } from "@ndla/types-backend/myndla-api";
-
-export type OnCreatedFunc = (folder: IFolder | undefined) => void;
-
-export type NewFolderInputFunc = ({
-  onCancel,
-  parentId,
-  onCreate,
-}: {
-  onCancel: () => void;
-  parentId: string;
-  onCreate: OnCreatedFunc;
-}) => ReactNode;