@ndla/ui 13.2.1 → 15.0.0

package/src/TreeStructure/FolderItem.tsx

@@ -0,0 +1,160 @@
+/**
+ * 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 React, { useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import { ArrowDropDown } from '@ndla/icons/common';
+import { FolderOutlined } from '@ndla/icons/contentType';
+import { colors, spacing, misc, animations } from '@ndla/core';
+import { SetFocusedFolderId } from './TreeStructure.types';
+
+const OpenButton = styled.button<{ isOpen: boolean }>`
+  background: transparent;
+  border: 0;
+  transform: rotate(${({ isOpen }) => (isOpen ? '0' : '-90')}deg);
+  padding: ${spacing.xsmall};
+  display: flex;
+  margin: 0;
+  color: ${colors.brand.secondary};
+  cursor: pointer;
+  &:hover {
+    color: ${colors.brand.primary};
+  }
+  svg {
+    width: 16px;
+    height: 16px;
+    transform: ${({ isOpen }) => (isOpen ? 'translateX(3px)' : 'translateY(3px)')};
+  }
+`;
+
+const FolderItemWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
+  line-height: 1;
+  background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
+  color: ${colors.text.primary};
+  &:hover,
+  &:focus {
+    background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
+    color: ${colors.brand.primary};
+  }
+  transition: ${animations.durations.superFast};
+  border: 0;
+  border-radius: ${misc.borderRadius};
+  display: flex;
+  gap: ${spacing.xxsmall};
+  align-items: center;
+  cursor: pointer;
+  padding: ${spacing.xsmall};
+  margin: 0;
+  margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
+  flex-grow: 1;
+  box-shadow: none;
+`;
+
+const FolderNameLink = FolderName.withComponent('a');
+
+interface Props {
+  name: string;
+  id: string;
+  onToggleOpen: (id: string) => void;
+  onMarkFolder: (id: string) => void;
+  isOpen: boolean;
+  markedFolderId?: string;
+  focusedFolderId?: string;
+  loading?: boolean;
+  openOnFolderClick?: boolean;
+  hideArrow?: boolean;
+  setFocusedFolderId: SetFocusedFolderId;
+  url?: string;
+  icon?: React.ReactNode;
+  noPaddingWhenArrowIsHidden?: boolean;
+}
+
+const FolderItem = ({
+  hideArrow,
+  loading,
+  name,
+  id,
+  onToggleOpen,
+  onMarkFolder,
+  isOpen,
+  markedFolderId,
+  focusedFolderId,
+  openOnFolderClick,
+  setFocusedFolderId,
+  icon,
+  url,
+  noPaddingWhenArrowIsHidden,
+}: Props) => {
+  const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
+  const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
+  useEffect(() => {
+    if (focusedFolderId === id) {
+      if (url && folderNameLinkRef.current) {
+        folderNameLinkRef.current.focus();
+      } else if (folderNameButtonRef.current) {
+        folderNameButtonRef.current.focus();
+      }
+    }
+  }, [focusedFolderId, folderNameLinkRef, folderNameButtonRef, url, id]);
+  const marked = markedFolderId === id;
+  return (
+    <FolderItemWrapper>
+      {!hideArrow && (
+        <OpenButton tabIndex={-1} isOpen={isOpen} disabled={loading} onClick={() => onToggleOpen(id)}>
+          <ArrowDropDown />
+        </OpenButton>
+      )}
+      {url ? (
+        <FolderNameLink
+          ref={folderNameLinkRef}
+          noArrow={hideArrow}
+          tabIndex={marked ? 0 : -1}
+          marked={marked}
+          href={loading ? undefined : url}
+          onFocus={() => {
+            setFocusedFolderId(id);
+          }}
+          onClick={() => {
+            onMarkFolder(id);
+            if (openOnFolderClick) {
+              onToggleOpen(id);
+            }
+          }}>
+          {icon || <FolderOutlined />}
+          {name}
+        </FolderNameLink>
+      ) : (
+        <FolderName
+          ref={folderNameButtonRef}
+          noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
+          tabIndex={marked ? 0 : -1}
+          marked={marked}
+          disabled={loading}
+          onFocus={() => {
+            setFocusedFolderId(id);
+          }}
+          onClick={() => {
+            onMarkFolder(id);
+            if (openOnFolderClick) {
+              onToggleOpen(id);
+            }
+          }}>
+          {icon || <FolderOutlined />}
+          {name}
+        </FolderName>
+      )}
+    </FolderItemWrapper>
+  );
+};
+
+export default FolderItem;

package/src/TreeStructure/FolderItems.tsx

@@ -0,0 +1,109 @@
+/**
+ * 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 React from 'react';
+import styled from '@emotion/styled';
+import { animations, spacing } from '@ndla/core';
+import FolderItem from './FolderItem';
+import FolderNameInput from './FolderNameInput';
+import { FolderItemsProps } from './TreeStructure.types';
+import { MAX_LEVEL_FOR_FOLDERS } from './TreeStructure';
+
+const StyledUL = styled.ul<{ firstLevel?: boolean }>`
+  ${animations.fadeInLeft(animations.durations.fast)};
+  animation-fill-mode: forwards;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-left: ${({ firstLevel }) => (firstLevel ? `-${spacing.xsmall}` : spacing.normal)};
+`;
+
+const StyledLI = styled.li`
+  margin: 0;
+  padding: 0;
+`;
+
+const FolderItems = ({
+  loading,
+  data,
+  idPaths,
+  editable,
+  onToggleOpen,
+  onCreateNewFolder,
+  onCancelNewFolder,
+  onSaveNewFolder,
+  newFolder,
+  openFolders,
+  markedFolderId,
+  onMarkFolder,
+  openOnFolderClick,
+  focusedFolderId,
+  setFocusedFolderId,
+  firstLevel,
+}: FolderItemsProps) => (
+  <StyledUL role="group" firstLevel={firstLevel}>
+    {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
+      const newIdPaths = [...idPaths, _index];
+      const isOpen = openFolders?.has(id);
+      return (
+        <StyledLI key={id} role="treeitem">
+          <div>
+            <FolderItem
+              icon={icon}
+              url={url}
+              openOnFolderClick={openOnFolderClick}
+              loading={loading}
+              isOpen={isOpen}
+              id={id}
+              name={name}
+              markedFolderId={markedFolderId}
+              focusedFolderId={focusedFolderId}
+              onToggleOpen={onToggleOpen}
+              onMarkFolder={onMarkFolder}
+              hideArrow={dataChildren?.length === 0 || newIdPaths.length >= MAX_LEVEL_FOR_FOLDERS}
+              noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
+              setFocusedFolderId={setFocusedFolderId}
+            />
+          </div>
+          {newFolder?.parentId === id && (
+            <FolderNameInput
+              loading={loading}
+              onCancelNewFolder={onCancelNewFolder}
+              onSaveNewFolder={onSaveNewFolder}
+            />
+          )}
+          {dataChildren && isOpen && (
+            <FolderItems
+              loading={loading}
+              newFolder={newFolder}
+              openFolders={openFolders}
+              idPaths={newIdPaths}
+              editable={editable}
+              data={dataChildren}
+              onToggleOpen={onToggleOpen}
+              onCreateNewFolder={onCreateNewFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              onCancelNewFolder={onCancelNewFolder}
+              markedFolderId={markedFolderId}
+              onMarkFolder={onMarkFolder}
+              openOnFolderClick={openOnFolderClick}
+              focusedFolderId={focusedFolderId}
+              setFocusedFolderId={setFocusedFolderId}
+              firstLevel={false}
+            />
+          )}
+        </StyledLI>
+      );
+    })}
+  </StyledUL>
+);
+
+export default FolderItems;

package/src/TreeStructure/FolderNameInput.tsx

@@ -0,0 +1,109 @@
+/**
+ * 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 React, { useEffect, useState, useRef } from 'react';
+import styled from '@emotion/styled';
+import { FolderOutlined } from '@ndla/icons/contentType';
+import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
+import { Spinner } from '@ndla/editor';
+import { spacing, colors, misc, animations } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
+import { isMobile } from 'react-device-detect';
+
+const ArrowRight = styled(ArrowDropDownRaw)`
+  color: ${colors.text.primary};
+  transform: rotate(-90deg);
+`;
+
+const NewFolderWrapper = styled.div`
+  padding-left: ${spacing.normal};
+  ${animations.fadeInLeft(animations.durations.fast)};
+  animation-fill-mode: forwards;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+
+const InputWrapper = styled.div<{ loading?: boolean }>`
+  margin: ${spacing.xxsmall} ${spacing.small} ${spacing.xxsmall} 0;
+  display: flex;
+  align-items: center;
+  border: 1px solid ${({ loading }) => (loading ? colors.brand.lighter : colors.brand.primary)};
+  border-style: dashed;
+  border-radius: ${misc.borderRadius};
+  padding-right: ${spacing.normal};
+  padding-left: ${spacing.xsmall};
+  color: ${colors.brand.primary};
+`;
+
+const StyledInput = styled.input`
+  flex-grow: 1;
+  border: 0;
+  outline: none;
+  padding: ${spacing.small};
+  padding-left: ${spacing.xsmall};
+  background: transparent;
+  color: ${colors.text.primary};
+  scroll-margin-top: 100px;
+`;
+
+interface FolderNameInputProps {
+  onSaveNewFolder: (value: string) => void;
+  onCancelNewFolder: () => void;
+  loading?: boolean;
+}
+
+const FolderNameInput = ({ onSaveNewFolder, onCancelNewFolder, loading }: FolderNameInputProps) => {
+  const { t } = useTranslation();
+  const [value, setValue] = useState<string>(t('treeStructure.newFolder.defaultName'));
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.select();
+      if (isMobile) {
+        inputRef.current.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  }, []);
+
+  return (
+    <NewFolderWrapper>
+      <InputWrapper loading={loading}>
+        <ArrowRight />
+        <FolderOutlined />
+        <StyledInput
+          ref={inputRef}
+          autoFocus
+          placeholder={t('treeStructure.newFolder.placeholder')}
+          disabled={loading}
+          value={value}
+          onBlur={() => onCancelNewFolder()}
+          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Escape') {
+              onCancelNewFolder();
+              return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+              onSaveNewFolder(value);
+              e.preventDefault();
+            }
+            return;
+          }}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            const target = e.target as HTMLInputElement;
+            setValue(target.value);
+          }}
+        />
+        {loading && <Spinner size="small" />}
+      </InputWrapper>
+    </NewFolderWrapper>
+  );
+};
+
+export default FolderNameInput;

package/src/TreeStructure/TreeStructure.tsx

@@ -0,0 +1,184 @@
+/**
+ * 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 React, { useEffect, useState, useRef, useMemo } from 'react';
+import { uuid } from '@ndla/util';
+import Button from '@ndla/button';
+import Tooltip from '@ndla/tooltip';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { spacing, fonts } from '@ndla/core';
+import TreeStructureStyledWrapper from './TreeStructureWrapper';
+import FolderItems from './FolderItems';
+import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
+import keyboardNavigation, { KEYBOARD_KEYS_OF_INTEREST } from './keyboardNavigation/keyboardNavigation';
+import { NewFolderProps, TreeStructureProps } from './TreeStructure.types';
+
+export const MAX_LEVEL_FOR_FOLDERS = 4;
+
+const StyledLabel = styled.label`
+  font-weight: ${fonts.weight.semibold};
+`;
+
+const AddFolderWrapper = styled.div`
+  display: flex;
+  margin-top: ${spacing.xsmall};
+`;
+
+const TreeStructure = ({
+  data,
+  label,
+  editable,
+  loading,
+  onNewFolder,
+  openOnFolderClick,
+  framed,
+  folderIdMarkedByDefault,
+  defaultOpenFolders,
+}: TreeStructureProps) => {
+  const { t } = useTranslation();
+  const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
+  const [openFolders, setOpenFolders] = useState<Set<string>>(new Set(defaultOpenFolders || []));
+  const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
+  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0].id);
+  const treestructureRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const rootLevelId = useMemo(() => uuid(), []); // TODO: use useId hook when we update to React 18
+
+  useEffect(() => {
+    setOpenFolders((prev) => {
+      defaultOpenFolders?.forEach((id) => prev.add(id));
+      return new Set(prev);
+    });
+  }, [defaultOpenFolders]);
+
+  useEffect(() => {
+    if (!loading) {
+      setNewFolder(undefined);
+    }
+  }, [loading]);
+
+  const onToggleOpen = (id: string) => {
+    setOpenFolders((prev) => {
+      if (prev.has(id)) {
+        prev.delete(id);
+        // Did we just closed a folder with a marked folder inside it?
+        // If so, we need to mark the folder we just closed.
+        if (markedFolderId) {
+          const closingFolderPath = getPathOfFolder(data, id);
+          const markedFolderPath = getPathOfFolder(data, markedFolderId);
+          const markedFolderIsSubPath = closingFolderPath.every(
+            (folderId, _index) => markedFolderPath[_index] === folderId,
+          );
+          if (markedFolderIsSubPath) {
+            setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          }
+        }
+      } else {
+        prev.add(id);
+      }
+      return new Set(prev);
+    });
+  };
+
+  const onCreateNewFolder = (props: { idPaths: number[]; parentId?: string }) => {
+    setNewFolder(props);
+  };
+
+  const onSaveNewFolder = async (value: string) => {
+    if (newFolder) {
+      // We would like to create a new folder with the name of value.
+      // Its location in structure is based on newFolder object
+      const newFolderId = await onNewFolder({ ...newFolder, value });
+      if (newFolderId) {
+        setMarkedFolderId(newFolderId);
+        setFocusedFolderId(newFolderId);
+        // Open current folder in case it was closed..
+        setOpenFolders((prev) => {
+          if (newFolder.parentId) {
+            prev.add(newFolder.parentId);
+          }
+          return new Set(prev);
+        });
+      }
+    }
+  };
+
+  const onCancelNewFolder = () => {
+    setNewFolder(undefined);
+  };
+
+  const onMarkFolder = (id: string) => {
+    setMarkedFolderId(id);
+    setFocusedFolderId(id);
+  };
+
+  const disableAddFolderButton =
+    markedFolderId === undefined || getPathOfFolder(data, markedFolderId).length >= MAX_LEVEL_FOR_FOLDERS;
+
+  return (
+    <div
+      ref={treestructureRef}
+      onKeyDown={(e) => {
+        if (wrapperRef.current?.contains(document.activeElement) && KEYBOARD_KEYS_OF_INTEREST.includes(e.key)) {
+          keyboardNavigation({
+            e,
+            data,
+            setFocusedFolderId,
+            focusedFolderId,
+            onToggleOpen,
+            openFolders,
+          });
+        }
+      }}>
+      <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>
+      <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
+        <FolderItems
+          idPaths={[]}
+          data={data}
+          editable={editable}
+          onToggleOpen={onToggleOpen}
+          newFolder={newFolder}
+          onCreateNewFolder={onCreateNewFolder}
+          onCancelNewFolder={onCancelNewFolder}
+          onSaveNewFolder={onSaveNewFolder}
+          openFolders={openFolders}
+          markedFolderId={markedFolderId}
+          onMarkFolder={onMarkFolder}
+          openOnFolderClick={openOnFolderClick}
+          loading={loading}
+          focusedFolderId={focusedFolderId}
+          setFocusedFolderId={setFocusedFolderId}
+          firstLevel
+        />
+      </TreeStructureStyledWrapper>
+      {editable && (
+        <AddFolderWrapper>
+          <Tooltip
+            tooltip={t('myNdla.newFolderUnder', {
+              folderName: getFolderName(data, markedFolderId),
+            })}>
+            <Button
+              size="small"
+              light
+              disabled={disableAddFolderButton}
+              onClick={() => {
+                const paths = getPathOfFolder(data, markedFolderId || '');
+                const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
+                setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
+              }}>
+              {t('myNdla.newFolder')}
+            </Button>
+          </Tooltip>
+        </AddFolderWrapper>
+      )}
+    </div>
+  );
+};
+
+export default TreeStructure;

package/src/TreeStructure/TreeStructure.types.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 React from 'react';
+
+export interface FolderStructureProps {
+  id: string;
+  name: string;
+  isOpen?: boolean;
+  data?: FolderStructureProps[];
+  isFavorite?: boolean;
+  status?: string;
+  openAsDefault?: boolean;
+  url?: string;
+  icon?: React.ReactNode;
+}
+
+export interface NewFolderProps {
+  parentId?: string;
+  idPaths: number[];
+}
+
+interface CommonFolderProps {
+  data: FolderStructureProps[];
+  editable?: boolean;
+  loading?: boolean;
+  openOnFolderClick?: boolean;
+}
+
+export interface TreeStructureProps extends CommonFolderProps {
+  framed?: boolean;
+  label: string;
+  folderIdMarkedByDefault?: string;
+  onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
+  defaultOpenFolders?: string[];
+}
+
+export type onCreateNewFolderProp = ({
+  idPaths,
+  parentId,
+}: {
+  idPaths: number[];
+  parentId: string | undefined;
+}) => void;
+
+export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
+export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
+
+export interface FolderItemsProps extends CommonFolderProps {
+  onToggleOpen: (id: string) => void;
+  onSaveNewFolder: (value: string) => void;
+  onCancelNewFolder: () => void;
+  onCreateNewFolder: onCreateNewFolderProp;
+  newFolder: NewFolderProps | undefined;
+  openFolders: Set<string>;
+  markedFolderId?: string;
+  onMarkFolder: (id: string) => void;
+  idPaths: number[];
+  focusedFolderId: string | undefined;
+  setFocusedFolderId: SetFocusedFolderId;
+  firstLevel: boolean;
+  keyNavigationFocusIsCreateFolderButton?: boolean;
+  icon?: React.ReactElement;
+}

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { colors, misc, spacing } from '@ndla/core';
+
+const TreeStructureWrapper = styled.div<{ framed?: boolean }>`
+  padding: ${spacing.xsmall};
+  ${({ framed }) =>
+    framed
+      ? css`
+          border: 1px solid ${colors.brand.greyLighter};
+          border-radius: ${misc.borderRadius};
+          max-height: 400px;
+          overflow-y: scroll;
+          scroll-behavior: smooth;
+          padding: ${spacing.small};
+        `
+      : css`
+          margin-left: -${spacing.medium};
+        `}
+  transition: ${misc.transition.default};
+  &:focus-within {
+    border-color: ${colors.brand.primary};
+  }
+`;
+
+export default TreeStructureWrapper;