@tecsinapse/react-web-kit 1.5.0 → 1.6.3

package/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -2,26 +2,26 @@ import React, { ElementType, FC } from 'react';
 import { StyledContainerBreadcrumbs } from './styled';
 import { BreadcrumbItem } from './BreadcrumbItem';
 
-type Breadcrumb = {
+export type BreadcrumbType = {
   title: string;
   Component: ElementType;
-  componentProps?: any;
+  props?: any;
 };
 
 export interface BreadcrumbsProps {
-  breadcrumbs: Breadcrumb[];
+  breadcrumbs: BreadcrumbType[];
 }
 
 const Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs }) => {
   return (
     <StyledContainerBreadcrumbs>
       {breadcrumbs.map((item, index) => {
-        const { componentProps, Component, title } = item;
+        const { props, Component = 'a', title } = item;
         return (
           <BreadcrumbItem
             key={index}
             Component={Component}
-            props={componentProps}
+            props={props}
             isLast={breadcrumbs.length - 1 === index}
             title={title}
           />

package/src/components/molecules/Breadcrumbs/index.ts

@@ -1 +1,5 @@
-export { default as Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs';
+export {
+  default as Breadcrumbs,
+  BreadcrumbsProps,
+  BreadcrumbType,
+} from './Breadcrumbs';

package/src/components/molecules/Drawer/Drawer.stories.tsx

@@ -8,35 +8,34 @@ import { default as Drawer, DrawerProps } from './Drawer';
 export default {
   title: 'Components/Drawer',
   component: Drawer,
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 const Template: Story<DrawerProps> = ({ anchorPosition, open }) => {
   const [isOpen, setOpen] = React.useState<boolean>(open);
 
-  const onClose = () => {
+  const toggleOpen = () => {
     setOpen(!isOpen);
   };
 
   return (
     <>
-      <Drawer open={isOpen} onClose={onClose} anchorPosition={anchorPosition}>
+      <Drawer
+        open={isOpen}
+        onClose={toggleOpen}
+        anchorPosition={anchorPosition}
+      >
         <StyledHeaderDrawerStory>
           <StyledTextHeader typography="h4">Design System</StyledTextHeader>
           <StyledHButtonHeaderStory>
-            <Button size="small" onPress={onClose} variant="text">
+            <Button size="small" onPress={toggleOpen} variant="text">
               <Icon name="close" type="material-community" />
             </Button>
           </StyledHButtonHeaderStory>
         </StyledHeaderDrawerStory>
       </Drawer>
-      <StyledContainerButtonStory>
-        <Button onPress={onClose}>
-          <StyledTextButton fontColor="light">Open Drawer</StyledTextButton>
-        </Button>
-      </StyledContainerButtonStory>
+      <Button onPress={toggleOpen}>
+        <StyledTextButton fontColor="light">Open Drawer</StyledTextButton>
+      </Button>
     </>
   );
 };
@@ -48,15 +47,6 @@ Base.args = {
   open: false,
 };
 
-const StyledContainerButtonStory = styled('div')`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-`;
-
 const StyledHeaderDrawerStory = styled('div')`
   display: flex;
   flex-direction: row;

package/src/components/molecules/Drawer/Drawer.tsx

@@ -1,13 +1,12 @@
 import React, { FC } from 'react';
-import { StyledContainerDrawer, StyledOverlay } from './styled';
+import { StyledContainerDrawer } from './styled';
 import { Transition } from 'react-transition-group';
+import { Overlay } from '../../atoms/Overlay';
 import {
   transitionStylesTopBottom,
   defaultStylesTopBottom,
   defaultStylesLeftRight,
-  transitionStylesOverlay,
   transitionStylesLeftRight,
-  defaultStyleOverlay,
 } from './animations';
 
 export interface DrawerProps {
@@ -43,18 +42,7 @@ const Drawer: FC<DrawerProps> = ({
 
   return (
     <>
-      <Transition in={open} timeout={300}>
-        {state => (
-          <div
-            style={{
-              ...defaultStyleOverlay,
-              ...transitionStylesOverlay[state],
-            }}
-          >
-            <StyledOverlay onClick={open ? onClose : undefined} show={open} />
-          </div>
-        )}
-      </Transition>
+      <Overlay timeout={300} open={open} onClose={onClose} zIndex="drawer" />
       <Transition in={open} timeout={300}>
         {state => (
           <StyledContainerDrawer

package/src/components/molecules/Drawer/animations.ts

@@ -1,14 +1,3 @@
-export const defaultStyleOverlay = {
-  transition: `opacity 700ms ease-in-out`,
-  opacity: 0,
-};
-export const transitionStylesOverlay = {
-  entering: { opacity: 1 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-  exited: { opacity: 0 },
-};
-
 export const transformLeftRigthClose = (anchorPosition: string) =>
   anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
 

package/src/components/molecules/Drawer/styled.ts

@@ -3,19 +3,6 @@ import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
 import { DrawerProps } from './Drawer';
 import { css } from '@emotion/react';
 
-export const StyledOverlay = styled('div')<
-  Partial<StyleProps> & { show: boolean }
->`
-  background: ${({ theme }: StyleProps) =>
-    hex2rgba(theme.miscellaneous.overlay, 0.5)};
-  width: 100vw;
-  height: 100vh;
-  z-index: ${({ theme, show }: StyleProps & { show: boolean }) =>
-    show ? theme.zIndex.drawer : theme.zIndex.default};
-  cursor: ${({ show }) => (show ? 'pointer' : 'default')};
-  position: absolute;
-`;
-
 const anchorLeft = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
   return (
     anchorPosition === 'left' &&
@@ -72,7 +59,7 @@ const baseStyles = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
     position: fixed;
     overflow: hidden;
     background-color: ${theme.miscellaneous.bodyColor};
-    z-index: ${theme.zIndex.drawer + 1};
+    z-index: ${theme.zIndex.drawer};
   `;
 };
 

package/src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx

@@ -7,42 +7,49 @@ import {
   StyledLeftComponent,
 } from './styled';
 import { ItemsOptions, OptionsType } from '../types';
+import { Masonry } from '../../Masonry';
 
 interface MenuBlockProps {
-  data: OptionsType;
+  toggle: () => void;
+  options: OptionsType[];
 }
 
-const MenuBlock: React.FC<MenuBlockProps> = ({ data }) => {
+const MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {
   return (
-    <>
-      <StyledContainerMenu>
-        {data.leftComponents && (
-          <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
-        )}
-        <Text fontWeight="bold">{data.title}</Text>
-      </StyledContainerMenu>
-      <StyledContainerItems>
-        {data.items.map(
-          ({
-            title,
-            Component,
-            props,
-            rightComponents,
-            items,
-          }: ItemsOptions) => (
-            <MenuItem
-              items={items}
-              key={title}
-              title={title}
-              Component={Component}
-              rightComponents={rightComponents}
-              props={props}
-            />
-          )
-        )}
-      </StyledContainerItems>
-    </>
+    <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
+      {options.map(data => (
+        <>
+          <StyledContainerMenu>
+            {data.leftComponents && (
+              <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>
+            )}
+            <Text fontWeight="bold">{data.title}</Text>
+          </StyledContainerMenu>
+          <StyledContainerItems>
+            {data.items.map(
+              ({
+                title,
+                Component,
+                props,
+                rightComponents,
+                items,
+              }: ItemsOptions) => (
+                <MenuItem
+                  items={items}
+                  key={title}
+                  title={title}
+                  Component={Component}
+                  rightComponents={rightComponents}
+                  props={props}
+                  toggle={toggle}
+                />
+              )
+            )}
+          </StyledContainerItems>
+        </>
+      ))}
+    </Masonry>
   );
 };
 
-export default MenuBlock;
+export default React.memo(MenuBlock);

package/src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx

@@ -11,6 +11,7 @@ interface MenuItemProps {
   Component: ElementType;
   /** Properties spread to wrapping Component */
   props: any;
+  toggle: () => void;
   rightComponents?: React.ReactNode;
   items?: ItemsOptions[];
 }
@@ -21,6 +22,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   props = {},
   rightComponents,
   items,
+  toggle,
 }) => {
   const [open, setOpen] = React.useState<boolean>(false);
 
@@ -34,7 +36,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   return (
     <>
       <StyledContainerItemText key={title}>
-        <Component {...props} style={noTextDecoration}>
+        <Component {...props} style={noTextDecoration} onClick={toggle}>
           <Text
             colorVariant={open ? 'primary' : 'secondary'}
             colorTone={open ? 'medium' : 'dark'}
@@ -57,7 +59,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
       </StyledContainerItemText>
       {open &&
         items?.map(subItem => (
-          <SubMenuBlock key={subItem.title} data={subItem} />
+          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />
         ))}
     </>
   );

package/src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx

@@ -6,9 +6,10 @@ import { DummyBorder, StyledContainerItem } from './styled';
 
 interface SubMenuBlockProps {
   data: ItemsOptions;
+  toggle: () => void;
 }
 
-const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data }) => {
+const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {
   const { Component, props, rightComponents, title } = data;
 
   const noTextDecoration = { textDecoration: 'none' };
@@ -16,7 +17,7 @@ const SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data }) => {
   return (
     <StyledContainerItem>
       <DummyBorder />
-      <Component {...props} style={noTextDecoration}>
+      <Component {...props} style={noTextDecoration} onClick={toggle}>
         <Text colorVariant="secondary" colorTone="medium" typography="sub">
           <StyledText>{title}</StyledText>
         </Text>

package/src/components/molecules/Menubar/Menubar.stories.tsx

@@ -2,7 +2,7 @@ import React, { ElementType } from 'react';
 import Menubar, { MenubarProps } from './Menubar';
 import { Story } from '@storybook/react';
 import styled from '@emotion/styled';
-import { Icon, Text } from '@tecsinapse/react-core';
+import { Avatar, Icon, Text } from '@tecsinapse/react-core';
 
 export default {
   title: 'Components/Menu Bar',
@@ -253,20 +253,26 @@ const StyledImage = styled('img')`
   margin-right: 35px;
 `;
 
-// Import type manually
 const Template: Story<MenubarProps> = args => {
   return (
-    <Menubar
-      {...args}
-      options={EXAMPLE_MENU}
-      mostUsed={MOST_USED}
-      leftComponents={
-        <StyledImage
-          src="https://www.tecsinapse.com.br/wp-content/themes/tecsinapse/img/logo.svg"
-          alt="TecSinapse"
-        />
-      }
-    />
+    <>
+      <Menubar
+        {...args}
+        options={EXAMPLE_MENU}
+        mostUsed={MOST_USED}
+        leftComponents={
+          <StyledImage
+            src="https://www.tecsinapse.com.br/wp-content/themes/tecsinapse/img/logo.svg"
+            alt="TecSinapse"
+          />
+        }
+        rightComponents={
+          <div style={{ marginLeft: 24 }}>
+            <Avatar name="Design System" />
+          </div>
+        }
+      />
+    </>
   );
 };
 

package/src/components/molecules/Menubar/Menubar.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
-import {
-  Icon,
-  Text,
-  ThemeProp,
-  useDebouncedState,
-} from '@tecsinapse/react-core';
+import { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';
 import { Transition } from 'react-transition-group';
-import { useTheme } from '@emotion/react';
 import {
   StyledIconInput,
   StyledMenuBar,
@@ -17,7 +11,6 @@ import {
   StyledSearchResultsContainer,
   StyledSearchTextContainer,
 } from './styled';
-import { Masonry } from '../Masonry';
 import { MostUsedType, OptionsType } from './types';
 import { MostUsed } from './MostUsed';
 import { MenuBlock } from './MenuBlock';
@@ -29,32 +22,35 @@ import {
 } from './animations';
 
 export interface MenubarProps {
+  options: OptionsType[];
   leftComponents?: React.ReactNode;
   rightComponents?: React.ReactNode;
-  inputPlaceholder?: string;
-  options: OptionsType[];
   /** Limited to first 4 elements */
   mostUsed?: MostUsedType[];
   mostUsedLabel?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
   searchResultsLabel?: string;
 }
 
 const Menubar: React.FC<MenubarProps> = ({
   leftComponents,
   rightComponents,
-  inputPlaceholder = 'O quê você deseja buscar?',
+  searchPlaceholder = 'O quê você deseja buscar?',
   options,
   mostUsed,
   mostUsedLabel = 'Mais acessados',
   searchResultsLabel = 'Resultados da busca',
+  searchable = true,
 }) => {
   const [search, setSearch] = React.useState<string>('');
   const [results, setResults] = React.useState<MostUsedType[]>([]);
   const [input, setInput] = useDebouncedState('', state => setSearch(state));
-  const [isOpen, setOpen] = React.useState<boolean>(false);
-  const theme = useTheme() as ThemeProp;
+  const [open, setOpen] = React.useState<boolean>(false);
 
-  const toggleOpenClose = () => setOpen(!isOpen);
+  const toggleOpen = React.useCallback(() => setOpen(state => !state), [
+    setOpen,
+  ]);
 
   React.useEffect(() => {
     if (search === '') return;
@@ -64,12 +60,8 @@ const Menubar: React.FC<MenubarProps> = ({
   return (
     <>
       <StyledMenuBar>
-        <StyledMenuButton
-          variant="filled"
-          color="primary"
-          onPress={toggleOpenClose}
-        >
-          {!isOpen ? (
+        <StyledMenuButton variant="filled" color="primary" onPress={toggleOpen}>
+          {!open ? (
             <Icon
               size="deca"
               name="menu"
@@ -86,12 +78,12 @@ const Menubar: React.FC<MenubarProps> = ({
           )}
         </StyledMenuButton>
         {leftComponents}
-        <Transition in={isOpen} timeout={250}>
+        <Transition in={open} timeout={250}>
           {state => (
-            <div style={getInputContainerStyles(state, theme)}>
-              <StyledInputContainer>
+            <StyledInputContainer style={getInputContainerStyles(state)}>
+              {searchable && (
                 <StyledInput
-                  placeholder={inputPlaceholder}
+                  placeholder={searchPlaceholder}
                   leftComponent={
                     <StyledIconInput>
                       <Icon name="magnify" type="material-community" />
@@ -100,43 +92,42 @@ const Menubar: React.FC<MenubarProps> = ({
                   value={input}
                   onChange={setInput}
                 />
-              </StyledInputContainer>
-              {rightComponents}
-            </div>
+              )}
+            </StyledInputContainer>
           )}
         </Transition>
+        {rightComponents}
       </StyledMenuBar>
-      <Transition in={isOpen} timeout={250}>
+      <Transition in={open} timeout={250}>
         {state => (
-          <div style={getContainerOpenMenuStyles(state, theme)}>
-            <StyledContainerOpenMenu>
-              {!search ? (
-                <div>
-                  {mostUsed && (
-                    <MostUsed label={mostUsedLabel} data={mostUsed} />
-                  )}
-                  <Masonry columns={4} spacingTop="kilo" spacingLeft="mega">
-                    {options.map(option => (
-                      <MenuBlock data={option} key={option.title} />
-                    ))}
-                  </Masonry>
-                </div>
-              ) : (
-                <StyledSearchResultsContainer>
-                  <StyledSearchTextContainer>
-                    <Text fontWeight="bold">{searchResultsLabel}</Text>
-                  </StyledSearchTextContainer>
-                  {results.map(result => (
-                    <SearchResultItem
-                      key={`${result.title}-${result.category}`}
-                      data={result}
-                      searchTerm={search}
-                    />
-                  ))}
-                </StyledSearchResultsContainer>
-              )}
-            </StyledContainerOpenMenu>
-          </div>
+          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>
+            {!search ? (
+              <>
+                {mostUsed && (
+                  <MostUsed
+                    label={mostUsedLabel}
+                    data={mostUsed}
+                    toggle={toggleOpen}
+                  />
+                )}
+                <MenuBlock options={options} toggle={toggleOpen} />
+              </>
+            ) : (
+              <StyledSearchResultsContainer>
+                <StyledSearchTextContainer>
+                  <Text fontWeight="bold">{searchResultsLabel}</Text>
+                </StyledSearchTextContainer>
+                {results.map(result => (
+                  <SearchResultItem
+                    key={`${result.title}-${result.category}`}
+                    data={result}
+                    searchTerm={search}
+                    toggle={toggleOpen}
+                  />
+                ))}
+              </StyledSearchResultsContainer>
+            )}
+          </StyledContainerOpenMenu>
         )}
       </Transition>
     </>