@soul-refiner/design-system 0.0.5 → 0.0.7

package/src/navigation/Navigation/SubNavigation.tsx

@@ -1,443 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,49 +0,0 @@
-@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

@@ -1,115 +0,0 @@
-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

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

package/src/navigation/index.ts

@@ -1,21 +0,0 @@
-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";