@soul-refiner/design-system 0.0.13 → 0.0.15

package/src/navigation/Navigation/SubNavigation.tsx

@@ -0,0 +1,443 @@
+import React, { UIEventHandler } from "react";
+import { Component, sortChildrenByType } from "@soul-refiner/utils/src";
+import { abbrRelativeTimeString } from "@soul-refiner/utils/src";
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronUp,
+  EllipsisHorizontal,
+  Plus,
+} from "@soul-refiner/icons/src";
+import styles from "./SubNavigation.module.scss";
+import { MenuTabs } from "../MenuTabs";
+import { SearchInput } from "../../inputs";
+import { Button, ButtonProps } from "../../actions";
+import { Dropdown, DropdownOptionProps } from "../../actions/Dropdown";
+import { Avatar, AvatarProps } from "../../iconography";
+
+/********************************************************
+ *  Sub Navigation
+ */
+export interface SubNavigationProps extends React.PropsWithChildren {
+  onSearch: (query: string) => void;
+  onScrollEnd?: () => void;
+  show: boolean;
+  title: string;
+}
+
+const SubNavigation = ({
+  children,
+  onSearch,
+  onScrollEnd,
+  show,
+  title,
+}: SubNavigationProps) => {
+  const tabsRef = React.useRef<HTMLDivElement>(null);
+  const [prevLoc, setPrevLoc] = React.useState(0);
+  const [clickLoc, setClickLoc] = React.useState(0);
+  const [scrolling, setScrolling] = React.useState(false);
+  const [activeTab, setActiveTab] = React.useState(0);
+  const [activeSubMenu, setActiveSubMenu] = React.useState<
+    number | undefined
+  >();
+  const [query, setQuery] = React.useState("");
+
+  const _children = sortChildrenByType(children);
+  let tabs: string[] = [];
+
+  React.Children.forEach(_children["SubNavigation.Tab"], (child) => {
+    tabs.push((child as { props: { name: string } })?.props.name);
+  });
+
+  const handleChange = (event: React.FormEvent) => {
+    setQuery((event.target as HTMLInputElement).value);
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    onSearch(query);
+  };
+
+  const handleTabChange = (index: number) => setActiveTab(index);
+
+  const handleTabMouseDown = (event: React.MouseEvent) => {
+    setScrolling(true);
+    setClickLoc(event.clientX);
+  };
+
+  const handleTabDrag = (event: React.MouseEvent) => {
+    if (tabsRef.current && scrolling) {
+      tabsRef.current.scrollLeft = prevLoc + clickLoc - event.clientX;
+    }
+  };
+
+  const handleTabMouseUp = () => {
+    setScrolling(false);
+    setPrevLoc(tabsRef.current?.scrollLeft ?? 0);
+  };
+
+  const handleScroll = (event: React.WheelEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLDivElement;
+    const scrollDistance = target.scrollHeight - target.scrollTop;
+    // Margin of 10 for browser differences
+    if (scrollDistance - target.clientHeight < 11 && onScrollEnd) {
+      onScrollEnd();
+    }
+  };
+
+  submenu: if (activeSubMenu !== undefined) {
+    const activeTabElement = React.Children.toArray(
+      _children?.["SubNavigation.Tab"]?.[activeTab]
+    );
+    if (!activeTabElement || activeSubMenu === undefined) break submenu;
+    let parentProps = (activeTabElement[0] as any)?.props?.children?.props;
+    let activeSubMenuElement = parentProps?.submenu;
+
+    if (!activeSubMenuElement) {
+      // if there is more than one child
+      parentProps = (activeTabElement[0] as any)?.props?.children?.[
+        activeSubMenu
+      ]?.props;
+      activeSubMenuElement = parentProps?.submenu;
+      if (
+        !activeSubMenuElement ||
+        activeSubMenuElement.type.displayName !== "SubNavigation.SubMenu"
+      )
+        break submenu;
+    }
+
+    return (
+      <div
+        data-testid="submenu"
+        className={`${styles.secondary}${show ? " show" : " hidden"}`}
+      >
+        <div className="header">
+          <div
+            className="title-wrapper submenu"
+            onClick={() => setActiveSubMenu(undefined)}
+          >
+            <ArrowLeft fill="var(--color-grey-1)" iconSize={16} size={30} />
+            <h4>{activeSubMenuElement.props.title}</h4>
+          </div>
+          <Avatar size={40} title={parentProps.title} url={parentProps.url} />
+        </div>
+        <div className="contents">{activeSubMenuElement}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid="subnavigation"
+      className={`${styles.secondary}${show ? " show" : " hidden"}`}
+    >
+      <div className="header">
+        <div className="title-wrapper">
+          <h4>{title}</h4>
+          <SearchInput
+            expandable
+            onChange={handleChange}
+            onSubmit={handleSubmit as () => undefined}
+            value={query}
+          />
+        </div>
+        <div className="buttons-wrapper">
+          {_children["SubNavigation.Button"]}
+        </div>
+      </div>
+      <div
+        className="tab-wrapper"
+        onMouseDown={handleTabMouseDown}
+        onMouseMove={handleTabDrag}
+        onMouseUp={handleTabMouseUp}
+        ref={tabsRef}
+      >
+        <MenuTabs
+          activeItem={activeTab}
+          onTabClick={handleTabChange}
+          tabItems={tabs}
+        />
+      </div>
+      <div
+        className="contents"
+        onScroll={
+          onScrollEnd
+            ? (handleScroll as unknown as UIEventHandler<HTMLDivElement>)
+            : undefined
+        }
+      >
+        {React.Children.map(
+          (_children["SubNavigation.Tab"][activeTab] as React.ReactElement)
+            .props.children,
+          (child, index) => {
+            if (child.props.submenu) {
+              return React.cloneElement(child, {
+                key: "menu-item-" + index.toString(36),
+                onClick: (event: React.MouseEvent) => {
+                  event.stopPropagation();
+                  setActiveSubMenu(index);
+                },
+              });
+            }
+            return React.cloneElement(child, {
+              key: "menu-item-" + index.toString(36),
+            });
+          }
+        )}
+      </div>
+      <div className="create-wrapper">{_children["SubNavigation.Create"]}</div>
+    </div>
+  );
+};
+
+/********************************************************
+ *  Item - Renders individual items of the sub navigation
+ */
+export interface SubNavigationItemProps
+  extends Omit<AvatarProps, "as" | "size"> {
+  as?: React.ElementType;
+  active?: boolean;
+  /**
+   * The time stamp renders only if isMessage is true
+   */
+  dateCreated?: Date;
+  /**
+   * Dropdown options render only if isMessage is false
+   */
+  dropdownOptions?: DropdownOptionProps[];
+  dropdownElements?: React.ReactNode[];
+  isMessage?: boolean;
+  onClick?: () => void;
+  submenu?: React.ReactNode;
+  /**
+   * The unread props is for messages only
+   */
+  unread?: boolean;
+}
+
+const Item = ({
+  as,
+  active,
+  dateCreated,
+  dropdownOptions,
+  dropdownElements,
+  isMessage,
+  onClick,
+  subtitle,
+  title,
+  unread,
+  url,
+}: SubNavigationItemProps) => {
+  return (
+    <Component
+      as={as ?? "a"}
+      className={`${styles.subitem}${active ? " active" : ""}${
+        unread ? " unread" : ""
+      }`}
+      onClick={onClick}
+    >
+      {isMessage && unread && <div className="notification" />}
+      <Avatar size={36} subtitle={subtitle} title={title} url={url} />
+      {!isMessage && dropdownOptions && (
+        <Dropdown
+          onChange={() => undefined}
+          open="left"
+          options={dropdownOptions}
+          style={{ marginLeft: "auto" }}
+          trigger={
+            <EllipsisHorizontal
+              iconSize={18}
+              size={18}
+              fill="var(--color-blue-6)"
+            />
+          }
+        >
+          {dropdownElements}
+        </Dropdown>
+      )}
+      {isMessage && dateCreated && (
+        <p className="time-stamp">
+          {abbrRelativeTimeString(dateCreated, { message: true })}
+        </p>
+      )}
+    </Component>
+  );
+};
+
+Item.displayName = "SubNavigation.Item";
+SubNavigation.Item = Item;
+
+/********************************************************
+ *  Button - Renders one of the call to actions at the top of the inner drawer navigation
+ */
+export interface SubNavigationButtonProps
+  extends Omit<ButtonProps, "size" | "buttonColor" | "bold" | "uppercase"> {
+  active?: boolean;
+}
+
+const SubNavButton = ({
+  active,
+  children,
+  ...rest
+}: SubNavigationButtonProps) => {
+  return (
+    <Button
+      buttonColor="#F5F8FF"
+      color="var(--color-blue-3)"
+      className="sub-nav-button"
+      size="small"
+      style={active ? { border: "1px solid var(--color-blue-3)" } : {}}
+      uppercase={false}
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+};
+
+SubNavButton.displayName = "SubNavigation.Button";
+SubNavigation.Button = SubNavButton;
+
+/********************************************************
+ *  Create - Renders the CTA to create something at the bottom of the inner drawer navigation
+ */
+export interface SubNavigationCreateProps
+  extends Omit<
+    ButtonProps,
+    "size" | "buttonColor" | "bold" | "uppercase" | "icon"
+  > {
+  active?: boolean;
+}
+
+const SubNavCreate = ({
+  active,
+  children,
+  ...rest
+}: SubNavigationCreateProps) => {
+  return (
+    <Button
+      bold={false}
+      buttonColor="var(--color-blue-3)"
+      className="create"
+      color="var(--color-blue-10)"
+      icon={
+        <Plus
+          iconSize={11}
+          fill="#FFFFFF"
+          size={29}
+          style={{
+            borderRadius: "50%",
+            border: "1px dashed var(--color-blue-10)",
+          }}
+        />
+      }
+      uppercase={false}
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+};
+
+SubNavCreate.displayName = "SubNavigation.Create";
+SubNavigation.Create = SubNavCreate;
+
+/********************************************************
+ *  Tab - Renders both the tabs in the header and the content of each tab
+ */
+export interface SubNavigationTabProps extends React.PropsWithChildren {
+  name: string;
+}
+
+const Tab = ({ children }: SubNavigationTabProps) => {
+  return <>{React.Children.toArray(children)}</>;
+};
+
+Tab.displayName = "SubNavigation.Tab";
+SubNavigation.Tab = Tab;
+
+/********************************************************
+ *  Sub Menu - Renders a sub menu that navigates to a new page of the inner drawer navigation
+ */
+export interface SubNavigationSubMenuProps extends React.PropsWithChildren {
+  title: string;
+}
+
+const SubMenu = ({ children }: SubNavigationSubMenuProps) => {
+  return <>{React.Children.toArray(children)}</>;
+};
+
+SubMenu.displayName = "SubNavigation.SubMenu";
+SubNavigation.SubMenu = SubMenu;
+
+/********************************************************
+ *  Sub Menu Item - Renders a child element of the sub menu
+ */
+export interface SubNavigationSubMenuItemProps extends React.PropsWithChildren {
+  as?: React.ElementType;
+  icon?: React.ReactElement;
+  href?: string;
+  onClick?: () => void;
+  title: string;
+}
+
+const SubMenuItem = ({
+  as,
+  children,
+  icon,
+  href,
+  onClick,
+  title,
+}: SubNavigationSubMenuItemProps) => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    if (children) {
+      setOpen((prev) => !prev);
+    }
+    if (onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <>
+      <Component
+        as={as ?? "div"}
+        className={`${styles.submenuitem}`}
+        href={href}
+        onClick={children || onClick ? handleClick : undefined}
+      >
+        {icon &&
+          React.cloneElement(icon, {
+            fill: "var(--color-blue-2)",
+            iconSize: 21,
+            size: 24,
+          })}
+        <p>{title}</p>
+        {!!children &&
+          (open ? (
+            <ChevronUp
+              fill="var(--color-blue-2)"
+              iconSize={12}
+              size={24}
+              style={{ marginLeft: "auto" }}
+            />
+          ) : (
+            <ChevronDown
+              fill="var(--color-blue-2)"
+              iconSize={12}
+              size={24}
+              style={{ marginLeft: "auto" }}
+            />
+          ))}
+      </Component>
+      {children && open && <div className="children-wrapper">{children}</div>}
+    </>
+  );
+};
+
+SubMenuItem.displayName = "SubNavigation.SubMenuItem";
+SubNavigation.SubMenuItem = SubMenuItem;
+
+export { SubNavigation };

package/src/navigation/Navigation/index.ts

@@ -0,0 +1,15 @@
+export {
+  Navigation,
+  type NavigationProps,
+  type NavigationItemProps,
+} from "./Navigation";
+export {
+  SubNavigation,
+  type SubNavigationProps,
+  type SubNavigationItemProps,
+  type SubNavigationButtonProps,
+  type SubNavigationCreateProps,
+  type SubNavigationTabProps,
+  type SubNavigationSubMenuProps,
+  type SubNavigationSubMenuItemProps,
+} from "./SubNavigation";

package/src/navigation/Pagination/Pagination.module.scss

@@ -0,0 +1,49 @@
+@use "@soul-refiner/styles/mixins";
+
+.pagination {
+  @include mixins.flex($gap: 10px, $align: center, $justify: center);
+  padding: 10px 20px;
+
+  & > * {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    color: var(--color-grey-4);
+    &:first-child > svg {
+      padding-right: 3px;
+    }
+    &:last-child > svg {
+      padding-left: 3px;
+    }
+  }
+
+  & > *:not([class~="break"]) {
+    &:not([class~="active"]):hover {
+      background-color: var(--color-grey-9);
+      color: var(--color-blue-3);
+      & > svg {
+        fill: var(--color-blue-3);
+      }
+    }
+  }
+
+  & > [class~="active"] {
+    background-color: var(--color-blue-3);
+    color: #ffffff;
+  }
+
+  & > [class~="break"] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+  }
+
+  & > [class~="disabled"] {
+    pointer-events: none;
+    & > svg {
+      fill: var(--color-grey-8);
+    }
+  }
+}

package/src/navigation/Pagination/Pagination.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "@soul-refiner/icons/src";
+
+import styles from "./Pagination.module.scss";
+
+export interface PaginationProps {
+  currentPage: number;
+  /**
+   * The max number of pages visible from which one may select
+   * @default 3
+   */
+  visibilityInterval: number;
+  numPages: number;
+  onNavigate: (page: number) => void;
+}
+
+export const Pagination = ({
+  currentPage,
+  visibilityInterval = 3,
+  numPages,
+  onNavigate,
+}: PaginationProps) => {
+  const generatePages = () => {
+    if (numPages <= 2 * visibilityInterval)
+      return [...Array(numPages + 1).keys()].slice(1).map((num) => num + "");
+    else {
+      const firstSet = [...Array(visibilityInterval + 1).keys()].slice(1);
+      const secondSet = Array.from(
+        firstSet,
+        (num) => num + numPages - visibilityInterval
+      );
+      if (currentPage === visibilityInterval + 1) {
+        firstSet.push(visibilityInterval + 1);
+      }
+      if (
+        currentPage === numPages - visibilityInterval &&
+        numPages - visibilityInterval !== firstSet[firstSet.length - 1]
+      ) {
+        secondSet.splice(0, 0, numPages - visibilityInterval);
+      }
+      if (
+        currentPage > visibilityInterval + 1 &&
+        currentPage < numPages - visibilityInterval
+      ) {
+        const middleSet: (string | number)[] = [currentPage];
+        if (!firstSet.includes(currentPage - 1)) {
+          if (firstSet[firstSet.length - 1] === currentPage - 2) {
+            firstSet.pop();
+          }
+          middleSet.splice(0, 0, "break", currentPage - 1);
+        }
+        if (!secondSet.includes(currentPage + 1)) {
+          if (secondSet[0] === currentPage + 2) {
+            secondSet.shift();
+          }
+          middleSet.push(currentPage + 1, "break");
+        }
+        return [...firstSet, ...middleSet, ...secondSet];
+      }
+      return [...firstSet, "break", ...secondSet];
+    }
+  };
+
+  const handleDecrement = () => {
+    if (currentPage > 1) {
+      onNavigate(currentPage - 1);
+    }
+  };
+
+  const handleIncrement = () => {
+    if (currentPage < numPages - 1) {
+      onNavigate(currentPage + 1);
+    }
+  };
+
+  return (
+    <nav className={styles.pagination}>
+      <ChevronLeft
+        as="button"
+        className={currentPage === 1 ? "disabled" : ""}
+        fill="var(--color-grey-5)"
+        iconSize={18}
+        onClick={handleDecrement}
+        size={35}
+      />
+      {generatePages().map((page, index) => {
+        if (page === "break") {
+          return (
+            <div key={"break-" + index.toString(36)} className="break">
+              ...
+            </div>
+          );
+        } else {
+          return (
+            <button
+              key={"page-" + index.toString(36)}
+              className={page === currentPage ? "active" : ""}
+              onClick={() => onNavigate(page as number)}
+            >
+              {page}
+            </button>
+          );
+        }
+      })}
+      <ChevronRight
+        as="button"
+        className={currentPage === numPages ? "disabled" : ""}
+        fill="var(--color-grey-5)"
+        iconSize={18}
+        onClick={handleIncrement}
+        size={35}
+      />
+    </nav>
+  );
+};

package/src/navigation/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination, type PaginationProps } from "./Pagination";

package/src/navigation/index.ts

@@ -0,0 +1,21 @@
+export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";
+export { Drawer, type DrawerProps } from "./Drawer";
+export { EditorBar, type EditorBarProps } from "./EditorBar";
+export { MenuTabs, type MenuTabsProps } from "./MenuTabs";
+export {
+  Navigation,
+  SubNavigation,
+  type NavigationProps,
+  type NavigationItemProps,
+  type SubNavigationProps,
+  type SubNavigationItemProps,
+  type SubNavigationButtonProps,
+  type SubNavigationCreateProps,
+  type SubNavigationTabProps,
+  type SubNavigationSubMenuProps,
+  type SubNavigationSubMenuItemProps,
+} from "./Navigation";
+export {
+  Pagination,
+  type PaginationProps
+} from "./Pagination";