@woovi/ui 4.0.942

package/src/select/__stories__/Select.stories.tsx

@@ -0,0 +1,40 @@
+import type { SelectChangeEvent } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import type { SelectProps } from '../Select';
+import Select from '../Select';
+
+const meta: Meta<SelectProps> = {
+  title: 'Primitives/Select',
+  component: Select,
+  argTypes: {
+    size: {
+      options: ['small', 'medium'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Example: Story = (args) => {
+  const [value, setValue] = useState('');
+
+  const handleChange = (e: SelectChangeEvent) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <Select {...args} onChange={handleChange} value={value}>
+      <MenuItem value={10}>Ten</MenuItem>
+      <MenuItem value={20}>Twenty</MenuItem>
+      <MenuItem value={30}>Thirty</MenuItem>
+    </Select>
+  );
+};

package/src/sidebar/Group.tsx

@@ -0,0 +1,135 @@
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { forwardRef, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NavLink, useLocation } from 'react-router-dom';
+
+import { hasMatched } from '@woovi/router';
+
+import Item from './Item';
+import type { ItemType } from './Sidebar';
+import useSidebar from './useSidebar';
+import { getItemsPath } from './utils';
+import BoxFlex from '../mui/BoxFlex';
+import Tag from '../tag/Tag';
+
+const getIsActive = ({ link, location, items }) => {
+  if (link) {
+    return link === location.pathname;
+  }
+
+  return getItemsPath(items || [])
+    .map((path) => hasMatched(location, { path, exact: false }))
+    .reduce((acc, cur) => acc || cur, false);
+};
+
+const renderItem = (item, index, isMobile: boolean) => (
+  <Item
+    link={item.link}
+    key={index}
+    label={item.label}
+    isMobile={isMobile}
+    isTemp={item.isTemp}
+  />
+);
+
+type Props = ItemType & { isMobile: boolean; newChip?: boolean };
+
+const Group = (props: Props) => {
+  const { link, label, icon, items, isMobile, newChip, isTemp } = props;
+
+  const { t } = useTranslation();
+  const location = useLocation();
+  const { sidebarClose } = useSidebar();
+
+  const [isGroupOpen, setGroupIsOpen] = useState<boolean>(false);
+
+  const active = getIsActive({
+    link,
+    location,
+    items,
+  });
+
+  const toggleGroup = () => setGroupIsOpen(!isGroupOpen);
+
+  const renderLink = useMemo(
+    () =>
+      forwardRef((itemProps, ref) => {
+        // TODO: It's a way to ensure that, if the user clicks in the same route on NavBar, it won't let to reset
+        // the query param.
+        // It's a behavior that was happening mainly on the Home page.
+        // Using `window.location` instead of location from useLocation here because the `location.search` lose their update reference
+        // when the user navigates between routes.
+        const _link = link === window.location.pathname ? `${link}${window.location.search}` : link;
+
+        return (
+          <NavLink to={_link} ref={ref} {...itemProps} search />
+        );
+      }),
+    [link],
+  );
+
+  if (link) {
+    // use NavLink
+    const onLinkClick = () => {
+      if (isMobile) {
+        sidebarClose();
+      }
+    };
+
+    const node = (
+      <ListItem
+        button
+        component={renderLink}
+        onClick={onLinkClick}
+        selected={active}
+      >
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        <BoxFlex
+          sx={{
+            alignItems: 'center',
+            gap: '8px',
+          }}
+        >
+          <ListItemText primary={label} />
+          {newChip && <Tag label={t('New')} size='small' color='primary' />}
+        </BoxFlex>
+      </ListItem>
+    );
+
+    if (isTemp) {
+      return <div style={{ border: '1px dashed red' }}>{node}</div>;
+    }
+
+    return node;
+  }
+
+  return (
+    <>
+      <ListItem button onClick={toggleGroup} selected={active}>
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        <BoxFlex
+          sx={{
+            alignItems: 'center',
+            gap: '8px',
+          }}
+        >
+          <ListItemText primary={label} />
+          {newChip && <Tag label={t('New')} size='small' color='primary' />}
+        </BoxFlex>
+      </ListItem>
+      {items && !!items.length && (
+        <Collapse in={isGroupOpen}>
+          <List component='div' disablePadding>
+            {items.map((item, index) => renderItem(item, index, isMobile))}
+          </List>
+        </Collapse>
+      )}
+    </>
+  );
+};
+
+export default Group;

package/src/sidebar/Item.tsx

@@ -0,0 +1,52 @@
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { useMemo, forwardRef } from 'react';
+import { useLocation, matchPath, NavLink } from 'react-router-dom';
+
+import useSidebar from './useSidebar';
+
+type Props = {
+  link: string;
+  label: string;
+  isMobile: boolean;
+};
+
+const Item = ({ link, label, isMobile }: Props) => {
+  const location = useLocation();
+  const { sidebarClose } = useSidebar();
+
+  // it needs to be exact: false, to routes with nested routes
+  const hasMatched = !!matchPath(location.pathname, {
+    path: link,
+    exact: true,
+  });
+
+  const renderLink = useMemo(
+    () =>
+      forwardRef((itemProps, ref) => (
+        <NavLink to={link} ref={ref} {...itemProps} />
+      )),
+    [link],
+  );
+
+  const onClick = () => {
+    if (isMobile) {
+      sidebarClose();
+    }
+  };
+
+  return (
+    <ListItem
+      button
+      dense
+      component={renderLink}
+      onClick={onClick}
+      disableGutters
+      selected={hasMatched}
+    >
+      <ListItemText primary={label} />
+    </ListItem>
+  );
+};
+
+export default Item;

package/src/sidebar/MenuList.tsx

@@ -0,0 +1,95 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { Fragment } from 'react';
+import styled from 'styled-components';
+import { useWindowSize } from 'use-window-size-hook';
+
+import Group from './Group';
+
+const StyledList = styled(List)`
+  padding-top: 0;
+  padding-bottom: 20px;
+  transition: width 200ms ease-out;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  //Styling for all Sidebar
+  .Mui-selected {
+    font-weight: 600;
+  }
+  .MuiListItemIcon-root {
+    min-width: 30px;
+  }
+  //Style for the nested, 2nds level items
+  .MuiCollapse-root .MuiListItem-root {
+    padding-left: 52px;
+  }
+  .MuiTypography-root {
+    font-weight: inherit;
+  }
+  .MuiList-root {
+    a {
+      padding-left: 52px;
+    }
+  }
+`;
+
+export type ItemType = {
+  items?: ItemType[];
+  link: string;
+  label: string;
+  separator?: boolean;
+  newChip?: boolean;
+  icon: React.ComponentType;
+};
+
+export type SidebarProps = {
+  items: ItemType[];
+};
+
+const renderGroups = (items: ItemType[], isMobile: boolean) => {
+  return items.map((item, index) => {
+    const {
+      items: groupItems,
+      link,
+      label,
+      icon,
+      separator,
+      newChip,
+      isTemp,
+    } = item;
+
+    if (separator) {
+      return (
+        <Fragment key={index}>
+          <ListItem>
+            <ListItemText primary={label} />
+          </ListItem>
+          {groupItems && renderGroups(groupItems, isMobile)}
+        </Fragment>
+      );
+    }
+
+    return (
+      <Group
+        key={index}
+        label={label}
+        icon={icon}
+        link={link}
+        items={groupItems}
+        isMobile={isMobile}
+        newChip={newChip}
+        isTemp={isTemp}
+      />
+    );
+  });
+};
+
+export const MenuList = ({ items }: SidebarProps) => {
+  const { width } = useWindowSize();
+
+  const isMobile = width < 600;
+
+  return <StyledList>{renderGroups(items, isMobile)}</StyledList>;
+};

package/src/sidebar/Sidebar.stories.tsx

@@ -0,0 +1,148 @@
+import AutorenewOutlinedIcon from '@mui/icons-material/AutorenewOutlined';
+import EventSeatOutlinedIcon from '@mui/icons-material/EventSeatOutlined';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import { RouterStorybook } from '@woovi/test';
+
+import type { SidebarProps } from './Sidebar';
+import { Sidebar } from './Sidebar';
+import { SidebarProvider } from './SidebarContext';
+
+export default {
+  title: 'Sidebar/Sidebar',
+  component: Sidebar,
+} as Meta;
+
+const Template: Story<SidebarProps> = (args) => (
+  <RouterStorybook>
+    <SidebarProvider>
+      <Sidebar {...args} />
+    </SidebarProvider>
+  </RouterStorybook>
+);
+
+const nestedItems = [
+  {
+    label: 'List',
+    icon: <EventSeatOutlinedIcon />,
+    items: [],
+    link: '/fake-link',
+  },
+  {
+    label: 'Things',
+    icon: <PersonOutlineOutlinedIcon />,
+    items: [],
+    link: '/fake-link',
+  },
+  {
+    label: 'Very Big Item, with a lot of text and some crazy',
+    icon: <AutorenewOutlinedIcon />,
+    items: [],
+    link: '/fake-link',
+  },
+  {
+    label: 'Separator nested without items',
+    separator: true,
+  },
+  {
+    label: 'Item in the Middle',
+    icon: <PersonOutlineOutlinedIcon />,
+    items: [],
+    link: '/fake-link',
+  },
+  {
+    label: 'Separator nested with items',
+    separator: true,
+    items: [
+      {
+        label: 'Nested Item inside sep',
+        icon: <PersonOutlineOutlinedIcon />,
+        items: [],
+        link: '/fake-link',
+      },
+    ],
+  },
+];
+
+const items = [
+  {
+    label: 'Home',
+    icon: <HomeOutlinedIcon />,
+    items: [],
+    link: '/fake-link',
+  },
+  {
+    label: 'Company',
+    icon: <EventSeatOutlinedIcon />,
+    link: '/fake-link',
+  },
+  {
+    label: 'User',
+    icon: <PersonOutlineOutlinedIcon />,
+    link: '/fake-link',
+  },
+  {
+    label: 'Item without items or Link, just the Icon',
+    icon: <PersonOutlineOutlinedIcon />,
+  },
+  {
+    label: 'Very Big Item, with a lot of text and some crazy',
+    icon: <PersonOutlineOutlinedIcon />,
+    link: '/fake-link',
+  },
+  {
+    label: 'Just Label without subitems',
+  },
+  {
+    label: 'Another Item',
+    icon: <PersonOutlineOutlinedIcon />,
+    items: [],
+  },
+];
+
+const itemsAndNested = [
+  {
+    label: 'Companies Nested',
+    icon: <EventSeatOutlinedIcon />,
+  },
+  ...items,
+  {
+    label: 'Admin Separator with items',
+    separator: true,
+    items: [
+      {
+        label: 'Admin item1',
+        icon: <PersonOutlineOutlinedIcon />,
+        link: '/fake-link',
+      },
+      {
+        label: 'Admin item2',
+        icon: <PersonOutlineOutlinedIcon />,
+        link: '/fake-link',
+      },
+      ...nestedItems,
+    ],
+  },
+  {
+    label: 'Item',
+    icon: <EventSeatOutlinedIcon />,
+  },
+];
+
+export const Empty = Template.bind({});
+Empty.args = {
+  items: [],
+};
+
+export const WithItems = Template.bind({});
+WithItems.args = {
+  items,
+};
+
+export const WithItemsNested = Template.bind({});
+WithItemsNested.args = {
+  items: itemsAndNested,
+};

package/src/sidebar/Sidebar.tsx

@@ -0,0 +1,58 @@
+import Drawer from '@mui/material/Drawer';
+import styled from 'styled-components';
+//import Divider from '@mui/material/Divider';
+import { useWindowSize } from 'use-window-size-hook';
+
+import { useSidebar } from './index';
+import { MenuList } from './MenuList';
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  height: 60px;
+  justify-content: center;
+`;
+
+export type ItemType = {
+  items?: ItemType[];
+  link: string;
+  label: string;
+  separator?: boolean;
+  icon: React.ComponentType;
+};
+
+export type SidebarProps = {
+  items: ItemType[];
+  header?: React.ReactNode;
+  projectType: string;
+};
+
+const PaperProps = {
+  sx: {
+    width: '240px',
+  },
+};
+
+export const Sidebar = ({ items, header }: SidebarProps) => {
+  const { isSidebarOpen, sidebarClose } = useSidebar();
+  const { width } = useWindowSize();
+
+  const isMobile = width < 600;
+  const drawerType = isMobile ? 'temporary' : 'persistent';
+
+  return (
+    <Drawer
+      variant={drawerType}
+      open={isSidebarOpen}
+      onClose={sidebarClose}
+      PaperProps={PaperProps}
+    >
+      {header && <Header>{header}</Header>}
+      {/* <Divider /> */}
+      <MenuList items={items} />
+    </Drawer>
+  );
+};

package/src/sidebar/SidebarContext.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { useState, createContext } from 'react';
+
+import { useWindowHelpers } from '@woovi/hooks';
+
+type SidebarContextType = [boolean, (isOpen: boolean) => void];
+
+export const SidebarContext = createContext<SidebarContextType>([]);
+
+type Props = {
+  children: ReactNode;
+  isStartOpen?: boolean | null;
+};
+export function SidebarProvider({ children, isStartOpen = null }: Props) {
+  const { isTablet, isDesktop } = useWindowHelpers();
+
+  const getSidebarInitialState = () => {
+    if (typeof isStartOpen !== 'boolean') {
+      return isTablet || isDesktop;
+    }
+
+    return isStartOpen;
+  };
+
+  const [isOpen, setIsOpen] = useState<boolean>(getSidebarInitialState());
+
+  return (
+    <SidebarContext.Provider value={[isOpen, setIsOpen]}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}

package/src/sidebar/index.tsx

@@ -0,0 +1,7 @@
+export * from './utils';
+export { default as useSidebar } from './useSidebar';
+export { SidebarContext, SidebarProvider } from './SidebarContext';
+
+export type { SidebarProps, ItemType } from './Sidebar';
+export { Sidebar } from './Sidebar';
+export { MenuList } from './MenuList';

package/src/sidebar/useSidebar.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import { SidebarContext } from './SidebarContext';
+
+const useSidebar = () => {
+  const [isSidebarOpen, setIsOpen] = useContext(SidebarContext);
+
+  const sidebarOpen = () => {
+    setIsOpen(true);
+  };
+
+  const sidebarClose = () => {
+    setIsOpen(false);
+  };
+
+  const sidebarToggle = () => {
+    setIsOpen(!isSidebarOpen);
+  };
+
+  return {
+    isSidebarOpen,
+    sidebarOpen,
+    sidebarClose,
+    sidebarToggle,
+  };
+};
+
+export default useSidebar;

package/src/sidebar/utils.ts

@@ -0,0 +1,6 @@
+import type { ItemType } from './Sidebar';
+
+export const getItemsPath = (items: ItemType[]) =>
+  items
+    .map(({ link }) => link)
+    .reduce((acc, cur) => (cur ? [...acc, cur] : acc), []);