@feminab/box-ui 0.1.0

package/src/Nav/SideNav.tsx

@@ -0,0 +1,165 @@
+import React from "react";
+import { SideNavProps, INavItem } from "../@interfaces";
+import classNames from "classnames";
+import { Typography } from "../Typography";
+import { NavItem } from "./NavItem";
+import { FiLogOut, FiSearch } from "react-icons/fi";
+import { TextInput } from "../TextInput";
+import { images } from "../data/images";
+
+export const renderLogo = () => (
+    <img src={images.logo} className="w-8 h-8 select-none" alt="logo" />
+);
+
+export const SideNav = ({
+    className,
+    navItemsTop,
+    navItemsBottom,
+    username,
+    email,
+    open,
+    setOpen,
+}: SideNavProps) => {
+
+
+  const Logout = FiLogOut as React.FC<any>;
+  const Search = FiSearch as React.FC<any>;
+
+    const [searchString, setSearchString] = React.useState<string>("");
+    const [activeNavItem, setActiveNavItem] = React.useState<string>("");
+    const [activeSubNavItem, setActiveSubNavItem] = React.useState<string>("");
+    const [openDropdowns, setOpenDropdowns] = React.useState<string[]>([]);
+
+    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchString(e.target.value);
+    };
+
+    const onClickNavItem = (item: INavItem, subNavPath?: string) => {
+        if (subNavPath) {
+          setActiveSubNavItem(subNavPath);
+        }
+        if (!item.toggleSidebar) {
+          setActiveNavItem(item.label);
+        } else if (item.toggleSidebar) {
+          setOpen(!open);
+        }
+    
+        if (item.subItems && openDropdowns.includes(item.label) && !subNavPath) {
+          setOpenDropdowns(
+            openDropdowns.filter((dropdownItem) => dropdownItem !== item.label),
+          );
+        } else if (item.subItems && !openDropdowns.includes(item.label)) {
+          setOpenDropdowns([...openDropdowns, item.label]);
+        }
+    };
+    
+    return (
+        <div
+          className={classNames(
+            "py-6 flex flex-col flex-grow bg-white dark:bg-gray-900 transform ease-out duration-100 overflow-y-auto xs:overflow-y-visible",
+            {
+              "w-80": open,
+              "w-24": !open,
+              "border-r border-gray-300 dark:border-opacity-20": true,
+            },
+            className,
+          )}
+        >
+          <div className="flex items-center w-full mb-8 ml-9">  
+            {renderLogo()}
+            <Typography
+              variant="xl"
+              className={classNames("ml-2.5 whitespace-nowrap select-none", {
+                "opacity-0 hidden": !open,
+              })}
+              customWeight="medium"
+            >
+              Box UI
+            </Typography>
+          </div>
+    
+          <div className="mb-8 mx-9">
+            {open ? (
+              <TextInput
+                type="text"
+                value={searchString}
+                handleChange={handleSearch}
+                placeholder="Search"
+                LeadingIcon={<Search />}
+              />
+            ) : (
+              <div className="h-11" />
+            )}
+          </div>
+    
+          <div
+            className={classNames(
+              "flex flex-col justify-between h-full ml-5 w-70",
+              {
+                "w-14": !open,
+              },
+            )}
+          >
+            <ul className="flex flex-col space-y-1">
+              {navItemsTop.map((item) => (
+                <NavItem
+                  key={item.label}
+                  item={item}
+                  isActive={activeNavItem === item.label}
+                  activeSubNavItem={activeSubNavItem}
+                  open={open}
+                  openDropdown={openDropdowns.includes(item.label)}
+                  onClick={onClickNavItem}
+                />
+              ))}
+            </ul>
+            <ul className="flex flex-col mb-6 space-y-1">
+              {navItemsBottom.map((item) => (
+                <NavItem
+                  key={item.label}
+                  item={item}
+                  isActive={activeNavItem === item.label}
+                  activeSubNavItem={activeSubNavItem}
+                  open={open}
+                  openDropdown={openDropdowns.includes(item.label)}
+                  onClick={onClickNavItem}
+                />
+              ))}
+            </ul>
+          </div>
+    
+          <hr
+            className={classNames(
+              "ml-5 border-t border-gray-300 dark:border-opacity-20",
+              {
+                "w-70": open,
+                "w-14": !open,
+              },
+            )}
+          />
+    
+          <div className="flex mt-6 w-70 ml-7">
+            {open ? (
+              <div className="flex justify-between ml-3">
+                <div className="select-none">
+                  <Typography
+                    variant="sm"
+                    customWeight="medium"
+                    customColor="text-gray-700 dark:text-white"
+                  >
+                    {username}
+                  </Typography>
+    
+                  <Typography variant="sm" customColor="text-gray-500">
+                    {email}
+                  </Typography>
+                </div>
+    
+                <Logout size={24} className="ml-6 text-gray-400 cursor-pointer" />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      );
+    
+}

package/src/Nav/SubNavItem.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from "react";
+import { Typography } from "../Typography";
+import classNames from "classnames";
+import { SubNavItemProps } from "../@interfaces";
+
+export const SubNavItem: FC<SubNavItemProps> = ({
+  inDropdown,
+  isActive,
+  subItem,
+  onClick,
+}) => {
+  return (
+    <li
+      key={subItem.label}
+      className={classNames("navItem group", {
+        "bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10": isActive,
+      })}
+      onClick={onClick}
+    >
+      <Typography
+        variant="md"
+        customWeight="medium"
+        customColor={classNames(
+          "group-hover:text-primary-600 dark:group-hover:text-white",
+          {
+            "text-gray-800 dark:text-white": !isActive,
+            "text-primary-600 dark:text-white": isActive,
+          }
+        )}
+        className={classNames("flex-grow", {
+          "pl-13": !inDropdown,
+          "pl-4": inDropdown,
+        })}
+      >
+        {subItem.label}
+      </Typography>
+    </li>
+  );
+};

package/src/Page.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { Header } from './Header';
+
+type User = {
+  name: string;
+};
+
+export const Page: React.FC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/src/Paginate.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { PaginationProps } from "./@interfaces";
+import classNames from "classnames";
+import { Pagination } from "react-headless-pagination";
+import { FiArrowLeft, FiArrowRight } from "react-icons/fi";
+
+export const Paginate = ({
+  totalPages,
+  page,
+  isMobile,
+  className,
+  setPage,
+}: PaginationProps) => {
+  const handlePageChange = (page: number) => {
+    setPage(page);
+  };
+
+  const ArrowLeft = FiArrowLeft as React.FC<any>;
+  const ArrowRight = FiArrowRight as React.FC<any>;
+
+  if (isMobile) {
+    return (
+      <div className={classNames("flex w-full h-10 items-center", className)}>
+        <ArrowLeft
+          size={20}
+          className={classNames("mr-3 text-gray-500 dark:text-white", {
+            "cursor-pointer": page !== 0,
+            "opacity-50": page === 0,
+          })}
+          onClick={() => {
+            if (page > 0) {
+              handlePageChange(page - 1);
+            }
+          }}
+        />
+        <div className="flex justify-center flex-grow text-sm text-gray-700 select-none dark:text-white">
+          {`Page ${page} of ${totalPages}`}
+        </div>
+        <ArrowRight
+          size={20}
+          className={classNames("ml-3 text-gray-500 dark:text-white", {
+            "cursor-pointer": page !== totalPages - 1,
+            "opacity-50": page === totalPages - 1,
+          })}
+          onClick={() => {
+            if (page < totalPages - 1) {
+              handlePageChange(page + 1);
+            }
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Pagination
+      className={classNames(
+        "flex w-full items-center h-10 text-sm select-none",
+        className
+      )}
+      currentPage={page}
+      totalPages={totalPages}
+      edgePageCount={2}
+      setCurrentPage={handlePageChange}
+      truncableText="..."
+      middlePagesSiblingCount={2}
+      truncableClassName="w-10 px-0.5 text-center dark:text-gray-500"
+    >
+      <Pagination.PrevButton
+        className={classNames(
+          "h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none",
+          {
+            "cursor-pointer": page !== 0,
+            "opacity-50": page === 0,
+          }
+        )}
+      >
+        <ArrowLeft size={20} className={classNames("mr-3")} />
+        Previous
+      </Pagination.PrevButton>
+      <div className="flex items-center justify-center flex-grow list-none">
+        <Pagination.PageButton
+          activeClassName="bg-primary-50 dark:bg-opacity-0 text-primary-600 dark:text-white"
+          inactiveClassName="text-gray-500"
+          className="flex items-center justify-center h-10 w-10 rounded-full cursor-pointer font-medium"
+        />
+      </div>
+      <Pagination.NextButton
+        className={classNames(
+          "h-10 font-medium flex items-center mr-2 text-gray-500 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none",
+          {
+            "cursor-pointer": page !== totalPages - 1,
+            "opacity-50": page === totalPages - 1,
+          }
+        )}
+      >
+        Next
+        <ArrowRight size={20} className={classNames("ml-3")} />
+      </Pagination.NextButton>
+    </Pagination>
+  );
+};

package/src/Select.tsx

@@ -0,0 +1,102 @@
+import React, {
+  FC,
+  ReactElement,
+  isValidElement,
+  cloneElement,
+} from "react";
+import { SelectProps } from "./@interfaces";
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/react";
+import classNames from "classnames";
+import {FiCheck, FiChevronDown} from 'react-icons/fi'
+
+export const Select: FC<SelectProps> = ({
+  options,
+  selectedOption,
+  setSelectedOption,
+  placeholder,
+  LeadingIcon,
+  width,
+}) => {
+
+  const ArrowDown = FiChevronDown as React.FC<any>;
+  const Check = FiCheck as React.FC<any>;
+
+  const setProps = (
+    icon: ReactElement,
+    iconSize: number,
+    additionalClass: string
+  ) => {
+    if (
+      isValidElement<{ size?: number; className?: string }>(icon) &&
+      "size" in icon.props
+    ) {
+      return cloneElement(icon, {
+        size: iconSize,
+        className: classNames(icon.props.className, additionalClass),
+      });
+    }
+    return icon;
+  };
+
+  return (
+    <div className={classNames("relative inline-block", width)}>
+      <Listbox value={selectedOption && selectedOption.value} onChange={setSelectedOption}>
+        {({ open }) => (
+          <>
+            <ListboxButton className={classNames("shadow-sm flex items-center text-md border border-gray-300 dark:border-gray-500 h-11 px-3.5 rounded-lg bg-white dark:bg-gray-800",
+                "focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20 whitespace-nowrap",
+                {
+                  "text-gray-900 dark:text-white": selectedOption,
+                  "text-gray-500 dark:text-gray-300": !selectedOption,
+                },
+                width,)}>
+              {LeadingIcon && (
+                <div className="w-5 h-5 mr-2 overflow-hidden">
+                  {setProps(LeadingIcon, 20, classNames("text-gray-400"))}
+                </div>
+              )}
+              {selectedOption ? selectedOption.label : placeholder}
+              <ArrowDown
+                size={20}
+                className={classNames(
+                  "text-gray-500 dark:text-gray-300 transform duration-100 ease-out",
+                  {
+                    "-rotate-180": open,
+                    "ml-auto": width,
+                    "ml-3.5": !width,
+                  },
+                )}
+              />
+            </ListboxButton>
+            <ListboxOptions className="absolute z-10 inline-flex flex-col w-full bg-white border border-gray-300 rounded-lg shadow-lg top-13 dark:border-gray-500 dark:bg-gray-800">
+              {options?.map((option, index) => (
+                <ListboxOption as={React.Fragment} key={option.value} value={option.value}>
+                    {({focus, selected}) => (
+                        <li className={classNames(classNames(
+                        "flex items-center pl-3.5 pr-3 justify-between h-11 text-gray-900 dark:text-white text-md cursor-pointer hover:bg-primary-25 dark:hover:bg-gray-100 dark:hover:bg-opacity-10 whitespace-nowrap",
+                        {
+                          "bg-primary-25 dark:bg-gray-100 dark:bg-opacity-10":
+                            focus,
+                          "rounded-t-lg": index === 0,
+                          "rounded-b-lg": index === options.length - 1,
+                        },
+                      ))}>
+                        <div className="flex items-center">{option.label}</div>
+                        {selected && <Check className="ml-5 text-primary-600 dark:text-white" />}
+                    </li>
+                    )}
+                    
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
+          </>
+        )}
+      </Listbox>
+    </div>
+  );
+};

package/src/StoryLayout.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import classNames from "classnames";
+
+export interface IStoryArgs {
+  darkMode: boolean;
+  className?: String;
+  children?: React.ReactNode;
+  noPadding?: String;
+}
+
+export const StoryLayout = (args: IStoryArgs) => (
+  <div className={classNames({ "dark bg-gray-900": args.darkMode }, "-m-4")}>
+    <div className={classNames(args.className, { "p-4": !args.noPadding })}>
+      {args.children}
+    </div>
+  </div>
+);

package/src/TextInput.tsx

@@ -0,0 +1,103 @@
+import React, { FC } from "react";
+import { TextInputProps } from "./@interfaces";
+import { Typography } from "./Typography";
+import classNames from "classnames";
+import { useIconClassName } from "./hooks/useIconClassName";
+
+export const TextInput: FC<TextInputProps> = ({
+  type,
+  value,
+  label,
+  placeholder,
+  error,
+  helperText,
+  disabled,
+  LeadingIcon,
+  TrailingIcon,
+  leadingText,
+  handleChange,
+}) => {
+  const { setClassName } = useIconClassName();
+
+  return (
+    <div>
+      {label && (
+        <Typography
+          variant="sm"
+          customWeight="medium"
+          customColor="text-gray-700 dark:text-white"
+          className="mb-1.5"
+        >
+          {label}
+        </Typography>
+      )}
+      <div
+        className={classNames("relative", { "flex items-center": leadingText })}
+      >
+        <div className="h-11 absolute shadow-sm rounded-lg w-full flex justify-between items-center px-3.5 pointer-events-none">
+          {LeadingIcon ? setClassName(LeadingIcon, "text-gray-500") : <div />}
+          {TrailingIcon &&
+            setClassName(
+              TrailingIcon,
+              classNames({ "text-error-500": error, "text-gray-400": !error })
+            )}
+        </div>
+        {leadingText && (
+          <Typography
+            variant="sm"
+            customWeight="regular"
+            className={classNames(
+                "flex items-center h-11 text-lg text-gray-500 pl-3.5 pr-3 border border-r-0 rounded-l-lg border-gray-300 dark:border-gray-500",
+                {
+                  "bg-gray-50 dark:bg-gray-700": disabled,
+                  "dark:bg-gray-800": !disabled,
+                },
+              )}
+          >
+            {leadingText}
+          </Typography>
+        )}
+        <input
+          type={type}
+          value={value}
+          placeholder={placeholder}
+          onChange={handleChange}
+          disabled={disabled}
+          className={classNames(
+            "w-full select-none text-gray-900 dark:text-white text-md border h-11 px-2",
+            {
+              "pl-9": LeadingIcon,
+              "pr-9": TrailingIcon,
+              "rounded-l-0 rounded-r-lg": leadingText,
+              "rounded-lg": !leadingText,
+              "border-gray-300 dark:border-gray-500 focus:ring-4 focus:border-primary-300 dark:focus:border-gray-100 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20":
+                !error,
+              "border-error-300 focus:ring-4 focus:border-error-300 focus:ring-error-100":
+                error,
+              "bg-white dark:bg-gray-800": !disabled,
+              "bg-gray-50 dark:bg-gray-700": disabled,
+            },
+          )}
+        />
+      </div>
+      {error && (
+        <Typography
+          variant="sm"
+          customWeight="regular"
+          className="mt-1.5 text-error-500"
+        >
+          {error}
+        </Typography>
+      )}
+      {helperText && (
+        <Typography
+          variant="sm"
+          customWeight="regular"
+          className="mt-1.5 text-gray-500"
+        >
+          {helperText}
+        </Typography>
+      )}
+    </div>
+  );
+};

package/src/Typography.tsx

@@ -0,0 +1,81 @@
+import React, { FC, JSX } from "react";
+import classNames from "classnames";
+
+type TypographyVariant =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "h6"
+  | "h5"
+  | "h4"
+  | "h3"
+  | "h2"
+  | "h1";
+
+type TypographyWeightOption = "regular" | "medium" | "semibold" | "bold";
+
+type TypographyWeightValue = "font-normal" | "font-medium" | "font-semibold" | "font-bold";
+
+export interface TypographyProps {
+  variant?: TypographyVariant;
+  customWeight?: TypographyWeightOption;
+  customColor?: string;
+  customClass?: string;
+  className?: string;
+  children: string | React.ReactNode;
+}
+
+const TypographyVariantClasses: Record<TypographyVariant, string> = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-md",
+  lg: "text-lg",
+  xl: "text-xl",
+  h6: "text-h6",
+  h5: "text-h5",
+  h4: "text-h4",
+  h3: "text-h3",
+  h2: "text-h2",
+  h1: "text-h1",
+};
+
+const TypographyWeightClasses: Record<TypographyWeightOption, TypographyWeightValue> = {
+  regular: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+};
+
+export const Typography: FC<TypographyProps> = ({
+  variant = "md",
+  customWeight = "regular",
+  customColor,
+  className,
+  children,
+}) => {
+    const TypographyVariantClassName = TypographyVariantClasses[variant];
+    const TypographyWeightClassName = TypographyWeightClasses[customWeight];
+
+
+  const Component: React.ElementType =
+    ["h1", "h2", "h3", "h4", "h5", "h6"].includes(variant ?? "p") ? (variant as keyof JSX.IntrinsicElements) : "p";
+
+  return (
+    <Component
+      className={classNames(
+        TypographyVariantClassName,
+        TypographyWeightClassName,
+        className,
+        {
+            "tracking-tight": ["h1", "h2", "h3"].includes(variant),
+            "text-black dark:text-white": !customColor,
+        },
+        customColor         
+      )}
+    >
+      {children}
+    </Component>
+  );
+};